Webinar Recap: Extending Gutenberg with Josh Pollock

I recently spoke with Josh Pollock of Caldera Labs during Pantheon’s Extending Gutenberg webinar. You can view the recorded webinar here. Below is an overview of the webinar.

Webinar Notes:

Gutenberg for Developers

What to Know

• Test existing sites by installing the Gutenberg plugin

  • Pantheon allows you to create free sandbox sites to try Gutenberg on

• Gutenberg is moving fast

  • A new release every few weeks

  • You can’t just look at it once

• You can style core blocks to match your theme

• Start building new projects with Gutenberg now

Do I Need to Know JavaScript to Create Blocks?

• Yes, knowing basic JavaScript is necessary to create blocks

• You can use ES2015 or modern JS

• Learning React should be something on your radar

• Knowing modern JavaScript and modern tooling will help you write better code, not just for Gutenberg, but for all JavaScript

Block Templates

Blocklist/Allowlist blocks with filters

• By user, post type, etc.

Post type block templates

• Placeholder blocks to help users

Traditional page templates with blocks

• Still in progress

• Subscribe to the GitHub issue

Static Blocks

• What goes into the editor is saved to post content and rendered on the frontend as-is

• Render callback is declared in JavaScript

• Think paragraphs, images, etc.

Dynamic Blocks

• Dynamic blocks are rendered by PHP on the frontend

• Think recent posts and other dynamic content

• Block attributes are stored in the HTML comments saved to the database

• Currently, this means working with JavaScript and PHP

What You Need to Do to Create a Block

• Register block

  • Register in PHP and JavaScript

• Register block scripts

• Enqueue block scripts

• Optionally, register block styles

• Optionally, enqueue block styles

Demo

wp-cli scaffold block - scaffold custom Gutenberg blocks with wp-cli

• Uses ES2015 without a build step

Create Gutenblock - tool to scaffold custom Gutenberg blocks

• Uses modern JavaScript with a build step

• Takes care of tooling for you

• Good to get started but you must eject to customize

Where to Learn About Gutenberg

• Gutenberg GitHub - the documentation and source code is fantastic

• Official Gutenberg Handbook

• Gutenberg development updates on make.wordpress.org

• Gutenberg Times - a great curated list of resources

• Gutenberg.courses - if you want to get hands-on

• WP Tavern Gutenberg tag

Real World Blocks

Converting a Shortcode to a Block

• render_callback

• Shortcode Attributes vs Block Callback

• Shortcodes for backwards compatibility

• See lines 83 and 51-69

Using Core Components

• What you can reuse

• Components for layout reasons

  • InspectorControls

• Components for inputs

  • SelectControl

• WordPress dependencies

  • Alias @wordpress

Modular Components

• Monolithic vs modular blocks

• File structure

• Props flow down from Gutenberg

  • Attribute values passed as props to children

  • Change Handler defined in edit() so component is not strongly tied to Gutenberg

• Bringing it all together

Next Steps

• Frontend React apps from blocks

• Sharing state and components between Gutenberg and React-powered admin screens

Gutenberg Resources

Andrew’s Favorite Gutenberg Resources

• [video] WordPress AMP Google I/O May 2018

• [newsletter] Gutenberg Times - a great curated list of resources.

• [blog post] Converting a shortcode to a block

• [video] What is Gutenberg? WordCamp Miami 2018

• [video] Gutenberg and the WordPress of Tomorrow WordCamp US 2017

• [podcast] Gutenberg with Tammie Lister and Matias Ventura

Josh’s List of Example Code You Should Copy

• https://github.com/caldera-learn/alert-block

• https://github.com/brichards/gutendev

• https://github.com/CalderaWP/Caldera-Forms/tree/master/clients/blocks

• https://github.com/humanmade/hm-gutenberg-tools/

• https://github.com/WebDevStudios/WDS-Blocks/

WordPress 5.0 and the Gutenberg Editor Get ready for the biggest change to WordPress in years with a complete guide to Gutenberg from the experts at Pantheon.

You may also like:

• [BLOG] Webinar Recap: Introduction to Gutenberg with Joe Casabona

• [BLOG] Webinar Recap: Designing Gutenberg with Mel Choyce

• [BLOG] Announcing the Google Maps WordPress Block