Reusable blocks vs Global styles vs Local pattern in GenerateBlocks and GeneratePress

What sets site-wide editing apart from page editing, is the capability of managing multiple elements across the entire site.

Reusable Blocks, Global Styles, and Local Patterns are a breath of fresh air in the world of Gutenberg. When used properly, it is like WordPress had a baby with Atomic design.

However, they can be quite daunting for those who are new to GenerateBlocks and GeneratePress.

In this article, I will share my approach and understanding of these powerful features.

Here’s a typical website, 2 pages in total.

1 hero section with an identical layout across the entire site, 1 identical CTA button, and a CTA banner that has a similar layout when this website is first created.

Feature characteristics

Here’s how I would understand each feature.

Note: Master is the parent component where I apply all the changes. Copy is where the design and build get extended from the corresponding master.

Local patterns

Local patterns are like molds in factories.

The copy inherits everything from the master, but once the copy is created, any changes to either the copy or the master do not affect one or another.

Reusable blocks

Reusable blocks is similar to a master-slave architecture.

The copy will always inherit all the changes that were made to the master. Both copy and the master will always be identical.

Global styles

Global styles is different from Reusable blocks and Local patterns because Global style focuses on the control of the style of a certain Gutenberg block, but Reusable blocks and Local patterns focus on the duplication of a certain design element that is a combination of one or more than one Gutenberg block.

You can think Global style is the equivalent of a combined class of CSS.

Conclusion

  • If you want to have identical components; use Reusable blocks.
  • If you want to save some Ctrl+C Ctrl+V time; use Local patterns.
  • If you want a pseudo CSS class; use Global style.

Hope this helps!