Gutenberg 14.8 Overhauls Site Editor Interface, Adds Style Book

Gutenberg 14.8 was released today with a major update to the Site Editor’s interface that makes it feel more unified as a design tool.

In August, Gutenberg designer James Koster shared some mockups for updating the Site Editor to include a “navigable frame” where users can select from a menu of features and styles on the left. This was one answer to what Koster identified as unbalanced feature weighting, a critical design flaw that he said was negatively impacting users’ experience with the editor.

In October, contributors began moving this idea forward, and now the first iteration of the new “browse mode” is making its debut in Gutenberg 14.8. Automattic-sponsored contributor Ryan Welcher published a video demonstrating the new UI for navigating the Site Editor:

video credit: Gutenberg 14.8 release post

Version 14.8 also introduces Style Book, which is now nestled into the Global Styles panel. It offers a way to visualize how global style changes will affect blocks by previewing them (both core and third-party blocks) in a resizable panel. This is especially useful when a theme has many style variations that would otherwise be time intensive to save and then preview with various blocks. It helps users answer the question, “How are these styles going to look with my blocks?” Styles can also be previewed for individual blocks.

video credit: Gutenberg 14.8 release post

Users who have been missing the Custom CSS panel from the Customizer will be delighted to know that Gutenberg 14.8 adds custom CSS to the Styles > Custom panel in the Site Editor. This first iteration is shipping as Experimental, so users who want to test it can enable “Global styles custom CSS” under the Gutenberg > Experiments menu in the admin.

When checking out patterns in the inserter, hovering over a pattern will now reveal its title. The invisibility of pattern titles becomes an issue when patterns are visually similar to one another with slight variations. Having the title be visible helps users sort through and select the best pattern for their needs.

The Navigation block has several updates that should improve the experience of building and editing menus:

Navigation block: Add page list to Link UI transforms in Nav block. (46426)

Navigation block: Add location->primary to fallback nav creation for classic menus. (45976)

Navigation block: Update fallback nav creation to the most recently created menu. (46286)

Navigation block: Add a ‘open list view’ button. (46335)

Navigation block: Removes the header from the navigation list view in the experiment. (46070)

Gutenberg 14.8 includes dozens of enhancements and bug fixes beyond these highlights. Check out the release post for the full changelog.