WordPress Gutenberg Example Blocks
Following my last article I’ve published a new GitHub repo:
In there I’ve coded examples of Gutenberg block development wrapped up in a tidy WordPress plugin you can try out.
I start with the most basic block possible. I follow with iterations of more advanced functionality. I’ve kept the boilerplate and dependencies to a bare minimum to keep the important stuff prominent. Then I go a bit crazy and experiment with ideas.
I’ve outline a few of the blocks below. See the project documentation for more information. Keep watch for future additions.
01 - Basic
The first example is the most basic of Gutenberg blocks created with React. The editor and front-end render the same uneditable content. The block has no functionality.
02 - Text Control
The second example takes the basic block and makes the content editable. The Gutenberg editor renders a text control that updates the related block attribute. The front-end renders the block using the
text attribute value.
03 - ACF
The third example takes a detour away from React. It uses the Advanced Custom Fields (ACF) plugin to register the block with PHP.
04 - Preview Mode
The fourth example — inspired by ACF — moves back to React and adds an edit/preview toggle to the text control block. This allows the front-end block render to be visible in the Gutenberg editor.
See the blocks and WordPress plugin for further examples and documentation. I plan to update it every so often with more ideas. My preference is to use ACF for block development. Unless I have special requirements, the ease-of-use for multiple developers is a major benefit.