WordPress Gutachterin (expert) Karla Leibowitz provided us with an overview of Gutenberg, from why we as WordPress professionals should be paying attention to it to where Gutenberg content is stored in the database to how you create a custom block.
Slide text is included below for accessibility and the benefit of Google. 😉
Investigate this new thing because
- Concern for clients
- New opportunities
- Professional need-to-know
Steps Karla took in November 2017
- Loaded gutenberg onto fresh site
- Tried it out creating some posts
- Read the documentation
- Created a sample block from an online example
Steps Karla took in April 2018
- New site, loaded Gutenberg plugin
- Tried it out
- Updated sample block plugin
- Added more plugins
- Added Advanced Custom Fields
- Added a page template, a custom post type, a block template
Concern for Clients
- Is it hard to use?
- Will it support what they need?
- Will it trash existing pages?
Spoilers: What will happen to post_content?
- Normal HTML, to be rendered as usual with CSS for the most part.
Back End / dashboard:
- New editor UI, writes special but highly readable HTML into post_content.
New and fresh:
- Shared blocks
- Custom Blocks
- Block Templates
What Karla Tested
- Advanced Custom Fields, because metaboxes were a big concern in the early days of Gutenberg development. The only problem was with WYIWYG fields, because Gutenberg and TinyMCE aren’t compatible.
- Yoast SEO, likewise because of metaboxes and some early issues. It works fine, and Yoast is investing heavily in Gutenberg compatibility.
- TablePress, which Karla uses frequently on client sites. (The shortcode works; eventually the developer may create a custom block to replace it.)
- Shortcodes. These work in either a paragraph field (as part of the text) or in the shortcode block.
- Gutenberg Custom Fields (GCF). This is a new plugin designed to create Gutenberg templates built out of custom fields. Using it is much like using ACF: you still have to write PHP for the field display. Using GCF, Karla created a custom block template for recipes.
Looking at the code editor
- Each block has a class that matches its name
- Shared blocks are stored in the
poststable in the database
- Everything else lives in
post_contentand works the same as
- There’s a copy all content option.
- You can view the HTML output of blocks, but if you try to edit it, the block breaks. If you want to add a custom CSS class to help you style the block, add it in the UI.
- Nested blocks appear to be still in progress, but it seems you can add blocks within the columns block as of February 16, 2018. (See also InnerBlocks.)
In the Database
All blocks are stored in
post_content. This means you can’t retrieve your blocks individually, except for shared blocks, which are a custom post type. “There’s no data trail.” That makes it hard to tell whether a given block is being used. This could be a disadvantage to using blocks instead of
post_meta, even though meta queries are inefficient.
Opportunities for Developers
- Hand holding
- Create custom blocks for projects
- Create custom templates for projects
- Themes, plugins …
- Zac Gordon tutorial on block templates
- Gutenberg Times (aggregator of Gutenberg news)
- Gutenberg source code on GitHub
- Gutenberg examples on GitHub
- Gutenberg Courses (for users and developers)
- Sallie’s Gutenberg Bookmarks