Gutenberg + Themes: Week of January 24th, 2022

Hello! This is the 75th roundup of theme-related discussions, fixes, and developments in 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. It’s been a quiet few weeks because of the release of WordPress 5.9.

Global Styles variations switching

#35619 introduced a mechanism in Global Styles to switch between different preset styles for a theme. This allows themes to provide a wide variety of design options by simply creating different 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. This is an alternative to child themes that opens up a lot of opportunities for creating variations of a theme very easily.

Allow pattern registration from the Pattern Directory with theme.json

#38323 is a proposal to allow themes to register patterns from the Pattern Directory.

Transparency added to color controls

Since #37731 merged it is now possible to set colors with transparency. This should make it possible to create more interesting layouts as blocks overlap and colors bleed into each other.

Typography support on the group 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.

In #37456 we added typography controls to the group block. This will make it easier to define different styles for different areas of your theme.

Design controls for interactive states

#38277 is a proposal to add design tools to help us manage interactive states in blocks, like :hover and :focus. This is a particularly challenging issue and could use input to get the ball rolling.

Improving the Site Editor export

The Site Editor already lets us export our edited templates. It would be great if this export also contained the other pieces needed to create a theme, which is what #38199 is proposing. Are there other things that we would need to make a complete theme? How could we incorporate a screenshot for example?

The style engine

Gutenberg has a wide range of block supports to customize the look of different styles: borders, colors, background, spacing, layout, duotone, typography. These things have been implemented organically, resulting in a system with different approaches depending on the styles we’re changing and their values. The style engine (#37978) is an attempt to unify these approaches in one package that will (in time) be able to support each of these customizations.

As always, please weigh in on these issues and pull requests — your feedback is crucial and appreciated. 

Overview Issues

  • Default Theme (Twenty Twenty Two): Overview of Gutenberg issues: #75
  • GS: The Global Styles Interface #34574  
  • 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.: Post Comments LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. Block: Tracking issue #34994 
  • FSE: Site Editing block placeholders #35501
  • FSE: Templates list screen overview #36597
  • DT: Typography Tools: Tracking defaults for blocks #35604
  • Tracking: ToolsPanel Follow Ups #36165 

General Resources

Thanks @jeffikus and @onemaggie for your help with this week’s summary. Please comment if there’s something you’d like to highlight 🙂

Abbreviation key:

DT: Design Tools
FSE: Full Site Editing
GS: Global Styles