Reusable blocks vs Global styles vs Local pattern (GenerateBlocks & GeneratePress)

Ivan Oung
Published:
Tags:
Web Development
In this article...

A quick comparison between Reusable blocks, Global styles and Local patterns in GenerateBlocks and GeneratePress, and a guide on when to use them, respectively.

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 an 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.

Example of a typical landing page

3-part landing (Left), 2-part landing (Right)

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.

3 variations

Characteristics of different features

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 page

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.

Consider local patterns to be similar to a Figma template, where one would copy and paste a pre-designed session (in this case, a “pattern”) to shorten the time of development/design.

Reusable blocks

Reusable block in editor

Reusable blocks are 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.

Reusable blocks works best when a single, identical pattern that needs to exist across multiple location within a site. Similar concept to component in React.JS, where a single snippet of code gets to be reused over and over again across multiple locations and/or pages.

Global styles

Global style menu under GenerateBlocks

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

Quick decision tree on how to choose
  • 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!

Share this with your friends if you think is helpful!!

Ivan Oung

Born in Hong Kong and grew up in Canada, Ivan is a husband and a board game lover. After spending 10+ years building digital products, he is now committed to helping SMEs get more leads by building effective websites that turn attention into opportunities.

You might also enjoy...

Web Development

Hook where? (Navigation hook in GeneratePress)

How Hooks in WordPress behaves, and how to add a CTA button to the main menu for better lead conversion.
Google analytic meme
Analytic

Fathom vs Google Analytics (Google Analytics alternative)

A quick comparison between Google Analytics and Fathom, and explore the possibility if Fathom is truly the GA-killer that it claims to be.
Management

Documentation templates for Product team

A brief list of documentations for any small product team to start growing right away without starting from scratch.

Let's Get Started with your new site!

Questions? Let's talk about whether I make sense for your business.

Contact Form

Expect a fast response from me :)

Ready To Have The
Best Website In Your Industry?

Get a ***FREE*** 30 business consultation on how I can get you more leads and grow your business!

Contact Form

Share to...