The WordPress Block-Based Ecosystem Reaches Fruition

By Reuben Walker, 22 May, 2022

WordPress 5.9 Graphic

With the release of WordPress 5.9 the Block System of site creation achieves fruition.


I delayed a long time before writing this post. Why? Because I patiently waited for WordPress to experience its rebirth. The renaissance was a long process with many ups and downs and delays for the team at Automattic.

But, with the delayed release of the 5.9 update, I can now write an extensive review with a minimum of dated errors going forward. Small evolutions should now dominate the updates for WordPress.

The atom in Mobile Atom Code was inspired by Atomic Design. This is where the parts of your project are broken down into components that are as small as possible.

This strategy improves things like speed, easy of coding, ease of design, security, reusability, and many more.

Block-based Ecosystem

WordPress's overhaul of its design and coding system has been going on since 2018. Its end goal is an easier experience for non-coding users. Componentization as in a block-based system accomplishes this for content creators, designers, and developers.

The smallest component of the WordPress system is the block (aka Gutenberg block). The Gutenberg editor was introduced to allow the use of blocks in page and post editing.

WordPress evolved this system with block patterns and with version 5.9 block templates and block themes are added.

The file structure of WordPress sites going forward will resemble those of object-oriented programming structured websites.

This article will examine:

Blocks

  • Core Blocks
  • Reusable Blocks
  • Block Plugins
  • Advanced Custom Fields
  • Genesis Blocks
  • Genesis Pro
  • React

Block Patterns

  • Theme Patterns
  • Pattern Library

Theme.json
Global Styles

Full Site Editing

  • Template Parts
  • Block Templates
  • Block Themes

Universal Themes

Hybrid Themes

The Future

The WordPress Block ecosystem will constantly change going forward. So, at the bottom of this article I list some resources to help you keep on top of it.


The Block


What are WordPress Blocks


Blocks were introduced in WordPress 5.0 in December 2018.

A block is the base component of content in WordPress. From a paragraph of text to a video embed, a block can be almost any type of content. Image using wood building blocks to build a toy castle. Each block will serve a unique function, but together they compose the content of your pages and posts.

The core blocks and many of those supplied by 3rd party plugins are based on ReactJS, a JavaScript library for building user interfaces.

Blocks will reduce the need for widgets and plugins. By the way, blocks can also be used in Drupal if you install the Gutenberg module.

A quick note about the block editor, it is the user interface that we use to create pages and posts out of blocks. It has been given lots of names. These include Gutenberg Editor, Block Editor, and others. Going forward it should just be referred to as the Editor.

Screen shot of the block inserter
The Editor with the Inserter blocks tab open

Blocks are available from the blocks tab of the Inserter on the left of the editor. Block content is edited in the Editor after being placed in it. You can change individual block settings to the right of the Editor.

A list of the core blocks can be found in the official documentation.


Ways to create custom blocks


Reusable Blocks


Once you edit a block (hence customized it) you have the option to save it as a reusable block. Or you can design a group of blocks into a layout and save them as one reusable block. For example, you could create an author card with columns, an image, text, and social media link icons. You can then reuse an exact copy of the block in another part of your website. Sort of like a widget.

If you edit a reusable block after creating it, that edit will appear everywhere the block resides on your site. If you don't want this just create a different reusable block.


Advanced Custom Fields plugin


If you are an ACF user, you can build custom blocks with it. This article is one of many to show you how.

Genesis Blocks


Another way to add blocks is via 3rd party plugins. Genesis Blocks is a library of blocks, layouts, and even sections from the StudioPress team. It's that simple.

Genesis Custom Blocks

You can build more advanced custom blocks with the Genesis Custom Blocks plugins. There is a free and a paid version (I think).

With Genesis Custom Blocks you can create custom blocks using HTML, CSS, and the Editor. Add logic to your custom blocks with PHP programming. This is how I build custom blocks on the rare occasion I need to.

The Genesis Custom Blocks Pro version gives you seven extra fields:

  • Repeater Field
  • Category Field
  • Post Field
  • Tag Field
  • User Field
  • Rich Text Field
  • Classic Text Field


Here's a good review of all three Genesis plugins.


React JS


You can create custom blocks with ReactJS, NodeJS and associated tools. This is also how the core blocks and most block plugin blocks were built.

I have not used this approach since my coding bootcamp years ago, but this article gives an extensive how to overview.


Block Patterns


WordPress 5.5 saw the introduction of block patterns into the Editor in May of 2020.

Block patterns are a pre-designed collection of blocks that can be inserted into your content. You can then customize the individual blocks they contain in the Editor.

They will further reduce the need for widgets, plugins, and site builders. As an aside, patterns can be copied and pasted into Drupal if you have the Gutenberg module installed.

Screen shot of pattern inserter
The Editor with the Inserter Patterns tab open

Block Patterns are available from the patterns tab of the block inserter on the left of the Editor.

Theme Patterns

The patterns available to you will be determined by the theme you are using. There are a minimal number of core patterns.

There is an official Pattern Library you can copy and paste patterns from.


Theme.json


The theme.json file was added in WordPress 5.8 in July of 2021. To quote WordPress: "Theme.json It is a configuration file for theme styles and block settings.

It does not work with older versions of WordPress unless you activate the Gutenberg plugin".

Hint, you should always update to the current version of WordPress soon after its release. As the name implies, this file is a part of your theme created by the theme developer.

"Some things you can do with theme.json are:

  • Enable or disable features like drop cap, padding, margin, and custom line-height
  • Add multiple color palettes, gradients, and duotones
  • Add font sizes
  • Add default widths for content and wide content
  • Add custom CSS properties
  • Assign template parts to template part areas
  • When you add theme.json to your theme, the template editor is enabled."


As you can see it allows you to select your global settings for CSS. It contains preset and custom variables and can be inserted into any WordPress theme.


Global Styles


5.9 introduces Global Styles and an interface for them. I believe this edits the theme.json file.

Kinsta.com says:

"WordPress 5.9 will bring things a step further, introducing a new feature that enables block theme users to customize the appearance of site elements from a user interface called Global Styles.

The Global Styles interface can be accessed from the new Styles icon placed in the upper right corner of the Editor.

Clicking on that icon displays a new Styles sidebar including three separate panels:

  • A Preview panel, showing a preview of your customizations
  • A Global Styles panel providing access to specific groups of controls for Typography, Colors, and Layout
  • A Blocks item providing access to block-level style settings"

Full Site Editing


WordPress 5.9 introduced full-site editing (aka FSE) to the CMS in January of 2022. It added block templates and template parts which require a block theme.


Block Templates

Templates include comments, and blank, full-width, landing, and 404 Error pages etc. They can include template parts, patterns, and blocks.


Template Parts

An advanced block that can be used with a block theme or a theme that supports template editing. Examples include the header and footer.


Block Themes

Currently, there are about 70 Block Themes in the official WordPress directory.


Universal Themes


Universal Themes are those that work in either classic (customizer) or FSE contexts. This article takes a look at how they may come about.


Traditional/Classic WordPress Theme File Hierarchy chart

Hybrid Themes

Hybrid Themes are "traditional/classic themes" with FSE editing features included. These could be pre-FSE themes with FSE functionality added post version 5.9.

This article explores the process and this one is a tutorial.


The Future


I'm not involved with WordPress core, but this is a great article taking a look at what may be coming.


Summing it Up

Thanks for reading the entire article. I hope this gives you a good start on understanding the completed WordPress block ecosystem. Peruse the links throughout to learn more and good luck in the new age of WordPress content creation, design, and development.


Resources


Like most things to do with programming, the WordPress Block ecosystem is constantly changing. Here are some resources to keep on top of it.


One Size fits All


What's new in WordPress 5.9: a reading list on full-site editing and block themes

Blocks


Block Handbook

Block Handbook GitHub

Intro to Block Development


The Block ecosystem


Gutenberg Times

Gutenberg Times YouTube


React JS


React for WordPress Developers



Block Patterns

Builder Basics: Exploring Block Patterns

Building WordPress Block Themes with the New Gutenberg Pattern Block



Full Site Editing


Simple Site Design with Full-Site Editing

Full-Site Editing for Theme Developers

Block Themes


WordPress Block Themes

List of WordPress Themes for Full-Site Editing

Block Editor How to Guide: Themes

Jump Start Block-based Theme Development with the FSE Theme Generator

Theme Experiments GitHub

Block Themes: A New Way to Build Themes in WordPress 5.9


Sample Block Themes

Frost

The Automattic Team Announces Blockbase, Its New Block Parent Theme

Universal Themes

Universal Themes: Some Ideas


Hybrid Themes

Hybrid Thems Learning

Adding Full-Site Editing Features to Classic Themes


Developer Resources

Official Block Editor Handbook

Offical Theme.json Guide

Authored by

 

Reuben Walker toasting you


Do you want more news on PHP and CMS development, cybersecurity, and more? Our sister site, Symfony Station has a weekly news roundup.

📩

Join our list  

* indicates required
 
 
 
 
 
 
Anything Else