Block-based Themes Meeting Notes — Sept 1

When: September 1st, 2021

Where: #themereview

For the full conversation, here is a link to where the slack discussion starts.

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/ + Themes Updates

We spent most of the meeting discussing two recent features particularly relevant to 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. themes:

1. Flex layout support: https://github.com/WordPress/gutenberg/pull/33359

  • For now, flex layouts can only be defined via theme (templates and some layout options in 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.), there is no 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. for setting a flex layout on a group block / container yet.

2. Adding a “gap” spacing around blocks globally: https://github.com/WordPress/gutenberg/pull/33812

  • A follow-on PR related to setting margins for first direct descents (:first-child) was raised: https://github.com/WordPress/gutenberg/issues/34441
  • There was some discussion around how the global gap and margin styles on the block should work together. The general consensus was the following behavior would be expected, from highest to lowest precedence:
    • Margin set by user in UI (eventually) – inline style
    • theme.json individual block margins
    • theme.json global gap
  • And if you want to keep following along, here is an overview issue about dimension controls: https://github.com/WordPress/gutenberg/issues/28356

Block Theme Resources created by Community Members

There have been some awesome block-theme resources recently created and shared by folks around the community! Here are a few highlights:

@Ellen wrote about her studio’s experience building their first block theme:  https://www.elmastudio.de/en/lessons-learned-building-our-first-block-theme-for-full-site-editing/

@poena published an in depth look at the typography options available in theme.json, filled with useful code examples to demonstrate: https://fullsiteediting.com/lessons/theme-json-typography-options/ and fullsiteediting.com is great for block related resources in general.

@richtabor came out with a 3 part series on standardizing how we build block themes. This is part 1 about everyone’s favorite — colors: https://richtabor.com/standardizing-theme-json-colors/

@karmatosed’s post was a great follow up alongside similar topic as the above — https://ephemeralthemes.com/2021/08/31/the-need-for-standardisation/

Please comment if you have any questions or notes to add!

#block-based-meeting