WordPress Gutenberg Example Blocks

Following my last article I’ve published a new GitHub repo:

WordPress Gutenberg Example Blocks

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

A basic Gutenberg block example

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

A Gutenberg block example with a 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

A Gutenberg block example registered with the ACF plugin

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

A Gutenberg block example with an edit/preview toggle

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.

And More!

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.