WordPress Gutenberg Example Blocks
Work in progress!
The Blocks Plugin
The blocks plugin handles the basics for:
- Adding a custom block category
- Enqueuing the necessary scripts and styles
- Registering the ACF block
I've made this plugin so the examples are easy to try out. For theme development similar code can be used in the standard WordPress theme functions.
See "Notes on Webpack" below for more information.
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.
See "Notes on ACF" below for more information.
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.
05 - IFrame Preview
🧪 Experimental! ✨
06 - Block Template
🧪 Experimental! ✨
See my blog article for the rational behind this method.
07 - ACF IFrame Preview
The seventh example takes the ACF block from example three and renders it inside an iframe like example five.
Notes on Webpack
This project includes a Webpack config file to compile the React source code from
This can be run with:
npm install npm run build
package.json for full commands.
Both development and production modes are generated to:
The WordPress plugin will automatically switch to loading the dev mode unminified version if
WP_DEBUG is defined and
Notes on ACF
The advantages of ACF blocks are:
- Built in edit/preview toggle in the Gutenberg editor
- Render blocks with PHP templates (easy access to WordPress functions)
- ACF admin UI to configure fields (screenshot below)
The disadvantages of ACF blocks are:
- Limited control over field layout in the editor
- No access to the lower level React components and APIs
Possible pros and cons depending on requirements:
- HTML is not saved to the post content (only JSON encoded block data)
- Block preview requires a slower server-side render
- The ACF plugin dependency must be activated
Docker WordPress Scripts
Need a quick way to spin up WordPress for local development?
I have another example starter project: