What’s new in Gutenberg 12.3? (5 January)

“What’s new 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/…” posts (labeled with the #gutenberg-new tag) are published following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


Gutenberg 12.3 has just been released and is available to download, making it the first Gutenberg release of 2022!

This release contains fewer contributions than usual due to the holiday season that took place in some parts of the world in the last two weeks. However, it still has many important contributions, which is an excellent reminder of WordPress’ contributor diversity. Let’s dive into some of them.

Table of contents

New blocks to build with

We have three brand new blocks at our disposal.

Author Name 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.

As part of an effort to split the Post Author block into separate blocks to allow for even more layout options, the Author Name block has been released. This means you will have extra options to customize the author name to your liking.

Post Author Name

More atomic author-related blocks will follow in the future, like Author AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. or Author Bio.

Comments pagination: Next and Previous blocks

Continuing with the work that has been done on the Comments Query Loop blocks in previous Gutenberg releases, the Comments Next Page and Comments Previous Page blocks have been released.

They are the counterparts of the Next Page, and Previous Page blocks of the Query Loop, but built for the Comments 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.. They display links to navigate the comments forward and backward when not all of the comments are shown on the current page.

Comments Previous and Next Page

With the release of these two blocks, we conclude all the planned inner blocks for the Comments Query Loop. However, work on the Comments Query Loop blocks has not finished yet: more improvements are in the works.

More controls to customize

Blocks keep getting more powerful and this release is no exception.

Spacer block: custom units

Custom units can now be used to configure the Spacer block:

  • EM: Relative to parent font size
  • REM: Relative to root font size
  • VH: Viewport height
  • VW: Viewport width
Custom Units in the Spacer block

Group block: gap support & typography support

The Group block can now use the new Gap support, which adds the ability to choose the distance between the children items of the block.

This new gap setting is also available in the Row variation (added in Gutenberg 11.5), except that the gap is added horizontally instead of vertically. This allows you to have even more options to customize the layout to your liking.

Typography was added to the Group/Row blocks. This can come in handy when you need to define the typography settings for a whole section, like a 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., and you don’t want to duplicate the same typography settings over multiple blocks.

Set your site icon using the Site Logo block

There is now a new option in the Site Logo block settings to sync the site icon* to the Site Logo image. When the toggle is switched on, any updates made to the Site Logo block image are also applied to the site icon. This is an important flow that allows for parity between the Site Editor experience and the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings..

* Site icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps.

Set site icon with Site Logo settings

Restrict Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. creation for non-adminadmin (and super admin) users

From now on, only admins can create Navigation Menus. This matches the current menu system in WordPress.

When non-admin users add a Navigation block, they will now see a warning telling them they do not have permission to create Navigation Menus and instead will be presented with the option to select an existing one. This allows folks to still add navigation to their content in line with broader WordPress permissions.

Restrict Navigation Menu creation for non-admin users
Non-admin users can still add a Navigation block and select an existing menu.
If non-admin users create a menu, changes won't be saved
If a non-admin user tries to create a menu, changes won’t be saved.

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

There is a new Handbook page that lists all the core blocks included in the Gutenberg 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. It contains the name, description, categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., supports, and attributes of each block and it is generated automatically using their block.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. properties. This resource makes it easier for anyone who wants to extend or customize the core blocks.

Core Blocks Reference section in the Handbook

Changelog

These are all the changes included in this release.

Features

Block Library

  • Group/row blocks:
    • Add Gap support. (37459)
    • Add Typography support. (37456)
  • New Author Name block. (36001)
  • Comments Pagination:
    • New Comments Pagination Next block. (36562)
    • New Comments Pagination Previous block. (36912)

Enhancements

Block Library

  • Navigation:
    • Enable an even more compact setup state. (37089)
    • Use rems for padding. (37478)
  • Site Logo: Add option to set site icon from Site Logo block. (35892)
  • Paragraph: Add font family support. (37586)
  • Comments Template: Add comments pagination. (37610)
  • Embeds: Simplify the embed loading state. (37548)
  • Spacer: Add custom units for height and width. (36186)

Global Styles

  • Make the global styles subtitles font smaller. (37600)
  • Add support for nameless font sizes. (37410)

Colors

  • Allow color gradient popover to be above the color toggle. (37430)
  • Make color style labels simpler. (37493)
  • Use subtitle styles for the palette names. (37460)

Design Tools

  • Border panel: Collapse color controls. (37425)

Document Settings

  • Add class name to post author on edit post sidebar. (36269)

Site Editor

  • Update save panel’s cancel button from icon to visible text. (37310)

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)

  • Latest Posts: Add aria-label to featured links. (36251)

Bug Fixes

Block Library

  • Navigation:
    • Restrict Navigation permissions and show UIUI User interface warning if cannot create. (37454)
    • Ensure the overlay menu works when inserting navigation block patterns and that inner blocks are retained. (37358)
    • Fix navigation appender. (37447)
    • Revert all margins on navigation-item in the editor. (37587)
    • Fix page list issues in the overlay. (37444)
    • Show a UI warning when the user does not have permission to update/edit an existing Navigation block. (37286)
    • Try cascading nav styles through class names. (37473)
  • Query Loop:
    • Fix editable post blocks in Query Loop with zero queryId. (37629)
    • Changed the letter case for Post Type to Post type. (37499)
    • Query Pagination Next: Hide block if the custom query has no results. (37553)
    • Revert Query Pagination Next/Previous placeholder(36681). (37520)
  • Site Logo: Fix block alignment issues. (36627)
  • Gallery: Fix block registration hook priority. (37409)
  • Post Content/Title: Reflect changes when previewing a post. (37622)
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.: Specify paragraph as post excerpt tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) name. (37412)
  • Reusable Block: Fix embed handling. (37554)
  • Site icon: Fix site icon styling to display non-square site icons within a square button. (37570)
  • Template Part: Only display a missing notice in debug mode. (37404)
  • ServerSideRender: Fix loading state. (37623)
  • Comments Avatar Block: Show avatar drag handles only when selected. (37567)

Global Styles

  • Color editor discards colors with the default name. (37496)
  • Gradients are not being applied by class. (37597)
  • Impossible to edit the theme and default colors. (37497)
  • Blank site editor when theme name contains a period. (37167)
  • Lower the specificity of font-size CSSCSS Cascading Style Sheets. Custom Properties in the editor. (37526)
  • Use inset shadow on color indicators and adjust spacing. (37500)

Block Editor

  • Fix Enter handling for nested blocks. (37453)
  • Restrict delete multi-selected blocks shortcut. (37595)
  • Avoid using CSS variables for block gap styles. (37360)

Themes

  • Add comment-form and comment-list to default html5 theme support. (37536)
  • Avoid Duplicated “Theme File Editor” menu. (37592)
  • Fix conditional check “Theme File Editor” menu. (37616)
  • Fix duotone theme cache. (36236)

Template Editor

  • Avoid undoing issues when resetting parent blocks for controlled blocks. (37484)
  • Change the color of the welcome dialog close icon, so it is visible against a black background. (37435)
  • Template Editing Mode: Fix options dropdown. (37442)
  • Try to fix auto-resizing in template part focus mode. (37394)
  • Update the template list action labels. (37576)

Site Editor

  • Add customized indicators to plugin templates that have been customized. (37329)
  • Register block editor shortcuts. (37577)
  • Update regex to handle 404 template slug. (37579)
  • Parse shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. blocks outside the content. (37545)

Accessibility

  • Editor: Focus when navigation toggle receives state false. (37265)
  • Navigation: Only add dialog role when modal is open. (37434)

npm Packages

  • Fix missing peer dependencies where ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. is used indirectly. (37578)

Testing

  • Fix flaky Navigation block end-to-end test by mocking out URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org details endpoint to avoid 404. (37501)

Post Editor

  • Multi-entity saving: Allow publishing a post while not saving changes to non-post entities. (37383)

Components

  • ToolsPanel: Allow items to register when panelId is null. (37273)

Design Tools

  • Make block support tools panels compatible with multi-selection. (37216)

Documentation

Packages

  • Add automated core blocks documentation. (36183)
  • Added README for GradientPicker. (37614)
  • Add a link to metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.-block example in gutenberg-examples repo. (37633)
  • Fix parameter type in the render function of file block. (36262)
  • Add changelog entry for __experimentalIsRenderedInSidebar gradient components flag. (37457)

Handbook

  • Switch code distinction to JSX & Plain. (37348)
  • Fix a grammatical error in the Create Block tutorial. (37636)
  • Fix plugin sidebar tutorial not publishing. (37505)
  • Update plugin sidebar to new how to guide template. (37490)
  • Update “Local by Flywheel” name and URL. (37512)
  • Update Meta Boxes to a single page how to guide. (37621)

Code Quality

Compatibility with Core

  • Adds missing block template class properties. (37556)

Formatting

  • Fix lint issues. (37618)
  • Move block patterns compatibility code to lib/compat folder. (37451)

Packages

  • Data:
    • Block top level useSetting paths. (37428)
    • Deprecate receiveUploadPermissions. (37508)

Site Editor

  • Remove dead code. (37581)

Components

  • Storybook: Tweak configuration for v6.4 update. (37544)

Security

Tools

Testing

  • End to end:
    • Switch to using a $eval to fill user creation fields. (37469)
    • Fix and enable remaining navigation block end-to-end tests. (37437)
    • Add block editor shortcuts end-to-end tests. (37624)

Build Tooling

  • Add npm-run-all package to simplify running scripts. (37558)
  • Update caniuse to latest. (37588)
  • Fix pre-commit hook to build block documentation. (37613)

Performance Benchmark

Post Editor

VersionTime to first blockKeypress event
Gutenberg 12.36.7 s50 ms
Gutenberg 12.26.7 s49 ms
WordPress 5.86.9 s53 ms

Site Editor

VersionTime to first blockKeypress event
Gutenberg 12.36.7 s41 ms
Gutenberg 12.26.7 s43 ms
WordPress 5.84.3 s12 ms

Time to first block: firstBlock
Keypress event: type


Thank you, @gziolo and @annezazu for helping me with the release process, proofreading this post, and helping to select the release highlights.

Thank you, @javiarce for creating the assets included in this post.

And finally, thanks to all those who contributed to this release!

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

What’s new in Gutenberg 12.2? (22 December)

“What’s new 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/…” posts (labeled with the #gutenberg-new tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are published following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


If you observe the Gregorian Calendar, New Year’s Eve is fast approaching, which means that the time has come for the next release of Gutenberg!

Gutenberg 12.2 has just been released! It’s the last minor Gutenberg release in 2021. This release improves compatibility with the upcoming WordPress 5.9 release and 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. themes. Also, it brings new features, code quality improvements, and 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. You can find the release highlights below.

Table of contents

Seamless navigation between the Site Editor and the Template List

Gutenberg 12.2 takes the Template List one step beyond, improving its user experience and performance. Thanks to its new client-side routing, WordPress doesn’t need to reload the page when navigating between the Site Editor and the Template List, reducing the time spent rendering unneeded HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. code.

Improvements to post comments

Starting with Gutenberg 12.2, the Comments Query Loop block is now able to display nested comments. This improves user experience as it is now much easier to understand if a comment responds to another comment or is just a first-level comment.

Also, the new Comments Pagination Numbers block allows displaying page numbers inside the Comments Pagination block, which in turn can be used inside the Comments Query Loop block. This improves the UIUI User interface because users can quickly navigate the comments using the page number.
Also, the pagination in the Comments Query Loop block now works similar to the pagination for posts.

A new home for border controls

Although lots of blocks are already taking advantage of border supports, this release switches border supports to the ToolsPanel, and sets which border properties are displayed in the ToolsPanel by default. The ToolsPanel, first introduced in Gutenberg 11.3, offers progressive discovery options for those provided through block supports, improving the user experience and consolidating the 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. UI.

New font size labels in the FontSizePicker component

Gutenberg 12.2 improves the way font sizes are displayed in the sidebar by using a sequence of numbers (1, 2, 3, 4, 5) as labels for the font sizes. These simplified labels can accommodate use cases with complex CSSCSS Cascading Style Sheets. values, helping users understand the available font sizes.

Improved color picker

More components are being iterated in this release. In an effort to reduce sidebar clutter and improve the design tools user experience, all blocks, including those that use custom color implementation, can now take advantage of the new dropdown-based color picker. This improved UI is easier to use, especially when editing a few colors back-to-back.

Preview for Block Styles in the WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor

While Gutenberg 12.0 introduced block styles preview on hover for the Block Editor, this release brings this functionality to the Widgets Editor, too. It’s now possible to preview style variations in the Widgets Editor when editing blocks that support this (e.g., Image, Table, Button blocks) by hovering or focusing over the style name, for full 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) support.

Changelog

Enhancements

Block Library

  • New block: Add Comments Pagination Numbers block. (36890)
  • Comment Template block: Handle nested comments. (36065)
  • Comments 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.: Improve context handling in inner blocks. (37196)
  • Image: Reflect media deletion in the editor. (35973)
  • Navigation:
    • Add navigation blocks post-processing after migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. from menu items. (36950)
    • Refactor modal padding to be simpler and more flexible. (37323)
    • Remove Navigation Menus from the Appearance menu. (37212)
    • Add clearance for appender in submenus. (36720)
  • Refactor handling of padding for group and column blocks. (37356)
  • Template Part: Add actions that fire during the loading process of block template parts. (36884)

Styles and design tools

  • Add the Welcome Guide option to the More Global Styles Actions dropdown. (37180)
  • Make the Blocks section more distinguishable. (37293)
  • Move the Edit colors button to a standard menu item. (36842)
  • Move Duotone palette to the bottom of global styles gradients. (37253)
  • Border controls: display border properties in the ToolPanel. (34061)

Components

  • FontSizePicker: Use an incremental sequence of numbers as labels for the available font sizes at the segmented control (conditionally). (37038)
  • ColorPalette: Improve accessibility and visibility. (36925)
  • ToolsPanel: Standardize input control label margin. (36387)
  • Unify styles for ColorIndicator with how they appear in Global Styles. (37028)
  • Update PanelColorGradientSettings component to use dropdowns. (37067)

Site Editor

  • Add the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. back to the Appearance menu. (37175)
  • Add client-side routing for Site Editor. (36488)
  • Add a new aria-pressed attribute to the Toggle navigation button. (37351)
  • Template revert flow: Make label description source agnostic. (37004)

Packages

  • Scripts: Enable ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Fast Refresh for block development. (28273)
  • List Reusable Blocks: Refactor ImportForm into a functional component and use hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (36938)

Widgets Editor

  • Implement preview for blocks. (37012)

Post Editor

  • Template Part block should not be available in the Post Editor inserter. (37157)

Bug Fixes

  • Remove 4 instances of gutenberg text-domain from CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (37229)

Block Library

  • Fix return type in the DocBlockdocblock (phpdoc, xref, inline docs). (37352)
  • Fix deprecated usage of passing null to explode function. (37392)
  • Gallery:
  • Fix color issue for captions with hyperlinks in the Gallery block. (37033)
  • Fix documentation and function naming for gallery block registration in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (37132)
  • Remove placeholder border. (37050)
  • Post Comments:
  • Fix form-submit styles by adding button classes to the submit button in the post-comments block. (37245)
  • Fix width of the post comment form input. (37238)
  • Use block markup for the comment form button when using a block theme. (37315)
  • Comments Pagination Block: Add default styling. (37057)
  • Image:
  • Set image display mode to grid when no alignment is set to align caption onresize event properly. (35787)
  • Fix resizer controls being hidden in Safari when switching between alignments. (37210)
  • Navigation:
  • Fix gutenberg_ prefixed function references in Core. (37021)
  • Fix navigation justifications. (36991)
  • Fix vertical alignment of page list in the modal. (37321)
  • Remove hardcoded typography units. (37349)
  • Fix vertical layout. (37009)
  • Switch to addEventListener event for load event in the navigation block view script. (37135)
  • Don’t request the deprecated navigation areas endpoint outside of the Gutenberg 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. (37187)
  • Navigation Link Control: Hide the Transforms component when no options are available. (37284)
  • Remove the deprecated navigation area block from the inserter. (37026)
  • Query Loop: Add useBlockPreview component, fix alignment of the Query Loop block in the editor. (36431)
  • Query Pagination: core/query-pagination-next and core/query-pagination-previous blocks: change the markup on the first and last pages of the pagination. (36681)
  • Search: Fix application of border color class in the editor. (37242)
  • Template Part:
  • Fix isMissing condition check. (37370)
  • Use Core version of template and template part post types and REST endpoints for WordPress 5.9, with backward compatibility for WordPress 5.8. (36898)
  • Update the micromodal package to include a click-through fix. (36837)

Components

  • Card: Support the extraSmall option for the size prop. (37097)
  • Drop Zone: Fix HTML drop issues with the Windows browsers. (37151)
  • Don’t load Radio and RadioGroup components directly. (36934)
  • DuotonePicker typo fix. (36662)
  • Element: Ensure that the package uses the up-to-date React types. (37365)
  • Fix incorrect rendering of ToggleGroupControl‘s active state. (37332)
  • Hide the remove control point button because removing it would break gradient control. (37186)
  • Import experimental Heading and Text Components. (37290)
  • Make the color popover on the gradient picker appear as expected. (37115)
  • Remove unused reakit-utils dependency from peer dependencies. (37369)
  • Storybook: Fix deprecated disabled key. (37112)
  • ToggleGroupControl: Fix extra update on incoming change. (37224)

Site Editor

  • Allow global styles sidebar panels to fill vertical space. (36845)
  • Display a notice if export fails. (37131)
  • Fix edit template part link in headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. dropdown. (37249)
  • Fix template resolution to give precedence to PHP templates defined in a child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/.. (37074)
  • Hide the block appender in the Template Part editor. (37213)
  • Improve notification when saving content in the Site Editor. (36897)
  • Improve handling of parsed requests. (37209)
  • Sync Export 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. error codes. (37347)
  • Template Editor Mode: Hide editor mode switcher. (37359)
  • Use server definition for the Template Areas. (37215)
  • Fix the white screen of death on the Templates page when user avatars are disabled. (37458)

Styles

  • Allow selector ordering to ensure theme.json root selector margin takes precedence. (36960)
  • Custom keys from theme.json: Fix kebabCase conversion. (37380)
  • Do not remove theme presets if defaults are hidden. (37008)
  • Fix CSS Custom Properties for presets in the Site Editor. (36851)
  • Fix how appearanceTools works. (37254)
  • Fix styles for previews and patterns. (37296)
  • Font sizes: Update default values. (37381)
  • Remove CSS that causes conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with theme.json. (36424)

Design Tools

  • Border Style Control: Update styling for consistency with border width control. (37244)
  • Border panel:
  • Don’t restore deselected border color when width gets changed. (37049)
  • Update the value of the ColorPicker component when color is cleared. (37048)
  • Gradients
  • Fix clearing a custom gradient from throwing a React warning. (37051)
  • Enable adding custom gradient when gradients are disabled. (36900)

Compatibility with Core and library code

  • Fix array key warning in block supports layout. (37101)
  • Templates: Search for old template names in the parent theme too. (36910)
  • Fix theme requirement validation when using WordPress 5.8. (37226)
  • Fix WordPress 5.9 check for conditionally running code. (37235)
  • Fix mistake in the_remove_theme_attribute_in_block_template_content function. (37137)
  • Gallery: Enable the new gallery block by default if running in Core. (37134)

Packages

  • Core Data: Fix returning empty array in the getEntityRecords function for unknown entities. (36984)
  • Include @babel/core as a dependency where applicable. (37328)
  • Format library: Fix unsetting highlight color. (37062)

Block Editor

  • Mark the last change as persistent on save. (36887)
  • Fix content loss when ungrouping template parts or reusable blocks. (37280)
  • Simplify the RESET_BLOCK action to fix the loss of content when using template part focus mode. (37283)

Post Editor

  • Multi-Entity Saving: Decode HTML entities in item titles. (37353)

Documentation

  • Update documentation related to schemas. (37294)
  • Remove versioning in theme schema descriptions. (37165)
  • Fix the broken link on the plugin description page. (37362)
  • Handbook:
  • Add information about skip links to the block theme overview. (36555)
  • Add closing ticks for blockGap code example. (37338)
  • Add how-to guide documentation template. (36694)
  • Add link and details for npx in create block tutorial. (37376)
  • Consolidate React Native documentation. (36685)
  • Fix a link to the how-to guide template. (37191)
  • Move classes used in the navigation block from the component to the new readme. (37375)
  • Update Format API how-to guide. (37298)
  • Update broken links. (37121)
  • Improve formatting of headings in the contributors’ guide. (36689)
  • Fix type for prefix transformation. (36362)
  • Fix broken links in the Resources section. (37307)
  • Remove the semicolons from the 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. examples. (37129)
  • Packages:
  • Block Editor:
    • Add a documentation note about inner blocks and excerpts. (36405)
    • Update example of usage for suggestionsQuery component. (37281)
  • Componentes:
    • Add missing changelog entries. (37384)
    • Fix code formatting for card components. (37268)
    • Fix importing from the wrong package. (37192)
    • Fix missing link for shortcut documentation. (36800)
    • Update QueryControls README.md. (37233)
  • Site Editor: Update support documentation URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in the Welcome Guide. (37176)

Code Quality

Compatibility with Core

  • Better synchronization between Gutenberg and Core code. (37141)
  • Move WordPress 5.9 wp-admin menus compatibility code to lib/compat folder. (37257)
  • Move the block page templates hook into compat/5.9 folder. (37142)
  • Move template loader hooks and functions into lib/compat folder. (37149)
  • Synchronize wp_is_block_theme function and block-templates block support with Core. (37218)

Global Styles

  • Do not register Global Styles 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. in WordPress 5.9. (37282)
  • Port Global Styles code to lib/compat/wordpress-5.9:
  • CSS custom properties. (37334)
  • Front assets. (37335)
  • Rename WP_Theme_JSON_Resolver methods to make them compatible with Core. (37393)

Packages

  • Dependency Extraction Webpack Plugin: Sort externalized dependencies report. (37377)
  • Block Editor:
  • Iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. component: Use block settings to pass assets. (37193)
  • Remove duplicate block styles. (37133)
  • Specify the WordPress versions where API is deprecated. (37150)
  • Components
  • Refactor DatePicker into a functional component. (36835)
  • Storybook: Update to version 6.4. (37367)
  • Data
  • Ensure that redux is listed as a dependency. (37364)
  • wordpress/data: Refactor use-select component in preparation for adding types. (37017)
  • Scripts: Update dependencies shared with other WordPress packages. (37395)

Site Editor

  • Remove unused PHP code. (36997)
  • Revert Site Editor: Set the on the list page to be the same as the CPT name. (37270)

Block Library

  • Remove gutenberg_ prefix from @wordpress/block-library. (37341)
  • Block Library: Rename Query Pagination blocks. (37091)

Tools

Testing

  • End-to-end Tests:
  • Increase delay in image block end-to-end test to fix intermittent failure when clearing URL field. (37136)
  • Update Multi-Entity Saving test to improve reliability. (37139)
  • Sanitize flaky test report file names. (37390)
  • Retry login again after a bad nonce request to prevent intermittent test failures. (37219)
  • Fix Multi-entity saving and Template parts related tests. (37333)
  • Fix Heading test. (37382)
  • Re-enable most of the navigation block end-to-end tests. (37214)
  • Use global transients for PHPUnit tests. (37122)
  • Fix usage of useSetting('color.palette'). (37108)
  • Add tests for the new gallery hooks. (36801)

Linting

  • ESLint:
  • Add support for ESLint v8. (36283)
  • Fix Babel config resolution when a custom ESLint config is present. (37406)

Build Tooling

  • Specify PHP version in Composer. (37007)
  • Remove unused jest-serializer-enzyme dependency. (37373)
  • Remove some labels from the Experiments section of the changelog. (37098)
  • npm:
  • Fix package dependencies issues discovered with pnpm. (37396)
  • Use the latest minor version of webpack in Gutenberg. (37371)
  • Fix build failure on Windows. (37189)

Performance benchmark

VersionTime to render first blockKeypress event (typing)
Gutenberg 12.25.672 s42.38 ms
Gutenberg 12.15.484 s37.17 ms
WordPress 5.85.807 s46.5 ms

Thank you, @priethor, for coordinating the release process, proofreading, and helping to select release highlights!
Thank you, @jameskoster and @joen for helping me to prepare visual assets and proofreading the release post!
Thank you, @mamaduka, for uploading the plugin to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/!
Kudos to all the other contributors who have helped to make this release possible.

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

What’s new in Gutenberg 12.1 ( 8 December)

“What’s new 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/…” posts (labeled with the #gutenberg-new tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are published following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


Gutenberg 12.1 is here! the contributors continue to work tirelessly to prepare WordPress 5.9 and fix the remaining flows and bugs for the release.

Table of Contents

Template List View

This release marks the return of the template list view allowing users to navigate between the home page and the different templates and template parts in the site editor. It’s an important piece of the site editor puzzle. The current iteration of the design favors simplicity and usability. Iterations implementing client side navigation and mosaic view might be added in the future.

Global Styles

The global styles panel saw a big number of improvements in this cycle including:

  • The typography panel has been updated to show a simplified elements view allowing users to switch easily between text and link elements typography styles.
  • The color palette views now show the duotone presets. Also, users can now define custom gradients to be made available throughout the website.
  • Transparency support for the different color pickers in the Global Styles panel.

Gutenberg 12.1 includes several Navigation block improvements once again. For starters, users are not prompted to name their menus when adding starting a new one, as it is generated automatically, although the name can still be edited in the 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.. Also, the UXUX User experience around configuring the menu dropdown options has been improved, only displaying the options when the selected menu actually has submenus, and disabling toggling the Show arrow option when `Open on click` is enabled, to avoid confusion.

Ensuring a frontend fallback in case no menu is selected in the Navigation block has received lots of thought in the last weeks. Thanks to this, the Navigation block will now render a Page List block when visiting a page with empty navigation. However, this default behavior can be changed by developers via the new block_core_navigation_render_fallback 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., and completely opt-out by simply adding:

add_filter('block_core_navigation_render_fallback', '__return_false');

Last, but not least, as the block becomes stable for its release in WordPress 5.9, an 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. change should be noted: the menuId attribute has been renamed to ref to better align with other blocks’ attribute names. A new deprecation has been added to accommodate this change and existing Navigation blocks will get migrated to the new version.

Miscellaneous editor UX improvements

If you ever tested the editor, you’ve probably already noticed these little plus buttons or what we call block appenders that appear as you navigate and click throughout the editor. These appenders would often create layout shifts and jumps as you select different blocks. The issue is now finally resolved as the behavior of the block appenders has been changed to rely on fixed positioning.

Another small but important change to the user experience in the editor is the addition of a new keyboard shortcut to unselect all blocks. Users could hit Escape to enter navigation mode for better keyboard navigation in the canvas, and starting in Gutenberg 12.1, you can also Escape a second time when in navigation mode to unselect all blocks.

Block Themes

The contributors also focused on improving the developer experience for block themes. If you’re a block theme author, there are two important changes that you should be aware of in Gutenberg 12.1.

First, the block-templates and block-template-parts folders have been renamed to just templates and parts respectively in preparation for upcoming features, like the addition of styles and patterns folders. Existing block themes will continue to work without any change, the former folders are still supported but we encourage you to use the updated names from now on. The documentation has been updated to reflect that change.

The second is the addition of a new flag to the theme.json settings section called appearanceTools. Theme authors can set this flag to true to opt-in into all the various appearance tools available including border color, radius and width, link color, block gap, margin, padding, line height and any appearance tool that might be added in the future. Generic block themes in the repository may consider enabling this flag automatically to avoid having to keep track of all the additions that come over time.

Changelog

Enhancements

Site Editor

  • Add Template List View. (36379)
    • Show theme, 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 or author in Added By column with appropriate icon or avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.. (36763)
    • Add success and error snackbars. (36808)
    • Implement “Add New”. (36592)
    • Use table layout. (36707)
    • Set the document title properly. (36805)
    • Add rename action. (36879)
    • Update delete template button. (36815)
  • Make Reusable blocks available in the Site Editor. (36511)
  • Remove the Styles link in Site Editor. (36637)
  • Update and align template descriptions. (36000)
  • Add icons to navigation sidebar items. (36893)
  • Allow editing custom template title. (36933)
  • Only render the site editor canvas when the global styles are loaded. (36643)
  • Remove extra border radius from the canvas. (37022)
  • Update navigation sidebar responsiveness. (36638)
  • Update resize handle styling in template part focus mode. (36410)

Global Styles

  • Add elements support to the typography panel. (36718)
  • Add the gradient palette editor. (36820)
  • Add transparency support to the colors panel. (36840)
  • Add read-only duotone palette. (36920)
  • Do not show default palette if theme opts-out. (36639)
  • Make user able to change all color palette origins. (36674) (36747) (36817)
  • Rename core origin key to default for presets. (36645)
  • Count all color palette origins on the palette counter. (36922)
  • Add appearanceTools flag 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. to opt-in into appearance UIUI User interface controls. (36646)
  • Switch the borders panel to ToolsPanel for displaying UI. (33743)
  • Improve the design and copy of the color panels. (36959) (36994) (37015) (37016) (36921) (36963) (36622) (36965) (36819) (36748) (36940) (36684)
  • Schemas: Allow custom blocks in theme.json styles. (36411)

Block Editor

  • Improve the position of the block appenders and behavior. (36656) (36605)
  • Keyboard shortcuts: Double escape unselects all blocks. (36945)
  • Adjust order of theme blocks and reorder inserter items. (36719)
  • Block Editor List View: Use anchor elements instead of buttons. (35655)

Block Library

  • Block Library: Add the Comments Pagination block. (36872)
  • Comment Author Avatar block: Add spacing support. (36322)
  • Navigation block: Only show submenu options and Show arrow button when relevant. (36826)
  • Navigation block: Implement suitable fallback for Nav block on front end of site when no menu selected. (36849) (36724) (36850) (36854) (36740)
  • Navigation block: Rename navigationMenuId to ref. (36739)
  • Navigation block: Automatically generate navigation post title. (36760)
  • Template Part block: Remove color, spacing, layout options and reusable block conversion. (36571) (36918)
  • Gallery block: Turn on auto-migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of v1 Gallery blocks to v2 format when edited. (36191)
  • Update 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. placeholder graphic. (36712)
  • Post Featured Image: Move width and height controls into the Dimensions panel via SlotFill. (36540)

Components

  • Font Size Picker: Allow non-integers as simple CSSCSS Cascading Style Sheets. values and in hints. (36636)
  • Divider: Improve vertical and RTL support. (36579)
  • ItemGroup: Experimenting with chevron icon. (36654)
  • Toggle Group Control: Add tooltip. (36726)
  • Modal: Support ref forwarding. (36831)
  • ZStack: Support RTL layouts when applying offset. (36769)

Themes

  • Move the theme editor under tools for FSE themes. (36723)
  • Update the block theme folders to templates and parts. (36647)

Bug Fixes

Global Styles

  • Make the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. color palette opt-in for themes with not theme.json. (36496)
  • Fix: Apply by slug on all origins. (36841)
  • Fix: Theme colors cannot override defaults. (36811)

Block Library

  • Cover block: Fix undo trap. (36807)
  • Navigation block: Add page list to navigation direct insert conditions. (36591)
  • Navigation block: Fix Nav block editing wrong entity on creation of new Menu. (36880)
  • Navigation block: Scale submenu icon. (36714) (36948)
  • Navigation block: Fix non existent menu handling. (36507)
  • Navigation block: Fix page list missing button styles when set to open on click. (36601)
  • Navigation block: Include cascading properties in deprecation. (36432)
  • Navigation block: Remove absorb toolbar prop. (36990)
  • Navigation block: Add accessible labelling to submenu buttons. (36631)
  • Navigation block: Fix space-between. (36441)
  • Template Part block: Fix slug generation when creating through the block placeholder. (36764)
  • Gallery block: Allow clicks within replace media placeholder state. (36804)
  • Gallery block: Fix stuck image size options loader. (36806)
  • Post Featured Image: Add a “Reset” button. (36572)
  • Post Title block: Fix render error when setting Page to homepage. (36786)
  • Query Pagination Next/Previous blocks: Remove text and link color support. (36954)

Site Editor

  • Stabilize theme export 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/. endpoint. (36559) (36908)
  • Template list view fixes. (36947) (36822) (36705)
  • Templates Rest API endpoint: Add missing ‘is_custom’ prop. (36911)
  • Templates Rest API endpoint: Add origin and author. (36896)
  • Validate the postType query argument. (36706)
  • Fix site editor region navigation. (36709)
  • Navigation Sidebar: Add aria-current=”page” to active navigation item. (36946)
  • Navigation Sidebar: Highlight “Site” in the navigation panel. (36762)
  • Navigation Sidebar: Show all templates and template parts on the site editor list screens. (36761)

Components

  • Color Picker: Re-instate debounce and controlled value to fix issue with gradient picker. (36941)
  • ColorPicker: Replace hardcoded “blue” with theme color. (36153)
  • Tools Panel: Fix race conditions caused by conditionally displayed ToolsPanelItems. (36588)
  • DateTimePicker: Set PM hours correctly. (36878)
  • LinkControl: Fix wordbreak for URLs. (36993)
  • Offset the parent iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. when computing Popover position. (36876)
  • ToolsPanel: Prevent tools panel menu increasing empty panel height. (36895)
  • Update destructive tertiary button styles, and template list. (36915)

Themes

  • Block Templates: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notices on WP 5.8. (36964)
  • Don’t try and render unstable location if Nav block has ID. (36863)

Design Tools

  • Border panel: Update to display multiple palette origins. (36753)
  • Cover: Move BoxControlVisualizer in the markup to make it visible. (36635)
  • Fix duotone first render in Safari. (36754)

Icons

  • [Icons]: Fix Comment Author Name icon. (36738)
  • [Icons]: Fix property names for Comment Author Avatar icon. (36737)

Milaceanous

  • Block Styles: Add a separating margin to the default picker. (36976)
  • Block Styles: Check for existence of scroll container. (37010)
  • Data package: Update types and fix type error. (36190)
  • Writing Flow Multi-select: Ensure post title content editable after multi-select. (36843)
  • Insertion point bar: Hide onBlur and onMouseLeave. (36798)
  • Dependency Extraction Webpack Plugin: Make the plugin work when using optimizations.runtimeChunk = 'single'. (26214)
  • Fix document typo. (36776)
  • Prevent CleanWebpackPlugin webpack plugin from deleting webpack assets. (35986)
  • Hide the columns inserter in pattern previews. (36626)
  • Update theme.json version. (36917)
  • Multi-entity save: Only set site entity to pending if really saving. (36573)
  • Widgets Editor: Add CSS fix for wp_footer called multiple times. (36759)
  • Fix the templates REST API endpoint for the almost pretty permalink config. (36881)

Performance

  • Improve performance of wp_navigation lookup. (36891)

Experiments

  • Add __unstable-large size variant on InputControl SelectControl UnitControl. (35646)
  • Add experimental ConfirmDialog. (34153)

Documentation

  • Add brief information about blockGap to the theme.json how-to guide. (36558)
  • Add placeholder in URLInput documentation. (36799)
  • Block Supports: Update block supports documentation after typography reshaping. (36894)
  • Alphabetize the How to Guides section. (35904)
  • Fix broken link to wordpress/stylelint-config. (36936)
  • Improvements on Create a Block Tutorial from Block Editor handbook. (36553)
  • Update history.md with description of the page. (36888)
  • Update Getting Started with info to stay informed. (36498)
  • Update Pattern block categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and add documentation. (36144)
  • Various inline docblockdocblock (phpdoc, xref, inline docs) corrections. (36793)
  • ToolsPanel: Update panel readme and stories. (36557)
  • Change .nvmrc and documentation for Node.js version (LTS to 14.18.1). (36744)

Code Quality

  • Blocks: Refactor generator-based actions to thunks. (36468)
  • Remove useless bubblesVirtually prop from BlockInspector. (37024)
  • Remove EditPostSettings context provider. (36949)
  • Report dependencies externalized with Dependency Extraction Plugin. (35106)
  • Comment Author Avatar block: Escape styles attribute. (36988)
  • Clarify 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. context for PostTemplateActions’s “New” label. (36679)
  • Data: Remove usage of deprecated register methods. (36344)

Global Styles

  • Move Global Styles code to lib/compat/wordpress-5.9 folder. (36978)
  • Rename gutenberg_ to wp_ for some functions that land in WordPress 5.9. (36913)
  • Update global styles public API. (36610)
  • Update the WP_Theme_JSON_Gutenberg class to be like the core one. (36973)
  • Update the WP_Theme_JSON_Resolver_Gutenberg class to be like the core one. (36974)
  • theme.json: Sort keys alphabetically. (36968)
  • Update function names for the public global styles API functions. (36907)

Block Library

  • Navigation: Remove outdated separate “Home” link styles. (36608)
  • Post Featured Image: Remove withNotices HOC. (36596)
  • [Comment Author Avatar]: Remove extraneous color link support flag. (36956)
  • Deprecate navigation areas. (36981) (36727)
  • Remove unstable max pages attribute from Nav block. (36877)
  • Remove reference to gutenberg_, swap with wp_. (36652)
  • Add plugin metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. data to Nav Area block deprecation notice. (36777)

Testing

  • Reorganize end-to-end tests folders and files. (36734)
  • Scripts: Upgrade Puppeteer to v11. (36040)
  • Update template controller 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. now that author support is in WP core. (36987)
  • end-to-end Tests: Fix failing image end-to-end test by waiting for required element. (36982)
  • Remove block template resolution unit tests. (36855)

Performance  Benchmark

VersionTime to Render First BlockKeyPress Event (typing)
Gutenberg 12.17.22s38.68ms
Gutenberg 12.06.96s38.34ms
WordPress 5.87.46s48.96ms

Thank you to @critterverse for the assets included in this post, @priethor for coordinating the release process and proofreading and to all those who contributed to this release!

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

What’s new in Gutenberg 12.0 ( 24 November)

“What’s new 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/…” posts (labeled with the #gutenberg-new tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


It’s the end of November and Gutenberg 12.0.0 has been released! With contributor efforts being geared towards preparing for WordPress 5.9, this release is more maintenance-focused but still offers a few new features as well as 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.

Table of Contents

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. Styles Preview

Until this release, Block Styles appeared in both the block’s toolbar and in the editor’s 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.. These previews, although rather small, added to the overall height of the sidebar accordion. Gutenberg 12.0 moves the sidebar previews so they only appear when the style is hovered or has keyboard focus. This reduces the overall sidebar footprint and also puts more emphasis on the style’s name.

Before this release, the Featured Image block did not provide a clear representation during its placeholder state, displaying a selection box with a fixed height. With Gutenberg 12.0 the block’s placeholder state is a better representation of how it would look when using real images, as it displays a placeholder image that respects both the height and width settings.

Paragraph block combined typography controls

As of 12.0.0, the Drop Cap setting for the paragraph block has been moved from its own section in the Block Settings sidebar into the Typography section. This change keeps all Typography related controls together for the block to provide a consistent experience.

Site Editor Welcome Guide

In preparation to stabilize and release the block theme Editor in WordPress 5.9, a new welcome guide has been added to help users get started with both the Editor and the Styles sidebar.

Site editor welcome guide modal.

Official 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. Schema updates

Official schemas for block.json and theme.json were introduced with Gutenberg 11.9.0. This release provides some updates as well as new URLs to easily access them:

The URLs above redirect to the latest version of the schema but as WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. versioned are released, they can also target specific versions of WordPress starting with WordPress 5.9!

Theme.json example.

New Developer Experience section in the Changelog

Recently, contributors have been putting an even bigger focus on improving the developer experience, and there is more to come. So much so, that we are introducing a new section for it in the changelog. This speaks to the commitment from contributors to not only create a great experience for users of Gutenberg but also those that extend it. To keep updated or contribute to the discussion, you can check the recent GitHub discussions on Developer Experience.

Changelog

Enhancements

Block Library

  • Move WP_REST_Block_Navigation_Areas_Controller from Gutenberg to Core. (36374)
  • Change all the uses of “website” to “site”. (36220)
  • Featured Image: Let Featured Image block inherit dimensions, look like a placeholder. (36517)
  • Navigation: Enable Previews for Navigation Link Blocks. (36412)
  • Navigation: Apply 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. functions to Nav block menu drops when selecting existing Menu. (36301)
  • Navigation: Refactor and simplify setup state. (36375)
  • Navigation: Rename fse_navigation_area to wp_navigation_area. (36460)
  • Navigation: Return wp error from wp_insert_post. (36483)
  • Paragraph: Merge text settings into typography panel. (36334)
  • Remove textdomain from calendar block. (36500)

Site Editor

  • Add welcome guide. (36172)
  • Update back button URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (36313)
  • Improve compatibility with menu endpoints WordPress 5.9. (36372)
  • ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. to any errors coming up in gutenberg_migrate_menu_to_navigation_post. (36461)
  • Change edit links for templates and template parts. (36294)
  • Update site editor title truncation. (36436)
  • Add template_type guards. (36318)

Block 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.

  • Update schema to require either a type or an enum. (36267)
  • Add _wp_array_set and _wp_to_kebab_case to 5.8 compat. (36399)

Design Tools

  • Letter spacing: Update label copy. (36385)

Style

  • Add block icon next to blocks list. (36520)
  • theme.json: Adds a setting property that enables some other ones. (36246).
    • This was incorrectly added to the 12.0.0 milestone.
  • Block Styles: Show style preview when hovered or focused. (34522)

Icons

  • Add the missing comment edit link icon. (36565)
  • Remove hard coded color from query pagination icons. (35837)
  • Remove hard-coded values on icons. (36564)

Components

  • ToolsPanel: Allow additional props on ToolsPanel. (36428)
  • Typography Panel: Make letter spacing jsDoc and prop use consistent. (36367)

Bug Fixes

Block Library

  • Fix background colours in nested submenus. (36476)
  • Fix colour rendering in Navigation overlay. (36479)
  • Fix duplicate custom classnames in navigation submenu block. (36478)
  • Fix submenu justification and spacer orientation. (36340)
  • Group – Fix overzealous regex when restoring inner containers. (36221)
  • Hide visilibility and status for navigation posts. (36363)
  • Nav block menu switcher – decode HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities and utilise accessible markup pattern. (36397)
  • Navigation: Fix click-button size, submenu directions, scrollbars. (36215)
  • Page List block: Fix space before href attribute. (36505)
  • Page List: Use core entities instead of direct apiFetch. (36531)
  • Post Comments Form: Ensure typography styles are applied to child elements. (36425)
  • Post title block default CSSCSS Cascading Style Sheets.: Add a break-word rule by default. (35703)

Block API

  • Use firstChild and lastChild when parsing lists from MS Word. (36019)

Full Site Editing

  • Add the ability to opt-out of Core color palette V2. (36492)
  • Fix layout shift in core/post-featured-image block with isLink enabled. (36552)
  • Template Part Block: Add some guards. (36324)
  • Chore: Add rewrite false to global styles CPT. (36273)
  • Revert “theme.json: Adds a setting property that enables some other ones”. (36477)
  • Update more references to __experimental menu endpoints to make them stable. (36386)

Site Editor

  • Fix site editor reset styles in WP 5.9. (36390)
  • Site Editor – prevent loading state from showing the adminadmin (and super admin) menu. (36455)

Global Styles

  • Replace get_theme_file_path in theme_has_support. (36398)
  • Chore: Fix small typos on the rest endpoints. (36272)

Block Editor

  • Strip metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. tags from pasted links in Chromium. (36356)
  • Add webp extension in filePasteHandler and getPasteEventData. (36361)
  • Fix mobile horizontal scrollbar. (36567)
  • Polish metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. container. (36297)

CSS & Styling

  • Update theme styles for the code block. (36282)

Documentation

Handbook

  • “npm install” suggestion provides a better learning experience. (36217)
  • Added specific links to agenda and notes posts related to core editor meetings. (36199)
  • Schemastore – $schema is VS Code-specific. (36179)
  • Update GIF image in documentation with wp.org schema URL. (36456)
  • Update Versions in WordPress to include 5.9. (36156)
  • Update theme.json schema to refer to wp.org URL. (36332)

Components Package

  • Update combobox-control component readme. (36413)
  • Update wordpress/components changelog. (36448)

Developer Experience

  • Add block.json schema definition to core blocks. (35900)
  • Add pattern to name key in block.json Schema. (36343)
  • Update schema URL to wp.org domain. (36316)
  • Allow block.json attribute type to be an array. (36295)
  • Fix schema to allow for custom blocks in theme.json. (36341)

Code Quality

  • Change @Package to WordPress in block-library. (36494)
  • postcss-themes: Fix PostCSS 8 deprecation warning. (36284)
  • Data: Clean up registerGenericStore param names. (36300)
  • Prepare navigation php code for core patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing.. (36336)
  • Add comment to Remove 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. to allow WP variables after min version is 5.8. (36281)
  • Update: Centralize safe_style_css usages. (36280)
  • DEWP: Fix deprecation warning. (36285)

Tools

Testing

  • E2E: Add more Cover block tests. (36321)
  • Fix Performance CI tests and make them always use the latest major as base branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch".. (36463)
  • Fix failing tests and compatibility with 5.9. (36368)
  • Add integration tests with core blocks schema validation. (36351)
  • Skip flaky image block test. (36446)
  • Theme switch on the global styles 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/. 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.. (36277)

Build Tooling

  • Add TypeScript for builds and tests. (36260)
  • stylelint-config: Widen the acceptable version range for the ‘stylelint’ peerDependency. (36518)
  • Update Babel packages to 7.16 version. (36244)

Fix not transforming logical assignments for packages. (36484)

Performance  Benchmark

VersionTime to Render First BlockKeyPress Event (typing)
Gutenberg 12.06.18s39.99ms
Gutenberg 11.95.89s40.75ms
WordPress 5.86.56s49.54ms

Thank you to @shaunandrews for the assets included in this post, @priethor for coordinating the release process and proofreading, @vcanales for the moral support and answering questions about the release process, and to all those who contributed to this release!

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

What’s new in Gutenberg 11.9.0 (10 November)

It’s now November, which means this is the final 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/ release for WordPress 5.9! Included are several new Gutenberg blocks for working with post comments, along with a host of enhancements to existing blocks with a lot of focus going into improving the 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., which will feature heavily in block themes.

Finalizing the Site Editing entry point

In preparation to introduce Site Editing in WordPress 5.9 and following the site editing IA proposal, the Site Editor menu item has been renamed to “Editor”, and now sits under the Appearance menu.

Fullscreen pattern explorer modal

With the increasing number of block patterns available in the pattern directory and bundled with themes, there is now a full-screen modal pattern explorer that can be accessed via an Explore button in the pattern inserter. This explorer allows users to find patterns in a bigger, more advanced tool.

New comment blocks

This release includes a handful of new blocks to allow for granular control over the design of comments in templates for posts. The new Comments Query Loop and Comment Template blocks work similarly to the 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. and Post Template blocks, but for the display of comments via a default template composed of Post Comment Author, Post Comment Date, and Post Comment Content blocks. Site owners can lay out the blocks to suit their designs, for example, by including the newly added Comment Author Avatar block.

Outside of the display of the comments themselves, are two blocks for displaying the Comment Reply Link and Edit Comment Link.

With these new blocks now available, the existing experimental Post Comment block has been deprecated, with the block now hidden in the inserter.

Further iterations on the Navigation block

With its inclusion in 5.9 and all its recent enhancements, the Navigation block is no longer considered experimental. The block has now opted-in to the flex layout block support, the placeholder for the block has been simplified, and the UIUI User interface and naming of navigation entities have been refined. The data layer for the Navigation block has also been improved, as the block’s data is now saved to a wp_navigation 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., allowing greater flexibility surrounding the management of navigation menus used for this block. Among these management improvements, there is an additional menu item for editing and managing navigation menus, found under the Appearance tab, and it is now also possible to create new menus from an existing Navigation block directly within the editor.

Typography tools enhancements

The Typography controls for blocks have been switched to use the ToolsPanel component, which allows blocks’ frequently used settings to be displayed by default, with more advanced controls able to be exposed via a menu. With this in place, typography support across the whole block library has been updated, with many blocks now opting into more controls. For example, most text-based blocks like paragraph, heading, and list blocks now support font style, letter spacing, and text transform, with only the most common font size displayed by default.

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) improvements

Performance and accessibility of the block list view have been improved by using a windowing technique that now renders a fixed number of items at a time instead of every block. The post title component is now covered for screen readers, and announcements have been added on formatting changes in rich text fields. Also, the “Save” keyboard shortcut has been rolled out to the site editor.

Other Notable Highlights

As part of contributors’ efforts to provide an outstanding editor performance, the initial loading of the site editor has been improved. A few features common to the block editor have now been rolled out to the site editor, including rich previews in the link editing UI, which also features an extra text field when modifying an existing link. The UI for saving multiple entities (e.g. site, template, and template parts) has also been improved with descriptive text added.

Block enhancements include padding support for the Columns block, and the Post Author, Post Excerpt, Comment Author, and Code blocks now all have spacing support. Support for embedding Wolfram Cloud links has been added, and there is now transparency support in the 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. that can be applied to images.

In 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. changes, there is a proposed new set of functions to make it easier for plugins and themes to extract data from theme.json settings and styles without having to use WP_Theme_JSON_Resolver. Also, usage of InnerBlocks.Content within blocks’ save functions has been replaced with useInnerBlocksProps.save for better consistency with behavior in edit components.

The full set of changes included in this release can be found below.

Gutenberg 11.9.0

Features

Block Library

  • New Block: Comment Reply Link. (35774)
  • New Block: Comment Link. (35965)
  • New Block: Comment AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.. (35396)
  • New Block: Comments Query Loop. (35231)

Enhancements

Block Library

  • Buttons: Add flex layout and new layout type. (35819)
  • Code: Add support for padding, color, and border styles. (27582)
  • Columns: Add padding support. (35701)
  • Comment Author Name: Add spacing to have same options as Post Author Name. (36213)
  • Comment Edit Link: Add alignment option. (36033)
  • Embed: Add Wolfram Cloud as an embed provider. (35656)
  • Gallery: Replace gallery experimental setting with a check for use_balanceTags. (34979)
  • Image: Add data-id attribute on server side render for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. galleries. (35975)
  • Navigation: Add create new menu button. (36245)
  • Navigation: Add delete nav menu button. (35981)
  • Navigation: Add featured transforms in Link Control for Navigation Link items. (35857)
  • Navigation: Add flex layout. (36169)
  • Navigation: Add missing menu item attributes. (35634)
  • Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. (36024)
  • Navigation: Migrate classic menus to block-based menus on theme switch. (36255)
  • Navigation: Mobile responsive navigation by default. (35917)
  • Navigation: Provide a way to manage wp_navigation posts from wp-adminadmin (and super admin). (36126)
  • Navigation: Reword navigation color labels. (35916)
  • Navigation: Save data to a wp_navigation post type. (35746)
  • Navigation: Show the placeholder again when moving from a valid menu to non-existing menu. (36210)
  • Navigation: Update block entity automatic name generation and refine naming UI. (36238)
  • Navigation: Use a single placeholder for the block. (36023)
  • Page List: Create a JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. version for the editor. (31670)
  • Post Author: Add spacing controls. (35963)
  • Post Comment: Deprecate the block now that the Comment Query Loop block has been added. (36032)
  • Post Comment Author: Add alignment options. (36045)
  • Post Comments: Even out the top margin inside the block. (35887)
  • Post Comments: Hide the “Comments Closed” message. (35743)
  • Post Comment Form: Adds in basic styling for post comment form. (35704)
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.: Add spacing controls. (35959)
  • Post Excerpt: Don’t print the wrapper when there is no excerpt. (35749)
  • Post Title: Return no markup if title is empty. (35861)
  • Search: Add contextual defaults when inserted in Navigation block. (36125)
  • Gallery block: Add a dismissible warning about the need for versions >=18.2 of the mobile app. (36012)

Accessibility

  • Add announcement on formatting change for screen readers. (35896)
  • Add aria-current to navigation link, submenu, page list. (35880)
  • Link editing: Improve focus styles for Link UI preview title. (35853)
  • Site Editor: Enable the “Save” keyboard shortcut. (36138)
  • Try to communicate to screen readers that post title is textarea. (35898)

Block Editor

  • Block toolbar: Remove visual clue from text alignment icon. (35922)
  • Drag and drop: Show drag slot instead of hiding the block being dragged. (33950)
  • Enable rich previews in the Link UI for the Site Editor. (35951)
  • Link editing: Update Link UI design for preview action buttons to use icons for edit and unlink. (35833)
  • Multi-Entity Saving UI Improvements. (35933)
  • Use the block’s name in the “remove block” menu item in the block settings dropdown. (35872)
  • StripHTML: preserve leading and trailing spaces and strip script and on* attributes. (35539)

Full Site Editing

  • Improve the initial loading of the site editor. (36044)
  • Move the Site Editor menu item to sit under Appearance and rename to Editor. (36064)
  • Remove navigation panel in site editor. (36194)
  • Use Heading component on NavigationMenu and NavigationGroup components. (36009)
  • Use SearchControl component inside nav menu. (36011)

Components

  • ColorPicker: Implement new color palette editor component. (35783)
  • Duotone: Add description to clarify that the underlying image will not be affected. (36018)
  • Modal: Wrap the modal contents in a StyleProvider. (36261)
  • ToolsPanel: Update typography panel layout. (35911)
  • LinkControl: Split control for URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org and Text within Link UI. (33849)

Template Editor

  • Add resizer to template part focus mode. (35728)
  • Auto resize the height of template part focus mode. (35974)

Global Styles

  • Remove the duplicated title in background, text and link views. (35583)
  • Typography: Switch to ToolsPanel for block support UI. (33744)
  • Add a Global Styles endpoint and use it in the site editor. (35801)
  • Migrate 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. v1 to v2. (36155)
  • Update: Show all color and gradient origins (core, theme, and user). (35970)

Design Tools

  • Duotone: Enable transparency. (34130)
  • Layout: Add flex-wrap control to flex layout. (36003)
  • Typography block support: Add typography support and defaults. (34064)

Media

  • Remove “security” verbiage from warning when filetype does not pass on upload. (36226)

Patterns

  • Add an inserter flag to hide patterns from UI. (36108)

Themes

  • Remove experimental feature notice for block themes. (36083)

General Interface

  • Apply borders to canvas rather than other UI elements. (31081)

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/.

  • Respect fields param for global styles REST API requests. (36206)
  • URL Details: Update regex to include og:Description. (35875)

New APIs

Global Styles

  • Add API to access global settings, styles, and stylesheet. (34843)

Block Library

  • Inner blocks: Add useInnerBlocksProps.save function for edit/save symmetry, and stabilise API. (26031)

Bug Fixes

Block Library

  • Buttons: Address deprecation issues from Buttons flex layout PR. (36192)
  • Classic: Fix select all blocks side effect that overwrote paragraph block contents. (35999)
  • Column: Only add flex-basis if width contains a number. (35831)
  • Comment Template: Move inner blocks container to separate components. (36174)
  • Blocks: Fix relative URLs for inlined styles. (35538)
  • Navigation: Disable ability to edit wp_navigation menus via Appearance -> Navigation Menus for non-FSE themes. (36257)
  • Fix incorrect attributes definitions. (36264)
  • Fix saving template parts in the site editor by fixing controlled inner blocks parent block attributes updates. (35827)
  • Fix incorrect attributes definitions for Column, Cover, and Group blocks. (36140)
  • Gallery: Make sure the mobile warning notice only runs when images are added to a new block. (36326)
  • Gallery: Only show the gallery upload error message if mixed multiple files are uploaded. (35790)
  • Gallery: Remove the arbitrary alt text that is added to gallery images. (35936)
  • Group: Fix inner container regexes that relied on fixed div tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.). (36256)
  • Heading: Avoid error on split when the paragraph isn’t registered. (35871)
  • Image: Make sure the Image block border radius is inherited if the image is linked. (36289)
  • Navigation Submenu: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice caused by stale id reference. (35984)
  • Navigation overlay menu: Fix submenu spacing. (35823)
  • Navigation: Ensure menus exist before map operation. (36355)
  • Navigation: Fix accessibility issues. (36292)
  • Navigation: Fix dropdown indicator position. (36106)
  • Navigation: Fix issues with responsive justifications. (35913) and (36105)
  • Navigation: Fix padding for social links on mobile. (35824)
  • Navigation: Fix submenus not opening on click. (36290)
  • Navigation: Hide post attributes metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. box. (36358)
  • Navigation: Small styling fixes and tweaks. (36298)
  • Pattern: Remove wrapping div. (36090)
  • Post Comment: Handle the case where a comment does not exist. (35810)
  • Post Navigation Link: Do not translate HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. tag. (35930)
  • Post Template Block: Move inner blocks container to separate component. (35945)
  • Post Terms: Prevent the block from breaking on pages. (35957)
  • Site Logo: Fix center alignment. (35971)
  • Site Logo: Fix fatal error in Site Logo block in WP 5.9. (36195)
  • Prevent PHP notice in Elements block support for blocks with empty content. (35836)

Components

  • AnglePickerControl: Use admin color scheme. (35908)
  • BaseControl: Fix undefined Help text id if no id is passed to component. (35899)
  • ColorListPicker: Fix spacing to accomodate the new color picker. (36017)
  • ColorPalette: Fix className. (36016)
  • ColorPicker: Fix unexpected movements, and closing on first click in the color picker. (35670)
  • Popover: Check anchorDocument default view before removing events. (35832)
  • RangeControl: Fix style issue in RTL. (35777)
  • Storybook: Lazy load LTR/RTL styles for consistent specificity. (35771)
  • Text: Fix text color value to use correct gray color value for Link UI preview description text. (35851)

Global Styles

  • Fix navigation in 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.. (36203)
  • Fix presets data for themes that do not provide any preset. (36054)
  • Generate preset metadata for font-family in the site editor. (36022)
  • Hotfix for leftovers of WP_Theme_JSON_Resolver::Get_merged_data. (36173)
  • Lower the specificity of border & padding styles for the outline block style in the button block. (35968)
  • Theme.json: Remove custom prefixes from properties that did not land in 5.8. (34485)
  • Fix Rest global styles controller accessing configuration that may not exist. (36047)

Block Editor

  • Allow moving metaboxes to previously empty area. (25187)
  • Change console.error to console.warn for enqueued styles in the editor. (35914)
  • Fix inserter with block pattern categories. (36116)
  • Fix navigation block link control zero value in it. (36198)
  • Fix the update of link and suggestions in LinkControl. (32320)
  • Make Link UI inactive if selection extends beyond format bounds or encounters new link. (35946)
  • Fix selection by holding shift key for nested blocks. (35668)
  • Fix shift+click on a child block with its parent selected. (35988)
  • Fix: Crash when resetting user color palette. (36233)
  • Fix: Show user colors on palette indicator. (36232)
  • Fix getPxFromCssUnit test stability and test that memoized function works correctly. (35939)
  • Link editing: Account for link anchor no longer being present when generating unique link instance key. (36357)
  • Preserve highlighted text selection when changing colors (36263)

Design Tools

  • Font Appearance: Improve consistency of label in Typography panel. (35860)
  • Font Family Support: Fix skip serialization check. (36073)
  • Navigation: Force text decoration styles on nav item in editor. (35859)

Template Editor

  • Clear selected block when clicking outside in the template part focus mode. (35816)
  • Templates: Only include templates for the current post types. (35802)

Core Data

  • Avoid showing deleted records in editor saving flow. (36027)
  • Fix getEntityRecords to ensure resolution on REST API failure. (36353)
  • Fix Core Data using hardcoded baseURL prefix for taxonomies and post types API requests. (35850)
  • Make saveEditedEntityRecord use the entity key when available. (36212)

Patterns

  • Update unsaved navigation block flow. (35976)

Full Site Editing

  • Add fallback handling for plugins or themes using the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. (35877)
  • Fix missing <MainDashboardButton> slot fill in site editor. (36369)
  • Remove duplicate Editor menu item. (36342)
  • Theme resolver: Fix crash from calls to undefined functions. (36248)
  • Unhook _block_template_render_title_tag to prevent duplicate title tags from rendering. (36133)

Widgets Editor

  • Fix layout styles not applying in widgets customizer. (35865)

CSSCSS Cascading Style Sheets. & Styling

  • Editor defaults for themes with no editor styles and when user disables theme styles. (35736)

History

  • Support disabling autosave for native Unsupported Block Editor. (35639)

Performance

List View

  • Fix pagedown/pageup and improve scrolling. (36063)
  • List View: Render a fixed number of items. (35230)

Block Editor

  • Improve opening of the block inserter via manual token-based analysis of reusable blocks. (35763)

Widgets Editor

  • List View: Avoid re-rendering all items on block focus. Enable persistent List View in the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. editor. (35706)

Experiments

Block Library

  • Navigation Area block. (36178)

Full Site Editing

  • Always display Customizer menu item. (36168)
  • Revert “Always display Customizer menu item”. (36189)
  • Remove slug and status columns from templates list in Appearance > Templates. (35996)

REST API

  • Show a warning when trying to save unsupported blocks. (35993)

Documentation

  • Added link to Ways to keep up with Gutenberg & Full Site Editing. (36077)

Handbook

  • Add Thunks Tutorial. (36051)
  • Add a more detailed guide for reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. native development. (35529)
  • Blocks: Add view script to block schema and documentation. (36175)
  • Blocks: Document changes to style and editorStyle in block.json. (36218)
  • Add Getting Started level for documentation. (35891)
  • Add section about using the schema during development. (35835)
  • Fix a small typo in the “Getting started” documentation. (36109)
  • Fix Typos in widgets/overview.md. (36078)
  • Fix wording in the Authoring Experience documentation. (35969)
  • Improve Getting Started landing page. (35893)
  • Release Docs: Remove consecutive RCs warning. (35855)
  • Theme.json: Fix typo. (36139)
  • Theme.json docs: Add missing settings & styles. (36137)
  • Tweak organization for getting-started documentation. (34091)
  • Update the recommendation for the cadence of npm releases. (35925)

Packages

  • Components: Update Components CONTRIBUTING.md indentation. (35866)
  • Create Block: Move create-block changelog entries back to Unreleased section. (35886)
  • DOM: Backtick added around <textarea> input tag in readme file. (34813)
  • Env: Update wordpress-develop example to clarify src/build location. (35978)
  • Rich Text: Add usage documentation for Rich Text package. (35885)
  • Schemas: Fix schema file URL. (36157)

Code Quality

REST API

  • Add Theme’s base global styles endpoint. (35985)
  • Improvements for the global styles endpoint. (36071)
  • Remove “experimental” from URL details REST controller and promote to v1 namespace. (35915)

Block Library

  • Heading: Auto-generated anchors hide implementation details. (35747)
  • Mark FSE blocks as non experimental. (35979)
  • Mark Post Comments as stable and Comments Query Loop as experimental. (36132)
  • Mark Post Navigation Link and Term Description blocks as stable. (36163)
  • Remove post- prefix from Comment Template inner blocks. (36171)

Global Styles

Post Editor

  • Migrate to thunks. (35720)
  • Refactor FlatTermSelector into a functional component. (33459)
  • Remove GB prefixed functions from template part. (36180)
  • Translated site properties. (36097)

Components

  • ToolsPanel: Use Grid component to handle layout. (35621)
  • Update spacing in CircularOptionPicker. (36014)
  • Use small button on tools panel toggle. (35935)

Other Packages

  • Create Block: Add block.json schema to generated file. (35843)
  • Data: Rename types file from .d.ts to .ts. (36062)
  • Url: Move getStablePath function into the wordrpess/url package. (35992)
  • Schemas: Add schemas package. (35998)
  • Schemas: Theme.json – Add title to templateParts. (36145)

CSS & Styling

  • Remove invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. buttons block CSS property. (33793)

Tools

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 and backporting to WordPress core

  • Updates WP_Theme_JSON_Resolver and tests to be equal to core. (36223)
  • Changes for FSE backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. in core. (36201)
  • Temporarily pin .wp-env.json to WP 5.8.1. (36333)

Testing

  • Add a method to disable auto-accepting dialogs. (35828)
  • Skip broken widgets test. (36239)
  • Skip flaky test for loading block stylesheets in iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.. (35961)
  • Tests: Run block fixtures through KSES. (35611)
  • theme.json: Make sure tests are pure. (36253)
  • theme.json: Update test data. (35883)
  • Scripts: Increase timeout for end-to-end tests to 30 seconds. (35983)
  • Improve 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. coverage for REST API menus endpoints. (36177)
  • Update child theme.json merge test to match core. (36329)

Debugging

  • Wp-env: Disable Xdebug by default unless specified by user. (34324)

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.

VersionTime to Render First BlockKeyPress Event (typing)
Gutenberg 11.95.58s40.22ms
Gutenberg 11.85.53s38.89ms
WordPress 5.85.86s47.3ms

Thank you to @critterverse for the assets included in this post, @priethor for coordinating the release process, @ramonopoly and @aaronrobertshaw for proofreading the release notes, and @glendaviesnz, @zieladam, @noisysocks, @mamaduka, and @isabel_brison for assisting with troubleshooting and pushing the release to the plugin directory, and to all those who contributed to this big release! 🎉

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

What’s new in Gutenberg 11.8.0? (27 October)

October is almost over, and we’re really close to WordPress 5.9, with this version of 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/ being the second to last to make it into that release. This time around we have plenty of enhancements to the editing experience, including a way to discover Featured 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. Patterns, spacing tools for heading blocks, new animations for some elements (such as Dropzone, and Insertion Point), and more.

The Pattern Directory is the go-to source for great Block Patterns, and with this enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. to the inserter, users get direct access to a selection of featured Patterns, making it easier to find rich Patterns to use or get inspiration from.

Spacing Tools now available to more blocks

Spacing controls are an important piece when getting your Posts, Pages, and Templates looking just right. In Gutenberg 11.8 we’re getting great Improvements in this area.

Spacing on Heading Blocks — Spacing controls were already available for the Site Title Block, and it made sense to add this possibility for all blocks that generate headings, including the Navigation Block, as seen below! With this enhancement, it’s no longer necessary to manually add padding or margin support to each Pattern or Template that uses heading blocks.

Gap support on the Navigation Block — Enables us to control the space between elements of a Navigation Block, taking advantage of the Block Gap support added in Gutenberg 11.5.

Button Block gap and vertical margin — Also related to Block Gap support, this enables us to control the space between buttons, as well as adding vertical margin support in order to adjust the space above and below the Buttons container. As a side note, the discussion behind this change shows off how Contributors come together to add these useful features to Gutenberg; a big thank you to everyone involved!

Enable always-on burger menu for Responsive Navigation Block.

This update is two-fold: users can now hide a Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. behind a button at all times, and they also get a new and improved Navigation Block Display options panel.

Other notable improvements

Allow child 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. to be merged with parent theme.json

Child themes containing a theme.json file will now apply their styles on top of those defined by the parent theme’s theme.json, allowing them to easily overwrite certain styles while maintaining the parent’s base ones. If no theme.json file is present on the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/., the parent’s styles are applied, and the other way around as well.

More control over Cover and Column blocks’ inner blocks

Starting in Gutenberg 11.8, there is more control over which types of blocks are allowed inside some container blocks, as allowedBlocks support has been added to the Cover Block and to the Column Block.

Enable the Slash Inserter for heading, list, and quote.

The Slash Inserter is the fastest way to find, and add blocks to your content, and from now on users are able to utilize it to add blocks within a Heading, List, and Quote blocks, similarly to how it works in basic Paragraph blocks.


Animations for insertion point, drop zone, and other elements

This release adds a nice touch by providing animations for insertion points and drop zones, among others. For extra clarity, and flair. ✨

Show the ellipsis menu in the ListView

Last but not least, this release also enables the List View’s ellipsis menu (block settings menu) in the Site Editor. Not only does this menu let users copy, duplicate, remove, and perform a bunch of options to blocks from within the List View, but it also helps access the recently revamped Template Part Focus Mode.

11.8.0 Changelog

Spacing tools

  • Buttons: Add gap and vertical margin support. (34546)
  • Add spacing controls to all heading blocks. (35772)
  • Feature Image: Add spacing controls to the 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. block. (35775)
  • Navigation block: Add block gap support. (35277)

More control over inner blocks

  • Column: Allow the specification of blocks allowed within columns. (35342)
  • Cover: Add allowedBlocks and TemplateLock attributes in Cover Block. (31326)

Child theme support for theme.json

  • Allow child theme.json to be merged with parent theme.json. (35459)

Featured Patterns from the directory

  • Featured patterns from the pattern directory. (35115)

Other Improvements

  • Enable slash inserter for heading, list, and quote. (35360)
  • Show the ellipsis menu in the ListView. (35170)
  • Add animations for insertion point, dropzone, and other elements. (33132)
  • Heading: Autogenerate heading anchors. (30825)
  • Enable always-on burger menu for responsive navigation menus. (35568)

Gutenberg 11.8

Enhancements

Block Library

  • Add spacing controls to all heading blocks. (35772)
  • Enable slash inserter for heading, list, and quote. (35360)
  • Unify theme block placeholder content. (35517)
  • Buttons: Add gap and vertical margin support. (34546)
  • Categories: Add support for showing only top-level categories. (35726)
  • Column: Allow the specification of blocks allowed within columns. (35342)
  • Comment Content Block: Add typography, color, and padding support. (35183)
  • Cover: Add allowedBlocks and TemplateLock attributes in Cover Block. (31326)
  • Cover: Add an option to set opacity when the background color is used. (35065)
  • Cover: Allow setting the height from the placeholder state. (35068)
  • Cover: Change dimRatio to 50 if media is added and dimRatio is set to 100. (35789)
  • Cover: Only use white text when the background of the cover block is dark. (33541)
  • Cover: Use the description in the placeholder. (34970)
  • Embed: Add Pinterest as an embed provider. (34895)
  • Feature Image: Add spacing controls to the featured image block. (35775)
  • Featured image and Image: Remove descendent space. (35466)
  • Gallery Block: Get media data in a single request. (34389)
  • Heading: Autogenerate heading anchors. (30825)
  • Quote: Update deprecation to expect style block supports. (35615)
  • Page List: Show empty placeholder if no items. (35441)
  • Post Date: Add more typography options. (35422)
  • Post Comment Author: Add link settings and block supports. (35595)
  • Post Comment Date: Add link setting and block supports. (35112)
  • Quote: Added a “plain” style for quote blocks. (29856)
  • Search: Enable inheritance in the search block. (35723)
  • Site Logo: Add a basic example to the site logo block. (35588)
  • Site Logo: Move the Reset button to the Replace menu dropdown. (35372)
  • Site Logo: placeholder tweaks. (35397)
  • Site Tagline: Add `fontStyle` control to Site Tagline block. (35507)
  • Site Tagline: Add wide + full support to the site tagline block. (35589)
  • Site Title: Add a basic example to the site title block. (35590)
  • Site Logo: Remove the “Reset” button icon. (35434)
  • Social Icons: Add top and bottom margin support. (35374)
  • Social Links: Polish logos only style. (35586)

Design Tools

  • ToolsPanel: Switch to the plus icon when no controls are present in the panel body. (34107)
  • Block Supports: Add panel-specific className. (35793)
  • Block Supports: Switch dimensions inspector controls slot to bubble virtually. (34725)
  • Inspector Controls: Resort the order of the design tools associated with styles hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (35574)

Styles

  • Allow users to store duotone data. (35318)
  • Allow child theme.json to be merged with parent theme.json. (35459)
  • Extract the three color panels to their own global styles view. (35400)
  • Font family: Switch from CSSCSS Cascading Style Sheets. Custom Property to classes. (31910)
  • Move the global styles reset action to a dropdown menu. (35559)
  • Update descriptions for the different screens under global styles. (35429)
  • Update 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.’s root view to use Card components. (35547)
  • Use text color to render the Aa preview in global styles. (35631)

Theming

  • Add [data-block] to appender. (35356)
  • Enable theme supports automatically for block themes. (35593)
  • Remove default padding/margin on the body of the page and editor canvas. (35421)
  • Support title in `templateParts`. (35626)
  • CSS: Add a reset for image heights. (30092)

Patterns

  • Increase the number of items per page for default 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. Block. (35603)
  • Featured patterns from the pattern directory. (35115)

Block Editor

  • Add animations for insertion point, dropzone, and other elements. (33132)
  • Adjust Link UIUI User interface visual styling. (35414)
  • Add some top margin. (35717)
  • Show the ellipsis menu in the ListView. (35170)

Template Editor

  • Add more options to template areas in template details. (35577)
  • Add template areas to template inspector. (35239)
  • Add template details to template parts. (35444)
  • Align the layout of the template card with the block card. (35391)
  • Update site editor block placeholder styling. (35513)
  • Use a dark background for the site editor. (35520)
  • Try: Remove dotted ancestor border. (35637)

Components

  • Add shortcut provider. (35652)
  • Iterate on the design of the colors and gradients panel. (35535)
  • Navigator: Update Navigator styling to facilitate sticky positioning. (35518)
  • Repositioned RangeControl tooltip and adjusted image zoom control dropdown height. (27374)
  • Remove segmented control vertical separators. (35497)
  • Storybook: Add RTL switcher to toolbar. (35711)
  • Storybook: Add story for TypographyPanel. (35293)
  • Storybook: Enable Controls and disable Knobs by default. (35682)
  • Storybook: Remove outdated decorator configuration. (35678)
  • Support “any” step in NumberControl and RangeControl. (34542)
  • ToggleGroupControl: Allow custom aria-label. (35423)
  • Update range control metrics. (35540)
  • Update FontSize control. (35395)

Packages

  • Create Block: Add PascalCase slug to create-block template strings. (35462)
  • Create Block: Allow local directories to be passed to –template as relative paths. (35645)
  • Test Setup: Add more complete mocks of common timer functions. (35368)
  • Scripts: Allow customization of the ARTIFACTS_PATH via WP_ARTIFACTS_PATH env var. (35371)

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)

  • Rich text popovers: Move to block tools to fix tab order. (34956)
  • Save button: Prevent focus loss. (34731)

Performance

Global Styles

  • Pass only the data the site editor uses. (35458)
  • Use a context provider for global styles configuration. (35622)

Bug Fixes

Block Library

  • Block Settings: Don’t render ‘Move to’ if the block cannot be moved. (35463)
  • Cover: Update placeholder minHeight style to support non-px units. (35614)
  • Cover: Update ‘templateLock’ attribute. (35671)
  • Featured Image: Center placeholder chip contents. (35417)
  • Heading: Fix undo/redo “trap”. (35767)
  • Heading: Remove anchor map when block unmounts. (35761)
  • Site Logo: Fix site logo block on dark backgrounds. (35718)

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.

  • Fix HelpHub link i18n for page-jumps. (35404)
  • Fix template part block untranslated strings. (35715)
  • Translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. note for Home/end to avoid mistranslations. (35669)

Packages

  • Server Site Render: Prevent empty renders in `ServerSideRender` component caused by changing props while already fetching markup. (35433)

Components

  • Color Picker: Fix some issues on the color picker component; Remove tinycolor2;. (35562)
  • Navigator: Hide horizontal overflow in Navigator. (35332)
  • Popover: Fix __unstableBoundaryParent. (35082)
  • RawHTML component: Allow multiple children. (35532)
  • Rich text: Fix internal paste across multiline and single line instances. (35416)
  • Toggle Group Control: Fix the visual state when no option is selected. (35545)
  • Toggle Group Control: Fixed condition to show separator correctly. (35409)
  • Toggle Group Control: Fix ToggleGroupControlOption not passing ref to the underlying element. (35546)
  • Tooltip: For Tooltips, prevent emitting events to child elements if they are disabled. (35254)
  • Tooltip: Remove extra comma character from Tooltip when the underlying component is disabled. (35247)

Themes

  • Custom Templates: Use “title” from the theme.json. (35592)
  • Elements block support: Fix link color rendering on-site front end. (35446)
  • Move the link color styles to the footer. (35425)
  • Reset margin for all children of flow layouts. (35426)

Template Editor

  • Use slug as template parts area item key. (35796)
  • Fix missing titles in general areas. (35657)

Block 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.

  • Blocks: Apply the most recent filters to previously registered blocks. (34299)
  • Fix class serialization of font size and colors in dynamic blocks that use block supports. (35751)

Design Tools

  • Border Radius Control: Fix undefined value on the first click into RangeControl. (35651)

Block Editor

  • Fix updating the block list after block removal. (35721)
  • Fix sibling inserter animation. (35729)
  • Inserter: Fix gap between Search and Tabs. (35537)
  • Saving post: Transparent disabled button. (35542)
  • FSE: Coding standards: DOCTYPE should be the first line/character of any HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. document. (35442)

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/.

  • Fix preloading middleware referencing stale data for OPTIONS requests. (35527)

List View

  • Fix expand and collapse when the icon is clicked. (35526)

Global Styles

  • Fix presets that use a callback to validate user data. (35255)

CSS & Styling

  • Remove font size classes that are enqueued in the global stylesheet. (35182)

Block API

  • Allow more than 1 block stylesheets. (32510)

Experiments

  • Add block gap support. (35277)
  • Enable always-on burger menu for responsive navigation menus. (35568)
  • Fix issue with space-between. (35722)
  • Submenu item paddings & fixes. (35716)
  • Fix navigation gap & padding issues. (35752)
  • Remove color inheritance specificity. (35725)
  • Remove deprecated class names from the Navigation Link block. (35358)
  • Use new coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. functions in menu items REST API. (35648)
  • Navigation: Preload more API requests. (35402)

Documentation

Handbook

  • Add categories to TOC to help digest the FAQ. (35519)
  • Add missing documentation for the wrapperProps property for the BlockListBlock component returned by the editor.blockListEdit 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.. (26961)
  • Add section on using theme.json schema. (35739)
  • Add Table of Contents to the FAQ page. (35455)
  • Clarify documentation for InnerBlocks orientation prop. (35712)
  • CustomRadius – Remove 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-only text. (35582)
  • Update block categories. (35523)
  • Update npm run build command for developing with Gutenberg locally. (35681)

Packages

  • Block Editor: Update default value of the `viewportWidth` attribute in documentation. (35659)
  • Components: Add the storybook link to the /components README. (35493)
  • Components: Add readme for SkipToSelectedBlock component. (32958)
  • Componentes: Add CHANGELOG entry for the fieldset removal from FontAppearanceControl. (35585)
  • Components: Add an entry to CHANGELOG regarding the new ColorPicker. (35486)
  • Components: Fix markdown highlighting on components CONTRIBUTING.md. (35633)
  • Components: Mark CustomSelectControl hint option as experimental. (35673)
  • Components: Polish ToggleGroupControl. (35600)
  • Components: Small tweaks to contributing guidelines. (35620)
  • Components: Update README for SelectControl. (28811)
  • Components: Update DateTimePicker component README to remove reference to isDayHighlighted callback. (35363)
  • Components, feat(SelectControl): Add children prop. (29540)
  • Create Block: Update documentation and readme post-merge of #35645. (35679)

Code Quality

  • Block Editor: Fix odd usage of transform-styles wrap function (and tighten types). (23599)
  • Constrained tabbing: Simplify. (34836)
  • Compose: Convert `usePrevious` hook to TypeScript. (35597)
  • Update Callers to handle when getBlockType return undefined. (35097)
  • Components: Polish ResizableBox and convert it to TypeScript. (35062)
  • Components: Remove `tinycolor` object usage from the gradient picker. (35544)
  • Components: Remove duplicated className in the Card component. (35333)
  • Components: Remove unused useJumpStep utility. (35561)
  • Components: Use new color picker props. (35566)
  • Components: Replace the color picker component with the new version. (35220)
  • Components, FontAppearanceControl: Remove fieldset wrapper. (35461)
  • Components, ToolsPanel: Remove hardcoded classnames. (35415)
  • Components, UnitControl component: Refactor JSX components to TypeScript. (35281)
  • Global Styles: Refactor how the Global Styles access and sets data. (35264)
  • Post Editor: Fix-up Post Editor’s preferences modal. (35369)
  • Remove Tinycolor usage from component color utils. (35553)
  • Reusable Blocks: Thunkify `reusable-blocks` store. (35217)

Tools

Packages

  • Scripts: Remove inject polyfill by default. (35436)

Testing

  • Child theme.json: Update test to better capture that children can update single parts in isolation. (35759)
  • Border Radius Control: Add fallback px unit and add utils tests. (35786)
  • Fix preview end-to-end tests. (35565)
  • Flaky Tests: Fix taxonomies flaky tests. (35534)
  • Flaky Tests: Try another fix for the flaky nav test. (35443)
  • Performance tests: Add more detailed loading metrics. (32237)
  • Components, Panel: Improve unit tests. (35658)
  • Enable/skipped metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. test. (35594)

Build Tooling

  • Revert version bump if build job fails. (33239)
  • Updates `reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-native-aztec` android to use S3 dependency for the Aztec editor. (35606)

A note to extenders on the Navigation Editor

Bugfix #35527 fixed preloading on the Navigation Editor; now cache gets deleted after the first cache hit for OPTIONS requests, potentially affecting 3rd-party plugins.

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.

VersionTime To Render First BlockKeyPress Event (typing)
Gutenberg 11.86.21s40.2ms
Gutenberg 11.76.29s43.13ms
WordPress 5.86.74s51.54ms

Thanks to @critterverse for the assets on this post, @priethor for shepherding the process along, @dd32 for assisting with the release to the plugin directory, and to those who contributed to this release! 👏

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

What’s new in Gutenberg 11.7 (October 13th)

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 5.6.20 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), 346053516535164)
  • 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.

VersionTime To Render The First BlockKeyPress Event (typing)
Gutenberg 11.73.7 s24.68 ms
Gutenberg 11.63.5 s25.88 ms
WordPress 5.84.0 s34.06 ms

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