Gutenberg 14.1 Improves Navigation Block, Adds Experimental Zoomed-Out View

Gutenberg 14.1 was released today with some much-needed improvements to the Navigation block, which still seems to be on rocky journey towards better usability. Contributors are moving functionality around the Navigation interface to figure out where it works best.

The menu selector has been removed from the Navigation block toolbar in favor of placement in the inspector sidebar. This was done to reduce the crowding in the block toolbar, which previously stitched together disconnected actions, hampering the user experience. Automattic-sponsored Gutenberg contributor Carlos Bravo published a gif demonstrating the moved menu:

This release also adds new features like a select icon for the Navigation block’s menu button. It’s easy to see how the interface can get crowded fast when adding new capabilities. This particular enhancement was added to the block inspector under Display. If this method works well, contributors may look into adding the ability to add custom icons next.

video source: Gutenberg PR #43674 – Add select icon for Navigation Block’s menu button

The 14.1 release also continues the effort of consolidating design tools, adding things like typography and spacing support to Avatar, Button, Avatar, Buttons, Categories List, Comments Links, Latest Posts blocks, and more. This enables easier customization in the editor without the user having to resort to custom CSS.

Earlier this month we published an overview of the latest progress on a distraction-free mode for the editor, which included a brief mention of the experimental zoomed-out view that is now available for the site editor. It puts the focus on building and composing patterns, allowing users to move sections around without affecting the inner blocks. Users can build custom templates without worrying about messing up inner blocks. It’s not on by default but can be enabled under the “Experiments” menu in the Gutenberg plugin.

Locked patterns with better content locking is also available in 14.1. Features like duotone filters, block alignment, and resizing are now disabled on content-locked blocks, making it easier to keep users from changing the block beyond recognition.

A few other highlights in 14.1 include the following:

  • Box-shadow support added to theme.json
  • Block-based template parts now available for classic themes
  • Four new filters to edit the global styles data in PHP
  • Smoother multi-selection experience
  • Improved block transforms organization with Paragraph, Heading, List and Quote now shown in a separate menu subgroup

Check out the full changelog in the 14.1 release post for a more detailed look at everything that has changed. This will be the last version of Gutenberg that will merge into WordPress 6.1, which is expected in November.

5

5 responses to “Gutenberg 14.1 Improves Navigation Block, Adds Experimental Zoomed-Out View”

  1. Interested in the navigation block and how it is going to shape, ability to add custom icons will be a game changer as this will give more control on customization of user experience.

  2. I really hope the nav block works much better in TT3. I had nothing but problems with simple things like adding a menu item in TT2. When my Home menu item just disappeared, I backed out of TT2 and went back to TT.

  3. I’m looking forward to the zoom-out ability. I appreciate having this bird’s eye perspective as I like ironing out the general composition (or playing with it for that matter).

  4. The improved navigation block is great and I really like the fact we can now choose different menu icons, I look forward to the day that we can use our own custom icons!

    I’m a huge fan of the new spacing controls features of Gutenberg that allow us to add our own spacingSizes in theme.json. This results in some great block controls in the UI that make it easy to adjust block padding, margin and block spacing and generates several new css variables like this: –wp–preset–spacing–20, –wp–preset–spacing–30, –wp–preset–spacing–40 which is exactly like Mark Root-Wiley discusses in the WP Tavern Podcast #28. This is a great step forward in creating some CSS standards that can be used in themes and allow more control over spacing.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: