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/ 11.7 has been released! This release includes a number of nice enhancements and as usual many bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes.

Navigation 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. And Navigation Editor Advances

The Lighter Navigation Block Experience and the Navigation Editor efforts led to many quality of life improvements in Gutenberg 11.7! 

The Navigation Block underwent a series of changes intended to provide a more intuitive navigation management experience. New links are now added instantly after clicking the “+” icon without an additional block selection step. There is also an additional new way of adding links: using a slash inserter. It is worth noting that a slash inserter can be enabled for any block using a new, experimental flag called __experimentalSlashInserter. In addition, navigation links may now be transformed into other allowed block types, such as Site Logo, Home Link, or Social Icons. Finally, it’s easier for users to notice linking mistakes thanks to the squiggly line highlighting empty links similarly to grammar errors. 

On the frontend front: The navigation link now supports custom font size and line-height. Link labels, such as “Previous post,” may now be a part of the link to the post itself. Mobile menus now reflect the justification settings of the desktop menus. 

Global Styles And Full Site Editing

The site editing experience got polished in this recent release. The template part editor gained a convenient back button to ease returning to the site editor. Switching between editing different template parts was made more accessible by listing the available areas in template details. Also, the custom gradient picker was refreshed.

There’s more! The Site editor was equipped with padding settings for specific template parts. Color palette settings are now available in a separate panel in the global styles sidebar. In addition, Duotone support was extended to the site logo block.

While we’re talking about Duotone, Gutenberg 11.7 enables theme authors to customize the default 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. using theme.json styles:

{
	"styles": {
		"blocks": {
			"core/site-logo": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--blue-filter)"
				}
			}
		}
	}	
}

Columns Block Support For Tweaking The Gaps And Margins

The Columns block now allows you to adjust the space between the columns and the margins surrounding the block. Combined with customizable template part padding, it is the most flexible layout-building experience Gutenberg ever had.

Other Notable Highlights

As a part of the effort to get the LinkControl component out of the “experimental” state, 11.7 adds the ability to create pages directly from the link popup. So far, this was only possible in the Navigation block, but now this feature is exposed on every link. The popup also underwent subtle visual adjustments. In addition, empty links can no longer be added, making adding one by mistake harder. The ones that fall through the cracks are now clearly denoted as empty. 

Gutenberg 11.7 also ships a few formatting improvements. One of them is the ability to highlight text. Another is a new alignment option called “none,” intended for resetting alignment settings.

It is also worth noting that a breaking change the post pagination markup was introduced in PR 35092.

11.7

Enhancements

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

• Adjust wording for post format suggestions. (14124)
• Add a visually hidden label for the Search block. (35034)
• Add an accessible label to the Back button in preferences. (35340)
• Global Styles: Add accessible label to Back button. (35325)
• Template title: Include a button and label text when there is no post/page title. (35148)

Block Editor

• Allow other blocks to use the slash inserter. (35196)
• Enable ability to create Pages from the inline Link UIUI User interface. (35083)
• Polish quick inserter. (35339)
• Remove visual clue from alignment toolbar. (35080)
• Remove native block inserter onboarding tooltip. (35150)

Block Library

• Site Logo: Add duotone support. (35344)
• Columns block: Enable blockGap and vertical margin support. (34630)
• File Block: Only display PDF preview height RangeControl when embed is enabled. (35207)
• Navigation: Add transformations from a link to other allowed nav blocks. (34978)
• Query 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: Include a Query Pagination option on the block variations. (35347)
• Show “none” as an alignment option and use contextual text to clarify settings. (34710)
• Social Links: Add block gap support. (35236)
• Site Title: Add option to toggle home link. (31540)
• Site title: update block description. (34474)
• Transform Nav Links with children into Submenus. (34831)
• Add an option for displaying the label inside the Navigation Link block. (34952)
• Add typography settings for the Navigation Link block. (35324)
• Add option to remove/clear logo from the Site Logo block. (34820)

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data

• Add ‘context’ to the query parts type definition. (35069)

Components

• Add new Navigator components and use them in the global styles sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. (34904)
• Use _builtin property of classes in navigation link PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher. (35166)
• Item: Remove isAction and use onClick to decide if it should render as button. (35152)
• Make tooltip delay configurable with a property. (35246)

Design Tools

• Block gap: Only render CSSCSS Cascading Style Sheets. variable if corresponding theme setting is enabled. (35209)
• Format library: Add background color. (34680)
• Update: Custom gradient picker design. (34712)

Global Styles

• Add Padding to the root level of global styles. (35241)
• Add duotone 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. styles support. (34667)
• Extract the color palette to its own global styles screen. (35109)
• Update the rules to hide/show blocks in the global styles sidebar. (35178)
• Synchronize user custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. registration and UI visibility. (35427)
• Enqueue preset styles for all themes in the editor. (35424)

Icons

• Add color icon. (35187)
• Rename globe icon to url. (35032)

Site Editor

• Remove warning box from post terms. (35242)

Template Editor

• Add back button for isolated template part editor. (34732)
• Add template areas to template details. (35202)

Bug Fixes

Block Editor

• Block Editor: Fix duplicate clientIds when dragging patterns. (35124)
• Disallow creation of empty links using Link UI directly. (35060)
• Fix Link UI when hyperlink has an empty href value. (35043)
• Fix missing border in the quick inserter. (35307)
• Fix toggle off for Duotone control and Post Date block’s date picking control. (35024)
• useMultiSelection: Avoid crashing editor when block refs aren’t available. (35177)
• Rich text: fix internal paste across multiline and single line instances. (35416)

Block Library

• Embed: Remove meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area.-com from variations. (35146)
• Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.: Remove descendent space. (35273)
• Fix: Broken disabled select style in the editor area. (35135)
• Fix native BlockAlignmentControl. (35191)
• Gallery block: Fix Safari image sizing issue. (35309)
• Gallery block: Fix problem with caption showing encode tags when not selected. (35131)
• Gallery block: Unset alignment on new images to prevent it breaking layout. (35132)
• Post Template: Remove margins from the block. (35193)
• Post Title: Always use blockProps. (35286)
• Post Title: Only render link element if we have a post. (35284)
• Query Pagination: Don’t render an empty container. (35092)
• Navigation Link: Fix PHP notice in the Navigation Link block. (34984)
• Fix Post Comment Content block’s edit function. (35190)

Components

• Color Picker: Match figma metrics. (35039)
• Remove shift-stepping from range in RangeControl. (35020)
• Popover: fix __unstableBoundaryParent (35082)

Design Tools

• ToolsPanelItem: Add panelId check before calling toggle methods. (35375)

Media

• MediaUpload: Ensure current images in a gallery are selected after opening media library. (35070)

Post Editor

• Fix missing save label. (34948)
• Keyboard shortcut: Prevent post saving through keyboard if post saving locked. (35361)

REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/

• APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. Fetch: Improve isMediaUploadRequest check. (34417)
• Fix slashing when creating or updating a menu item. (35147)

Server Side Render

• Prevent empty renders in ServerSideRender component caused by changing props while already fetching markup (35433)

Template Editor

• Fix the styling of template details. (35285)

Widgets Editor

• inspector-section: Track isOpen to make a better isContextuallyActive() function. (35055)

Performance

• Edit Site: Optimize useSelect calls. (35213)
• Memoize entity records selectors properly. (34323)
• Widgets: Optimize useSelect calls. (35256)

Experiments

Block Library

• Polish responsive navigation modal, inherit justifications, fix submenu direction. (35077)
• Polish submenu indicator button. (35030)
• Fix: Adding nav items from existing menu. (34837)

Navigation Screen

• Remove i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. of help link in navigation editor. (35313)
• Add a tooltip to Navigation items in a setup state. (35139)
• Fix gap regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. in navigation screen. (35234)
• Truncate long menu names. (35188)
• Insert Navigation Link blocks by default in Navigation block. (34899)
• Migrate resolvers to thunks. (35044)

Full Site Editing

• Remove extra styling around “Post content” placeholder. (35243)

Documentation

Handbook

• Docs: Update testing overview with minor fixes. (35232)
• Fix typos, grammar in contributors release doc. (35268)
• Update nvm to latest 0.38.0 version in Handbook. (35125)
• Adding example readme template to contributing guidelines. (34847)
• Fix erroneous usage of the word master. (35392)

Packages

• Add instructions for installing plugins/themes with wp-env. (35064)
• MediaUpload: Reflect the correct filter name in the readme. (35240)
• Update LinkControl documentation with additional examples. (35199)
• Update doc block in block editor to fix documentation generation lint error. (35295)
• Add missing doc blocks for the exported members of edit-widgets store. (35263)

Code Quality

Block Editor

• Add colord package to block editor; Replace tinycolor2 with colord on duotone. (#34616), 34605, 35165, 35164)
• Migrate the toggleFeature action to a thunk. (35075)

Block Library

• Migrate store actions to thunks. (35031)
• Post Title Block: Fix argument numbering in ‘sprintf’. (35338)
• Replace tinycolor2 with colord on block library package. (35184

Components

• Refactor Navigator* folder structure, rename Navigator to NavigatorProvider. (35160)
• Replace tinycolor2 with colord. (35185)
• ToolsPanel component: Refactor to typescript. (34028)
• UnitControl component: Refactor utils to TypeScript. (35138)
• Do not export SimpleColorSwatch in Storybook examples for Item Group. (35179)
• Refactor Navigator to TypeScript. (35214)

Global Styles

• Simplify code that deals with user data for clarity. (35248)
• Simplify how we register preset metadata. (35228)
• Reorganize the global styles UI code base. (35218)
• Don’t output preset classes for colors defined by the theme (35514)
• Clean up logic to retrieve GS settings depending on context. (35437)

Post Editor

• Keyboard Shortcuts: Use a new selector getter method. (35385)

Navigation Component

• Refactor the preferences modal to use the new Navigator components. (35142)
• Navigation Editor: Remove duplicated stripHTML. (35189)

Widgets Editor

• Migrate edit-widgets store to thunks. (35110)

Tools

Build Tooling

• Remove polyfills from view.js block scripts. (35038)

Testing

• Add tests for Navigator*. (35163)
• Enable flaky tests reporter bot in PRs. (35029)
• Replace tinycolor2 with colord on getMostReadableColor util. Add unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. (34625)
• Try fixing flaky navigation test. (35380)
• Fix not archiving failure artifacts for flaky tests. (35379)

Plugins

• Add oandregal and tellthemachines to codeowners file. (35233)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Kudos to all the contributors that helped with the release. 👏

Thanks to @priethor, @matveb, and @javiarce for helping with the release!

Want to know more about recent Gutenberg releases? Check out the release post for Gutenberg 11.6!

#block-editor, #core-editor, #gutenberg, #gutenberg-new