Talk: “Beyond the block” – develop for Gutenberg

In August, the Core developers will probably publish WordPress 5.0, the long-awaited WordPress update. One of its changes: It replaces the current editor with the Gutenberg editor. No matter if the update is coming in August or later – you already have to think about it. Because Gutenberg is a challenge both for website owners and WordPress developers. Many WordPress developers need to rework their established workflows to individualize the editor page. Because with WordPress 5.0, they will mostly need to interact with a React application. So, how to develop for Gutenberg?

Most Gutenberg discussions focus on the question of how to develop custom blocks. Already, the Gutenberg developer handbook offers much useful information on this topic. Additional to that you can find many How To’s and tutorials to register your own blocks in the Internet. However, what hasn’t been much discussed yet, is how to enhance Gutenberg beyond blocks.

But those who have experience with the development of WordPress plugins and themes for customers know that customer desires are more than just the development of blocks. Instead, they require highly individualized editor customizations. That’s why we concerned ourselves with Gutenberg in our Developer Meeting lately. Amongst other things we took a look at the presentation “Beyond the Block” which offers a deeper insight into the Gutenberg application. There are only few information on this topic yet. That’s why we thought other developers might like to hear something about that topic, too. So here it is:

Develop for Gutenberg: About the presentation “Beyond the block”

With the help of an example plugin and a fictional customer, we discussed important Gutenberg aspects by means of individual features. These features are then developed in separate branches. As the discussed code in the presentation focuses on the problem talked about, a git diff between a branch and his precursor branch enables a more detailed overview about the code needed.

The presentation itself focuses on data stores which are responsible for the state management in WordPress. They contain important information, for example which post is currently edited, which certain content has been edited or which blocks are in use. So, with the help of these data stores it is possible to get information about the current post and to edit the current post.

An example. In case you run the following code in the Console, the post title will be “Another title” and the previous title is overwritten:

wp.data.select('core/editor').editPost({title:'Another title'})

Besides to an overview of Gutenberg’s state management, the presentation also introduces the Slot/Fill concept. It answers the question of how to render your own content into an already existing component.

The presentation slides

Edit: Since WordPress 5.0 is now published, I have updated the Github repository. Since my talk there have been quite some changes, which are now reflected in the master branch of the repository.