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

Ivan Oung

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.

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!

Navigation Menu

Share

Stay In Touch!

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

More Readings

10 Reasons Why WordPress is the Ultimate Choice for Your Blogging Journey

Blogging has become a popular way for individuals and businesses to share their ideas, opinions, and experiences with the world. It allows people to connect with others who have similar ... Read more

Maximizing Your Website’s Potential with a CMS: A Beginner’s Guide

Content Management Systems (CMS) have become an essential tool in website management. With the increasing complexity of websites and the need for frequent updates, CMS provides a user-friendly interface that ... Read more

Unleashing the Power of Development: How to Foster Growth and Progress

Development is a crucial aspect of growth and progress in any field or industry. It involves a continuous process of improvement and innovation to achieve better results. Whether it’s in ... Read more

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