DocsWP — WordPress Help

Block-Based Theme Meeting Notes for 1 April 2020

This post summarizes the latest bi-weekly Block-Based Theme meeting, held in the #themereview Slack, on Wednesday, 1 April 2020, 16:00 UTC. These meetings coordinate collaboration in the development evolution of the Gutenberg project as related to the development of Block-Based Themes geared to support Full Site Editing. Moderated by @kjellr.

Block-based Theme-related updates in Gutenberg 7.8

  1. PR to add semantic tag Group block variations has been merged. This allows block-based themes to use the Group block to denote things like <header>, <footer>, and <section>. This solves one of the most common structural issues with building block-based themes. There’s no way to specify this from the UI yet, but block-based themes should be able to use it manually by adding an extra tagName attribute.
  • New line-height controls for Paragraph and Heading blocks are available. These use new –wp–typography–line-height CSS variables to adjust the line-height. We should expect to see more of those “official” variables make their way in as we get ready for Global Styles.
  • “Lighter DOM” block updates removes unnecessary wrappers and tags from the editor, so that the editor DOM for blocks matches the front end more closely. Which will allow theme authors to eventually share code between the front and back end.
  • The Site Editor beta is receiving a steady stream of small updates to bring it more on par with the standard editor.
    • PR 20691 Site Editor beta supports full-screen mode
    • PR 20549 Site Editor beta supports custom blocks
  • Soon, it’ll be pulled out into its own top-level sidebar item when the full-site editing experiment is active.
    • PR 20530 adding the Global Styles sidebar

It’s had some solid new updates this week and is getting closer to MVP. Small heads up that a few of the standard variables recommended for experimental-theme.json files have changed a little bit since last time. See details in the PR

Block Styles

A handful of default block patterns were added to Gutenberg 7.7. The new version 7.8 takes that further by including an API for plugins and themes to supply their own block patterns

The PHP for this is relatively straightforward, and just needs two properties:

  • The title for the block pattern
  • The actual content, which is just an escaped copy/paste from Gutenberg

Here’s a quick example:

register_pattern(
    'my-plugin/hello-world',
    array(
        'title'   => __( 'Hello World', 'my-plugin' ),
        'content' => "<!-- wp:paragraph -->\n<p>Hello world</p>\n<!-- /wp:paragraph -->",
    )
);

What is a Block Pattern?

The broader topic for discussion was the introduction of Block Patterns. By definition Block Patterns are related to smaller sections of a page/post. Templates and template parts are the pieces that are tied to the layout of an entire page (ie. header, sidebar, etc) while Block Patterns create the layouts within those sections.

Now that this API exists, it’s possible for themes to ship their own recommended block patterns. For instance, if your theme targets a restaurant, you could ship a set of menu layouts as block patterns. opening up a whole new way for themes to share layout/content suggestions with their users. Possible block patterns are listed on GitHub.

Meeting discussion centered around:

  • How do you envision using Block Patterns in your themes?
  • What sorts of Block Patterns would you like to see included with WordPress by default?

How Can Block Patterns Be Used in Themes?

  • They can provide layouts for FSE.
  • Themes could bundle reusable patterns for the sorts of things seen in the theme demo. So using 2020 as an example, it could bundle a pattern for this group of blocks, as seen on the demo’s about page.
  • It was suggested and agreed that only minimal patterns should be added to core and only patterns that are very common and used by the 90%.

What Patterns Would You Like to See Available?

  • A menu example for restaurant themes
  • About or Team patterns for a business theme — a team pattern could be 3 columns, each column containing image/header/paragraph, for example
  • Services Provide Pattern but will need option for selectable SVGs
  • Testimonial
  • Card (title + photo + text + link)
  • Features
  • Text layouts with quotes, pull quotes, and media integrated for themes whose primary purpose is for displaying content

HTML Validation

The Custom tag for group blocks that don’t use “block markup” doesn’t need HTML validation.  For right now the tag entered as the tagName just needs to be one of the elements listed in GitHub.

Contributors are encouraged to continue testing Block Patterns, Templates, Block-Based Themes and Full Site Editing using the follow Issues and PRs discussed in this meeting. Block-Based Theme Experiments can be submitted at https://github.com/wordpress/theme-experiements and there is a call out for experimental theme submissions.