Skip to content

Blocks

The WordPress block editor (codename Gutenberg) is a new publishing experience introduced in WordPress 5.0 in December 2018. The block editor is built primarily in JavaScript using the React library.

The block editor replaces the previous rich text editor based on TinyMCE, which is now referred to as the classic editor.

The block editor experience is somewhere in between a page builder and component based design. It is built on the idea of using “blocks” to write and design posts and pages. Every element on a post or page has its own block — images, headings, galleries, lists, etc. are all blocks.

Using the block editor

OSTraining has posted an excellent video tutorial series How to Use WordPress 5 and the Gutenberg Editor on YouTube.

Extend WordPress with Additional Blocks

In addition to the blocks available in WordPress core, there is a growing ecosystem of third-party plugins (free and paid) that add additional custom blocks. Many of the most popular plugins in the WordPress directory have also added blocks to fully integrate their functionality with the Block editor.

There is a block-based plugins section in the official plugin directory that lists plugins that provide blocks.

Here are some of the most popular plugins that provide additional block libraries:

A lot of these block library plugins have very similar offerings. It is probably best to pick just one plugin, that best fits the need of the project - otherwise you risk having multiple blocks that are essentially the same, with inconsistency in the site as editors add multiple different blocks to pages to provide the same type of component, each with its own styling and other subtle differences.

Gutenberg Roadmap

There are four phases of Gutenberg which you can see on the official WordPress roadmap.

  1. Easier Editing — Already available in WordPress since 5.0, with ongoing improvements.
  2. Customization — Full Site editing, Block Patterns, Block Directory, Block based themes.
  3. Collaboration — A more intuitive way to co-author content
  4. Multi-lingual — Core implementation for Multi-lingual sites

Read more about the Gutenberg, Block Editor and WordPress Roadmap at the Gutenberg Times.

Full Site Editing

The block editor editor for building posts and pages was the first phase of the Gutenberg initiative. Lots of work is being done on the second step in the Gutenberg roadmap.

Core devs are working towards being to manage the whole site using blocks. This will include things like menus, the aforementioned widgets, page layouts, etc. This initiative is known as full-site editing.

WordPress 5.8 most notably introduced a block-based editor for Widgets, and a Query Loop block for adding dynamic lists of posts, similar to using the WP_Query class or custom loops in traditional PHP templates.

The vision of Full Site Editing is to provide a collection of features that bring the familiar experience and extendability of blocks to all parts of your site rather than just post and pages.

  • Site Editor: the cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more.
  • Template Editing: a scaled down direct editing experience allowing you to edit/change/create the template a post/page uses.
  • Block Theme: work to allow for a theme that’s built using templates composed using blocks that works with full site editing. More below.
  • Styling: the feature that enables styling modifications across three levels (local blocks, theme defaults, and global modifications).
  • Theme Blocks: new blocks that accomplish everything possible in traditional templates using template tags (ex: Post Author Block).
  • Browsing: the feature that unlocks the ability to navigate between various entities in the site editing experience including templates, pages, etc.
  • Navigation Block: a new block that allows you to edit a site’s navigation menu, both in terms of structure and design.
  • Query Block: a new block that replicates the classic WP_Query and allows for further customization with additional functionality.

Block Themes

A block theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different post types (pages, posts, …), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc.

Initial Block theme support is slated for release in WordPress 5.9, in late January 2022. WPBeginner has published an article on what to expect.

If you are using the Gutenberg plugin you can run, test, and develop block themes. Block themes are themes built using templates composed using blocks. See block theme overview for additional details.

Block Development

Native block development with JavaScript

The best place to start for block development is the Create a Block Tutorial.

The create a block tutorial breaks down to the following sections:

  1. WordPress Plugin
  2. Anatomy of a Gutenberg Block
  3. Block Attributes
  4. Code Implementation
  5. Authoring Experience
  6. Finishing Touches
  7. Share your Block with the World

PHP based block development

In response to the steep learning curve around advanced JavaScript and React, several tools were created by the WordPress ecosystem to aid with rapid development tools, often based in PHP, that enable you to create blocks without extensive knowledge of advanced JavaScript or React.

Some of the most popular block development tools include:

  • Advanced Custom Fields - Included in ACF PRO is a powerful PHP-based framework for developing custom block types. ACF blocks are highly customisable and powerfully dynamic. They integrate deeply with custom fields allowing PHP developers to create bespoke solutions inline with WordPress theme development.
  • Carbon Fields - uses a PHP class instance to initiate blocks and assign them fields and configuration in code.
  • Block Lab - A WordPress plugin providing an admin interface and a simple templating system for building custom Gutenberg blocks.

These tools shorten the learning curve when it comes to block development, but they do tend to be slower, and do not always fully fit in with the look and feel of the native blocks.

To provide the best end-user experience, it is reccomended to use native JS-based blocks as much as possible.

Additional Resources