Video
Transcript
Hi everyone! Welcome back to the Getting Started series. I’m Shawn, and in this lesson, we’re diving into Reusable Component Blocks, a powerful feature exclusive to Refoundry Pro users.
Reusable Component Blocks are like an expanded version of WordPress patterns, offering even greater control over design and content. Unlike standard patterns, they allow for both local and global adjustments, meaning you can customize content per instance or make site-wide changes that update every instance. Component Blocks function similarly to components and instances in design tools like Figma, where you have a master component and instances that can be adjusted individually.
These blocks are stored as a post type under Reusable Component Blocks. When you insert a component block into a page, you’re adding an instance of that master component. This instance can have unique content and adjusted settings without impacting the master component or other instances. I’ll add a component block to this page—let’s look for the “left image feature.” Here, we have the component itself and an instance of it. Notice in the list view these lock icons. This indicates that I can’t rearrange, add, or delete any blocks inside this instance; I can only add unique content and adjust settings. Structural changes to the component need to be made at the global level.
For example, if I want to add a custom headline, make part of it pink, or update the button style to something larger, these changes will only affect this instance of the component, while the global element remains unchanged. As I make adjustments, you’ll notice the settings turn active and reveal a reset button, while settings I haven’t touched remain grayed out, meaning they reflect the global default. To return any setting to the global default, just click the reset button.
Another interesting capability is to use blocks within these reusable component blocks as a type of custom field. Any content that’s empty or not filled in simply won’t render on the front end. For example, if I wanted to use a button in this column only occasionally, I could have an empty button block at the global level. Then, I simply fill it in as needed, and if I don’t need it, I leave it empty and it won’t render. This is similar to how custom field plugins like ACF work and shows how Gutenberg and Refoundry Reusable Component Blocks can approximate the same behaviors.
If I want to edit the component globally, I click on the reusable component block, then under Block Settings, select Edit this Block. This opens the component itself in a new window, allowing me to make changes at the global level. You’ll see that this still reflects the global defaults, not the changes I made locally in the previous instance.
For example, if I want to add an option for eyebrow text, I can add a paragraph block, set it to the label style, and make it pink—but leave it empty if I don’t want it to render. After saving and refreshing my page, I’ll see that this global element is now available for use. I can enter content, or leave it empty so it won’t render.
Global changes also won’t clear local overrides. For instance, if I make the background color light blue on this instance and then change the global component’s background to dark navy, the instance will retain the light blue override. However, if I clear that local change, it will inherit the global dark navy color.
Finally, if I want to reset an instance back to global settings at any point, I can select the Reusable Component Block, go to Advanced, and choose Clear All Changes.
That’s an overview of all the capabilities you have with Reusable Component Blocks! If you have any questions or want to learn more, please feel free to reach out through our website or book a demo.
Happy building, and see you in the next lesson!