By Andrew Taylor July 06, 2018
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
-
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.
-
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
-
Gutenberg Times - a great curated list of resources
-
Gutenberg.courses - if you want to get hands-on
Real World Blocks
Converting a Shortcode to a Block
-
render_callback
-
Shortcode Attributes vs Block Callback
-
Shortcodes for backwards compatibility
Using Core Components
-
What you can reuse
-
Components for layout reasons
-
Components for inputs
-
SelectControl
-
-
WordPress dependencies
Modular Components
-
Monolithic vs modular blocks
-
File structure
-
Props flow down from Gutenberg
-
Change Handler defined in edit() so component is not strongly tied to Gutenberg
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
Josh’s List of Example Code You Should Copy
![]() |
WordPress 5.0 and the Gutenberg Editor |
You may also like:
Topics: WordPress