What’s new in Gutenberg 14.5? (9 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.


Gutenberg 14.5 has been released and is available for download!

It consolidates the list view and document information, expands margin and padding support while improving spacing visualizers, and sets the groundwork for future releases with numerous 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.

Table of Contents

Access the list view and document information all from one panel

Prior to Gutenberg 14.5, there were separate icons in the Editor toolbar for “List View” and “Details.” The Details popover presented a document outline and information like the character and word count. The List View panel displayed a hierarchical view of all blocks in the document.

The Details popover and List View panel have now been combined into a single panel offering a more streamlined way to manage the current document. This new “Document Overview” panel is accessible by clicking on the original List View icon in the toolbar.

Confidently edit 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. spacing using improved visualizers

Configuring block spacing (margin, padding) can be tricky, especially when determining how the spacing of one block will impact those blocks around it. Spacing visualizers significantly improve this experience by allowing you to “visualize” each change you make.

Gutenberg 14.5 enhances this functionality by displaying visualizers as soon as you hover over a spacing control rather than just when edited. This is a small change, but an important one since most CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks now support spacing controls. The release itself adds spacing to numerous comment-related blocks.

Changelog

Enhancements

  • Add block pattern categories’ descriptions to the 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/. and update the descriptions. (45244)
  • Create Block: Update templates to use APIs introduced in WP 6.1. (44185)
  • setAvailableMetaBoxesPerLocation: Merge new metaboxes into existing. (45156)
  • Spacing visualizer: Add option to trigger with mousover as well as value change. (44955)
  • Style Engine: Add support for dimensions.minHeight property. (45334)
  • Try: Add layout classnames to inner block wrapper. (44600)

Block Library

  • Audio, Video: Add toolbar button to add/remove caption. (45112, 45113)
  • Comment Template, Post Comment Count, Post Comments Form, Post Comments Link: Add spacing support. (45101, 45150, 45091, 45184)
  • Gallery: Register styles with Style Engine. (43070)
  • Navigation: Return undefined from useEffect. (45239)
  • Social Icons: Add rel attribute. (45469)
  • Video: Update tracks editor icon to text button. (45245)

Components

  • Block mover button: Do not show focus styles on pointer interactions. (45126)
  • BorderControl, BorderBoxControl, BorderRadiusControl: Update control components to allow 40px height. (41860)
  • BoxControl, Card, ToolsPanel: Remove unnecessary wrappers in stories. (45305)
  • Button: Change the color on the destructive button focus state. (44427)
  • Button: Refactor Storybook to controls and align documentation. (44105)
  • ColorPalette: Convert to TypeScript. (44632)
  • DateTimePicker: Add __next* props in Storybook. (45164)
  • FontSizePicker: Update design when withSlider is set. (44598)
  • FormFileUpload: Remove unused story file. (45286)
  • NumberControl: Add custom spin buttons. (45333)
  • RadioGroup: Mark as deprecated. (45389)
  • Navigator: Revert the removal of overflow styles from NavigatorScreen. (45303)
  • SelectControl: Add onChange, onBlur, and onFocus to storybook actions. (45432)
  • Storybook: Addon to wrap stories in max-width div. (45134)
  • TextControl: Set Storybook control types on help, label and type. (45405)
  • ToggleGroupControl: Add de-selectable variant. (45123)
  • ToggleGroupControl: 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. props from types. (45114)

Post Editor

  • Edit Post: Improve distraction-free mode notices. (45348)
  • hasChangedContent: Remove obsolete blocks check. (45090)
  • Move document information and outline to list view panel. (44788)

Global Styles

  • Add :visited pseudo selector to 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. schema. (45236)
  • Embed, Gallery, Video: Add deprecation for the caption element. (45166, 45173, 45169)
  • File Block: Add a deprecation for the button element class name. (45159)
  • Table Block: Add a deprecation for the figcaption element class name. (45161)

Bug Fixes

  • Ensure block content is always returned as a string after processing. (45330)
  • Fix distraction free shortcut typo. (45186)
  • Fix resizeable editor scrolling. (45189)
  • Fix handling of nullish comments in the pot-to-PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher script. (45414)
  • Fix image caption supports Voice Control. (44850)
  • Fix PHP warning in pattern categories REST API controller. (45410)
  • Fix Prevent infinite 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. in Tag Processor in certain truncated documents. (45537)
  • Hide insertion point when moving out of the canvas. (45420)
  • Metaboxes: Perform hasMetaBoxes check on every save. (45145)
  • Prevent unexpected copying of the post title. (41284)
  • Raw Handling: When pasting bullet characters, convert to astericks for markdown converter. (45017)
  • Web Font: Fix ascent/descent-override property typo. (45125)

Block Library

  • Button: Reset background-image property for outline button style. (45234)
  • Cover, Search, Spacer: Fix control widths. (45329)
  • Navigation: Fix saving/loading experience of uncontrolled blocks. (45486)
  • Navigation: Add padding to buttons when Submenus Open on click is enabled. (44605)
  • List: Fix migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. when the nested list is invalid. (44822)
  • Page List: Allow direct selection of nested Page List block by avoiding dual rendering within block. (45143)
  • Site Tagline: Fix user permission 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. errors. (45140)
  • Site Title: Avoid 403 errors for users with low permissions. (45093)

Components

  • AnglePickerControl: Set Storybook label control type to text. (45122)
  • AutocompleteUI: Close popup when click happens outside of the popover. (44795)
  • BorderControl: Await floating-ui state changes when rendering/opening popover to fix 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. failures. (45241)
  • Button component: Fix RTL alignment when containing icon and text. (44787)
  • ColorPalette: Fix transparent checkered background pattern. (45295)
  • ExternalLink: Update to support onClick handler. (45214)
  • InputControl: Allow inline styles to be applied to wrapper instead of inner input. (45340)
  • ItemGroup: Fix RTL text alignment when item is clickable. (45280)
  • Popover: Fix deprecations. (45195)
  • PublishDateTimePicker: Retrieve all future posts in a given month. (44540)
  • SpacingSizesControl: Remove UnitControl inline style use. (45412)
  • TabPanel: Add tests and changelog for onSelect behavior change. (45211)
  • UnitControl: Fix disabled style is overridden by forms.css. (45250)
  • Visual Editor: Fix permission error. (45262)

Site Editor

  • Fix clipped body background style in the Site Editor. (45261)
  • Only mark the ‘Site’ menu item active when editing a home template. (42807)

Performance

Documentation

  • Add a readme to the letter spacing component. (45308)
  • Add changelogs for internal refactorings using inert. (45269)
  • Add “Do not use in production” message to content locking experimental 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.’s. (45291)
  • Add Storybook intro. (45115)
  • Code Quality: Fix some misspelled words. (45222)
  • Disabled: Update documentation to clarify the absence of inert polyfill. (45272)
  • Fix incorrect character in code example. (45355)
  • Fix missing anchor link in FAQ URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (45232)
  • FontSizePicker: Update changelog for #45041. (45180)
  • Updating curation document to include content lock ability. (44908)
  • useAnchorRef: Update deprecation message. (45302)

Code Quality

  • Block Editor: Improve MediaReplaceFlow tests. (45424)
  • Block Editor: Refactor align tests to RTL. (45152)
  • Editors: Refactor icon tests to follow no-container rule. (45422)
  • Fix indent and quote in dependbot.yml. (45167)
  • Fix PHP 8.1 deprecation for strncmp(). (44829)
  • Popover: Use new placement prop instead of legacy position prop. (44392, 44387, 44389, 44398, 44399, 44394, 44395, 44390, 44396, 44388)
  • PostTextEditor test: Wrap .blur calls in act(). (45243)
  • Replace the MainDashboardButton slot with a setting in the site editor. (45149)
  • Run script loader test. (45288)
  • Site Editor: Move the save view state to the edit site store. (45200)
  • Small follow-ups to the distraction free mode PR. (45151)
  • Tests: Use container instead of container.firstChild for snapshots. (45278)
  • useFocusOutside: Rewrite hook to TypeScript, rewrite tests to model RTL and user-event. (45317)
  • useFocusableIframe: Refactor to TypeScript. (45428)

Components

  • Add a popover variant prop and refactor popovers to use it, deprecate isAlternate. (45137)
  • Add parseQuantityAndUnitFromRawValue tests. (45260)
  • FontSizePicker: Rewrite unit tests to use userEvent and be more comprehensive. (45298)
  • BorderBoxControl: Improve tests. (45208)
  • ContextSystemProvider, useUpdateEffect, SlotFill, Snackbar, TabPanel: Refactor to pass exhaustive-deps. (45044, 44403, 44934, 44935)
  • Remove unnecessary .firstChild from tests. (45419)
  • Update some ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 18 related types. (45279)

Global Styles

  • Add wp_theme_has_theme_json as a public API to know whether a theme has a theme.json. (45168)
  • Deprecate WP_Theme_JSON_Resolver:Theme_has_support(). (45380)

Tools

Testing

  • Add Playwright Compatibility-classic-editor Test. (43979)
  • Add end-to-end tests for Drag-and-Drop in the inserter. (44631)
  • Cleanup after the writing flow end-to-end tests. (45119)
  • Fix failing PHPUnit tests. (45265)
  • Fix uploading artifacts even when the tests are successful. (45187)
  • Migrate 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.-rendering test case. (44535)
  • Migrate tests to Playwright. (43963, 45267, 44916, 44507, 45393, 43964, 45202)
  • Re-enable skipped Gallery block end-to-end test. (45266)
  • Try fixing Site Title flaky end-to-end tests. (45160)
  • Update Playwright to v1.27. (45193)

Build Tooling

  • ESLint: Add and enable eslint-plugin-testing-library. (45103)
  • ESLint: Exclude Playwright tests from testing library rules. (45366)
  • Fix native Demo editor build error when using Xcode 14 to build to a physical device. (45120)
  • Remove comments from compiled styles. (43177)
  • Upgrade rtlcss to v4.0.0. (43208)

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.

Post Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.512.08s70.53ms
Gutenberg 14.411.97s69.15ms
WordPress 6.09.29s42.64ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.59.35s77.82ms
Gutenberg 14.411.56s74.72ms
WordPress 6.06.92s37.79ms

Note that the performance benchmark tests were automatically run against 6.0 rather than 6.1. This is because the “Tested up to” version 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 was not updated to 6.1 once the new version of WordPress was published. This will be corrected for Gutenberg 14.6.

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @alvitazwar @andrewserong @annezazu @aristath @BE-Webdesign @bph @brookewp @carolinan @chad1008 @ciampo @dcalhoun @dmsnell @ellatrix @fluiddot @GeoJunkie @georgeh @getdave @glendaviesnz @gziolo @Initsogar @jorgefilipecosta @jornp @jsnajdr @kevin940726 @KevinBatdorf @kienstra @Mamaduka @mikachan @mirka @noisysocks @ntsekouras @oandregal @pkorzelius @pooja-muchandikar  @ramonjd @SavPhill @scruffian @SiobhyB @Soean @t-hamano @talldan @tellthemachines @tyxla @walbo @youknowriad

The following PRs were merged by first-time contributors:

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

Thanks to @priethor and @mamaduka for their assistance with the release, and props to @joen for the image and video!

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