Gutenberg 11.6 improves overall styles UI and adds child theme support – WP Tavern

Gutenberg 11.6 landed yesterday. Contributors added dozens of improvements and bug fixes. Granted, there wasn’t much that got me as a user excited about this release.

Typography options for the Message Title block. Attractive.

Cropping for the site logo. A necessary complement.

Toolbar button to convert old Gallery blocks to the new – still experimental – format. Soft.

For the most part, the release felt like a slew of routine improvements that were in the works for those of us following the development of the plugin closely. Almost boring. And that’s not a bad thing at all. Less excitement and smaller doses of iterative improvements can be healthy for the project and its developers. We don’t always have to feel like we’re chasing the next big thing. This is a full version that polishes up a lot of areas, from navigation and widgets to general block improvements.

There were two features that I’m happy to see movement on. This is the Global Styles system of the site editor and child theme support.

Global Style Updates

Appearance of the default site editor with the Global Styles panel open.

Global Styles is the system that will truly connect end users to theme developers and vice versa for the first time in WordPress history. We made a few attempts, like the customizer. However, this feature will handle it in addition to the standardized block system.

Essentially, the themes will be speak to WordPress via their theme.json files, and users will speak the same language through the Global Styles panel.

For example, imagine that a theme author sets the default text color to black and the background to white. This will appear on the front end of the site but will also be reflected in the site editor. The Global Styles interface allows users to change these two colors to something they prefer. They can also see a preview of their color and typography styles in the box at the top of the panel.

Modify text and background colors, previewing them in the Global Styles panel.
Updated colors, preview displayed in editor and at top of panel.

And, it doesn’t stop with a few simple colors. Users can change all kinds of design aspects like typography and spacing at the root and block levels.

Gutenberg 11.6 adds a navigation component to the Global Styles sidebar. Overall, it is much smoother to work on the upper and lower levels when changing the styles of my theme.

Drill down to block level in the Global Styles panel and change code block dimensions.
Update of the global filling of the Code block.

It’s sort of a small but vital step towards overhauling the Global Style UI. There’s still a lot of work to do, but I can’t wait to see where Gutenberg contributors take this strand in the weeks and months to come.

I encountered a catch. Clicking on the Typography tab at the root level produces an error. However, it works at the block level.

Contributors have also updated the old “Aa” icon representing the Global Styles panel with a mid-dark-mid-light circle button. My immediate reaction was that it was to switch between light and dark modes.

This was a sentiment shared by one user (from a now deleted account) in the GitHub ticket.

Global Styles is not a new system disconnected from styles and themes, it is in fact an improvement of the current theme system. If we were to consider the strength of WordPress past and present, we would perceive that on the dashboard, indeed, a brush icon has been developed for years in people’s memory as an association with looks, themes, styles, customization. Therefore, the icon that would be most understandable in people’s memory regarding the new Customizer remains a brush. I say new and better Customizer, because that’s how ordinary people manifest what they understand about overall styles. Starting with a yin-yang, moon or water drop brush, I have not yet tested with the public, but from my past experience, I assure you that people will find this new unrelated and confusing icon.

Block child theme support

As one of the pioneers of child themes in WordPress, using them long before they were officially supported is something that is close to my heart. I created my first themed store on this foundation. I have lots of ideas for how the block paradigm can reshape the thematic space, and child themes are at the center of a lot of them.

However, not all components of Full Site Editing have fully supported child themes so far. There are still a few pieces to put in the puzzle, but the system should work most of the time.

Models, model parts and theme.json the files of a child theme should now completely overwrite those of the parent. These changes work both on the front-end and in the site editor.

Some open questions are answered in an associated GitHub ticket. The most crucial development is yet to come, which will manage the merger of values ​​between parent and child theme.json files. For example, it makes sense that child themes could override colors and typography while skipping layout-related value definitions, going back to the parent.

With that in place, designers will have a simple yet powerful way to realize the original vision behind CSS Zen Garden, a project that at least partially inspired the adoption of children’s themes by WordPress.

Comments are closed.