Gutenberg + Themes: Week of November 29th, 2021

Hello! This is the 74th weekly 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. This week we are trying a digest format. Please let us know what you think in the comments.

New directory names for 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

In #36647 the names of the `block-templates` and `block-template-parts` changed to `templates` and `parts` respectively. The old directory names will continue to work as before. Please see this post for more details.

Changes to the navigation block

In #36863 the `__unstableLocation` attribute of the navigation block was given a lower priority than the contents of the block. This allows themes to provide a default navigation for users who don’t have classic menus set up, while at the same time allowing sites that have already implement classic menu locations to override them.

Templates in the Site Editor

#36613 proposes moving the 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. and footer templates to the top level of the Editor navigation. This seems like a good way to surface templates that are commonly used. The drawback is that it makes it harder for users to discover and understand other template parts. More input needed here.

Relatedly, #36612 suggests that “used” templates are marked so that users can see which ones are currently being rendered to users.

New Global Styles keys

In #36748 and #36645 the keys used when creating Global Styles were changed from `coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.` and `user` to `default` and `custom` respectively. Block themes will be unaffected by this change, but any plugins that hook into Global Styles maybe impacted.

Layout changes when selecting background colors.

When adding background colors to blocks, Gutenberg adds padding. #36971 raises some of the challenges that this presents. Without this padding blocks can look quite broken as content touches the edge of the block. Should we expect users to add this padding? Can we connect the selection of a background color to the padding setting? What do you think?

Exporting 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

In #36619 theme.json files are added to the Site Editor export tool. This seems like a very useful addition for anyone who builds block themes. Let’s get it merged!

Sort keys alphabetically in theme.json

In #36968 the keys of the “core” theme.json file were reordered so that they are alphabetical. This seems like a good practice that all theme.json files should implement. Having a predictable order for keys makes it easier to find what you are looking for and helps avoid duplicate items.

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 @pbking 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