Reusable blocks vs Global styles vs Local pattern (GenerateBlocks & 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 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 had a similar layout when this website was 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 are like moulds 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 blocks are similar to a master-slave architecture.

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

Reusable blocks work best when a single, identical pattern needs to exist across multiple locations within a site. Similar concept to a 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 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.


  • 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!

Navigation Menu


Stay In Touch!

I'll only send the good stuff, no spam, no bs, I promise!

More Readings

Best 16 CMS for Startups in Hong Kong

Still choosing a CMS? Here's a list of the best 16 CMS for your startup to grow in Hong Kong.

Maximizing Lead Conversion: Strategies to Increase Your Conversion Rate

Understanding lead conversion and implementing effective strategies to increase conversion rates are essential for any business looking to maximize its revenue and growth.

Best Lead Generation Strategies for Professional Services

From leveraging social media to optimizing your website and crafting engaging content, these tactics will help you attract and convert high-quality leads that can ultimately boost your business.

A WordPress Developer Who You Can Trust.

I always build my relationships with my clients based on trust. I want to see you grow as much as I myself. Let's work together to grow your business.

Get A Free Quote
Share to...