What’s new in Gutenberg 10.3? (31 March)

The first quarter of the year is coming to an end, and with it, 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/ 10.3 comes as well! This release brings us some important changes to Global Styles, as well as several improvements to blocks such as 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., enhancements to the inserter, an editor performance boost, and even a few new blocks! As always, 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 are included, too.

Improving the Block toolbar

In order to provide a consistent UIUI User interface across blocks, blocks have seen their toolbars rearranged following a standard grouping layout. While the last release saw the Image block have its toolbar standardized, this time a whole set of blocks have been normalized as well, including blocks such as Button, Buttons, List, Heading, Paragraph, Quote, Audio, File, Media and Text, Video, Site Logo, Cover, and Post 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. blocks.

Introducing layout configuration 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.

Themes have always had the responsibility of defining alignments in the frontend through CSSCSS Cascading Style Sheets. rules. They also define different widths for both the editor and frontend. The content width, whether they support wide alignments or not, and the CSS to support all these combinations can be very hard to write properly.

With Full Site Editing, the templates are written in blocks and edited in the site editor. This means that the editor has to match the front end as much as possible while allowing theme authors to tweak these alignments and widths in the editor. If this doesn’t happen, it causes confusion and frustration as seen in the feedback from the FSE Outreach Program. 

To address these requirements and to simplify the way themes define and style alignments, Gutenberg 10.3 introduces the concept of layout and layout configuration, a feature automatically enabled when you rely on a theme.json file (experimental-theme.json file at the moment).

Theme authors should be able to make use of this feature by adding a layout config to their theme.json file and indicating in their block templates which containers inherit that config. The layout config is also automatically applied to the post editor.

If you’re using the experimental theme.json file already, you should be able to follow these two pull requests that update the empty theme and the twenty twenty-one blocks theme to use this feature.

Changes in theme.json block supports and supported styles 

Block supports are no longer used to decide whether the styles in the theme.json file for a block should be used or not. However, block supports are still used to show UI controls in both the block & 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., but themes can now use any theme.json style property that exists in any block:

"core/paragraph": {
  "typography": {
    "fontFamily": "var(--wp--preset--font-family--cambria-georgia)"
  }
}

Improvements to Navigation Block and Navigation Editor

Gutenberg 10.3 brings a number of improvements to the Navigation block and Navigation editor experience, including the list view in the Navigation editor, in-between inserter, and a better flow to build nested menus.

Inserter enhancements

This release also brings updates to inserting blocks, including improvements to keyboard navigation and accessibility for the Block Inserter, and a new “theme” category for template parts and their variations. Moreover, the slash inserter now allows typing multiple words when searching for blocks. Each of these enhancements help make it easier to find and use the blocks you want.

• 

• 

More theme blocks

With the goal of providing classic template 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.) features with blocks, up to three new blocks are introduced in this release. The LogIn/Out block is now available to provide login and logout links. Optionally, it can display the login form instead of a link by setting the available block attribute.

Two new blocks for archive pages are also available. The Term Description block displays the description of categories, tags, and custom taxonomies. On the other hand, the Archive Title block displays the title of the archive itself.

• 

• 

Cover block improvements

The Cover block now supports drag and drop for replacing the background image.

Editor performance improvements

In recent releases, the time it took for the editor to load increased slightly due to the growing number of patterns available in the Inserter. Gutenberg 10.3 fixed this so that the editor performs well regardless of the number of available patterns!

10.3

Enhancements

• Add since versions to the deprecated features. (30072)
• Blocks: Add “theme” category and better present Template Parts in the inserter. (30020)
• Block Editor:
  • Add drag handle to select mode. (28815)
  • Improve block inserter keyboard navigation. (26938)
  • Open adminadmin (and super admin) sidebar menu over editor on small screens. (29955)
• Block Library:
  • Cover: Allow drag and drop media replacement. (29813)
  • File: Make the editor markup match the frontend. (30148)
  • Social Links: Improve selected state of empty block. (29756)
  • Standardize the groups in the block toolbar. (30012, 29247, 29863)
  • Verse block: Add support for the padding to the verse block. (29820)
• Components: Allow multiple words in the autocomplete phrase matcher. (29939)
• 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: Improved cache bust without filemtime for assets. (29775)
• Icons: Hint the lowercase icon by 0.15px to correct the font weight appearance. (29754)
• Media: Use image default size from settings. (29966)

New APIs

• Compose: Add new useCopyToClipboard hook. (29643)
• Deprecated: Add since option to deprecated function. (30017)

Bug Fixes

• Block Editor:
  • Ensure that uncategorized block types are properly handled. (30125)
  • Fix mover width/size regressions. (29889)
  • Fix navigation mode focus. (30126)
  • Fix 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. with multi select style. (30128)
  • Fix the issue with block style preview when example missing. (29894)
  • Fix sibling block inserter displaying at end of block list. (29920)
  • Revert showing empty paragraphs on fronted. (29809)
  • Show the active block variation’s icon in Select mode. (30143)
• Blocks: Adding onRemove event to verse block. (30104)
• Block Library:
  • Cover: Improve disabled media buttons check for placeholder. (29858)
  • Embed:
    • Fix overzealous aspect ratio scaling for embeds. (29510)
    • Embed: Fix select on focus. (29431)
  • Gallery: Fix gallery item clicking. (29860)
  • Image:
    • Fix block reset sizes on external URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org change. (26879)
    • Fix undo step with temporary URL. (30114)
  • Social Link: More accessible labels. (29659)
  • Video: Fix kind attribute missing subtitle value in video text track. (30040)
• Components:
  • Don’t display Guide’s page control if there is only one page. (29629)
  • Prevent PanelBody title from being overlapped by arrow. (29914)
• Compose: Call useMergeRefs when dependency changes after ref change. (29892)
• Copy:
  • Restore dot at the end of a sentence. (29897)
  • Update the layout alignment description for better clarity. (29974)
• Gutenberg Plugin: Update “requires at least” value to 5.6. (29646)
• E2E Tests: Stabilize randomly failing tests in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (29836)
• Navigation Component: Align item text to the left/right. (30083)
• Post Editor:
  • Fix post editor layout regression. (30093)
  • Keep post publishing popover open when a date is clicked. (29738, 29893)
• RichText: Fix inline display warning. (30193)
• Themes: Restore the default editor font for the non FSE themes. (30080)
• Raw Handling: Fix pasting special spaces. (28077)
• Storybook: Fix block editor shortcuts. (29750)
• Writing Flow:
  • Fix caretRangeFromPoint. (30031)
  • Fix tab behavior. (30000)
  • Remove arrow nav limitations. (30057)

Performance

• Block Editor:
  • Optimise multi-selection select calls. (30140)
  • When inserting Block Patterns they get parsed when the browser is idle. (29444)
• Block Library: Use early return in the Button block to optimize save.js. (29781)

Experiments

• Components:
  • Add Heading. (29592)
  • Button: Add a default type of button. (29900)
• 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.: Add widgets customize inspector. (29755)
• Full-Site Editing:
  • Add a layout configuration to the Group block and theme.json and make alignments declarative. (29335)
  • Add client ID trees selectors in block navigation. (29902)
  • Add description field to Post Content block. (29971)
  • Add Log In/Out block. (29766)
  • Add Query Title block and Archive Title variation. (29428)
  • Add Term Description block. (29613)
  • Add preload_paths 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. for widgets screen and full site editing. (28701)
  • Add support for experimental layout in Post Content block. (29982)
  • Add layout support to the Template Part block. (30077)
  • Add link color option in Site Title block. (29924)
  • Always use full screen mode. (29489)
  • Automatically open the sidebar to the appropriate menu. (26964, 30098)
  • Close navigation panel after template selection. (29956)
  • Expose Template Part block variations to the Inserter. (30032)
  • First step towards hybrid themes – fallback to PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher templates. (29026)
  • Fix block toolbar from overlapping navigation panel. (29918)
  • Fix different markup in the editor and on the frontend for the Site Title block. (29021)
  • Fix edge case where the default layout could be undefined. (30024)
  • Fix persistence of Preferences in site editor. (30019)
  • Fix Post Comment Count block attribute. (30056)
  • Fix 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 margin. (30078)
  • Fix Template Part alignments behavior. (30099)
  • Fix template saving issue after switching themes. (29842)
  • Polish site button focus/hover styles in post and site editor. (29888)
  • Prevent navigation panel focus when hidden. (29600)
  • Refactor the Post Content block. (29898)
  • Remove alignments from the root level of the site editor. (30079)
  • Remove 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. toolbar transition in reduced-motion mode. (29764)
  • Remove unused QueryProvider in Query block. (29947)
  • Template Part: Identify template parts in error messages. (28398)
  • Update Post Content icon, unuse justify. (29867)
  • Update Post Title markup so that editor and front match. (29824)
  • Update template details popover. (29439)
• Global Styles:
  • Allow themes to use any styles in the theme.json whether or not the block supports it. (29941)
  • Better CSS reset style loader order. (30034)
  • Block Supports: Allow skipping serialization of border. (30035)
  • Optimistically continue with empty data when user data for global styles is not a JSON. (30088)
  • Remove kebab-case camelCase transformations. (29986)
  • Skip null when translating settings. (30171)
  • Translate custom templates in theme.json. (29828)
• Navigation Editor and Block:
  • Add line-height to Navigation block. (30010)
  • Add padding to Navigation Link placeholder. (29832)
  • Allow vertical inserter in the Navigation block. (28833)
  • Consistently provide fallback variations for the block. (30117)
  • Enable list view. (29936)
  • Fix flyout background color in Page List block. (29932)
  • Fix link items in navigation screen. (30009)
  • Fix minor styling issues with nav editor. (30129)
  • Fix Navigation block styles in the navigation editor. (29748)
  • Fix navigation editor link search suggestions. (29707)
  • Fix navigation editor saving. (29749)
  • Fix navigation screen font. (30085)
  • Fix navigation screen inserter horizontal scrollbar. (29930)
  • Fix navigation editor block toolbar not visible on small screens. (29967)
  • Fix padding issues with nav screen. (30183)
  • Fix paragraph margin specificity inside layout containers. (30038)
  • Fix popover anchor in Navigation Link block. (30173)
  • Improve default label of location select. (29908)
  • Increase importance of submenus staying open. (30169)
  • Keep submenus open on select in the editor. (29713)
  • Match editor markup to rendered in Navigation Link block. (29935)
  • Move theme location settings to navigation editor sidebar. (29458)
  • 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.: Show submenus only on select in the editor. (29869)
  • Polish navigation screen. (29926, 30168)
  • Simplify focus style in Site Icon block. (29872)
  • Show all menus in manage locations. (29906)
  • Unset font weight and text decoration inheritance in Navigation block. (30011)
  • Use the interface package for the navigation screen. (30013)
  • Visual and design improvements for List View. (29769)
• Widgets Editor:
  • Fix warning when widgets block editor is disabled. (30318)
  • Iterate on widgets 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/. endpoints. (29649)
  • Load block editor assets in the navigation and 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. editors. (30076)
  • Unify menu item styles for Navigation Block and Page List blocks. (29975)
  • Use a default sans serif font for the widget screen. (30084)

Documentation

• Block Editor: Fix renderAppender documentation. (29925)
• Handbook:
  • Fix broken image link in the documentation main README. (29857)
  • Fix broken link to developer resources in README.md. (#29795). (29796)
  • Fix link to native-mobile.md in pull request template. (29923)
  • Fix rebase error. (29753)
  • Remove superfluous sentence in create block tutorial. (30062)
  • Update block design principles with a new section on how to group controls. (29816)
  • Update broken link to Getting Started for the 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 based Mobile Gutenberg. (30162)
  • Update the quick view image on the documentation homepage. (29808)
• Editor: Clarify the purpose of the @wordpress/editor package. (30136)
• 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.: Replace dead link in README.md. (29699)
• Interface: Fix typos in interface package. (29740)

Code Quality

• 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:
  • Type several of the middlewares. (29719, 30150, 29901)
  • Type the rest of the package. (30161)
• Block Editor:
  • Avoid isInsideRootBlock (DOM query) in useFocusFirstElement. (30178)
  • Focus mode: Fix opacity for inner blocks, move classes. (30130)
  • Move class for navigation mode. (30181)
  • Move is-typing and is-outline-mode classes up the tree. (30106)
  • Move nav mode exit from writing flow to block props. (30175)
• Block Library:
  • Refactor ServerSideRender to use React 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.. (28297)
  • Remove obsolete editor styles for List block. (30094)
  • Rename loginOut variable to logInOut. (29979)
• Blocks:
  • Ensure theme category is only added when not provided. (30089)
  • Rename getBlockContent to getBlockInnerHTML internally. (29949)
• Components: Fix React warning in Text Control. (29724)
• Date: Add types. (29789)
• DOM:
  • Add types to focusable. (29787, 30030)
  • Split into smaller modules to facilitate typing. (30044)
• Gutenberg Plugin:
  • Cleanup the blocks.php file. (29964)
  • Fix PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. warnings. (30022)
• Packages: Add types directive to api-fetch and date packages. (30252)
• RichText: Remove dead and deprecated setFocusedElement. (29877)

Tools

• Babel Preset: Update Babel to v7.13.x. (30018)
• Create block: Require WordPress 5.7 by default and source it from the main plugin file. (29757)
• E2E Tests:
  • Cover the case when using multiple words in the inserter. (29978)
  • Fix test plugin clash. (29744, 29745)
  • Set delay to zero in the reduce-motion mixin and tests. (29762)
• Eslint Plugin: Add TypeScript as peer dependency and make it optional. (29942)
• GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Workflows:
  • Release: Allow triggering manually. (28138)
  • Remove path ignore configs from CI. (30090)
  • Use Gutenberg token for version bump, changelog commits. (30212)
• Packages: Enforce version bump for production packages after WP major. (29903)
• Unit Testing: Allow TypeScript modules for transpiled packages. (29873)

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.

Version	Loading Time	KeyPress Event (typing)
Gutenberg 10.3	4.90s	31.86ms
Gutenberg 10.2	5.15s	31.41ms
WordPress 5.7	4.88s	25.24ms

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

Thanks @gziolo for managing the release, and @annezazu and @melchoyce for helping on the release post.

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