What’s new in Gutenberg 15.2? (22 February)

“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/” is published following every Gutenberg biweekly release, showcasing new features included in the release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Site Editor (formerly called Full Site Editing) projects. Previous release posts can be found via 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.).

Gutenberg 15.2 has been released and is available for download!

The latest version of Gutenberg, 15.2, has made frequently requested improvements to the template editing experience allowing users to enjoy a better editing experience with more efficient and intuitive controls. 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 and additional control support for blocks are also notable additions.

Table of contents

Edit templates and template parts fearlessly with revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.

Before Gutenberg 15.2, the option to access the revision comparison screen was not surfaced in the site editor when creating or editing templates and template parts. This sometimes resulted in uncertainty about what to do if changes needed to be reverted to an earlier saved state or what would happen if a template was inadvertently modified. This challenge has been frequently raised as a pain point in user feedback.

The template and template part inspectors now have a button to access revisions for templates. This helpful and convenient option will allow users creating templates and template parts in the site editor to revert to an earlier saved state quickly. This will help ensure that templates and template parts can be tweaked and adjusted as needed without fear of losing any of the progress made. (45215)

Enhancements to navigation in the Site Editor

Until now, moving through the site editor to access navigation menus, templates, and template parts required transitions in and out of the editor experience to find the item to be edited. Further, saving multiple parts of a site required individual saves, and returning to the main WordPress dashboard required multiple clicks.

Gutenberg 15.2 refines the site editor navigation experience to allow access to templates, template parts, and the primary 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. more easily with improved navigation while working in the site editor. Convenient buttons to save all changes across navigation, template, and template parts with a single click as well as the addition of a more prominent link to return to the WordPress dashboard, have also been added. (47777),(47950),(47142)

When creating a new template, it can be overwhelming to start from a blank page.

A new modal overlay, introduced in Gutenberg 15.2, allows one to easily choose from a selection of starting patterns when creating a new template. If a minimal approach is preferred, though, never fear! The option to start with a fallback pattern is also available.  (46248)

Continued accessibility improvements

The Gutenberg team is committed to making the editing experience accessible for all users. One way this is accomplished is by implementing improvements for those using screen readers, keyboard navigation, and other assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology to navigate Gutenberg more easily. Some of the accessibility 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 and enhancements in Gutenberg 15.2 include improved labeling, optimizing the tab and arrow key navigation, and ensuring proper hierarchy of headings. (45135), (47898), (47148), (47426), (43848), (47855), (47895)

Other notable highlights

An option has been added to set an aspect ratio for images in the 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. 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.. This allows more options for controlling the size and proportions of the image without needing to set width or height parameters explicitly. (47854)

Support for border color, style, and width has been added to the Button block as a part of ongoing efforts to bring more design controls to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks. (44574)

Based on long-requested feedback, an 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. length control has been added to the Post Excerpt block. (44964)

Changelog

Enhancements

Template Editor

  • Add a nested level when selecting templates or template parts. (47777)
  • Add: Modal to choose a start pattern on new templates. (46248)
  • Update gutenberg_get_template_hierarchy. (47716)
  • Add template revision button. (45215)

Site Editor

  • Add back link to Design heading in site editor navigation to return to Dashboard. (47950)
  • Adds a global save button to the site editor. (47142)
  • Tidy up the generation of the site editor page title. (48053)

Block Library

  • Button: Update: Make button a content block. (47936)
  • File block: Add color block support to File block. (41870)
  • Navigation: Add integration tests for NavigationMenuSelector component. (47825)
  • Navigation: Updates “Add Submenu item” text to “Add Submenu link”. (48030)
  • Post excerpt: Add excerpt length control. (44964)
  • Update: Make OffCanvasEditor use LeafMoreMenu by default. (47844)
  • Add aspect-ratio to post featured image block. (47854)
  • Button: Adopt support for border color, style, and width. (44574)
  • Latest Comments: Add typography support. (43310)
  • Verse: Adopt border supports. (48021)

Global Styles

  • Extract the Global Styles Typography Panel into block-editor package. (47356)
  • Move more link about custom CSSCSS Cascading Style Sheets. to part of description. (47781)
  • Site Editor: Update ‘Additional CSS’ subtitle string. (47671)
  • Style Book: Exclude blocks that are not allowed to insert. (47461)

Block Editor

  • Migrate from TextControl to NumberControl to remove margin overrides. (47160)
  • Add settings “drawer” to Link Control. (47328)
  • Button: Prepend HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. to Buttons block links when missing protocol. (47311)
  • Show a pointer/hint in the settings tab informing the user about the styles tab. (47670)
  • [Patterns]: Reorder pattern categories. (47760)

Components

  • Add parent navigation support for the navigator component. (47883)
  • Zoom out mode: Scale 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. instead of contents. (47004)
  • Components: Add support for named arguments in the navigator components. (47827)

Bug Fixes

Block Library

  • Embed: Fix: Remove browser default border for iframe in the editor. (47987)
  • File block: Re-add editor styles for classic themes. (47686)
  • Image: Revert “Prevent the image from being resized larger than its container”. (47846)
  • Image: Update image block margins on RTL. (47617)
  • Navigation Block inspector: Fix link UIUI User interface popover opening on links that have a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (47828)
  • Navigation: Close Link UI if cancelled. (48029)
  • Navigation: Enable undo after creating a new menu. (47683)
  • Navigation: Fixes undo and redo for nesting operations in the navigation block’s inspector. (47633)
  • Navigation: Remove the IS_GUTENBERG_PLUGIN check around block_core_navigation_parse_blocks_from_menu_items. (47824)
  • Navigation: Update deps for the useEffect that creates navigation menus. (47912)
  • OffCanvasEditor: Only allow some blocks to be converted to submenus. (47974)
  • Page List: Respect the selected parent page when converting to a list of navigation links. (47651)
  • Read More: 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.: Update string concatenation method in read more block. (47815)
  • ToolsPanel: Display optional items when values are updated externally. (47727)
  • [Quote]: Fix deprectated large style specificity rule. (47969)
  • Fix the ‘WP_HTML_Tag_Processor’ file path. (47823)
  • Cover: Ensure url is not malformed due to sanitization through wp_kses. (47906)

Site Editor

  • [Block Editor]: Lock blockInspectorAnimation setting. (47740)
  • Disable Strict Mode, breaks dev site editor. (47701)
  • Add: Modal to choose a start pattern on new templates. Take 2. (47927)
  • Fix ComplementaryArea’s initial isActive state. (47498)
  • Fix custom Template Parts rename action. (47932)
  • Fix site editor navigation. (48025)
  • Shadow: Move shadow into own panel. (47634)
  • Specify active state color for template navigation button. (47851)

Block Editor

  • useBlockSync: Change subscribed.current on unsubscribe. (47752)
  • Edit Post: Fix the ‘inlineToolbar’ settings toggle. (47960)
  • Fix clicking on the toggle button not closing the block inserter. (47926)
  • LinkControl: Fix scrollbar displayed on toggle link settings. (47986)
  • Rich text: Stabilise onFocus. (47685)
  • Block Spacing: Don’t show UI when only one direction is supported. (47523)
  • [Layout]: Fix align controls for hybrid themes. (47961)

Design Tools

  • 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.: Fix application of borders. (47630)
  • Image: Allow deprecated blocks to render border-radius. (47766)
  • ToolsPanel: Ensure display of optional items when panel id is null. (47864)

Global Styles

  • Fix incorrect targeting of block wrappers for root padding in the edi…. (48002)
  • Fix infinite render of inline block preview. (47697)
  • Fix: Issues on block level settings. (47842)

Components

  • ColorPalette: Ensure text label contrast checking works with CSS variables. (47373)
  • SelectControl: Fix multiple prop styling. (47893)

Post Editor

  • Fix multi entities saved state in the post editor. (47734)
  • LocalAutosaveNotice: Use stable notice id to prevent double notices. (47776)
  • Distraction free mode: Fix keyboard shortcut not working. (47900)
  • Term sorting is incorrect in flat term selector. (47795)
  • useResizeObserver: Handle strict mode double effects. (47703)

Accessibility

  • List view: Modify the shortcut to focus while open. (45135)
  • Add an aria label to the site save dialog. (47898)
  • Fix UrlInput combobox to use the ARIA 1.0 pattern. (47148)
  • Fix constrained tabbing failures with Safari and Firefox. (47426)
  • Fix the headings hierarchy in the 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.. (43848)
  • Site Editor: Append template type and name to the site editor page title. (47855)
  • Template editor: Only disable the save button if no changes rather than hiding it. (47895)

Performance

  • Avoid string-allocation on keypress with inputRule. (47094)
  • Fix empty results handling in performance test results. (47646)
  • Fix typo in performance script name. (47647)
  • Lodash: Remove from wordpress/keycodes package. (47737)

Block Editor

  • Block Editor: Optimize __unstableGetVisibleBlocks(). (47681)

Site Editor

  • 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/. StrictMode again. (47639)

Block Library

  • Navigation: Performance: Improve params in block_core_navigation_get_most_recently_published_navigation. (47998)
  • Page List: Block improvement.. (47981)
  • Page List: Performance: Improve page list callback. (48004)
  • Post Title: Performance: Render_block_core_post_title – Use post object instead of id. (48001)
  • Template Part: Performance: Replace usage of wp_get_theme()->get_stylesheet() with get_stylesheet(). (48027)
  • Tweaks to gutenberg_render_layout_support_flag. (48003)

Data Layer

  • Lodash: Refactor away from _.get() in resolvers cache middleware. (47743)
  • Lodash: Refactor away from _.mapValues() in data registry. (47742)
  • Lodash: Refactor persistence 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 away from _.merge(). (47790)
  • Lodash: Remove from wordpress/data’s getResolutionState(). (47838)
  • Lodash: Remove from wordpress/data. (47848)
  • Lodash: Remove from useDispatchWithMap(). (47835)

Template Editor

  • Disable lazy loading term 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. get_block_templates. (47999)

Themes

  • Improvements on append_to_selector method. (47833)

Block Directory

  • Optimize DownloadableBlocksPanel. (47679)

Experiments

  • Handle block metadata attribute and related experimental APIs. (47791)
  • Rename the “experiments” export to “privateApis”. (47975)
  • [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.] Rename experiments package to private-apis. (47839)

Documentation

  • Add: Database credentials to wp-env documentation. (47940)
  • Block schema and block supports docs: Add dimensions and position settings. (48057)
  • Components: Polish heading level component APIs. (47788)
  • Docs: Add ancestor property to block-registration.md doc. (45832)
  • Docs: Don’t recommend using short array syntax in WP_HTML_Tag_Processor. (47958)
  • Docs: Fix the incorrect link to eslint-plugin-jsx-a11yAccessibility 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). (47773)
  • Fix unbalanced parenthesis in Element README. (47700)
  • Minor updates in Private APIs. (47953)
  • Set block attributes to require either type or enum. (45365)

Code Quality

  • Core Data: Fix ESLint warnings for the 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. directory. (47811)
  • ESLint: Change jsdoc/check-line-alignment from warn to error. (47878)
  • ESLint: Fix a bunch of ESLint alignment warnings. (47872)
  • Enable react-hooks/exhaustive-deps eslint rules. (24914)
  • Update moment and moment-timezone packages to fix timezone issues. (47879)

Components

  • AnglePickerControl: Refactor to TypeScript. (45820)
  • BorderBoxControl: Migrate tests to TypeScript, remove act() call. (47755)
  • BoxControl: Convert to TypeScript. (47622)
  • ComboboxControl: Convert to TypeScript. (47581)
  • CustomSelectControl: Privatise __experimentalShowSelectedHint using wordpress/experiments. (47229)
  • CustomSelectControl: Update size prop options to new format in Storybook examples. (47779)
  • Navigator: Add more pattern matching tests, refine existing tests. (47910)
  • NavigatorButton: Reuse Button types. (47754)
  • Panel: Convert to TypeScript. (47259)
  • Popover: Lock the __experimentalPopoverPositionToPlacement function. (47505)
  • Refactor Toolbar component to TypeScript. (47087)
  • Remove BaseField component. (47911)
  • Remove unnecessary act() from Button tests. (47687)
  • Remove unnecessary act() from DropdownMenu tests. (47692)
  • Remove unnecessary act() from Popover tests. (47690)
  • Remove unnecessary act() from ToolsPanel tests. (47691)
  • ResizableBox: Refactor styles to TypeScript. (47756)
  • TreeGrid: Convert to TypeScript. (47516)
  • MenuItemsChoice: Refactor to TypeScript. (47180)
  • ToolsPanel: Refactor Storybook examples to TypeScript, fix types inconsistencies. (47944)

Block Library

  • Gallery: Minor code quality update. (47774)
  • Image: Simplify the method for getting block editor settings. (47903)
  • Navigation: Chore Remove unexistant parameter from selectNavigationMenus call. (47941)
  • Site Logo: Simplify the method for getting block editor settings. (47736)
  • Table Block: Don’t render empty section. (47753)

Site Editor

  • Make process_blocks_custom_css method protected. (47725)
  • Move site editor 6.2 specific code to the right file. (48023)
  • Remove: Unused code from the navigation inspector select logic. (48044)
  • Sync: 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. import changes from the core. (47875)
  • Add missing period in keyboard shortcut descriptions. (47899)
  • Extract the getSupportedStyles selector to the blocks store as a private selector. (47606)
  • Remove the name and element props from the TypographyPanel component. (47908)

Post Editor

  • Edit Post: Remove unnecessary ‘classnames’ 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. component. (47635)

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

  • Chore: Move Gutenberg_REST_Templates_Controller from 6.2 to 6.3 compatibility. (48077)

Patterns

  • Refactor: usePatternsCategories: Simplify categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. sorting. (47843)

Document Settings

  • Most Used Terms: Pass dependency to the useSelect. (47810)

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.

  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. API: Move into 6.2 Compat Folder since inclusion in Core. (47749)

Data Layer

  • Fixed incorrect type annotations in wordpress/data. (46881)

Tools

Testing

  • Add tests for gutenberg_render_layout_support_flag. (47719)
  • Migrate Heading block tests to Playwright. (47955)
  • Migrate query test to Playwright. (47995)
  • Navigation: end-to-end tests: Default to classic menu. (47867)
  • Navigation: end-to-end tests: Default to my only existing menu. (47744)
  • Remove obsolete failing test for Font Size Picker. (47913)
  • Shard playwright tests into two separate jobs using a matrix. (47629)
  • Update code and tests for 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. class after the back port in core. (47668)
  • Upgrade Playwright to 1.30.0. (48007)
  • end-to-end perf tests: Run each test in a separate page. (47889)
  • Fix editor.getBlocks for unmodified default block. (48093)
  • Visual 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. tests: Use default playwright utils. (47991)
  • Navigation: Add warning test. (45207)

Build Tooling

  • Add basic tsconfig.json validation. (47595)
  • Front-end classic performance test: Set TwentyTwentyOne when running in isolation. (47965)
  • Perf tests: Store test run results as artifact. (45747)
  • Performance suite: Track Largest Contentful Paint in the front-end. (47938)
  • Scripts: Add PostCSS (.pcss extension) file support to wp-scripts. (45352)
  • Performance: Restore initial reduce value in perf results log script. (47650)
  • Cherry-pick CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress.: Fix the default label to match the documentation. (47832)
  • Scripts: Use start without watcher using –no-watch. (44237)
  • Fonts API: Add missing files to lib/load.php. (48108)
  • Dependency Extraction Webpack Plugin: Update json2php dependency. (47831)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @ajlende @alexstine @andrewserong @aristath @brookewp @carolinan @ciampo @creative-andrew @d-alleyne @dcalhoun @dmsnell @dpellenwood @draganescu @ellatrix @flootr @fluiddot @georgeh @geriux @getdave @glendaviesnz @griffinjohndavid @gziolo @hellofromtonya @jhnstn @jorgefilipecosta @jsnajdr @kebbet @kevin940726 @kkmuffme @madhusudhand @MaggieCabrera @Mamaduka @marekdedic @mauteri @mcsf @mike-day @mirka @mreishus @nielslange @noahtallen @noisysocks @ntsekouras @oandregal @scruffian @sgomes @SiobhyB @spacedmonkey @t-hamano @talldan @tellthemachines @tyxla @wojtekn @WunderBart @youknowriad

Props to @annezazu, @joen, @juanmaguitar, and @priethor for reviewing this post.