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

Latest changes in Gutenberg + Themes: 13.1 to 13.5 releases

Hello! This is the 80th 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/. We haven’t posted this in a while, and there is a lot of news. In this update, we will cover versions 13.1, 13.2, 13.3, 13.4, and 13.5 of Gutenberg.

Gutenberg 13.1

Themes

#40005 Update 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. docs for theme authors

Global Styles

#40185 Do not render global styles coming from the server in the site editor

Design Tools

#39967 Column: Add border support to column blocks

Gutenberg 13.2

Themes

#40539 Theme Export: Bug: Add .DS_Store to the list of ignored files

Design Tools

#40735 [Gradient Tool]: Fix closing of popover when the angle control is clicked
#40635 Borders: Remove unused BorderStyleControl component

Gutenberg 13.3

Themes

#41058 [bug] Theme Export: Use basename when determining the theme slug
#40889 Theme Json: Don’t output double selectors for elements inside blocks
#40829 [bug] Theme Export: Use a better method to determine the theme name

Full Site Editing

#40970 Heading 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. – add font family support

Global Styles

#40888 Fix: Global Styles: Impossible to open welcome guide if global styles are empty.
#40887 Fix: Global Styles are always resettable
#40837 Site editor: preset custom color duplicates

Design Tools

#41018 Layout: Remove double output of align-items in horizontal layouts
#40858 Button: add text transform control.

Gutenberg 13.4

13.4 Introduces support for button elements in theme.json and the editor. This is a consistent way to style buttons across blocks. The search block is the most obvious example here, but there will also be third-party blocks that will benefit from this change. The latest changes add a new class, wp-element-button, to buttons, so that they can share the same styles.

Full Site Editing

#41387 [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. – Templates]: Add info to templates created from wp suggestion
#41302 [Site Editor]: Update single default template copy

Global Styles

#40260 Add support for button elements to theme.json
#41246 Button Element: Add support to Site Editor
#41240 Button Element: update button element selector
#41239 File Block: Makes the button an element button
#41160 Load block CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. conditionally

Design Tools

#41175 Gallery: Opt-in to axial (column/row) block spacing controls

Gutenberg 13.5

Themes

#41393 File, Search Blocks: Lower CSS specificity

Full Site Editing

#41630 Include theme’s templates in template list in post editor

Global Styles

#41689 Block CSS: Move CSS from the stylesheet to the block definition

Design Tools

#41569 Webfonts: increase the priority of init hook to account for block reregistration
#41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/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. settings for blocks on public pages
#41102 Cover: Move overlay and opacity controls to the color panel

General Resources:

Thanks to @pbking for the help putting this together!

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

#gutenberg-themes-roundup

Latest changes in Gutenberg + Themes: 13.0 release

Hello! This is the 79th 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/ coinciding with the 13.0 release.

New Features

#39899 Add color support to the quote 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.

Improvements for Theme Export:

#39751 Convert spaces to tabs 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.

#39775 If the theme declares a version number then add a schema

#39842 Sort theme.json properties

#39848 Remove default theme.json properties on export

Bug fixes

#39895 Add a box-sizing border-box to lists

Global Styles

#39845 Revert “Global styles: remove block gap control” 

#39846 Block Styles: Revert changing default overflow-wrap to all headers, lists, and paragraphs

Open Pull Requests

#40513 Add Global Styles CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to inline block CSS

#40260 Adds support for button elements to theme.json

#40335 Use a var for user presets to avoid having to use ! important to enforce them

Latest open issues

#40181 Global Styles: Allow themes to opt out of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. theme.json

#40371 customTemplates: unable to remove postType support 

#40432 Clear customizations after template export & adding to theme files

#40469 wp_enqueue_block_style no longer adds styles in the site editor if Gutenberg 13.0 is active

#40491 Use title in default theme.json to override “Default” label in Site Editor Style Variations

#40621 Block style for specific block variation

General Resources:

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

#gutenberg-themes-roundup

Gutenberg + Themes: Week of February 14th, 2022

Hello! This is the 76th 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/.

New features:

Pattern Directory: Allow pattern registration from directory with 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.

#38232 This PR enables themes to register patterns from the Pattern Directory through theme.json. It checks for a pattern’s top level key that is an array of pattern slugs from the directory.

Contrast Checker: check link color 

#38100 adds the contrast checker feature to the link color control.

Fixes: 

Site Editor: Remove extra div on post content

#38451 removes an unwanted extra div that the post content 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. outputs and additional div when being rendered in the Site Editor.

Fix global styles loading logic

#38745 loads global styles using this logic, no matter the WordPress version:

  1. Block theme. Always load in the .
  2. Classic theme that hasn’t opted into loading coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. assets separately. Load in the .
  3. Classic theme that has opted into loading core assets separately. Load in the .

Duotone: Allow users to specify custom filters

#38442 allows themes to specify their own custom duotone filters.

Search Block: Fix border radius reset

#38478 fixes the reset border functionality.

Documentation updates:

Add a high-level intro to styles in the block editor

#38208 adds a new document to the handbook: a high-level intro to how styles work in the block editor.

Overview Issues

DT: Design Tools Overview #33447

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.: Building with Patterns #38529

FSE:  Updated scope for site editing projects #33094

Open PRs

GS: Fix default duotone preset SVG and style generation #38681

GS: Fix display of color palettes for border panel #38798

General Resources:

Thanks @mmaattiiaass for compiling this week’s update, and @onemaggie helping! Please comment if there’s something you’d like to highlight 🙂

Abbreviation key:

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

#gutenberg-themes-roundup

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. https://wordpress.org/gutenberg/. 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. https://codex.wordpress.org/The_Loop. 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


#gutenberg-themes-roundup