dbushell-gutenberg-example v0.2.3
WordPress Gutenberg Example Blocks
Work in progress!
Follow my blog and @dbushell for updates.
The Blocks
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! ✨
The fifth example renders the block preview inside an iframe in the Gutenberg editor. CSS and JavaScript are effectively scoped to avoid conflicts with the unknown WordPress admin assets. The iframe automatically resizes based on its content height.
06 - Block Template
🧪 Experimental! ✨
The sixth example implements a block template to combine a React block and an ACF block. The render_block filter is hooked into to provide a single PHP template using attributes from both blocks.
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 /blocks/.
This can be run with:
npm install
npm run buildSee package.json for full commands.
Both development and production modes are generated to:
/blocks-plugin/my-blocks.js
/blocks-plugin/my-blocks.min.jsThe WordPress plugin will automatically switch to loading the dev mode unminified version if WP_DEBUG is defined and true.
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:
Docker WordPress Scripts is a small set of scripts to manage WordPress containers in Docker. It uses an nginx-proxy for *.localhost domains to avoid manual port assignment.
Credits / License
MIT licensed | Copyright © 2020 David Bushell | @dbushell