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

What’s new in Gutenberg 14.4? (26 October)

“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.4 has been released and is available for download!

It introduces a distraction-free mode for text-based content creation, it redesigns the main pattern inserter, it continues to improve recent responsive design features such as Fluid Typography and much more!

Fun fact: Johannes Gutenberg invented the printing press in 1440 and this version of Gutenberg is the 14.4.0

Table of Contents

Explore easier navigation and larger previews of patterns in the Inserter

A new design offers a split view between categories and patterns, improving the navigation between categories and providing larger previews for patterns, resulting in improved discoverability and at a glance context.

Enjoy distraction free writing

Gutenberg 14.4 includes a new mode that reduces various parts of the editor interface, allowing for a more focused writing experience. When enabled, the sidebars are closed and toolbars fade away, leaving your content to take center stage. You can toggle this mode on/off as you’d like, depending on what you’re looking for.

Control image captions from the 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. toolbar

With this release, you can now add or remove a caption for an image directly from the block toolbar. If a caption has already been set, it will be included by default when the image is added to your content.

Lock the ability to edit the navigation block

The Navigation block offers an additional option when locking to restrict the ability to edit the content on its inner blocks (links and submenus). This helps further curate the experience, especially if you’re taking advantage of the ability to use block template parts in classic themes.

Lock modal open for the navigation block with all options locked, including the ability to edit a block.

Take advantage of improvements to Fluid Typography

In Gutenberg 13.8, Fluid Typography for font size presets was introduced to allow themers to generate fluid font size presets 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.. This release of Gutenberg builds on this work by automatically converting custom font sizes to fluid values when fluid typography is enabled.

Changelog

Enhancements

  • Add prop to disable block selection clearer in BlockList. (44517)
  • Multi-select: Fix 1px indent. (44709)
  • ServerSideRender: Add new skipBlockSupportAttributes prop. (44491)
  • Tag Processor: Add get_updated_html as a non-toString method of stringifying the markup. (44597)
  • Try: Add a small radius to the multi selection style. (44708)
  • Rich Text: Use fallback icon for highlight format. (44705)
  • Create Block: Allows custom keys to be generated in block.json files and package.json files. (44649)

Block Library

  • Comments: Add spacing support. (45102)
  • Tag Cloud: Add typography supports (except font size). (43452)
  • Block Locking: Adds content locking to the navigation block. (44739)
  • Image: Add toolbar button to add a caption. (44965)
  • List Item: Adopt typography supports. (43312)

Components

  • BorderBoxControl: Omit unit select when values are mixed. (44592)
  • SuggestionList: Use requestAnimationFrame instead of setTimeout when scrolling selected item into view. (44573)

Block Editor

  • Introduce distraction free mode. (41740)
  • Redesign the main pattern inserter. (44028)
  • Inserter: Add a more pronounced hover effect. (44711)

Design Tools

  • SpacingSizesControl: Increase slider’s max value to 300. (44956)
  • Style engine: Permit wp custom CSSCSS Cascading Style Sheets. properties. (43071)
  • Try color theming. (44668)
  • Global Styles: Modify Frame animation of styles grid. (39717)

Bug Fixes

  • Clickable placeholder upload button. (44817)
  • Insertion point showing up unexpectedly. (44702)
  • Overflowing patterns. (44853)
  • Inspector is usable on the top level block even if it is content locked. (44878)
  • Use active variation as the parent block if available. (44609)
  • Placeholder for the navigation link label, to be about the label. (44733)
  • Hide the inbetween inserter consistently as you move the mouse. (44814)
  • Margin visualiser: Apply negative value to margins with calc(). (44718)
  • Placeholder: Fix hover style. (44701)
  • Post editor: Rename view to Preview. (45074)
  • Prevent empty block toolbars from showing empty slots. (44704)
  • Use inert attribute instead of useDisabled. (44865)
  • cleanForSlug: Replace multiple hyphens with a single one. (44873)
  • Block Popover: Fix incorrect positioning of padding and margin visualizers on scroll. (44998)
  • Most used tags: Try fixing label. (44859)
  • Only include theme.css if the theme declares support for wp-block-styles. (44640)
  • Merge inner blocks if wrappers are equal. (43181)
  • Try nested patterns previews with block editor setting. (44784)
  • Design Tools Adjust the custom range steps to match the units chosen. (44959)
  • Global Styles: Invoke zoomed-out view when selecting a style variation. (44987)

Block Library

  • Avoid querying block templates during installation. (44584)
  • Buttons: Add specificity for the editor. (44731)
  • Embed Block: Add support for Tumblr Dashboard URLs. (44854)
  • Fix list outdents on Enter in quote block. (44809)
  • Fix the cover block focal point picker. (44991)
  • Fix typo for word occurred. (44914)
  • Fix visibility of nested Group block appender. (45050)
  • Fix: Follow discussion settings in the comments block edit. (44463)
  • Group, Row, Stack, Columns. Fix missing border 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.. (44696)
  • List Item: Allow Gutenberg to override coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block type. (44911)
  • List v2: Selection when creating paragraph from empty list item. (44864)
  • Remove anchor support from the navigation block. (44721)
  • Removes __unstableMaxPages attribute from Page List block (and Nav block). (44415)
  • Site Logo: 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. (45104)
  • Site logo: Centered state, for upload button. (44861)
  • Media: Cover block text color heuristic for cross origin media. (44552)
  • Icons: Arrow icons being misaligned. (44666)
  • Patterns: Hide list items from content area of content locked blocks. (44676)
  • Templates 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.: Avoid PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher warning when getting dynamic template data. (44783)
  • Block Settings: Show move to on nested blocks when only one root block. (44827)
  • Navigation: Fallback to a classic menu if one is available. (44173)

Site Editor

  • Toggle Navigation Menus 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.. (44860)
  • Zoomed out view: Keep list view open when entering mode. (44781)

Block Editor

  • Cover: Fix erroneous focus style in editor. (44707)
  • Native inner blocks merge where appropriate. (45048)

Typography

  • Fluid typography: Convert server-side block support values. (44762)
  • Fluid typography: Covert font size number values to pixels. (44807)
  • Fluid typography: Ensure fontsizes are strings or integers. (44847)
  • Font Size Picker Hint: Fallback to font size slug if name is undefined. (45041)
  • Make custom font sizes appear fluid in the block editor when fluid typography is enabled. (44765)
  • Search block: Ensure font sizes values are converted to fluid in the editor. (44852)
  • Fluid typography: Convert font size inline style attributes to fluid values. (44764)

Components

  • FontSizePicker: Fix 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. order in RTL languages. (44590)
  • Navigator: Restore focus only once per location. (44972)
  • Spacing Sizes Control: Try improving layout spacing. (44858)

Global Styles

  • Ensure style card effect doesn’t cause scrollbars to appear. (44823)
  • Fluid Typography: Fix 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. in global styles where fluid clamp rules were not calculated for custom values. (44761)

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)

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.414.9s78.81ms
Gutenberg 14.315.3s84.59ms
WordPress 6.110.4s38.95ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.41.5s77.73ms
Gutenberg 14.34.7s75.05ms
WordPress 6.17.6s41.51ms

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @ajlende @alanjacobmathew @amustaque97 @andrewserong @annezazu @BE-Webdesign @benridane @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @costdev @danielbachhuber @dcalhoun @desrosj @dinhtungdu @draganescu @ellatrix @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @jasmussen @jeremylind @jorgefilipecosta @joshuatf @jrfnl @jsnajdr @kevin940726 @Mamaduka @mikachan @mirka @mtias @noisysocks @ntsekouras @oandregal @ockham @pento @PooSham @ramonjd @ryanwelcher @sabernhardt @SantosGuillamot @scruffian @Soean @t-hamano @talldan @tellthemachines @thelovekesh @tyxla @walbo @youknowriad

The following PRs were merged by first time contributors:

  • @benridane: Fix list outdents on Enter in quote block. (44809)
  • @jeremylind: FIX: Typo in block.json schema default scope values. (44944)
  • @PooSham: Add support 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/. 18 and later to jest-preset-default. (44680)
  • @thelovekesh: package(prettier-config): Update documentation. (44620)

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

Thanks to @priethor and @annezazu for their assistance with the release, and props to @javiarce for the images and videos!

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

What’s new in Gutenberg 14.3? (12 October)

“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.3 has been released and is available for download!

It continues to build on recent writing flow improvements, refines image 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. creation via drag-n-drop, adds an enhanced tools panel to the Styles interface, and much more!

Table of Contents

Quickly navigate blocks of text

Continuing on from the improvements to writing flow in the last release. Gutenberg 14.3 includes support for alt + arrow keyboard combinations to make navigating blocks of text a breeze.

For example, if your cursor is towards the end of a long paragraph, you can quickly press alt + up arrow to move to the beginning of that paragraph. If you are already at the beginning of a text block, you’ll move to the start of the previous paragraph. Similarly, alt + down arrow will move you to the end of a block of text.

Improved drag and drop for images

As of Gutenberg 14.3, you can now drop an image onto an empty paragraph block to replace it with a new Image block.

Improved tools panels for the Styles typography controls

Building on past releases, Gutenberg 14.3 now brings the Tools Panels to the Styles interface. This makes the Styles interface consistent with the Block Settings interface, but it also makes it more usable by being able to reset values and opens the door to adding hidden-by-default controls, too!

Changelog

Enhancements

Post Editor

  • Optimize legacy post content layout. (44506)
  • Remove right border when sidebars are closed. (44613)

Block Library

  • Comment Pagination Numbers: Add background color. (43902)
  • Navigation Submenu: Use get_queried_object_id when setting current-menu-item classes. (44474)
  • Post Author: Include option to link author archive. (42670)
  • Post Terms: Add spacing support. (43646)
  • 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.: Hide instructions for FormTokenField. (44641)
  • Tag Cloud: Remove strtolower around taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. name. (16112)
  • Video: Update placeholder style. (44215)

Components

  • FontSizePicker: Make control take up full width. (44559)
  • Placeholder: Remove unnecessary background color. (44497)
  • Placeholder: Update placeholder style. (44190)
  • ToggleGroupControl: Fix unselected icon color. (44575)
  • ToolsPanel: Add subheadings and reset text to tools panel menu. (44260)

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: Deprecate non-string descriptions. (44455)
  • Tag Processor: Document and test XSS prevention in set_attribute. (44447)
  • Tag Processor: Throw error when supplied with unacceptable attribute names. (44431)
  • Tag Processor: Use (start,length) values for tracking tag name. (44479)
  • Tag processor: Update ‘since’ version tags to 6.2.0. (44432)

Global Styles

  • Hide the done button of the Global Style palette editor when there aren’t colors to edit. (44372)
  • Use ToolsPanel in Global Styles → Typography. (44180)

Block Editor

  • Allow dropping an image on an empty paragraph block to create an image block. (42722)
  • Writing flow: Implement Alt+Arrow. (44081)

Site Editor

  • Allow drag and drop for blocks and patterns in zoom-out mode. (44402)

Block Directory

  • Use ‘tertiary’ in missing block warning. (44368)

New APIs

Block Library

  • WP_HTML_Tag_Processor: Inject dynamic data to block HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. markup in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (42485)

Bug Fixes

  • Add a correct TS signature for useEntityRecords. (44448)
  • BlockDraggable: Change prop name passed to children when dragging is disabled. (44371)
  • Fix Lint warning/errors in cherry-pick script. (44662)
  • Fix: Content blocks with nested blocks always appear as top level. (44098)
  • Hide the Classic block in the Site Editor. (44554)
  • PHP 8.2: Remove deprecated callable in Style Engine value functions. (44561)
  • Persisted preferences: Fix context property of user 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. configuration. (44489)
  • Resizable editor: Fix height setting 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.. (44637)
  • Style engine: Kebab case preset slugs in the editor. (44406)
  • Add submenu block href only if URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org is not empty. (44337)
  • Update 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 to allow pseudo selectors on button property. (44303)
  • Preserve the generic signature of getEntityRecord and getEntityRecords through currying. (44453)
  • Template editor: Fix crashes due to undefined vars. (44482)
  • Add missing value to CSSCSS Cascading Style Sheets. font-display descriptor in theme.json. (44622)
  • Rich text: Avoid updating partial selection unnecessarily. (44330)
  • useMergeRefs: Don’t call/mutate refs passed if unused. (44629)

Block Library

  • Code Block: Add box-sizing to fix inconsistent layout. (44580)
  • Comment Author: Fix empty links created for the author’s name. (44650)
  • Comments: Support nested comments settings in the comments blocks. (44351)
  • Group: Legacy Group inner block wrapper should work with a constrained layout. (44660)
  • Image: Fix rotated image crop area aspect ratio. (44425)
  • Image: Upgrade reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-easy-crop to bring in fix for site 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.. (44408)
  • Navigation: Fix console error. (44594)
  • Navigation: Fix semitransparent burger icon. (44525)
  • Navigation: Try fixing link color in some TT2 contexts. (44578)
  • Paragraph: Disable drop cap control if text is aligned. (42326)
  • 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.: Fix borders after addition of overlay feature. (44286)
  • Post Featured Image: Fix application of default border style in editor. (44520)
  • Query Loop: Fix condition for displaying ‘parents’ control. (44630)
  • Query Loop: Rename Query Loop variations allowControls to allowedControls. (44523)
  • Quote block: Stop slash inserter popup showing in the citation. (44634)
  • Site Title: Fix link color not being applied in editor #37071. (44333)
  • Template part: Prevent adding block in post editor or inside post template or content blocks. (44480)
  • Video: Don’t display placeholder SVG when Video block selected. (44564)

Global Styles

  • Fix empty color indicator with a custom style. (44364)
  • Re-add styles that were removed for classic themes. (44334)
  • Remove border from Global Styles previews. (44556)
  • Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides. (44141)
  • Style cards: Fix focus style. (44612)
  • Theme.json: Fix some shadow properties not working properly in the site editor. (44569)
  • Use color hex + index as key in the Palette component color indicator. (44344)

Design Tools

  • Fix padding/margin visualizer accuracy. (44485)
  • Fix padding/margin visualizer placement. (44484)
  • Fix spacing property generation in flow layout type. (44446)

Components

  • BorderBoxControl: Ensure the most common unit selection is maintained. (44565)
  • Popover: Fix limitShift logic by adding iframe offset correctly (and a custom shift limiter). (42950)
  • Popover: Refine position-to-placement conversion logic, add tests. (44377)
  • Navigator Screen: Fix bug where focus moved erroneously. (44239)

Block Editor

  • Fix block search for non-Latin characters. (44652)
  • Prevent empty block toolbars from showing empty slots. (44704)

Widgets Editor

  • Add extra guarding against legacy 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. preview errors. (44635)

Themes

  • Theme export: Fix broken spacingScale export. (44555)
  • Theme export: Stop slugs being cast to integers when a theme is exported. (44589)

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)

  • TokenInput field: Try alternative approach to fix screen reader focus issue. (44526)

Patterns

  • Fix patterns drag and drop in Safari. (44366)

Post Editor

  • Add layout styles from Post Content block to post editor. (44258)

Performance

  • Compose: Introduce an in-house throttle() utility, deprecate Lodash version. (44225)
  • Improve Slot/Fill performance. (44642)

Documentation

  • Add documentation for extending the Query Loop block via variations. (44137)
  • Add more details about possible values for block assets in block.json. (44199)
  • Add missing import statement for useBlockProps. (44607)
  • Instruct people to keep using wp-scripts even when extending webpack. (44348)
  • Style engine: Updating and fleshing out documentation. (44405)
  • Style engine: Update readme. (44308)
  • Add callout for experimental packages. (44056)
  • Expand class-level documentation for WP_HTML_Tag_Processor. (44478)
  • Experiments: Add README.md and CHANGELOG.md. (44457)
  • Remove the package name from the sub-menu item for clarity. (44643)

Code Quality

  • Avoid calling get_blocks_metadata in WP_Theme_JSON constructor. (44658)
  • Block Popover: Use placement instead of position; move to useBlockToolbarPopoverProps hook. (44323)
  • CS/QA: Various minor fixes. (44551)
  • CS: Always use parentheses when instantiating objects. (44550)
  • CS: Remove redundant parentheses for include/require statements. (44544)
  • CS: Use pre-increment instead of post-increment. (44549)
  • Fix comment typo in document generation tools. (44583)
  • 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.: Use consistent string: ‘Link rel’. (20162)
  • PHP 8.2 | Fix deprecated embedded variables in text strings. (44538)
  • PHP 8.2 | Fix for partially supported callback. (44537)
  • PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS.: Use PHPCompatibilityWP. (44542)
  • QA: No control structures with empty body. (44548)
  • Script loader: Remove 6.1 wp actions. (44519)

Components

  • Components refactor Mobile to ignore exhaustive-deps. (44207)
  • Convert FontSizePicker to TypeScript. (44449)
  • FontSizePicker: Replace SCSS with Emotion + components. (44483)
  • RangeControl: Remove unused UseDebouncedHoverInteractionArgs type. (44411)
  • Refactor Notice to pass exhaustive-deps. (44157)
  • Refactor ResizableBox to pass exhaustive-deps. (44370)
  • Refactor Sandbox to pass exhaustive-deps. (44378)
  • Refactor SearchControl native files to ignore exhaustive-deps. (44381)

Block Library

  • Archive Block: Remove unnecessary spaces from class attributes. (44440)
  • Archive: No need to escape class variable. (44468)
  • Gallery: Remove unnecessary caption state. (44383)
  • Remove unnecessary view.js file from navigation-submenu block. (44570)

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

  • CS: All methods must declare visibility. (44543)
  • Move wp_enqueue_block_view_script to experiments. (44414)

Layout

  • 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. code quality changes from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to Gutenberg. (44661)

Parsing

  • Block Serialization Default Parser: Bring back no-more-tokens type. (44459)

Global Styles

  • Add blocks to the list of valid origins for theme.json. (44363)

Lodash

  • Lodash: Remove completely from @wordpress/compose package. (44568)
  • Lodash: Remove completely from @wordpress/library-export-default-webpack-plugin package. (44571)
  • Lodash: Remove completely from @wordpress/list-reusable-blocks package. (44567)
  • Lodash: Refactor away from _.flow(). (44500)
  • Lodash: Remove completely from @wordpress/block-directory package. (44206)
  • Lodash: Remove completely from @wordpress/rich-text package. (44204)

Tools

  • Scripts: Use default value for process.env.WP_SRC_DIRECTORY. (44367)
  • Limit access to experimental APIs to WordPress codebase. (43386)
  • Cherry Pick Script: Restore retrieval of merge_commit_sha. (44890)

Testing

  • Autocomplete Component: Add end-to-end tests (take two). (42905)
  • Fix failing quote to reusable block conversion end-to-end test. (44350)
  • Add strict meta schema validation test for block.json. (44423)
  • Migrate iframed block test to Playwright. (44164)
  • Add theme.json schema tests. (44252)
  • Remove enzyme completely. (44494)
  • Fix typo from in writing flow spec. (44358)
  • Fix typo in WP_Navigation_Page_Test. (44685)
  • Popover: Convert unit tests to TypeScript and modern RTL assertions. (44373)
  • Refactor AlignmentMatrixControl tests to use @testing-library/react. (44670)
  • End-to-end Test Utils: Don’t use hardcoded login credentials. (44331)
  • Refactor PluginPostPublishPanel tests to use RTL render. (44667)
  • Refactor AutosaveMonitor tests to @testing-library/react. (44492)
  • Refactor PostPreviewButton tests to @testing-library/react. (44470)
  • Refactor BlockSwitcher tests to @testing-library/react. (44493)
  • Refactor ResponsiveBlockControl tests to use @testing-library/react. (44669)
  • Style engine: Add JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. unit tests for outline properties. (44518)

Build Tooling

  • Upgrade Lerna to the latest version. (44456)
  • wp-env: Use case insensitive regex when checking WP version string. (44887)

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.314.3s79.51ms
Gutenberg 14.212.6s76.31ms
WordPress 6.09.8s41.28ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.310.8s72.89ms
Gutenberg 14.210.3s66.83ms
WordPress 6.07.5s36.81ms

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @ajlende @alecgeatches @andrewserong @anton-vlasenko @BE-Webdesign @BenoitZugmeyer @blindingstars @carolinan @chad1008 @ciampo @derekblank @dmsnell @ellatrix @getdave @glendaviesnz @gziolo @imanish003 @inc2734 @jameskoster @jasmussen @javierarce @jorgefilipecosta @jrfnl @kevin940726 @loxK @Lucisu @luisherranz @Mamaduka @michalczaplinski @ndiego @noisysocks @ntsekouras @oandregal @pagelab @philwp @ramonjd @Rink9 @ryanwelcher @SantosGuillamot @scruffian @Soean @sunyatasattva @t-hamano @talldan @tellthemachines @tyxla @vcanales @youknowriad

The following PRs were merged by first time contributors:

  • @alecgeatches: Add theme.json schema tests. (44252)
  • @BenoitZugmeyer: Use get_queried_object_id when setting current-menu-item classes. (44474)
  • @blindingstars: Update Theme JSON $schema to allow pseudo selectors on button property. (44303)
  • @imanish003: Add missing import statement for useBlockProps. (44607)
  • @loxK: Scripts: Use default value for process.env.WP_SRC_DIRECTORY. (44367)
  • @Lucisu: Fix empty links being created for the author’s name comment. (44650)
  • @philwp: Post Author block now includes option to link author archive. (42670)

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

Props to @talldanwp, @priethor, @getdave, and @gziolo for their assistance with the release, and props to @joen for the images and videos!

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

What’s new in Gutenberg 14.2? (28 September)

“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.2 has been released and is available for download!

It comes with writing flow improvements, a more polished Calendar 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., smarter autocompletions and much more!

Table of Contents

Smarter suggestions for 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 variations 

Block variations have been available in Gutenberg for a long time. They allow you to have similar versions of the same block that share some common functionality. From now on, if you have an active variation of the Query Loop block on your site and that variation has registered some block patterns, only those patterns will be suggested in the inserter.

For example, you might have a Products List block that is a variation of the Query Loop block. That Products List can also have a registered block pattern. Now, when inserting the Products List block, you will not see the default Query Loop block patterns but rather your own block pattern associated with the Products List. Pretty neat!

Improvements to the writing flow

Several improvements to the writing flow have been shipped in Gutenberg 14.2:

  • The sibling and line inserters now feature a more natural animation effect.
  • Selecting multiple blocks is now more visually consistent.
  • The block inserter is now hidden when the user is typing, reducing visual clutter.

Letter spacing in headings

It is now possible to modify the letter spacing of the headings directly in the Global Styles interface.

A more polished Calendar block

You can now set the background, link and text color of the Calendar block. Global Styles will now also affect the colors of the Calendar block and it will inherit the default text color from its parent block.

Four screenshots of the Calendar block in a 2 by 2 grid, each one of them using a different background color

New “Banners” and “Footers” block pattern categories

Two new block pattern categories are introduced in order to better reflect the structure of web pages. “Banners” here refers to visually distinctive elements that help structure or contrast the contents of a page (including headings and “hero” elements). 

A screenshot of the block inserter showing all of the block pattern categories

From now on, it is possible to autocomplete links in any block. Previously, blocks had to explicitly opt into this functionality with __experimentalSlashInserter  but now links will be autocompleted everywhere! The [[ shortcut is used to trigger the autocompletion in the editor.

Editor performance improvements

Introducing a new version of the List block that uses inner blocks uncovered a previously unknown performance issue: Whenever a block that contains inner blocks was displayed for the first time on a page it would re-render once for each level of nesting! So, if a List item was inside of a List that was inside of another List block, that block would re-render 3 times! This problem has now been fixed and the initial load performance of the editor should be improved.

Changelog

Deprecations

  • Officially deprecate the children and node block attribute sources. (44265)

Enhancements

Components

  • Link/Unlink buttons: Add more polished styling and UXUX User experience. (43802)

Global Styles

  • Allow setting Letter case and Decoration to ‘None’ and add Letter case to Global Styles. (44067)
  • Block supports: Allow overriding prettify options for enqueued CSSCSS Cascading Style Sheets.. (44248)
  • Show Letter Spacing in Global Styles -> Typography -> Headings. (44142)
  • Spacing presets: Switch to using numbers instead of t-shirt sizes for labels. (44247)

Block Editor

  • Hide all floating block UIUI User interface when typing. (44083)
  • Update animation for line and sibling inserter. (44269)
  • Warning component: Align the action buttons. (44328)

Block Library

  • Calendar block: Add color supports and polish styles. (42029)
  • Embed block: Mark which attributes should be considered content. (44039)
  • List Item block: Improve writing flow. (43954)
  • Post Navigation Link block: Add arrows. (40684)
  • Query Loop block: Suggest active variation patterns.
    (44197)

Patterns

  • Add a new categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. for block patterns called “Banners”. (44203)
  • Add a new category for block patterns called “Footers”.
    (44200)

Bug Fixes

Components

  • BlockMover: Clean up focus styles. (44241)
  • Fix animation running in loop while dragging an image on a dropzone. (44264)
  • Fix popover stacking in the customize widgets editor. (44282)
  • Link autocompleter: Enable for all blocks. (44078)
  • Remove unexpected has-text class when empty children are passed to Button. (44198)

Block Library

Bugfixes to blocks:
  • Cover block: Fix preview. (44321)
  • Freeform block: Hide “Convert to blocks” when the block locked.
    (44288)
  • Group block: Change default variation in inserter. (44176)
  • Missing block: Fix HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block check. (44327)
  • Navigation block: Fix submenu colors for imported classic menus.
    (44283)
  • Navigation block: Remove ellipses as menu icon options for now. (44222)
  • Pullquote block: Fix transform to quote crash.
    (44315)
  • 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. block: Fix height/scale overwriting img inline styles. (44213)
  • Query Loop block: Fix broken preview in specific category template. (44294)
  • Query Loop block: Fix variation with declaredicon object with src.
    (44270)
  • Avoid showing the recursion warning in previews when replacing template parts. (44256)
  • Ensure replacing a template part using a pattern doesn’t update the existing entity. (44221)
  • Fix demo content cover block text color. (44174)

Block Editor

  • Block Toolbar: Update position when moving blocks. (44301)
  • Capture state changes scheduled between render and effect. (38509)
  • Writing flow: Fix partial selection when dragging in between blocks. (44230)

Global Styles

  • Block supports: Prioritize prettify options over SCRIPT_DEBUG. (44254)
  • Fix padding on the post editor when RootPaddingAwareAlignments setting is enabled. (44209)
  • Remove the betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. label from global styles 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.. (44251)

Site Editor

  • Make template names and descriptions dynamic. (43862)
  • Prevent editor from creating multiple templates when multi-clicking the
    “create” button. (44146)

Keycodes

  • Keyboard Shortcuts: Fix settings 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. toggle shortcut. (43428)

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)

  • Add role=application to List View to prevent browse mode triggering in NVDA. (44291)
  • Block label and title don’t consider variations. (44250)
  • Make inline toolbar navigable by arrow keys. (43645)
  • Text Selection in Safari: Try new fix for recent version. (44148)

Performance

  • Avoid calling redux actions constantly when moving the mouse or scrolling. (44325)
  • Batch container block settings action calls. (43958)
  • Prevent resize observer loops in BlockPreview. (44319)

Documentation

  • Include information about multiple scripts support added in WP 6.1. (44155)
  • Popover: Write better documentation regarding the recent 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. (44195)
  • RangeControl component: Clarify rail vs track difference. (44057)
  • Update links in the Development Platform document. (44181)
  • Updating versions in WP for 6.0.2. (43826)

Code Quality

  • 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. template creation changes from CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • Enforce coding guideline regarding the usage of quotation marks. (44305)
  • Fix missing TS types for 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) in packages/components. (44277)
  • Preferences-persistence: Remove wordpress/compose dependency. (44202)
  • Refactor style engine border styles. (43594)
  • Removes whitespace from l18n-strings. (44314)
  • Renaming functions to match their naming in Core. (44266)
    (44299)
  • useInstanceId: Convert to typescript. (43790)

Updating dependencies

  • Update fast-average-color library to latest version. (44175)
  • Update json2php to v0.0.5. (44313)
  • Remove wp-editor from wp-edit-blocks dependencies. (33496)

Block Library

  • Comments Pagination blocks: Rename for consistency. (44287)
  • Embed block: Remove incorrect comments about block variations. (43834)

Components

  • Refactor NavigationMenu to ignore exhaustive-deps. (44090)
  • Refactor RangeControl to pass exhaustive-deps.
    (44271)
  • Popover: Add anchor prop which supersedes all previous anchor-related props. (43691)
  • UnitControl: Fix exhaustive-deps warnings. (44161)
  • UnitControl: Use hideHTMLArrows prop to hide spin buttons. (43985)
  • useSetting: Minor refactor. (44267)

Refactoring tests to use @testing-library/reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.

  • Refactor BlockControls tests to @testing-library/react. (44122)
  • Refactor ColorPalette tests to @testing-library/react. (44108)
  • Refactor KeyboardShortcutHelpModal tests to @testing-library/react.
    (44077)

Work to remove dependency on lodash

  • Compose: Introduce in-house compose and pipe utils. (44112)
  • Compose: Introduce in-house debounce() utility, deprecate Lodash version. (43943)
  • Lodash: Remove dependency from wordpress/widgets package. (44201)
  • Lodash: Refactor away from _.flowRight().
    (44188)

Testing

  • Storybook: Set up local 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. testing.
    (43393)

Tooling

  • Ensure all packages get minor/major version bump when requested. (44317)

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.28.4s48.69ms
Gutenberg 14.112.7s54.31ms
WordPress 6.06.4s29.97ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.24.1s44.76ms
Gutenberg 14.115.7s54.39ms
WordPress 6.05.0s26.15ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @ajlende @annezazu @apmatthews @aristath @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @geriux @glendaviesnz @gziolo @jasmussen @jorgefilipecosta @kebbet @kkoppenhaver @Mamaduka @matiasbenedetto @mcsf @michalczaplinski @mirka @mtias @noisysocks @ntsekouras @pagelab @ramonjd @t-hamano @talldan @tellthemachines @tyxla  @walbo @youknowriad

The following PRs were merged by first time contributors:

  • @kkoppenhaver: Update RangeControl documentation to clarify rail vs track. (44057)
  • @pagelab: Enforce coding guideline regarding the usage of quotation marks. (44305)

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

Props to @priethor @bernhard-reiter @matveb @cbravobernal for their assistance with the release and props to @javiarce for the images and videos!

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

What’s new in Gutenberg 14.1? (15 September)

“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.1 has been released and is available for download!

Table of Contents

Consolidating design tools in blocks.

Typography and Spacing support was added for blocks like 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., Buttons, Categories List, Comments Links, Latest Posts, Navigation, Query Pagination Links, Social Icons, etc.

This improvement allows users to customize their site more without dealing with CSSCSS Cascading Style Sheets.

A screenshot of all blocks that includes new options.

Better content locking experience

Duotone filters, 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. alignment and resizing are now disabled on content-locked blocks.

A small video showing how locked patterns work.

The menu selector moved from the Navigation block toolbar to the new “Menu” section in the inspector 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.. In this new section, you can now quickly access all the menus you have created through the “Manage menus” button.

A gif showing the moved Menu section.

Before this release, when importing a classic menu, Gutenberg automatically transformed it into a block menu and then updated the user site 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.. From now on, you will have to first save your changes in order to show the imported menu. If you don’t, the site will keep displaying the menu that you had used before importing the classic menu! This provides a better user experience as the menu is only changed when the user explicitly saves the template.

The navigation block keeps iterating on its user experience. All feedback is welcome!

Zoomed-out view in the site editor (experimental)

This feature provides a zoomed-out view in the site editor, allowing you to focus on site building rather than the details of each granular block. 

When in this mode, the users will have a quick overview of their site without having to scroll or using the native browser zoom-out function. Also, navigation between areas becomes easier with this new enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature..

This feature is still experimental so users have to enable it in “Experiments” under the “Gutenberg” menu item. If you want to explore using it, join this call for testing for the FSE Outreach program and start providing feedback!

Improving the theme developer experience

Box-shadow support included 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.

From now on, it won’t be necessary to use CSS to add box-shadow properties to the blocks, you can use theme.json to achieve this. Here’s an example of how to do this:

In color section, add a new property shadow to any block.

{
  ...
  "styles": {
    "elements": {
      "button": {
         "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

 

Block template parts for classic themes

Classic themes can now add support for block-based template parts, allowing users to build more parts of their site with blocks without fully switching to a block theme. The theme author can enable it by using the add_theme_support( ‘block-template-parts’) function.

Once enabled, a new “Template Parts” menu is visible under “Appearance” which displays the list of the template parts available for that theme.

A screenshot of the Template Parts menu item.

Let’s use an example:
If theme authors want the site footer to be editable using blocks, they have to create a file called footer.htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and save it inside their name_of_the_theme/parts/ directory. To use it on the front end, they need to call the block_template_part PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher function wherever they want to use a template part in their theme. In this case, it could be a footer.php file:

<?php block_template_part( 'footer' ); ?>

And that’s it! They can now update their footer in the Site Editor as if it were a block theme.

There will be a call for testing for this feature, feel free to join!

Global styles data are now filterable

Gutenberg 14.1 includes four filters to edit the global styles data in PHP.

  • global_styles_default => to 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. data provided by CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • global_styles_blocks => to filter data provided by the blocks (only styles so far).
  • global_styles_theme => to filter data provided by the theme.
  • global_styles_user => to filter data provided by the user.

Some use cases will now become much easier:

  • Providing settings dynamically. For example, color presets depending on some contextual information.
  • Allowing plugins to modify the existing data.
  • Editing or removing core data by code (color presets, etc).

You can read more about it in the documentation.

Improving the writing experience

Better multi-selection

Multi-selection feature now has a smoother experience by preventing some flashes of the block outline when you select between blocks or placeholders. 

Better block transforms organization

Paragraph, heading, list and quote are now shown in a separate menu subgroup. This way, they are easier to find as those are the most used transformations.

Screenshot 2022-09-12 at 12 19 57 PM
An example of the new block transforms subgroup

Changelog

Features

Block Library

  • Add select icon for Navigation Block’s menu button. (43674)

Full Site Editing

  • Add a zoomed out view to the site editor. (41156)

Enhancements

Design Tools support in Blocks

  • Archives: Add typography support. (43935)
  • Avatar: Add padding support. (43519)
  • Buttons: Add typography supports to button/s blocks. (43934)
  • Calendar: Add typography supports (except text-decoration). (43969)
  • Categories List: Add spacing support. (43647)
  • Comment Date: Add spacing support. (43656)
  • Comment Edit Link: Add spacing support. (43657)
  • Comment Reply Link: Add spacing support. (43658)
  • Gallery: Add padding and margin support. (43965)
  • Heading: Add missing typography support. (44003)
  • Home Link: Add typography support. (43307)
  • Latest Posts: Add typography supports. (43540)
  • List: Add missing typography block supports. (43311)
  • Navigation Link: Add typography support. (44005)
  • Post Content: Add typography supports. (43339)
  • 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 missing typography supports. (43341)
  • Query No Results: Add typography supports. (43551)
  • Query Pagination Next: Add missing typography supports. (43555)
  • Query Pagination Numbers: Add missing typography supports. (43559)
  • Query Pagination Previous: Add missing typography supports. (43556)
  • Query Pagination: Add typography support. (43552)
  • Query Title: Add missing typography supports. (43565)
  • Quote: Add missing typography supports. (43567)
  • Search block: Add typography supports. (43499)
  • Site Logo: Add padding and margin support. (43520)
  • Site Title and Tagline: Add text decoration support. (43972)
  • Social Icons: Add missing padding support, update margin support. (43885)
  • Table: Add missing typography supports. (43974)
  • Term Description: Add missing typography supports. (43568)
  • Verse: Add missing typography supports. (43569)

Block Library

  • Add: Content role to relevant audio block attributes. (44037)
  • Audio: Display upload error notices using snackbars. (43891)
  • Code: Add transformation to Paragraph. (43938)
  • Columns: Add axial block spacing to Columns block (alternate attempt). (44101)
  • Comments block (legacy mode): Update warning message wording. (43527)
  • Cover Block: Keep the inner contents in a physical direction even in RTL languages. (43663)
  • Create classic navigation menus as draft and dirty the site editor. (43580)
  • File: Display upload error notices using snackbars. (43893)
  • Gallery: Display upload error notices using snackbars. (43946)
  • Image: Display transformation error notice using snackbars. (44031)
  • Improves the UXUX User experience of menu management in the navigation block. (42987)
  • Mark which attributes of the video should be considered content. (44038)
  • Media & Text: Display upload error notices using snackbars. (43890)
  • Navigation: Add overlay close button to icon toggle control. (43067)
  • Navigation: Set the icon control to full width. (43844)
  • Navigation: Try adding minimal animation to overlay. (43851)
  • Navigation: Try making it possible for themes to have the X overlay the = icon. (43576)
  • Navigation: Update to use translate instead of top. (44082)
  • Prevent single Columns blocks transforming into Columns. (43641)
  • 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.: Add allowedControls in block variations for better extensibility. (43632)
  • Query Loop: Pass extra query args in 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/. call for accurate preview for extenders. (44093)
  • Quote: Restrict single block transforms to specific blocks. (44106)
  • Update: Add __experimentalRole attributes to media text block. (43957)
  • Video: Display upload error notices using snackbars. (43892)

Components

  • Add contextConnectWithoutRef() to bypass ref forwarding. (43611)
  • AlignmentMatrixControl: Keep the physical direction in RTL languages. (43126)
  • ColorPalette: Make popover style consistent. (43570)
  • DropdownMenu: Use KeyboardEvent.code, refactor tests to model RTL and user-event. (43439)
  • GradientPicker: Show custom picker before swatches. (43577)
  • Guide: Use code instead of keyCode for keyboard events. (43604)
  • NavigableContainer: Use code instead of keyCode for keyboard events. (43606)
  • Popover: Refactor to TypeScript. (43823)
  • Storybook: Support dashicons for testing. (43721)
  • Style engine: Pass CSS formatting options from global functions. (43886)
  • TextControl, TextareaControl: Add flag to remove bottom margin. (43782)
  • ToggleGroupControl: Decouple borderless style with icon use. (43771)
  • Upsize typography tools. (43331)

Block Editor

  • Add icons for different types of suggestions in LinkControl. (43970)
  • Add justification controls to constrained layout. (44065)
  • Adds block supports for metadata. (43986)
  • Better block transforms organization. (44072)
  • Block Setttings Menu Controls: Add unstableDisplayLocation prop. (43987)
  • Content width toggle: Polish wording and appearance. (43702)
  • CustomGradientPicker: Remove and deprecate outer margins. (43436)
  • Improve content locking experience. (43956)
  • Multi-select: Add transition to reduce chance of flash. (43510)
  • Partial multi selection: Limit if selection contains unmergeable block. (42934)
  • Rich text: Log deprecation message for multiline prop. (43613)
  • Show parent block as selected when there is content locking. (43918)
  • Simplify the inserter styles and scrollable. (44088)
  • TextTransformControl/TextDecorationControl: Migrate to ToggleGroupControl. (43328)

Post Editor

  • Add ‘isDeletingPost’ selector. (44012)

CSS & Styling

  • Categories List Block: Match the markup on the block editor to the front end. (43666)
  • Placeholders: Make dashed style a mixin, and apply across. (43512)
  • Separator: Remove appearance of “inset” style. (43948)

Patterns

  • Allow remote pattern registration in theme.json when core patterns are disabled. (43634)
  • Content lock ability. (43037)
  • Post type restriction 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. for patterns. (41842)

Global Styles

  • Added outline support for blocks via theme.json. (43526)
  • Block Spacing: Using spacing controls for block gap values to support presets in the UIUI User interface. (43466)
  • Add box-shadow support for blocks via theme.json. (41972)
  • Make global styles data filterable. (44015)

Testing

  • Draggable block tests: Click block inserter instead of pressing Enter key. (43734)

Document Settings

  • Display pretty permalink for draft posts. (43600)

Themes

  • Add cite to theme.json elements. (43543)
  • Block-based template parts for Classic themes. (42729)
  • 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. block: Enable gradient overlay. (43838)

Site Editor

  • Archive-PostType template UI. (42746)
  • New archive-$postType templates get proper fallback content. (43603)
  • Template for specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.: Only load posts from that category in post template block. (43699)

New APIs

Block Library

  • Add filter for inner blocks in the Navigation block. (37998)
  • Make it possible to import individual blocks. (42258)

Extensibility

  • Add a filter to build_query_vars_from_query_block. (43590)

Block API

  • Blocks: Add new render field to block.json. (42430)

Bug Fixes

Block Library

  • Code Block: Fix duplicate background color. (43599)
  • File Block: 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. from save function. (43050)
  • Fix block switcher preview scrollbar. (44079)
  • Fix block transform preview height. (44076)
  • Fix duplicate navigation block props. (43596)
  • Fix error in useClientWidth. (43585)
  • Fix site editor toolbar when block is bigger than viewport. (43548)
  • Fix the default icon for the navigation block. (44104)
  • Fix: Site logo rounded on mobile. (43903)
  • Fix: Site logo rounded. (43762)
  • Group: Fix click-first state. (43513)
  • Image: Display upload error notices using snackbars. (43767)
  • List: Add cut clipboard handler. (43609)
  • Navigation: Add current-menu-item also for archive links. (43800)
  • Navigation: Hide overlay preview settings when the overlay is off. (44032)
  • Navigation: Remove unneeded gap:Inherit rule on wrapper element of navigation block. (43669)
  • Post Terms: Use unbound query in the usePostTerms hook. (43501)
  • Site Logo: Fix border radius 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.. (43701)
  • Fix cover flex issue in the editor. (43413)
  • Fix embed 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. sizing issue. (40213)
  • Update: Make it possible to change list items even if parent is template locked. (43959)
  • Latest Posts categories settings. (43685)
  • navigation block: Fix empty site-log li element in the dom. (44049)

Global Styles

  • Block editor: Move margins to theme.scss and common.scss. (43813)
  • Don’t apply root padding to nested layout blocks. (43842)
  • Duotone palette doesn’t reflect settings in theme.json. (43671)
  • Fixing broken layout styles for themes using theme.json settings on blocks that require layout styles. (43925)
  • Layout: Fix issue with fallback gap styles where gap was being output for constrained layout type. (44001)
  • Remove main content layout padding in preview. (43601)
  • Split root layout rules into a different function. (43792)

Components

  • Button, Icon: Fix iconSize prop doesn’t work with some icons. (43821)
  • Flex: Remove flex gap polyfill. (43995)
  • Popover: Enable auto-updating every animation frame. (43617)
  • Popover: Make more reactive to prop changes, avoid unnecessary updates. (43335)
  • Site editor: Fix padding and margin visualizer positioning. (43971)
  • Disabled: Preserve input values when toggling the isDisabled prop. (43508)

Block Editor

  • BlockInspector, ComplementaryArea: Fix overscoped p style. (43866)
  • Column Block: Enable global template_lock inheritance. (42677)
  • Fix blank screen on templates page. (43602)
  • Fix the horizontal block list drop indicator when dragging to the start. (43944)
  • Fix: Block styles preview is not displayed. (43837)
  • Fix: Non boolean usage on reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. output. (43919)
  • hasContentRoleAttribute: Check that block type exists. (43864)
  • Improve Safari text-selection style. (43313)
  • Prevent the default browser behaviour for dropped files from running. (43493)
  • RTL fix for inlined block-styles. (41762)
  • Spacing presets: fix 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. with unlinked not applying if non int slugs used. (44136)

Design Tools

  • Fix display of width controls for legacy layouts. (43688)
  • FontFamily: Fix server-side attribute registration via typography support. (43937)
  • Layout: Fix blockGap output when using a falsy 0 value. (43757)
  • Layout: Fix toggling off inner blocks content width setting for legacy markup. (43888)

Testing

  • Fix asserting Post Format without opening the document settings sidebar. (43710)
  • Fix clicking on top of the publish panel in 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 end-to-end test. (43708)
  • Fix playwright’s openDocumentSettingsSidebar util not opening the sidebar. (43506)

Style Variations

  • Styles API: Fixed selectors for nested elements. (43988)

Typography

  • Font size picker: Add a fallback for the name property. (43794)

Post Editor

  • Editor: Simplify ‘findOrCreateTerm’ method logic. (43766)
  • Fix the style settings from core/post-content block in theme.json that are not applied in the editor. (42270)

Site Editor

  • Site Editor: Fix focus outline cut off in code editor. (42980)

Templates API

  • Block Templates: Add the custom templates info for the template posts. (43597)

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)

  • Better handling of loading states for navigation selector. (43904)
  • Limit contrast checker to only blocks that have at least one color defined. (43592)

Performance

Block Library

  • Comments Pagination: Avoid creating a new allowedBlocks array on every render. (44021)
  • Lodash: Refactor away from _.first() and _.last(). (43894)
  • Lodash: Remove _.omit() from block library. (43707)
  • Query Pagination: Avoid creating a new allowedBlocks array on every render. (44020)
  • Query by name. (43850)

Components

  • Lodash: Refactor away from _.cloneDeep(). (43631)
  • Lodash: Refactor away from _.partial(). (43895)
  • Lodash: Remove from FormTokenField component. (43744)

Data Layer

  • Lodash: Refactor away from _.forEach(). (43807)
  • Lodash: Refactor away from _.has(). (43626)
  • Lodash: Remove _.omit() from wordpress/data. (43712)

Post Editor

  • Lodash: Refactor away from _.unionBy(). (43735)
  • Lodash: Remove _.omit() from a few other packages. (43714)

Testing

  • Updates the content we use for performance testing. (43770)

Widgets Editor

  • Lodash: Remove completely from wordpress/edit-widgets package. (43682)

Block Editor

  • Lodash: Remove from blocks API raw handling. (43575)
  • Lodash: Refactor away from BlockActionsMenu (RN). (43849)
  • Lodash: Refactor away from BlockActions. (43846)
  • Lodash: Refactor away from BlockMover. (43853)
  • Lodash: Refactor away from useFocusFirstElement. (43847)
  • Lodash: Remove _.first() and _.last() from block editor store. (43854)
  • Lodash: Remove _.first() and _.last() from block tools and useSelectAll hook. (43855)
  • Lodash: Remove _.omit() from block editor. (43704)

REST API

  • Core Data: Stop sending duplicate requests in canUser resolver. (43480)

Documentation

  • Add documentation for the block template parts theme support. (44009)
  • Adding instructions for adding sub-pages to packages documentation. (43750)
  • Create a new handbook page for propagating updates. (43538)
  • Create Block: Split documentation into two sections. (43718)
  • Docgen: Add basic handling for the since tag. (43550)
  • Docs: Add example of BlockControls to Format API how to guide. (43581)
  • Docs: Fix required status of onSelectUrl prop of MediaReplaceFlow component. (44025)
  • Document new global styles filters. (44111)
  • Document template_lock=noContent for Custom Post Types. (43977)
  • InnerBlocks: document that templateLock:NoContent cannot be overriden by children. (43825)
  • Theme.json: Add default values for settings.spacing.spacingScale. (43860)
  • Theme.json: Fix schema for useRootPaddingAwareAlignments. (43628)
  • Typography block supports: Call tear_down in tests and format PHP doc blocks. (43968)
  • Update a broken link to the format-api example. (44058)
  • Update playwright end-to-end utils readme. (44016)
  • Updated the “Create your First App with Gutenberg Data” how-to guide. (43633)
  • Add select icon for Navigation Block’s menu button. (43674)
  • Style engine: pre-core migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. documentation and house keeping. (43840)
  • Fix JSON syntax issues in theme.json examples. (43828)

Code Quality

Components

  • AnglePickerControl: Deprecate margin bottom. (43867)
  • CheckboxControl: Add flag to remove bottom margin. (43720)
  • ComboboxControl: Add unit tests. (42403)
  • DateTimePicker: Address feedback after recent refactor to date-fns and use-lilius. (43495)
  • DropZone: Convert to TypeScript. (43962)
  • Fix TS types for isValueDefined()/isValueEmpty(). (43983)
  • FocalPointControl: Add flag to remove bottom margin. (43996)
  • FocalPointPicker: Convert to TypeScript. (43872)
  • FontSizePicker: Deprecate bottom margin. (43870)
  • FormFileUpload: Convert to TypeScript. (43960)
  • Invert tsconfig to be exclude-based. (43534)
  • Lodash: Refactor away from _.escapeRegExp(). (43629)
  • Lodash: Remove from block factory API. (43560)
  • Lodash: Remove from block registration API. (43558)
  • Lodash: Remove from block serializer API. (43561)
  • Lodash: Remove from block templates API. (43563)
  • Make more components pass type checks. (43579)
  • RadioControl: Clean up CSS. (43868)
  • Remove unused normalizeArrowKey utility function. (43640)
  • Remove unused Storybook utils. (43578)
  • Retire DARK_GRAY colors. (43773)
  • Retire LIGHT_GRAY[ 200 ] and DARK_GRAY[ 150 ]. (43719)
  • Retire LIGHT_GRAY color object. (43994)
  • SearchControl: Convert to TypeScript and add flag to remove bottom margin. (43871)
  • Style engine: Refer to ‘context’ rather than ‘store’ in global function. (43841)
  • TabPanel: Convert to TypeScript. (43536)
  • ToggleControl: Convert to TypeScript. (43717)
  • WordPressComponentProps: Only add refs when they are actually added. (43610)
  • Refactor Icon tests to @testing-library/react. (44051)
  • Refactor IsolatedEventContainer tests to @testing-library/react. (44073)
  • Refactor KeyboardShortcuts tests to @testing-library/react. (44075)
  • NUX: Refactor DotTip tests to @testing-library/react. (43768)

Compose

  • Refactor pure HoC tests to @testing-library/react. (43913)
  • Refactor withInstanceId HoC tests to @testing-library/react. (43915)

Post Editor

  • Edit Post: Refactor BrowserURL tests to @testing-library/react. (43978)
  • Edit Post: Refactor PageAttributesOrder tests to @testing-library/react. (43980)
  • Refactor PostPublishButton tests to @testing-library/react. (43909)
  • Refactor PostPublishPanel tests to @testing-library/react. (43908)
  • Refactor PostSavedState tests to @testing-library/react. (43769)
  • Refactor PostSlug tests to @testing-library/react. (43973)
  • Update changelog to include a new ‘isDeletingPost’ selector. (44120)
  • Refactor MetaBoxesSection tests to @testing-library/react. (43774)
  • Refactor PostPublishButtonOrToggle tests to @testing-library/react. (43776)
  • Refactor PreferencesModal tests to @testing-library/react. (43775)
  • NumberControl: Add TypeScript prop types. (43791)
  • Popover: Stabilize __unstableShift prop to shift. (43845)

Block Library

  • Button: Remove hardcoded white. (43553)
  • Categories List Block: Escape home_url(). (43824)
  • Gallery Block: Use wp_enqueue_block_support_styles(). (43859)
  • Post Terms: Refactor the usePostTerms hook. (43503)
  • Navigation: Use code instead of keyCode for keyboard events. (43644)
  • Create an alias get_element_class_name to use it in blocks. (44099)

Block Editor

  • Refactor AlignmentControl tests to @testing-library/react. (44022)
  • Refactor BlockAlignmentUI tests to @testing-library/react. (44023)
  • Refactor BlockEdit tests to @testing-library/react. (44027)
  • Refactor BlockIcon tests to @testing-library/react. (44089)
  • Refactor BlockTitle tests to @testing-library/react. (43811)
  • Refactor BlockVerticalAlignmentUI tests to @testing-library/react. (44029)
  • Refactor BlockView tests to @testing-library/react. (43818)
  • Refactor ComboboxControl to pass exhaustive-deps. (41417)
  • Refactor ContrastChecker tests to @testing-library/react. (43975)
  • Refactor DefaultBlockAppender tests to @testing-library/react. (43990)
  • Refactor DimensionControl tests to @testing-library/react. (43916)
  • Refactor DocumentOutline tests to @testing-library/react. (43772)
  • Refactor FocalPointPicker to function component. (39168)
  • Refactor MediaPlaceholder tests to @testing-library/react. (43991)
  • Refactor MenuItem tests to @testing-library/react. (43778)
  • Refactor NavigatorButton to pass exhaustive-deps. (42051)
  • Refactor NavigatorScreen to pass exhaustive-deps. (43876)
  • Refactor Panel tests to @testing-library/react. (43896)
  • Refactor PostTaxonomies tests to @testing-library/react. (44068))
  • Refactor Slot/Fill tests to @testing-library/react. (44084)
  • Refactor URLInputButton tests to @testing-library/react. (43899)
  • Refactor UrlPopover tests to @testing-library/react. (43898)
  • Refactor Warning tests to @testing-library/react. (43817)
  • Refactor withColors tests to @testing-library/react. (43976)
  • Refactor withFilters tests to @testing-library/react. (44017)
  • Refactor popover to use separate flip and resize props instead of forcePosition. (43546
  • Fix: Inexistent parameter passed to parseUnitFunction. (43920)
  • Minor code tweaks/optimizations (PHP). (43375)

Rich Text

  • Remove deprecated wrapperClassName prop. (44033)

Inspector Controls

  • Remove leftovers from previous iterations in block inspector. (43806)

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

  • Remove ‘gutenberg_rest_nonce’ method. (43805)

List View

  • ListViewBlock: Refactor to have locking data in a single place. (43803)

npm Packages

  • Block Serialization Default Parser: Include TypeScript type declarations. (43722)
  • Lodash: Remove _.omit() from wordpress/blocks. (43711)
  • Lodash: Remove completely from wordpress/format-library package. (43738)
  • Lodash: Remove completely from wordpress/i18n package. (43677)
  • Lodash: Remove completely from wordpress/redux-routine package. (43741)
  • wordpress/date: Rename __experimentalGetSettings() to getSettings(). (43884)

Global Styles

  • Elements: Check value and whitelist before building style nodes. (43622)
  • Prepare WP_Theme_JSON_Data class for backporting. (44109)
  • Safeguard for 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. of get_template_hierarchy function. (44085)
  • Format Library: Remove redundant inline link test. (43912)
  • Layout: Unit tests for gutenberg_get_layout_style. (44006)

Block Editor

  • Rich text: Remove unused unstable list functions. (43614)

Data Layer

  • Add tsconfig.json to core-data package. (43638)
  • Add type signature for useDispatch. (43528)
  • Bundle TypeScript types with the data package. (43643)
  • Simplify TypeScript types in wordpress/core-data. (43515)

Navigation

  • Unskip navigation menu selector focus test. (43507)

Tools

Build Tooling

  • Update unstaged documentation error message. (43953)
  • Scripts: Change webpack configuration to include render files in the build folder. (43917)
  • Scripts: Update webpack configuration to allow modern image format. (43880)
  • Update scaffold.js. (43740)
  • Makepot: Fix translations object handling. (43797)

Testing

  • Add comments for the repeated move commands in draggable end-to-end tests. (43933)
  • Add stale issue workflow for flaky test reports. (43547)
  • Avatar: Add test to ensure that user image updates when user switched. (42657)
  • Fix PHP Tests: Try removing registry from WP_Block constructor calls. (43927)
  • Iframed editor: Fixed skipped tests. (43697)
  • Migrate draggable block tests to Playwright. (43798)
  • Migrate duplicating block test to playwright. (43171)
  • Migrate register block test case to playwright. (43170)
  • Migrate writing flow tests to Playwright. (43637)
  • Preview tests: Wait for the post-status change. (43874)
  • Skip draggable block end-to-end tests. (43736)
  • Skip navigation block end-to-end tests. (43571)
  • Update Playwright. (43887)

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

VersionTime to first blockKeyPress Event (typing)
Gutenberg 14.06.9s33.5ms
Gutenberg 14.17.6s28.39ms
WordPress 6.01.5s41.03ms

Site Editor

VersionTime to first blockKeyPress Event (typing)
Gutenberg 14.08.4s25.1ms
Gutenberg 14.19,9s29.03ms
WordPress 6.03.26s13.11ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afragen @amustaque97 @andrewserong @annezazu @aristath @BE-Webdesign @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @colorful-tones @dcalhoun @dgwyer @draganescu @ellatrix @fabiankaegy @flootr @geriux @getdave @glendaviesnz @gziolo @jasmussen @jonathanbossenger @jorgefilipecosta @kevin940726 @kkoppenhaver @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mikachan @mirka @mrobit @ndiego @niklasp @noisysocks @ntsekouras @oandregal @ockham @pavanpatil1 @petitphp @pooja-muchandikar @RahiDroid @ramonjd @ryanwelcher @SantosGuillamot @scruffian @SiobhyB @spacedmonkey @stokesman @sunyatasattva @t-hamano @talldan @tellthemachines @torounit @tyxla @youknowriad

The following PRs were merged by first time contributors:

Kudos to all the contributors that helped with the release! 

Props to @priethor @critterverse @bernhard-reiter @czapla @bph, @cbringmann @matveb, and @annezazu for their assistance with the release.

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

What’s new in Gutenberg 13.0? (14 April)

“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 13.0 is the release containing all the updates that will be part of WordPress 6.0. This version also brings an improved editor experience, better responsive blocks, granular control over new design details, and prominently exposed 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.

Table of Contents


Select text across blocks

You can now select and copy text fragments that span multiple blocks.

This is a step towards bridging the gap between Gutenberg as a block editor and Gutenberg as a text editor. While blocks enable powerful page-shaping capabilities, they also compete with text for selection and clipboard space. Gutenberg 13.0 is a step towards an editor where blocks and text coexist frictionlessly.

Show 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. in the Cover block

With the updated Cover block, the post’s featured image is no longer an afterthought – it is an integral part of the post. Just click the “Use Featured Image” button, and that’s it!

Build responsive Groups, Rows, and Stacks

Blocks are now easily grouped into either a Stack layout or a Row layout with a single click.

In Gutenberg 13.0, selecting many blocks at once exposes the Stack and Row variations of the Group block right in the toolbar.

One advantage is convenience, but an even more important one is responsiveness. The Stack block automatically adjusts to the smaller screen sizes, making it easier to build truly responsive layouts.

Make your blocks stand out with customizable borders

You can now fine-tune the borders of your blocks thanks to the new `BorderControl` component. Whether it’s border color, style, or width – it got you covered!

Build beautiful pages in no time using Patterns

Building a website starting from a blank page can be overwhelming – where do you even begin?

Fortunately, there is a way of kickstarting the creative process with a buffet of patterns!

As a developer, you can register post-content block patterns to will be then proposed both in the new page editor and in 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. block.

Enjoy the improved Navigation Block

Adding a new Navigation Block in the editor now defaults to the first available menu when only one exists – no manual selection required.

Text decorations such as underline and line-through are supported in the block. You can also add link descriptions to the Navigation Link blocks.

The Navigation block also received additional 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 improvements that can be reviewed in the detailed changelog below.

Other notable highlights

Props to new contributors

Kudos to the first-time contributors that joined during the last release cycle!

  • @arcangelini: 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.: update post editor help links to use newer documentation (#39688)
  • @AlanSyue: Document: add the default database password to the getting started document (#39780)
  • @chintu51: Documentation: Import the Notice package in the example (#40022)
  • @dali-rajab: Documentation: Fix linguistic error in theme-json.md (#39995)
  • @EliezerSPP: Scripts: Fix typo in the webpack config (#39867)
  • @jezemery: Docs: Update typo in the code comment (#39429)
  • @JustinyAhin: Fix collapsing issue with the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input suggestion container #40147
  • @karolinakulinska: Add missing props mediaPreview in the ReadMe (#38114)
  • @mburridge: Adds links to contributing pages to README file. (#39959)
  • @kadimi: Fix grammar error in documentation (#40009)
  • @shimotmk: Fix duplicate Additional CSSCSS Cascading Style Sheets. classes post author, etc. (#39759)
  • @sunil25393: Site Logo: Correctly reset the site icon (#40046)
  • @roseg43: Media & Text: Remove font size declaration from template (#40329)
  • @zutigrm: Update 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. docs for theme authors (#40005)

If you are interested in contributing but do not know where to start, join the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor weekly meetings on Wednesdays at 14:00 UTC in #core-editor focused on all things Gutenberg.

Changelog

Enhancements

Block Library

  • Archives: Add yearly, weekly and daily archive settings to the archives block. (38440)
  • 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.: Increase the size of the Avatar image to be 2x of the width chosen. (39728)
  • Code: Preserves source of unrecognized blocks inside of Code Editor. (39523)
  • Column Block: Add blockGap support. (40122)
  • Comment blocks: Update block descriptions. (39735)
  • Comments Query Loop:
    • Always inherit from core Discussion settings. (39664)
    • Update default template. (40165)
  • Cover: Makes cover block dynamic and adds featured image binding. (39658)
  • Gallery: Add css var to enable theme authors to set a default gallery gap. (40008)
  • Group:
    • New Group, Stack, Row block descriptions. (40176)
    • Add the stack block variation to the group block. (39690)
    • Add group block variations to Group toolbar. (39920)
    • Block Variations Transforms: Display as icon buttons if each block variation has a unique icon. (40036)
    • Improve Stack and Row setup states. (39935)
    • Turn the wrap to multiple lines option off by default on the row block. (40171)
  • List: Add a box-sizing border-box to lists. (39895)
  • Navigation:
    • Avoid automatic saving of uncontrolled Nav blocks. (39883)
    • Auto set first 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. as current if only 1 exists. (39880)
    • Enable navigation nesting to be filtered and manually set. (38621)
    • Improve feedback on Nav Menu deletion. (39677)
    • Skip text decoration support serialization and apply as CSS class. (36345)
    • Navigation Link: Add support for navigation-link descriptions. (39808)
  • Post Comments: Deprecate the Post Comments block. (40167)
  • Post Tags: Update the Post Tags block icon. (40096)
  • Query Loop: Update query block creation and replacement flows. (38997)
  • Query page numbers block: Add same supports that next/prev page have. (39835)
  • Quote: Add color support to the quote block. (39899)
  • Read more: Add support for text color. (39796)
  • RSS:
    • Add missing classnames. (39716)
    • Try prepending 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 a URL. (39758)
    • Update max items. (39819)
  • Site Logo and Featured Image: Add duotone to placeholders. (40085)
  • Social Links: Disable vertical alignment controls for navigation and social links. (40182)
  • Template Part: Adjust the layout of thumbnails in the template part replacement modal. (39766)

Components

  • Borders: Add new BorderControl component. (37769)
  • Borders: Add BorderBoxControl component. (38876)
  • BorderControl: Add ability to apply custom CSS classes to popover content. (39753)
  • BorderControl: Fix vertical alignment of inner slider control. (39750)
  • Card: Adjust border radius size. (40032)
  • ColorPalette: Add SlotFillProvider to story to correct tooltip positioning. (39674)
  • UnitControl: Forward onBlur prop as expected. (39589)
  • Add ToggleGroupControlOptionIcon component. (39760)
  • CustomSelectControl: Make chevron consistent with SelectControl. (40049)

Styles Sidebar

  • Add search in the block types list. (39117)
  • Add labels to the global styles variations. (39322)
  • Show translated strings coming from global styles variations. (39960)
  • Adjust icon vertical alignment with labels. (39982)
  • Tweak preview box. (39978)
  • Update Other styles to Browse styles. (39752)
  • Wrap the preview box in the CardMedia component. (39980)

Block Editor

  • BlockToolbar: Show Group button in toolbar when multiple blocks are selected. (39710)
  • Improvements to use-focus-first-element and utils (dom). (39461)
  • Multi-selection: Allow partial block selection. (38892)
  • Order ids in getClientIdsOfDescendants and getClientIdsWithDescendants selectors. (39985)
  • Revert Try: Summary panel 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. max-height.. (40127)
  • Link directly to files stored in the Media Library using the Link UI. (39701)
  • Partial multi-select: Fix error with dead key. (39850)

Post Editor

  • Document Settings: Summary panel excerpt max-height. (40090)
  • Migrate editor package isPublishSidebarEnabled to preferences store. (39707)
  • Migrate post editor panels state to preferences store. (39604)
  • Migrate interface enableItems data to preferences package. (39449)
  • Try: Remove 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. 100% width rule. (38614)

Site Editor

  • Add a dedicated sidebar for managing layout of navigation menus. (39290, 40083)

Block Locking

  • Add the useBlockLock hook. (40210, 40220)
  • Display lock status in List View. (40088)
  • Styling changes for modal. (39998)
  • Try: Reusable block edit locking. (39950)

Reusable Blocks

  • Make the Cancel button tertiary. (39872)
  • Use the symbol icon for Reusable Block menu item. (40020)

CSS & Styling

  • Revert Global styles: Remove block gap control. (39845)
  • Block Styles: Revert changing default overflow-wrap to all headers, lists, and paragraphs. (39846)
  • Style Engine:
    • Add margin support. (39790)
    • Block supports backend. (39446)

Design Tools

  • Add vertical alignment to blocks using flex control. (40013)
  • Block Supports: Allow skipping serialization of individual features. (36293)

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.

  • Allow multiple view scripts per block. (36176)

Patterns

  • Option to pick a pattern on page creation. (40034)
  • Translate pattern metadata (title & description). (40047)
  • Remove batch support declaration from block patterns REST, fix navigation areas. (39834)

Theme Export

  • Change the schema URL. (40106)
  • Convert spaces to tabs in theme.json. (39751)
  • If the theme declares a version number then add a schema. (39775)
  • Remove default theme.json properties on export. (39848)
  • Restore appearanceTools when exporting a theme. (39840)
  • Sort theme.json properties. (39842)
  • 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. changes for Theme Export from 6.0. (40215)

Webfonts

  • Do not trigger warning on already enqueued font families. (40060)
  • Register webfonts defined in styles variations. (39886)
  • Register and enqueue fonts by font-family. (39559)
  • Return font family slug when registering a webfont. (40120)

Bug Fixes

Block Library

  • Avatar:
    • Do not show User Selection inside Comments Loop, on the Site Editor. (40100)
    • Fix wrong aligment. (39794)
  • Buttons: Fix focus on insert. (39684)
  • Comments Query Loop: Fix pagination setting not being applied on frontend. (40146)
  • Group: Fix variation isActive check to cover case where type is not set, but inherit is. (40065)
  • Post Author: Fix duplicate Additional CSS classes post author, etc. (39759)
  • Post Comments Form: Allow to add it to the Site Editor. (40108)
  • Post Template: Add missing wp-block-post class in the editor. (40010)
  • Post Terms: Use variation title in placeholder. (40092)
  • Query Loop: Fix some missing term sanitizations. (39970)
  • RSS: Add missing self-URL check. (39756)
  • Site Logo:
    • Correctly reset the site icon. (40046)
    • Fix duplicate Additional CSS classes site-logo Block & social-link Block. (39777)
    • Fix adding the site icon. (40041)
  • Template Parts: Limit slug to Latin chars. (38861)

Components

  • Components utils: Use Object.assign instead of { …spread } syntax. (39932)
  • ToggleGroupControl: Reintroduce backdrop animation. (40021)

Block Editor

  • List View:
    • Only show ellipsis on first selected item or when focused. (40174)
    • Wrap title of block in <ListView> in a span. (39687)
    • Disable dragging when block movement is locked. (40086)
    • Fix list-view focus radius. (39969)
  • MultiSelectSidebar: Fix spacing of color panel items. (40071)
  • Fix Block Editor Iframe component to render in standards mode. (38855)
  • Fix collapsing issue with the URL input suggestion container. (40147)
  • Try: 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 mover and block control sizes. (40037)

Site Editor

  • Add block styles slot to the site editor so block style previews can be rendered. (40245)

Block Locking

  • Reusable Blocks: Hide Convert to Blocks when locked. (39939)
  • Template Parts: Hide Detach blocks when locked. (40000)
  • Stabilize settings. (40145)
  • Display block title when no switcher is available. (40207)

Styles Sidebar

  • Fix global style variations previews not showing correct height. (39737)
  • Restore defaultPalette/defaultGradients to only hide UI. (39966)
  • Global Styles: Fix alignment of Global Styles color controls. (40081)
  • Global Styles: Fix black inconsistencies in sidebar. (40055)

Design Tools

  • Block gap: Check for splitOnAxis in the onChange callback. (39788)
  • Duotone: Backport changes made to duotone in core. (40067)
  • Layout: Only show inherit toggle in default layout (hide on Row block variation). (39665)

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

  • Fix incorrect meta box position when switching device preview. (38910)

Other packages

  • Data: Exclude all meta-selectors, handle selectors without resolvers. (39976)
  • Date: Fix ordinal token (S), RFC2822 token (r), and timezone offset handling. (39670)
  • RichText: Fix splitValue with undefined selection. (39822)
  • Scripts: Add vendor/ to .markdownlintignore. (39724)

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

  • Fix 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/. class redeclaration. (40265)

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)

  • Add select-parent button to block toolbar More options menu. (40105)
  • Hide block movers in new navigation sidebar. (40039)
  • Accessibility improvements to the query pagination block. (39536)

Performance

  • Optimize getClientIdsOfDescendants and getClientIdsWithDescendants selectors. (40054)
  • Try to optimize getClientIdsOfDescendants using createSelector memoization. (40112)

Developer Experience

  • create-block: Add npmDevDependencies as a template variable. (39723)
  • Schemas, block.json:
    • Add ancestor prop to schema. (39894)
    • Add supports.lock to schema. (40161)
  • Schemas, theme.json:
    • Add Avatar to schema. (40189)
    • Add title key to 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. schema. (39936)
  • Scripts: Add new flag to allow customization of the src directory. (39618)

Experiments

  • List v2:
    • Add 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 v1 to v2. (39799, 39892)
    • Add new list item icon. (39929)
    • Avoid using global select. (39821, 39849)
    • Handle Enter in empty list items. (39858)
    • Outdent and Indent actions for the list block v2. (39773)
  • Quote v2:
    • Add __experimentalEnableQuoteBlockV2 flag. (40089)
    • Add align feature to have feature parity with v1. (39876)
    • Add innerblocks support. (39704)
    • Add migration. (39844)
    • Add transforms. (39718)
    • Bootstrap flag in experiments page. (39703)
    • Retain selection after transform. (39838)
    • Revert markup changes. (39824)
    • Fix how attributes are registered. (39729)
  • __experimentalBlockPatterns: Load them with REST API. (39185)

Documentation

  • Add missing props mediaPreview in the ReadMe. (38114)
  • Add note to Handbook themes page about FSE eligible themes. (39662)
  • Adds links to contributing pages to README file. (39959)
  • Block-Editor Docs: Link to component readme. (37975)
  • Components: Add changelogs for new border control components. (39747)
  • Components: Add more prominent documentation around popover use. (39709)
  • Disabled: Add documentation for Disabled.Context. (39627)
  • Docs: Update README.md for FormToggle component. (36932)
  • Docs: Update block-filters.md. (38462)
  • FIX missing images of Gutenberg Data Apps document. (39499)
  • Fix grammar error in documentation. (40009)
  • Fix linguistic error in theme-json.md. (39995)
  • Import the Notice package in the example. (40022)
  • Sidebar: Update post editor help links to use newer documentation. (39688)
  • Style Engine: Remove since 6.0 comment. (40006)
  • Update typo in the code comment. (39429)
  • Updating versions in WordPress to add 5.9.x & 6.0. (39866)

Code Quality

Block Library

  • Avatar: Two unneeded spaces removed. (39902)
  • List: List block indent outdent naming. (39956)
  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.: Use Disabled.Context. (39669)
  • Gallery: Use wp_unique_id() instead of uniqid() in block_core_gallery_render(). (39983)

Block Editor

  • Block Lock toolbar remove leftovers. (39881)
  • List View: Remove unwanted default false in ListView 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". component. (39719)

Components

  • BaseControl: Migrate to TypeScript. (39468)

Plugin

  • Add the missing class-wp-style-engine-gutenberg.php in the plugin build (40191)
  • Block Editor: Stabilize generateAnchors setting. (40143)
  • Correctly classify functionality in the lib folder. (39972)
  • Consolidate WP_Theme_JSON_Resolver changes in both lib/compat/wordpress-6.0 and lib/experimental. (40140)
  • Don’t run preg_match() on null values. (39927)
  • Guard code from redeclaration errors after WP core merge. (39888)
  • Move files from lib to the compat subfolder. (39904)
  • Move changes from #38681 and #39966 to compat 6.0. (40123)
  • Plugin: Ensure that PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher code for blocks is correctly assigned to WP releases. (40179)
  • Remove the experimental Progressive Web Apps (PWA) integration. (38810)
  • Revert Plugin: Remove the experimental Progressive Web Apps (PWA) integration. (39930)
  • Theme JSON compat: Refer to static instead of self for ROOT_BLOCK_SELECTOR const. (39921)

Packages

  • Core Data:
    • Migrate entities.js to Typescript. (39547)
    • Rename core-data/src/selectors.js to selectors.ts (TypeScript). (40026)
    • Fixes necessary for converting to TypeScript. (39211)
    • Create type for undo state and initialize atomically. (39659)
    • Expand type signature of useQuerySelect. (39656)
    • Fix minor type issue in onSubKey. (39655)
  • Data:
    • Mark/data apis unstable. (40028)
    • Two code improvements. (39975)
  • Scripts: Fix typo in the webpack configuration. (39867)

REST API

  • Block patterns REST endpoint: Use snake case for field names. (40254)
  • Update patterns REST controllers namespace to stable. (40252)

Styles

  • Rename name to title in the global style variations. (39715)

Tools

Linting

  • Revert unwanted breaking changes in eslint-plugin. (39745)
  • UseBlockDisplayTitle fix ESLint warning. (39815)
  • UseEntityRecord(s) fix ESLint warning. (39852)

Testing

  • ActivateTheme wait for the user to switch. (39873)
  • Add a 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. for wp_recursive_ksort. (40149)
  • Check for missing figcaption before clicking gallery image again from list view. (39666)
  • Comments Query Loop: Add end-to-end tests for the block. (39502)
  • waitForNavigation in Comments Query Loop test. (39818)
  • Fix flaky issue reporter not splitting … separator. (40129)
  • Fix flaky test results overflowing the character limits of 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/’s issue. (39928)
  • ListView: Fix end-to-end flakiness. (39742)
  • Migrate customizing-widgets to Playwright. (39540)
  • Migrate cut-copy-paste-whole-blocks to Playwright. (39807)
  • Migrate new-post to Playwright. (39539)
  • Navigaton block: Fix flaky test by finalising request resolution in Nav block end-to-end test. (39633)
  • Navigation Editor: Skip failing navigation editor tests. (39746)
  • Style variations: Apply style variations using labels. (39725)
  • Template Mode: Try fix flaky tests. (39711)
  • Template parts: Try fixing template part tests again. (40007)
  • Use a description that matches the filename for the annotations end-to-end tests. (40011)
  • Use templates endpoint to delete templates. (39965)

Build Tooling

  • Add peer deps for postcss and end-to-end tests. (39080)
  • Plugin: Pin dependencies that slipped into 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.. (39865)
  • Mark new blocks to be included in WordPress core. (40186)
  • Style engine: Move backend scripts to package. (39736)
  • Scripts: Add .jsx file extension to Webpack. (39613)
  • Tooling: Escape quotes in npm scripts. (39447)

Project management

  • Remove Antonis as codeowner. (39697)

Performance Benchmark

The following benchmark compares performance for a particularly sizable post 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

VersionTime to first blockKeyPress Event
Gutenberg 13.05.00s45.08ms
Gutenberg 12.95.03s44.21ms
WordPress 5.95.32s41.91ms

Site Editor

VersionTime to first blockKeyPress Event
Gutenberg 13.05.65s50.04ms
Gutenberg 12.95.06s42.07ms
WordPress 5.95.42s37.19ms

Kudos to all 70 contributors that participated in the release! 👏

Thanks to @joen for the release post assets, and to @priethor for all the contributions and improvements to this draft.

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