What’s new in Gutenberg 15.4 (22 March)

“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 posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Site Editor project (formerly called Full Site Editing).

Decorative image that's reads: "What's New In Gutenberg 15.4?"

Gutenberg 15.4 has been released and is available for download!

The latest release of the 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 is lighter on user-facing features than normal and focuses heavily on 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, testing, and other much-needed improvements. But, there are some welcome additions, such as turning paragraphs into columns, an improved Cover 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 new template descriptions in the site editor.

Table of Contents

Color and layout support for Cover block

The Cover block now supports the text color design tool. The enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. makes it easier for users and theme authors to customize the color for all inner blocks with a single setting. Along with this benefit, the change made it easier to handle transforms from the Media & Text block.

The Cover block also now works the same as the Group block with its layout handling. Currently, the block only supports the flow layout and is set to a constrained width by default.  It does not yet support flex layout variations.

The update brings consistency to layout handling, building atop a standardized system that will make for fewer edge cases and necessary customizations for theme authors.

Theme authors should test their themes against this update. In the past, some have had to work around the layout limitations of the Cover block, and the block’s support of the standard layout system may override custom implementations.

Updated template descriptions

Template descriptions have received a major overhaul in the latest update. Nearly all of them have been updated to better explain what each template does. This should make it easier for users to understand each template’s purpose when customizing it in the Site Editor.

Other Notable Highlights

A new textColumns property has been added as a “block supports” feature and is now in the style engine. It will allow users to split text-based blocks into columns. Developers can opt into this for their custom blocks, but no coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks support the feature yet. There are open tickets for adding it to the Paragraph and Post Excerpt blocks in future updates.

Theme authors can now target the :link and :any-link pseudo-elements in theme.json, giving them more control over styling hyperlinks.

The FontSizePicker component allows for an array of custom units to be defined. This is the first step toward allowing theme authors to eventually control the available units if their themes support custom font sizes. However, the editor’s Typography panel does not yet support this feature.

Change Log

Enhancements

Site Editor

  • Adjust whileHover effect to be a bit subtler and less pronounced. (48928)
  • Go direct to edit from manage all templates list. (48764)
  • Move “Add Template”‘s descriptions to tooltips. (48710)
  • Add descriptions to all panels in the Site Editor’s dark side. (48739)
  • Add hover animation to site editor canvas. (48575)
  • Fix non-us spelling in 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.. (48976)
  • Prevent the saving button from showing when renaming templates. (48399)
  • Navigation Sidebar: Change the logic about which navigation gets selected for the sidebar. (48689)
  • Add “Added by” description to template part navigation sidebar. (48732)
  • Add border radius to off canvas 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. items. (48798)
  • Add page details when viewing a specific page. (48650)
  • Duotone: Limit SVG 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. output to used filters. (48995)
  • Hide navigation screen in site editor. (49043)

Block Library

  • Open convert to links modal on select of a page item. (48723)
  • 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.: Remove 16:10. (48969)
  • Cover: Add constrained/flow layout. (45326)
  • Cover: Add text color block support. (41572)

Components

  • FontSizePicker: Allow custom units. (48468)
  • Navigator: Disable initial animation. (49062)
  • Try: Update Tertiary Button appearance. (48888)
  • FormTokenField: Hide suggestions list on blur event if input value is 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.. (48785)

Design Tools

  • Block Supports: Add text columns (column count) to typography block supports. (33587)

Global Styles

  • Move the global styles provider to the app level component. (49011)
  • Add support for :link and :Any-link 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.. (48634)
  • Add compound class to layout wrapper for global spacing styles. (47952)

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.

  • Block Deprecations: Provide extra data for isEligible check. (48815)

Post Editor

  • Provide static native editor help article slugs. (48802)
  • Try getting Post Content layout on server before editor loads. (45299)

Packages

  • Introduce prependHTTPS URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org util. (47648)

Bug Fixes

Block Library

  • Embed Block: Fix Aspect Ratio Classes #29641. (41141)
  • Ensure aspect ratio is applied when Post Featured Image block is linked. (48495)
  • Fix PostContent initial render by waiting for the canEdit request. (48642)
  • Fix classic menu fallback race condition. (48811)
  • Fix navigation block off-canvas appender for empty menus. (48907)
  • Fixes extra UIUI User interface in navigation block inspector. (48679)
  • Import Classic Menu using the menu name as the block menu title. (48771)
  • Navigation Link: Remove color generation code. (48927)
  • Navigation: Fix missing state for MenuControls. (48921)
  • Update missing translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. from label. (48760)
  • 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. Importer: Fix Widget Group block imports. (48669)
  • 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.: Show variant patterns even if there are no patterns for the Query Loop block. (48793)
  • Comments: Fix ‘sprintf requires more than 1 params’ error. (49054)
  • Adjust Post Featured Image PanelBody label to “Settings”. (49076)
  • Add help text to Gallery Image Size control. (49074)
  • Comments Block (Legacy): Update missing translation. (48820)
  • 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 created Navigation menu title. (48773)
  • Make sure the directly inserted block in the Nav block is a Page link. (48740)
  • Navigation Link: Don’t remove ‘block_core_navigation_link_build_css_colors’. (49064)
  • Navigation: Don’t save the level of the link in an attribute. (48219)
  • Refactor away state in Nav menu selector. (45464)
  • Revert: Navigation: Always create a fallback menu. (48602)
  • Tweak Latest Posts block PanelBody labels. (49079)
  • Tweak label for Latest Posts 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. control. (49077)
  • Page List Block: Show untitled pages on page list on the editor. (48772)

Site Editor

  • Don’t offer Classic block as a recovery action when not registered. (49051)
  • Fix browser history when synchronising state with urls. (48731)
  • Fix lingering insertion point within template parts. (48913)
  • Fix template part actions in List View. (48905)
  • Fix text alignment in the Site Editor sidebar. (48959)
  • Fix typo in template parts description. (48781)
  • Fix browse mode descriptions margin. (48778)
  • Fix scrollbar in site editor. (48822)
  • Site Editor Navigation panel: Update appearance of non-link blocks. (48933)
  • Navigation sidebar shows a wrong submenu popover. (48941)
  • Show creation popover on empty page links in the navigation sidebar. (48746)
  • Site button metrics. (48918)
  • Remove actions from SidebarNavigationScreenWrapper. (48935)
  • Update template descriptions with more detail. (48934)

Global Styles

  • Fix typo: Use WP_Theme_JSON_Gutenberg instead of WP_Theme_JSON class name. (48648)
  • Fix: Crashes on getNodesWithSettings and getNodesWithStyles. (49023)
  • Fix: Global Styles crash in updateConfigWithSeparator when not block styles are passed. (49045)
  • Fix: Global Styles getNodesWithStyles expects an object with elements. (49044)
  • Fix: Global Styles getPresetsClasses crashes if no selector is passed. (49024)
  • Fix: Global styles forces a white background. (49042)
  • Style Book: Move 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. to root of content area to support styles that overflow block previews. (48664)
  • WP_Theme_JSON: Sync indirect properties changes from core. (48646)

Components

  • Fix HStack and VStack alignment prop. (47914)
  • ResizeTooltip: Use default.fontFamily on tooltip. (48805)
  • ResponsiveWrapper: Use aspect-ratio CSSCSS Cascading Style Sheets. prop and support SVG elements. (48573)

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)

  • Make sure useFocusOnMount runs when all the children tabbable elements have mounted. (42187)
  • Manage selection on block sync. (48979)

Post Editor

  • Distraction Free Mode: Don’t show the metaboxes. (48947)
  • Don’t add Post Content layout styles to title in the post editor. (48663)
  • Fix animation and browser console error when returning from template edit mode. (48930)

Block Editor

  • LinkControl: Remove HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. from suggestion title before passing it to TextHighlight component. (48685)
  • Order initial block items in Navigation with PrivateInserter. (48752)
  • BlockInvalidWarning: Prefer canInsertBlockType and refactor to 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.. (49052)
  • Fix grouping actions in List View. (48910)
  • Fix typo in the media-categories component. (49047)
  • Custom link UI does appears outside canvas on the sidebar navigation. (48633)
  • Use proper color for block styles control. (46684)
  • Update Welcome Guide article links to avoid redirect. (48582)
  • Columns Block: Don’t show the column count change UI when templateLock is all. (48691)
  • Remove border from quick inserter child elements. (48794)

Inspector Controls

  • Fix settings tab active state border in block inspector. (48945)

Testing

  • Playwright Utils: Fix the ‘publishPost’ address locator. (48729)

CSS & Styling

  • Fix duplication of block classname in feature selectors for style variations. (48662)

Experimental

  • Fix KSES filter for un-prettified filters. (49004)

Packages

  • Rich text: Fix range equality checks for Safari. (48733)
  • Preferences Modal: Fix double focus outline in tab item. (48996)

Tools

  • Scripts: Fix render.php isn’t copied in Windows OS. (48735)

Mobile

  • Mobile – Fix parsing of CSS units for null matched values. (48484)

Performance

Block Editor

  • Rich text: useAnchor: Remove value dependency. (48715)

Post Editor

  • Lodash: Refactor away from _.kebabCase() in EditorHelpTopics. (48776)
  • Lodash: Refactor away from edit-post package. (48786)

Site Editor

  • Improve the Navigation panel’s menu query. (48908)
  • Improve Site Editor performance tests. (48138)

Testing

  • Lodash: Remove from e2e-tests package. (48775)

Themes

  • Fix: Incorrect selector generated by append_to_selector method. (48759)

Block Library

  • Lodash: Remove _.get() from various blocks. (48491)

Data Layer

  • Lodash: Refactor away from _.set() in core-data. (48784)

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

  • Prefer committercommitter A developer with commit access. WordPress has five lead developers and four permanent core developers with commit access. Additionally, the project usually has a few guest or component committers - a developer receiving commit access, generally for a single release cycle (sometimes renewed) and/or for a specific component. over author date for perf results timestamp. (48673)

Documentation

  • Add links to hook documentation in curation doc. (48653)
  • Add missing playwright end-to-end documentation to toc.json. (48447)
  • Adding examples of how to programmatically remove the panels in Document sidebar. (48895)
  • Adds link to post on the developer blogblog (versus network, site) to the deprecation page. (49069)
  • Add position: Sticky to the Opt-in into UI controls appearanceTools section. (48763)
  • Fix broken Lerna documentation link. (48890)
  • Table of styles keys with since versions. (48265)
  • Fix URL mismatch. (48931)
  • Theme JSON schema: Add sticky position to settings, minHeight to styles. (48948)
  • Update the end-to-end tests documentation. (48951)
  • jest-preset-default: Update README to reflect current status. (48925)

Code Quality

Components

  • Autocomplete: Refactor to TypeScript. (47751)
  • Navigation: Refactor to TypeScript. (48742)
  • SelectControl: Improve prop types for single vs multiple selection. (47390)
  • DimensionControl(Experimental): Refactor to TypeScript. (47351)
  • Guide: Refactor to TypeScript. (47493)
  • Icon: Refactor tests to TypeScript. (49066)
  • PaletteEdit: Refactor away from lodash.kebabCase. (48637)
  • QueryControls: Refactor away from lodash.groupBy. (48779)
  • components/utils/font: Refactor away from lodash .get. (48629)
  • remove lodash from context/getStyledClassName:. (48688)
  • withSpokenMessages: Change js files to typescript. (48163)

Block Library

  • Add Nav block files to those triggering error for exhaustive deps. (48821)
  • Fix Nav block exhaustive deps warnings. (48680)
  • Media Text: Refactored constants to it’s designated file. (48480)
  • Navigation: Simplify the method for finding the fallback menu. (48916)
  • Duotone.php code cleanup. (48607)
  • Revert “Duotone: Limit SVG filter output to used filters”. (49102)

Block Editor

  • Inserter: Remove outer scope values dependencies. (48961)
  • Inserter: Remove unnecessary dependency ‘delayedFilterValue’. (48960)
  • Remove unused CSS from LinkControl Apply button. (48431)
  • Custom Classname block support: Update code comments to remove reference to anchor id. (48709)
  • List View: Remove unused selector from the ‘useBlockSelection’ hook. (48984)
  • Renames parent selection boolean param and improves documentation. (48677)
  • Tests: Cleanup unnecessary jest timers setup. (49030)
  • Avoid declaring a function inside another function. (49049)

Global Styles

  • Theme JSON: Clarify status of fixed position opt-in in appearance tools. (48660)
  • Extract a BorderPanel component as a reusable component between Global Styles and Block Inspector. (48636)

Data Layer

  • Data: Use real timers for private APIs tests. (49029)

Packages

  • Preferences: Remove types field from package.json. (49053)
  • Upgrade typescript to 4.9.5. (48299)
  • Compose: Remove useAsyncList from mobile exports. (48241)
  • Animation: Refactor to TypeScript. (47042)
  • PanelBody: Convert to TypeScript. (47702)
  • Refactor ToolbarContext to TS. (49002)
  • Refactor/toolbar button component to typescript. (47750)
  • PaletteEdit: Convert to TypeScript. (47764)
  • navigateRegions: Convert to TypeScript. (48632)
  • withFallbackStyles: Convert to TypeScript. (48720)
  • withFilters: Convert to TypeScript. (48721)
  • withFocusReturn: Convert to TypeScript. (48748)
  • withNotices: Convert to TypeScript. (49088)
  • Packages: Remove completely two deprecated webpack plugins. (48770)

Tools

  • Env: Fix typo / grammar README.md. (48952)
  • ci: Add Rich Text code owner. (48727)

Testing

  • Add pageUtils.pressKeys to playwright utils. (49009)
  • Add artifacts upload for the performance tests. (48243)
  • Fix flaky block hierarchy navigation test by better inserter selection. (48780)
  • Migrate multi-block selection end-to-end tests to Playwright. (48035)
  • Navigation block end-to-end tests: Default to my most recently created menu. (48132)
  • Upgrade Jest from 27 to 29.5.0. (47388)
  • Duotone: Style Engine: 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. and associated refactoring. (49033)
  • Query Block: Add tests for getValueFromObjectPath() util. (48956)

First time contributors

The following PRs were merged by first time contributors:

  • @abhi3315: Link Control – Add support for text only labels. (47930)
  • @hbhalodia: Change higher order with-constraint-tabbing from .js to .tsx. (48162)
  • @sboerrigter: Fix incorrect css property in editor-color-palette documentation. (48333)
  • @shreyasikhar: Site Editor Sidebar: Add line-height for template/parts name and update width for edit button. (48160)
  • @suvrodattamitu: Style Engine: Fix wrong property name letterSpacing to lineHeight. (48091)
  • @tomdevisser: Remove copy for managing a block’s style variations. (48367)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw@abhi3315@adamziel@afercia@alexstine@andrewserong@annezazu@brookewp@carolinan@chad1008@ciampo@dcalhoun@draganescu@ellatrix@fluiddot@geriux@getdave@gvgvgvijayan@gziolo@hbhalodia@jorgefilipecosta@jsnajdr@kevin940726@MaggieCabrera@Mamaduka@marekdedic@ndiego@ntsekouras@oandregal@ockham@richtabor@sboerrigter@scruffian@shreyasikhar@spacedmonkey@suvrodattamitu@tellthemachines@tomdevisser@tyxla@WunderBart@youknowriad@t-hamano

Props to @welcher for co-leading the release, @priethor for feedback, and @saxonfletcher and @joen for assets creation.

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