Ninja Pumpkin Mutants

    dbushell-gutenberg-example

    0.2.3 • Public • Published

    WordPress Gutenberg Example Blocks

    npm version

    Work in progress!

    Follow my blog and @dbushell for updates.

    The Blocks

    1. Basic
    2. Text Control
    3. ACF
    4. Preview Mode
    5. IFrame Preview
    6. Block Template
    7. ACF IFrame Preview

    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

    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.

    See "Notes on ACF" below for more information.

    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.

    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 build
    

    See package.json for full commands.

    Both development and production modes are generated to:

    /blocks-plugin/my-blocks.js
    /blocks-plugin/my-blocks.min.js
    

    The 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)

    A Gutenberg block example registered with the ACF plugin

    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

    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

    Install

    npm i dbushell-gutenberg-example

    DownloadsWeekly Downloads

    0

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    512 kB

    Total Files

    33

    Last publish

    Collaborators

    • dbushell