The WordPress Block-Based Ecosystem Reaches Fruition

This article originally appeared on Mobile Atom Code.

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

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.

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 that 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 100+ 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.