Gutenberg Development 101

A useful guide for learning how to develop with WordPress Gutenberg. Learn how to create and extend Gutenberg Blocks

Table Of Contents

Gutenberg is a new post and page editor for WordPress that will take place of the Classic Editor as of WordPress 5.0, January 2019. Gutenberg is a complete re-build of the WordPress Editor and is designed to give WordPress users more flexibility by using ready to use features, called blocks.

View Full Section

WordPress has created a Block API that acts as a wrapper class for the Gutenberg ReactJS functionality and Core WordPress. While Gutenberg uses the ReactJS library, using the Block API, the primary Javascript specific learning curve is understanding the attributes { } JSON structure when building modifiable blocks.

View Full Section

Adding Gutenberg Blocks to a theme requires setting up a block class and initializing the registerBlockType() function on your new block.

Accordion Content

Create custom blocks through your plugin that can be used on posts and pages. Build feature-rich blocks using plugin data and features.

Accordion Content

Gutenberg is built around Blocks. Thre registerBlockType() function is the initialization method for creating your own blocks in themes or plugins.

Accordion Content

Accordion Content

Accordion Content

2019 the Year of Gutenberg & WordPress 5.0

WordPress is in the process of finalizing the development on a relatively large over-haul to the admin interface for pages and posts called Gutenberg. Gutenberg allows users a great deal more control over the design elements that can be included in pages and posts. Once activated, the new UI wizard comes out-of-the-box with over 80 different drag-and-drop elements and features called Blocks. Numerous WordPress theme and plugin companies are building ready to use and feature rich blocks that can be installed and used when writing posts and page content.

One of the primary talking points for WordPress developers related to Gutenberg is the underlying technologies used to implement the feature. Gutenburg is built with, and powered by, a JavaScript library called React. This the first time that WordPress has so heavily integrated a 3rd party JavaScript library (other than jQuery, maybe) into the core WordPress functionality, leaving WordPress developers – who are primarily a PHP focused group — with a number of questions and concerns.

Developing With WordPress Gutenberg

Gutenberg is a major transition and transformation from the default WordPress editor a the new block-based editor. Gutenburg is designed using ReactJS which is a JavaScript library for building user interfaces and is maintained by Facebook. React can be used as a base front-end UI library in the development of single-page or mobile applications.

The newly introduced core WordPress Block API was built as a helper class to combine core PHP WordPress functionality and the ReactJS Gutenberg library when extending and building Gutenberg Blocks. We will use this “API” to build our own Gutenberg blocks.

Below is a guide using a combination of the WordPress documentation, real-world examples and other useful community-created resources and tutorials to help WordPress developers extend and build new features and blocks for the Gutenberg WordPress editor.

Registering a Block with registerBlockType()

The Gutenberg editor works using blocks. Every post and page content is built by adding blocks with different UI features and configuration settings. To create a new block, whether in a Theme or Plugin, you will need to initialize is it using the registerBlockType() function.

To register a new block we will use the registerBlockType() function, view the function on GitHub. This function registers a new block by providing a unique name and an object (attributes) defining its behavior.

Once registered, the block is made available as an option to any editor interface where blocks are enabled. There are two parameters the function needs to register and enable our new block.

  • name [string] –  Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block
  • settings [Object] – The settings object builds predefined properties (called Attributes) that your block will use for configuration and display options. Data properties are technically not required but there are a handful of preliminary attributes that need to be defined for your block to enable.

// Registering a block with a unique name from a plugin namespace / location
registerBlockType( ‘my-plugin/my-custom-block’, {} );

Read The Full Article

Theme Integration

Theme Boilerplate

Plugin Integration

Plugin Boilerplate

Attributes { }

Edit() and Save() functions

The edit sand save functions are the primary tools for manipulating blocks within the Gutenberg editor. The edit() function handles all post and page content attribute settings changes within the Gutenberg editor, allowing for a real-time visual update of the modifications. The save() function is used to push all of the block content and user-defined attribute values into front-end HTML.

RichText API (Editable Block Attributes)

Leave a Reply

Your email address will not be published. Required fields are marked *

Join Newsletter

About Me

Senior Application Developer. Focused on WordPress, Magento, Web Security & Server Optimization. I also contribute to open source projects when I can.

I have a growing family and spend most of my free time with them, working on my personal health and fitness or small home improvement projects.