Title: Block-Based Theme Meeting Notes for 1 April 2020
Author: Eileen Violini
Published: April 3, 2020

---

 [  ](https://profiles.wordpress.org/itsjusteileen/) [Eileen Violini](https://profiles.wordpress.org/itsjusteileen/)
12:01 pm _on_ April 3, 2020     
Tags: [themereview ( 62 )](https://make.wordpress.org/themes/tags/themereview/)

# Block-Based Theme Meeting Notes for 1 April 2020

This post summarizes the latest bi-weekly BlockBlock Block is the abstract term 
used to describe units of markup that, composed together, form the content or layout
of a webpage using the WordPress editor. The idea combines concepts of what in the
past may have achieved with shortcodes, custom HTML, and embed discovery into a 
single consistent API and user experience.-Based Theme meeting, held in the [#themereview](https://make.wordpress.org/themes/tags/themereview/)
SlackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/).
The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/),
on Wednesday, 1 April 2020, 16:00 UTC. These meetings coordinate collaboration in
the development evolution of the GutenbergGutenberg The Gutenberg project is the
new Editor Interface for WordPress. The editor improves the process and experience
of creating new content, making writing rich content much simpler. It uses ‘blocks’
to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/)
project as related to the development of Block-Based Themes geared to support Full
Site Editing. Moderated by [@kjellr](https://profiles.wordpress.org/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 <headerHeader The header
    of your site is typically the first thing people will experience. The masthead 
    or header art located across the top of your page is part of the look and feel 
    of your website. It can influence a visitor’s opinion about your content and you/
    your organization’s brand. It may also look different on different screen sizes.
    >, <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 UIUI 
    UI is an acronym for User Interface - the layout of the page the user interacts
    with. Think ‘how are they doing that’ and less about what they are doing. 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 CSSCSS CSS is an acronym for cascading style
   sheets. This is what controls the design or look and feel of a site. 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.
    - [PR 20775](https://github.com/WordPress/gutenberg/pull/20775)
    - [PR 21215](https://github.com/WordPress/gutenberg/pull/21215)

 * “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.
    - [PR 20729](https://github.com/WordPress/gutenberg/pull/20729) Navigation
    - [PR 20586](https://github.com/WordPress/gutenberg/pull/20586) Lighter block
      DOM

 * The Site Editor betaBeta A pre-release of software that is given out to a large
   group of users to trial under real conditions. Beta versions have gone through
   alpha testing in-house and are generally fairly close in look, feel and function
   to the final product; however, design changes often occur as part of the process.
   is receiving a steady stream of small updates to bring it more on par with the
   standard editor.
    - [PR 20691](https://github.com/WordPress/gutenberg/pull/20691) Site Editor 
      beta supports full-screen mode
 *  - [PR 20549](https://github.com/WordPress/gutenberg/pull/20549) Site Editor 
      beta supports custom blocks

 * Soon, it’ll be pulled out into its own top-level sidebarSidebar A sidebar in 
   WordPress is referred to a widget-ready area used by WordPress themes to display
   information that is not a part of the main content. It is not always a vertical
   column on the side. It can be a horizontal rectangle below or above the content
   area, footer, header, or any where in the theme. item when the full-site editing
   experiment is active.
    - [PR 20530](https://github.com/WordPress/gutenberg/pull/20530) adding the Global
      Styles sidebar

It’s had some solid new updates this week and is getting closer to MVPMinimum Viable
Product "A minimum viable product (MVP) is a product with just enough features to
satisfy early customers, and to provide feedback for future product development."-
[WikiPedia](https://en.wikipedia.org/wiki/Minimum_viable_product). Small heads up
that a few of the standard variables recommended for experimental-theme.jsonJSON
JSON, or JavaScript Object Notation, is a minimal, readable format for structuring
data. It is used primarily to transmit data between a server and web application,
as an alternative to XML. 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](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/)
to supply their own block patterns

The PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used
open source general-purpose scripting language that is especially suited for web
development and can be embedded into HTML. [https://www.php.net/manual/en/index.php](https://www.php.net/manual/en/index.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:

    ```wp-block-code
    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](https://github.com/WordPress/gutenberg/issues/20345).
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 APIAPI An API or Application Programming Interface is a software intermediary
that allows programs to interact with each other and share data in limited, clearly
defined ways. 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](https://github.com/WordPress/gutenberg/issues/20345).

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 FSEFSE Short for Full Site Editing, a project for
   the Gutenberg plugin and the editor where a full page layout is created using
   only blocks..

 * 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 coreCore
   Core is the set of software required to run WordPress. The Core Development Team
   builds WordPress. 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

## HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. 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](https://github.com/WordPress/gutenberg/blob/6897d7d8833bcf4031e8e73a1bc7aa3e22f420af/packages/block-editor/src/components/block-list/block-wrapper.js#L229-L249).

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](https://github.com/wordpress/theme-experiements)
and there is a [call out for experimental theme submissions](https://make.wordpress.org/themes/2020/03/01/call-for-experimental-themes/).

### Share this:

 * [  Threads ](https://make.wordpress.org/themes/2020/04/03/block-based-theme-meeting-notes-for-1-april-2020/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/themes/2020/04/03/block-based-theme-meeting-notes-for-1-april-2020/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/themes/2020/04/03/block-based-theme-meeting-notes-for-1-april-2020/?share=bluesky)
 * [  Facebook ](https://make.wordpress.org/themes/2020/04/03/block-based-theme-meeting-notes-for-1-april-2020/?share=facebook)
 * [  X ](https://make.wordpress.org/themes/2020/04/03/block-based-theme-meeting-notes-for-1-april-2020/?share=x)
 * [  LinkedIn ](https://make.wordpress.org/themes/2020/04/03/block-based-theme-meeting-notes-for-1-april-2020/?share=linkedin)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fthemes%2F2020%2F04%2F03%2Fblock-based-theme-meeting-notes-for-1-april-2020%2F%23respond&locale=en_US)

### Leave a Reply 󠀁[Cancel reply](https://make.wordpress.org/themes/2020/04/03/block-based-theme-meeting-notes-for-1-april-2020/?output_format=md#respond)󠁿

You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fthemes%2F2020%2F04%2F03%2Fblock-based-theme-meeting-notes-for-1-april-2020%2F&locale=en_US)
to post a comment.

This site uses Akismet to reduce spam. [Learn how your comment data is processed.](https://akismet.com/privacy/)

# Post navigation

[← Block-based Themes Meeting Agenda for April 1, 2020](https://make.wordpress.org/themes/2020/03/30/block-based-themes-meeting-agenda-for-april-1-2020/)

[Proposal: GitHub Theme Review →](https://make.wordpress.org/themes/2020/04/03/proposal-github-theme-review/)