All About Gutenberg with Karla Leibowitz

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. 😉

https://docs.google.com/presentation/d/e/2PACX-1vQEjndgBisVKHmv8WBZ8fl5CZ0ze7m0Db7YjzWDOgn4zM3960QKgxhyTzU2vkX4qhLnyExGXFFLo-uO/pub?start=false&loop=false&delayms=10000

Investigate this new thing because

1. Concern for clients
2. New opportunities
3. 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

1. Is it hard to use?
2. Will it support what they need?
3. Will it trash existing pages?

Spoilers: What will happen to post_content?

Front End:

• 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 posts table in the database
• Everything else lives in post_content and works the same as post_content does now.
• 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

• Training
• Hand holding
• Create custom blocks for projects
• Create custom templates for projects
• Themes, plugins …

Gutenberg Resources

• 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

Download slides as a PDF