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.

Extending Gutenberg

Webinar Notes:

Gutenberg for Developers

What to Know

  • 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

Blacklist/Whitelist 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

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

Modular Components

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

Josh’s List of Example Code You Should Copy

Gutenberg thumbnail  

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:

Topics WordPress