Making Gutenberg viable with real world strategies


Jesse Janowiak
NewCity Media

Thanks for Coming!

Glee Club Polka Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0 License
http://creativecommons.org/licenses/by/3.0/

Problem 1:
Custom Blocks are Hard to Build

News
### Maybe you don't need custom blocks?
Meme of a little girl asking 'Why don’t we have both?

Problem 2:
We need to control what blocks can be used

News

Hide them and guide them

Screenshot of the default block manager interface

Gutenberg Block Manager plugin

https://wordpress.org/plugins/block-manager/ Screenshot of the Gutenberg Block Manager plugin's interface

Problem 2:
We need to control what blocks can be used

Lock down those blocks!

Problem 3:
We need to control where blocks can be used

Page Header
Content
Page Header
Call to Action
Content
Email Form
Page Header
Call to Action
Content
Flexible Content
Block A
Block B
Block C
Email Form

Problem 3:
We need to control where blocks can be used

News
Page Header
Call to Action
Content
Flexible Content
Block A
Block B
Block C
Email Form
Page Header
Call to Action
Content
Flexible Content
Block A
Block B
Block C
Email Form
Page Header
Call to Action
Content
Flexible Content
Block A
Block B
Block C
Email Form

Problem 3:
We need to control where blocks can be used

## Gutenberg Block Templates https://developer.wordpress.org/block-editor/reference-guides/block-api/block-templates/

InnerBlocks in action

Columns
Column
<InnerBlocks />
Column
<InnerBlocks />

Required Block Settings

  • Block Name: 'my-blocks/page-content'
    (can be anything, as long as it matches what you used in your template)
  • multiple: false
    (only one of these per page)

InnerBlocks Settings

  • template: [ 'core/paragraph' ]
  • templateLock: false
  • allowed_blocks: Any blocks that you want to be allowed in this section

Post-Presentation Update:

Between the time I recorded the WPCampus presentation and the time I delivered it, I learned that the “Group” block (core/group) supports the templateLock property, and it can be set to override the templateLock value of its parent.

If you wanted to create the page layout from our example, but do not need to restrict the Flexible area to specific blocks, there is no need to use a custom block. You can use this template setup instead:

Post-Presentation Update:

This will allow you to lock the position of the main content blocks, but the group block will be unlocked, essentially creating a new content editor nested inside your template.

Problem 4:
There are too many configuration options

“I can’t figure out how to turn off all of these controls!”

Turning off custom fonts and colors

Screenshot of the default setup for color and font settings
#### Introducing `theme.json` https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
Typography settings with custom font size field still showing
Typography settings with custom font size field removed
Color settings with only the custom color option
Color settings with manually entered color palette and no custom color option
Jesse Janowiak
NewCity Media