Gutenberg 13.7 + Themes

Hello! This is the latest 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. https://wordpress.org/gutenberg/ from the 13.7 release of the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.

Post Title 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. now supports text-decoration (#42328)

The Post Title Block now supports `text-decoration`, which means it is now possible to control the text-decoration for this block in the Global Styles interface or 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., for example:

"core/post-title": {
    "typography": {
        "textDecoration": "underline"
    }
},

Spacing size presets added to theme.json settings (#41527)

Previously, the spacing design options in the editor such as padding, margin, and gap only allowed the setting of custom values. In order to help keep a theme design consistent, this PR allows theme authors to specify a pre-defined list of spacing sizes. This also allows a standard list of space presets to be easily transferred across themes. This works in a similar way to the existing list of font size presets.

To add preset spacing sizes, add `spacingScale` and/or `spacingSizes` to a theme.json file. You can see an example of this being set in a theme here, and used here in theme.json and here in a column block.

Expanded the templates that can be added via the editor (#41875)

In GB 13.7, users can now add many more types of templates via the Site Editor, including templates for custom taxonomies, and specific terms, categories, and tags. To test this out, go to Templates in the editor, click ‘Add New’, and see the full list of templates that are now available.

Style all heading elements together (#41981)

Previously, heading elements such as H1, H2, H3, etc could only be styled individually in theme.json. This change enables themes to set style rules for all heading elements together using the `heading` property, for example:

"heading": {
    "color": {
        "background": "blue"
    }
},

Link :hover state control added to global styles 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. (#41976)

Users can now set the :hover interactivity state for top-level link elements via the global styles interface, making it easier for end-users to edit this setting.

Set blockGap value for specific blocks (#40875)

As part of PR #40875, users can now set a `blockGap` value for specific blocks in theme.json and in the Global Styles interface, for example:

"styles": {
    "blocks": {
        "core/buttons": {
            "spacing": {
                "blockGap": "6px"
            }
        }
    }
},

Other notable changes

  • Comments block: Remove stray legacy class from edit (#42335)
  • Global styles: filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. block level styles before compiling global stylesheet (#42207)
  • Try tabs instead of segmented control for switching between solid/gradient in color panels (#41937)

General Resources:

Thanks to @mmaattiiaass and @pbking for the help putting this together!

Please comment if there’s something you’d like to highlight 🙂

#gutenberg-themes-roundup