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-based 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 14.0? (31 August)

“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.0 is now available to download in the WordPress 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 repository. It’s full of enhancements, including extra blocks supports in the UIUI User interface that were only available via 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. before, a revamped List blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., and much more.

Over 50 people contributed to this packed release (over 260 PRs!), 5 of them as first-time contributors.

Table of contents

Enhanced List block using inner blocks

After the Gallery block and the Quote block, it is the List block’s turn to get a new makeover and leverage inner blocks. Now your list items can be easily sorted and indented with a much-improved user experience.

Add axial gap control to Styles

Now users have the ability to adjust axial (vertical and horizontal) block spacing using the Styles UI for those blocks that support it.

Pseudo-elements supports on button elements

After first introducing the ability to control hover/active/focus states for links using theme.json, this option has been extended to button elements (this includes blocks that include such elements, like button, file, and search). Now you can style those states easily, including something like this in your theme.json file:

"styles": {
    "elements": {
        "button": {
            ":hover": {
                "color": {
                    "background": "blue",
                    "text": "hotpink"
                }
            },
            ":active": {
                "color": {
                    "background": "red",
                    "text": "yellow"
                }
            }
        }
    }
}    

Appearance tools available for opt-in via theme supports

Until now, only themes leveraging theme.json could opt-in to use Appearance tools. Now any theme can simply include in their functions.php file:

add_theme_support( 'appearance-tools' );

and it will support border styles, link color, spacing (blockGap, margin, padding), and line height.

14.0

Enhancements

  • Add optional capture group to URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org regex in wp-env. (43200)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Add canRead to useResourcePermissions. (43484)
  • Element: Remove enzyme from platform test. (43531)
  • [Create-block] Add --variant flag to allow creation of different block type variants. (41289)
  • Use str_starts_with. (43371)
  • [Create Block] Adding a --no-plugin flag to scaffold only block files. (41642)
  • Customize widgets: Fix top contents cutoff in keyboard shortcuts. (43391)

Design Tools

As part of the effort to improve design tool consistency for typography and spacing on blocks (43242), there’s been a lot of work done to blocks during this release to add missing supports to them.

Added typography support:

Added spacing supports:

  • Paragraph: Add spacing block supports. (43455)
  • Heading: Add padding support. (43454)
  • List: Add spacing block supports. (43402)
  • Media & Text: Add spacing block supports. (43456)
  • Post Date: Add spacing support. (43406)
  • Post Title: Add padding support. (43457)
  • Query Title: Add padding support. (43458)
  • Spacer: Add spacing block supports. (43366)
  • Table of contents: Add spacing supports. (43368)
  • Table: Add spacing block supports. (43370)
  • Tag cloud: Add spacing block supports. (43367)
  • Term description: Add spacing block supports. (43372)
  • Verse: Add margin support. (43461)
  • Video: Add spacing block supports. (43365)

Added other supports:

  • Gallery: Add background color block supports. (43294)
  • 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.: Add border support applied to inner img. (42847)
  • Social Links: Enable alpha on color pickers. (43453)
  • Social links: Add background color block supports. (43293)
  • Table of contents block: Add color block supports. (43363)

Components

  • (Custom)SelectControl: Refresh and refactor chevron. (42962)
  • Always use screen for testing-library queries. (43152)
  • Autocomplete: Use KeyboardEvent.code instead of KeyboardEvent.keyCode. (43432)
  • Card: Migrate to TypeScript. (42941)
  • ComboboxControl: Normalize hyphen-like Unicode characters to ASCII hyphens when matching search queries. (42942)
  • CustomGradientPicker: Use KeyboardEvent.code instead of KeyboardEvent.keyCode. (43437)
  • DateTimePicker: Replace reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-dates and moment with useLilius and date-fns. (43005)
  • FocalPointPicker: Use KeyboardEvent.code, partially refactor tests to modern RTL and user-event. (43441)
  • FontSizePicker: Add a flag to remove bottom margin. (43062)
  • FormTokenField: Add the ability to auto-select first matching suggestion for incomplete token. (42527)
  • FormTokenField: Use KeyboardEvent.code, refactor tests to model RTL and user-event. (43442)
  • Modal: Use code instead of keyCode for keyboard events. (43429)
  • Popover: Move eslint-disable comment to the correct deps array. (43320)
  • ToggleGroupControl: Improve styling for icon options. (43060)

Block Library

  • Add a setting to hide the prefix in the archive title. (42594)
  • Embed: Update Reddit icon. (43326)
  • Post date: Add option to display as the last modified date. (42312)
  • Reset focalPoint after replacing the cover image. (42859)
  • Social Link: Update Reddit icon and color to match brand guidelines. (43325)
  • Try “constrained” content width as new layout type. (42763)
  • Try: Add a clickable Group setup state. (40664)
  • Use page list instead of placeholder as fallback. (42735)
  • [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.]: Honour intended post type when previewing patterns and when replacing them with patterns. (43285)
  • List: Use nested blocks. (42711)

Global Styles

  • BlockGap: Add axial gap option to global styles where available. (42490)
  • BlockGap: Add support for spacing presets. (43296)
  • Spacing presets: Add check for 0 spacing steps. (43105)
  • Spacing presets: Add support for margins. (43246)
  • Spacing presets: Implement disabling of custom space sizes. (43216)
  • Pseudo-elements supports on button elements. (43088)

CSSCSS Cascading Style Sheets. & Styling

  • Placeholder: Add blurred background to work in nested cases. (43379)
  • Placeholder: Refactor and simplify dashed placeholders used for Featured Image & Site Logo. (43228)

Data Layer

  • [data] Export the type for the combineReducers export. (43516)

Site Editor

  • Template Part: Allow changing properties in focus mode. (43151)

Block Editor

  • Refactor LinkControl tests to @testing-library. (43147)

Bug Fixes

  • Create Block: Refactor handling for template variants. (43481)
  • Fix no-results grammar. (43168)
  • Fix spinner causing a flash when loading site editor. (43226)
  • Image: Fix unclickable buttons. (43361)
  • Keycodes: Fix display of symbols in keyboard shortcut modal. (43137)
  • MediaReplaceFlow: Reset default LinkControl margins. (43156)
  • Post title: Fix pasting into existing content. (43123)
  • [Block Editor]: Fix block switcher label to take into account block variations. (43309)
  • [useEntityRecord] Pass the correct kind, name, and recordId to getEditedEntityRecord. (43517)
  • wp-env: Set core source to latest when null. (43133)

Block Library

  • Ensure the block toolbar doesn’t overlap block by modifying forcePosition and shift popover props. (42887)
  • Ensure pagination numbers have an href in block edit function. (43354)
  • Fix Post Featured Image border attributes. (43426)
  • Fix classic block converted to regular blocks when clicking new ‘Edit visually’ button. (43219)
  • Fix featured image being unselectable using arrow keys. (43323)
  • Fix navigation block undefined index error on frontend. (43302)
  • Gallery block: Ensure image attributes copy correctly between transforms. (42796)
  • Home Link: Fix undo trap. (43112)
  • List v2: Copy list wrapper when copying list items. (42860)
  • Navigation: Page List fix missing padding. (43358)
  • Prevent query block from looping in classic themes. (43221)
  • Pullquote block: Avoid text-align settings affecting block width and font size. (43188)
  • Pullquote block: Remove font definition from the default block styles. (43195)
  • 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.-controls.js: Change REST context to “view” when fetching taxonomy terms. (43274)
  • Home Link: Properly close tags. (43706)
  • Social Link: Fix background color on WhatsApp icon. (43683)

Components

  • (Custom)SelectControl: Truncate long options. (43301)
  • AlignmentMatrixControl: Fix width 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.. (43482)
  • ColorPalette, GradientPicker: Fix color picker popover positioning. (42989)
  • ColorPalette: Make sure “key” is unique when iterating over color entries with the same value. (43096)
  • Dropdown: Anchor popover to the dropdown wrapper (instead of the toggle). (43377)
  • Fix block toolbar offset in site editor when toggling sidebars. (43172)
  • Fix popover glitch that results in incorrect toolbar positioning in site editor. (43267)
  • Improve appearance of controls in the Global Styles Typography panel. (43304)
  • Popover: Fix and improve opening animation, use framer motion. (43186)
  • Popover: Make sure offset middleware always applies the latest frame offset values. (43329)
  • Refactor Guide tests to @testing-library/react. (43380)

Global Styles

  • Check for recursive dynamic reference in the site editor. (43166)
  • Duotone: Prevent early return blocking other style generation. (43300)
  • Fix dynamic references on the site editor. (42976)
  • Fix error in handling spacing preset slugs. (43237)
  • Layout: Re-instate alignwide and alignfull in flow layout get alignments. (43502)
  • Spacing presets: Fix/minor issues noted in initial UI PR. (43214)
  • Layout: Fix has-global-padding classname for constrained layouts without contentSize. (43689)

Block Editor

  • Fix Cmd+A issue in Storybook. (43145)
  • Fix drag and drop indicator before first block and after last block. (43135)
  • Fix spinner position in URLInput component. (43472)
  • Partial select: Fix selecting into image. (42983)

Design Tools

  • Border Radius: Prevent 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. css unit only styles or empty radii style attribute. (42409)
  • Border Support: Fix disabling of border style control. (43109)
  • Post Comments Count: Prevent text-decoration from affecting warning. (43497)

Site Editor

  • Do not show scrollbar when toolbar overflows the editor wrapper. (43332)
  • Fix template part focus mode resizable editor height. (43408)

npm Packages

  • Jest Preset: Ignore is-plain-obj transformation. (43179)
  • Jest Preset: Improve is-plain-obj transformation ignore. (43271)

Widgets Editor

  • Fix 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. form positioning in customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. (43297)

CSS & Styling

  • Group/Stack/Row: Scope the dashed placeholder rules. (43169)

List View

  • Ensure long anchors don’t cause the List View to extend. (43134)

Post Editor

  • Post Template: Don’t fetch settings and templates for non-adminadmin (and super admin) users. (42845)

Patterns

  • Fix custom placeholder not displaying on subsequent Paragraph blocks. (42519)

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)

  • Block Editor: Remove aria-selected from LinkPreview. (43279)
  • Block Editor: Replace aria-owns with aria-controls in URLInput. (43278)
  • Separator: Disable the contrastChecker via block.json. (43357)
  • Fix Top toolbar buttons tooltips and style when ‘Show button text labels’ is enabled. (42815)

Performance

Lodash is known to unnecessarily inflate the bundle size of packages, and in most cases, it can be replaced with native language functionality. See these for more information and rationale: (16938, 17025, 39495)

The related PRs are: 43118, 43306, 43389, 42466, 43362, 43100, 43420, 43117, 42467, 42502, 43220, 43224, 43258, 43374, 43518, 43474, 43229, 43411, 42465, 43231, 43479, 43330, 43182, 43419

Experiments

Components

  • Font size picker: Use t-shirt sizes for the ToggleGroupControl component. (43074)

Documentation

  • Add documentation for useRootPaddingAwareAlignments in theme.json. (43463)
  • Comma is missing. (43446)
  • Convert HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. to Markdown in changelog for 13.9. (43324)
  • Handbook: Fix format 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. example link. (43477)
  • Stabilize the useResourcePermissions hook. (43268)
  • [Docs] Replace useState with edit in useEntityRecord usage examples. (43270)
  • Block Editor Handbook: Added missing codetabs end marker. (43185)
  • Docs: Fix some typos. (43175)

Code Quality

  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher: Use str_contains(). (43382)
  • PHP: Use str_starts_with. (43410)
  • Style engine: Pass options to CSS static methods. (43399)
  • Style engine tweaks. (43303)
  • Navigation block – minor refactor to classic menu conversion code. (43081)
  • Data: Bundle TypeScript types with the data package. (43315)
  • getTemplateInfo: Return stable reference to an empty object. (43155)
  • Remove duplicated ‘import’ comments. (43478)
  • Disabled: Migrate to TypeScript. (42708)

Components

  • Clean up unused and duplicate COLORS values. (43445)
  • Packages: Ensure dependencies use version ranges. (43355)
  • Swatch: Remove component in favor of ColorIndicator. (43068)
  • Update/floating UI version. (43206)

List View

  • Block list: Update block list view preferences name for consistency. (43494)

Widgets Editor

  • Use useResourcePermissions in block-library and the widgets editor. (43305)

Block Editor

  • Rich Text: Eliminate second scan when getting text content. (43207)

Global Styles

  • Theme_JSON: Use existing append_to_selector for pseudo-elements. (43167)
  • Enable appearance tools via theme_support. (43337)

Testing

  • Migrate wp editor 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 test to Playwright. (41519)
  • PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS.: Exclude PHPUnit tests from file and class name sniffssniff A module for PHP Code Sniffer that analyzes code for a specific problem. Multiple stiffs are combined to create a PHPCS standard. The term is named because it detects code smells, similar to how a dog would "sniff" out food. (for Core parity). (43131)
  • PHPUnit: Let PHPUnit Polyfills match PHPUnit version. (43334)
  • PHPUnit: Turns on PHP notices and deprecations. (43102)
  • Update incorrect quote end-to-end test snapshot. (43407)
  • Update test fixture for performance test. (43359)
  • Quote: Stabilise flaky end-to-end test. (43460)

Build Tooling

  • Build Tools: Fix typo in performance tests workflow. (43153)
  • Packages: Update the minimum required Node.js version to 14 for tools. (43141)
  • ESLint Plugin: Remove all rules targeting test files from recommended presets. (43272)
  • Ignore library CSS and built CSS in stylelint. (42027)
  • Fix ‘Mark issues stale after needs testing for 30 days’ workflow. (43545)

npm Packages

  • Packages: Replace is-plain-obj with is-plain-object. (43511)

Components

  • (Custom)GradientPicker: Add flag to remove margins. (43387)
  • AlignmentMatrixControl: Improve stories. (43438)
  • AnglePickerControl: Add flag to remove bottom margin. (43160)
  • ComboboxControl: Add flag to remove bottom margin. (43165)
  • CustomSelectControl: Deprecate constrained width style. (43230)
  • DuotonePicker/DuotoneSwatch: Add stories. (43225)
  • Storybook: Add margin checker tool. (43223)
  • ToggleGroupControl: Improve stories for documentation view. (43265)
  • ToolsPanel: Tighten grid gaps. (43424)

Block Library

  • Buttons: Update selectors to work better with button elements. (43022)
  • Comments block: Remove empty block wrapper. (43383)
  • Group block: Update description to remove “layout.” (43498)
  • Image: Try different resting state for placeholder, alternate version. (43180)
  • Navigation: Try to improve the appender in an empty block. (43115)
  • Polish placeholder radius and enable duotone on image setup state. (43425)
  • Pullquote: Use inline rich text instead of multiline. (43210)
  • [Blocks] Paragraph and Heading: Add gradient support. (43119)

Patterns

  • Bundle new collection of 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. and Footer block patterns. (43157)
  • Mark which attributes of the image should be considered content. (43280)
  • Prefer _x() for 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. context in core patterns. (43409)

Design Tools

  • Add margin and padding supports to Audio block. (43351)
  • Add margin/padding support to Archives block. (43350)

Global Styles

  • Add documentation about spacing presets. (43349)
  • Spacing presets: Add editor UI support. (42173)

Site Editor

  • [Site Editor]: Add success notice upon template creation. (43430)

CSS & Styling

  • Style engine: Use style engine for block supports CSS in editor. (43055)
  • Style engine: Remove enqueue flag. (43103)

Block Editor

  • Merging blocks: Allow x to be merged into wrapper blocks (quote, list, group…). (42780)

Tools

Testing

  • Refactor Button tests to @testing-library/react. (42981)
  • Refactor Guide PageControl tests to @testing-library/react. (43148)
  • Refactor MenuGroup tests to @testing-library/react. (43275)
  • Refactor withSpokenMessages tests to @testing-library. (43273)
  • Editor: Refactor PostAuthorCheck tests to @testing-library. (43176)
  • Editor: Refactor ThemeSupportCheck tests to @testing-library/react. (43532)
  • Editor: Refactor a few component tests to @testing-library/react. (43376)
  • Components: Refactor Placeholder tests to @testing-library/react. (43069)
  • Components: Refactor Tooltip tests to @testing-library/react. (43061)

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 the first blockKeyPress Event (typing)
Gutenberg 14.09.99 s43.36 ms
Gutenberg 13.93.95 s54.77 ms
WordPress 6.04.31 s59.53 ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 14.011.45 s34.75 ms
Gutenberg 13.95.17 s29.37 ms
WordPress 6.04.92 s20.11 ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @andrewserong @aristath @awps @carolinan @ciampo @derekblank @dinhtungdu @dmsnell @draganescu @drzraf @ellatrix @geriux @glendaviesnz @gziolo @hellofromtonya @hz-tyfoon @jasmussen @jostnes @kdevnel @MaggieCabrera @Mamaduka @markbiek @matiasbenedetto @mcsf @mirka @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ockham @paulopmt1 @pbking @ramonjd @randhirexpresstech @Rink9 @ryanwelcher @scruffian @SiobhyB @Soean @t-hamano @talldan @tellthemachines @titusdmoore @torounit @tyxla @walbo

The following PRs were merged by first-time contributors:

  • @drzraf: taxonomy-controls.js: Change REST context to “view” when fetching taxonomy terms. (43274)
  • @markbiek: ComboboxControl: Normalize hyphen-like Unicode characters to ASCII hyphens when matching search queries. (42942)
  • @randhirexpresstech: Add font family and text-decoration typography supports to paragraph blocks. (39642)
  • @Rink9: Migrate wp editor meta box test to Playwright. (41519)
  • @titusdmoore: Add optional capture group to URL regex in wp-env. (43200)

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

Props to @gziolo @priethor @joen @bernhard-reiter @scruffian @oandregal for their assistance with the release.

#gutenberg, #gutenberg-new

What’s new in Gutenberg 13.9? (17 August)

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


The Gutenberg 13.9 is now available in the WordPress 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 repository. It continues the iteration and polishing on various fronts, such as UIUI User interface, interaction, and engine work.

Almost 50 people contributed to this release and 4 of them are first-time contributors.

Table of contents

Changelog

Enhancements

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

  • Archives: Add a control to make block’s dropdown label invisible. (43025)
  • Media&Text: Add help to ImageSizeControl. (40642)
  • Navigation: Move overlay colors to the responsive wrapper. (42875)
  • Navigation: Extract navigation block utils. (42865)
  • Navigation: Fix link inheritance in overlay. (42929)
  • Post Author: Rendering htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. for the author description at the editor. (42109)
  • 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.: Add link target and rel attributes. (42853)
  • Post Title: Do not add rel attribute if empty. (42855)
  • Query Pagination: Correctly position the “next” link on the first page. (42764)
  • Query Title: Add a search title variation. (42662)
  • Quote: Unwrap on Backspace at start. (42808)
  • Search Block: Remove margins from the input. (42959)
  • Transforms: Add group unwrap. (42685)

Components

  • BaseControl: Add box-sizing reset. (42889)
  • BorderControl: Add box-sizing reset. (42754)
  • BoxControl: Export applyValueToSides util function. (42733)
  • ComboboxControl and FormTokenField: Enhance components with custom render callback for options. (42597)
  • ComboboxControl: Add support for uncontrolled mode. (42752)
  • Flex: Convert component to TypeScript. (42537)
  • FontSizePicker: Add 40px size variant. (42716)
  • List View Expander: Fix icon in RTL mode. (42997)
  • Placeholder: Convert component to TypeScript. (42990)
  • Popover: Rewrite Storybook examples using controls. (42903)
  • Popover: Tidy up code, add more comments. (42944)
  • ResizableBox: Change tooltip background to match other tooltips. (42800)
  • Storybook: Add global CSSCSS Cascading Style Sheets. switcher. (42747)
  • StyleProvider: Convert component to TypeScript. (42541)
  • Swatch: Convert component to TypeScript. (42162)
  • Tooltip (Experimental), CustomSelectControl, TimePicker: add missing font sizes which were necessary in non-WordPress contexts. (42844)
  • Typography Panel: Fix font appearance control width. (42795)
  • UnitControl: Update unit dropdown design. (42000)
  • Update control labels to the new uppercase styles. (42789)

Reusable Blocks

  • Make template part and reusable block creation language consistent. (43032)

CSS & Styling

  • Rename solid color. (42918)
  • Tab style subpixel fix. (42892)
  • Navigation: Try to keep :Where just for paddings. (42967)

Global Styles

  • Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles. (42544)
  • Enable alpha (opacity) in Global Styles color pickers. (43045)
  • Add block spacing to root block support UI. (42797)
  • Elements: Update the load order of the CSS in the Site Editor. (42863)
  • Heading element UI controls. (42176)
  • 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.: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON. (42776)
  • Upsize typography panel components. (42718)

Design Tools

  • Cover: Show Resize Tooltip on Drag. (23522)
  • Update color button style. (41838)
  • Add explicit bypass for fluid font size calculation. (42757)

Post Editor

  • Post Template: Update template title selector. (42091)

Site Editor

  • Add author nicename template creation ability. (42165)
  • Add fallback template content on creation. (42520)
  • Add a ‘View Site’ link in the site editor. (42331)
  • Update clear customizations copy for templates. (41765)

Widgets Editor

  • Format Library: Add missing keyboard shortcut description in customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. 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.. (43044)

Block Editor

  • Rich text: Add character shortcuts for wrapping selection. (42469)

Block Directory

  • Modernize DownloadableBlockListItem tests. (43026)

Bug Fixes

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)

  • Fix issue where changing the id of the recursion provider can result in focus loss. (42916)
  • Site Editor: Don’t disable the Save button. (42842)

Components

  • Block Styles: Truncate long button labels. (42975)
  • ColorGradientControl: Fix awkward padding in popover. (43018)
  • ColorPicker: Fix layout overflow. (42992)
  • External link component: Add a check for on page anchor links. (42259)
  • Icons: Fix storybook library icon names. (43034)
  • InputControl: Fix acceptance of falsy values in controlled updates. (42484)
  • InputControl: Fix incorrect size prop passing to Text. (42793)
  • Popover: Anchor correctly to parent node when no explicit anchor is passed. (42971)
  • Popover: Fix arrow placement and design. (42874)
  • Popover: Improve 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. offset computation. (42417)
  • Popover: Make sure that ownerDocument is always defined. (42886)

Block Library

  • Disabled blocks passed to BlockTypesList are no longer draggable. (42751)
  • Fix drag and drop performance when dragging over the insertion point. (42806)
  • LatestPost: Fix issue with floated featured images overflowing focus style. (40663)
  • List v2: Fix Cmd+A. (42858)
  • Media&Text: Round position attribute on focal point save. (33915)
  • Navigation: Fix current-menu-item class logic. (42849)
  • Navigation: Fix 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. permissions warning by avoiding using trashed wp_navigation posts (JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. implementation). (42982)
  • Separator: Fix the block CSS classes in the editor. (42769)
  • Social Link: add missing ‘width’ and ‘height’ attributes. (41373)
  • Social: Include has-visible-labels on edit component. (42791)
  • Tag Cloud: Fix alignment issue when align center. (43017)
  • Writing flow: Fix Shift+Arrow partial selection for lists & quote. (42885)

CSS & Styling

  • Layout: Fix flex direction column. (42939)
  • Layout: Merge CSS rule for block gap. (43052)
  • Style Engine: Include 6.1 CSS 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., ensure style engine can output CSS functions like clamp. (43004)
  • Style engine: Disable stylesheet optimization temporarily. (43051)
  • Style Engine: Defensive guarding for when style does not define ‘individual’ property. (43122)

Global Styles

  • Fix styles declarations returning before all properties output. (42954)
  • Fluid typography: Migrate fluid typography algorithm to JS for site editor. (42688)
  • Spacing presets: Prevent % spacing size units being stripped by sanitize_title. (43101)
  • Specify priority in remove_action. (43073)

Block Editor

  • Inserter: Avoid warning when CRA is displayed. (42723)
  • Pasting: Dismiss pasted image if file:// schema detected. (42785)
  • Prevent multiselection via dragging when already dragging blocks. (42877)
  • Quote: Fix raw transform handler. (43093)
  • Rich text: Fix error when attempting to remove placeholder on composition start. (42821)
  • Paste from SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.: Interpret paragraph markup. (43114)

Post Editor

  • Decode the post URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org for the button label. (42930)

Site Editor

  • Internalization fixes for site editor template creation. (42762)
  • Fix error in compileStyleValue. (43116)

RichText

  • Firefox: Fix issue where it selects a nearby contentEditable. (42777)

Build Tooling

  • Fix: CSS files don’t build in dev mode on Windows. (42041)
  • Fix: Script name error in main package.json. (43089)

Testing

  • Fix: Just another end-to-end test. (42947)

CreateBlock

  • 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. references from save properties. (43035)

Accessibility

  • Shortcuts: Add Ctrl+Y for redo on Windows. (42627)
  • Change shortcut text for redo tooltip on Windows. (42830)

Performance

  • Lodash: Refactor away from _.isMatch(). (42271)
  • Lodash: Refactor away from _.zip(). (42926)
  • Lodash: Refactor away from _.delay(). (42966)
  • Lodash: Refactor away from _.startsWith(). (43019)
  • Lodash: Refactor away from _.isPlainObject(). (42508)
  • Lodash: Refactor away from _.maxBy(). (42914)
  • Lodash: Refactor Calendar block away from moment. (43029)
  • Lodash: Remove completely from @wordpress/dom package. (42912)
  • Lodash: Remove completely from @wordpress/element package. (42898)

Experiments

Style Engine

  • Enqueue block support styles. (42452) (42880)
  • Prettify combined selectors. (43003)
  • Prettify output. (42909)
  • Rename global function. (42719)
  • Combine style-engine stores for block-supports. (42970)
  • Add optimize flag and combine functions into wp_style_engine_get_stylesheet. (42878)

Documentation

  • Add examples for core/blocks actions. (42637)
  • Add examples for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./viewport package. (42921)
  • Added the allowedFormat details in richtext readme. (42426)
  • Adding @example entries to the public 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. exposed in core/blocks. (42745)
  • Cover: Fix rendered content PHPDocPHPDoc (docblock, inline docs) type. (43099)
  • Create Block: Update document links in templates. (42839)
  • Fix return type of home link attribute function. (42901)
  • Fix textual consistency about block attributes. (43075)
  • Link plugins 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/ release pages. (42736)
  • Document the cherry-picking automation. (42932)
  • Fixed broken external link to Mozilla Developer documentation. (43065)
  • Release Docs: Troubleshooting failed “Bump version” job. (42936)
  • Release docs: Update performance test instructions. (43015)
  • Remove the emoji characters to fix the handbook rendering. (43028)
  • Update broken internal link. (43094)
  • Update theme-json.md to include new element support and :Ref. (42412)
  • Gutenberg Data Tutorial: Adjust the image URLs and whitespace to render correctly in the Handbook. (42969)

Code Quality

  • Add mutations data and helper functions to useEntityRecord. (39595)
  • Remove old WordPress 5.8 code. (42818)

Block Library

  • Add separate callbacks for selecting a classic or 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. in the nav block. (43057)
  • Avoid reliance on status constants when consuming useCreateNavigationMenu hook. (42704)
  • Home Link: Use ‘sprintf’ in the render callback. (43024)
  • Nav block: Extract hook for inner blocks. (42743)
  • Nav block: Normalize to function expressions. (42744)
  • Normalize usage of Notifications in Nav block. (42706)
  • Remove duplicate speak calls from navigation block. (43079)
  • Site Title: Use home_url instead of get_bloginfo. (42857)
  • Page List: Fix indentation in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher file. (42852)
  • 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.: Try filters with ToolsPanel. (42629)

Site Editor

  • Navigation Menu 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.: Remove unnecessary Fragment. (43021)

Style Engine

  • Tweak Declarations filtering logic slightly. (43215)
  • Minor tweaks. (43111)

Global Styles

  • useGlobalStylesOutput: Use memo for derived values. (42917)

Tools

Env

  • Use git for wp-env‘s default WordPress version. (42826)

Testing

  • Migrate deprecated node matcher tests to playwright. (42759)
  • Migrate group block tests to Playwright. (42801)
  • Migrate missing block tests to Playwright. (41680)
  • Migrate Convert Block Type test to Playwright. (42760)

Build Tooling

  • Lodash: Refactor away from _.flatMap(). (42360)
  • Standardize script naming in main package.json. (42368)

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 the first blockKeyPress Event (typing)
Gutenberg 13.93.19s40.25ms
Gutenberg 13.83.21s36.88ms
WordPress 6.03.03s28.02ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.93.81s26.64ms
Gutenberg 13.83.74s26.08ms
WordPress 6.02.95s20.01ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @andrewserong @aristath @carolinan @chad1008 @ciampo @derekblank @dougwollison @ellatrix @fellyph @geriux @getdave @glendaviesnz @hellofromtonya @ItsJonQ @jameskoster @jasmussen @jorgefilipecosta @JustinyAhin @kjohnson @Mamaduka @manzoorwanijk @matiasbenedetto @mcsf @merkys7 @mikachan @mirka @ndiego @noahtallen @ntsekouras @pavanpatil1 @pooja-muchandikar @ramonjd @ryanwelcher @SavPhill @scruffian @shimotmk @SiobhyB @Smit2808 @Soean @stokesman @t-hamano @talldan @tellthemachines @theminaldiwan @tyxla @walbo

The following PRs were merged by first time contributors:

  • @fellyph: Rendering html for the author description at the editor. (42109)
  • @merkys7: Fix social-link block missing ‘width’ and ‘height’ attributes. (41373)
  • @Smit2808: Added the allowedFormat details in richtext readme. (42426)
  • @theminaldiwan: Fixed alignment issue of tagcloud block when align center. (43017)

Kudos to all the contributors that helped with the release!

Props to @gziolo @priethor @andrewserong @joen @bernhard-reiter for the assistance with the release.

#gutenberg #gutenberg-new

What’s new in Gutenberg 13.8? (3 August)

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


The Gutenberg 13.8 comes with Fluid Typography, accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) improvements, revamped Quote blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., and Template parts UXUX User experience enhancements. The release is also packed with 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 code quality improvements. All these thanks to a fantastic team of contributors, including two first-timers.

It’s now available in the WordPress 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 repository.

Table of contents

Fluid typography support

This new option allows themers to define text size that can scale and adapt to the screen’s real state available, so your content looks great on any screen.

Note: It’s a new feature, and the Gutenberg team would appreciate your feedback.

Revamped Quote block leveraging inner blocks

After the recent Gallery block improvements, it’s time to re-introduce the Quote block. Thanks to robust nested blocks 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., now you can shape the quotes to your heart’s content, which means that you can place any block inside the quotes 🎉 

Template part UX improvements

Template parts are essential for many themes; Gutenberg 13.8 introduces improvements for those who leverage variations and patterns to provide flexibility for their users.

The specific template part variations are now available in the block inserter, making it easy to add “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.”, “Footer,” or “Newsletter Subscription” template parts to your site.

Speaking of easy, the new search component in the template parts replacement modal will help you find just the right pattern for the block.

Border controls for Image blocks

The Image block now supports the full range of border controls, including Color, Style, and Width. I’m curious to see what creative folks at the Museum of Block Art can accomplish after this enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature..

Accessibility enhancements

The Gutenberg team is always trying to make the Gutenberg plugin more accessible with each release, and 13.8 is no different. The release includes iterative accessibility enhancements, including improved and consistent labels and tooltips across the Editor(s), as well as more keyboard-friendly clickable elements in the “Add template” modal.

Other notable highlights

  • The Post Comments and Comments block are now consolidated into a single block – Comments.
  • Now it’s possible to exit container blocks like Group blocks using the `Enter` key on an empty paragraph.
  • The new settings under “Global Styles > Layout” allow users to override content dimensions defined by a theme, giving the users better control over the full-width content.

13.8.0

Enhancements

Block Library

  • Image: Add border block support for color, width, and style. (31366)
  • Merge Comments and Post Comments blocks. (41807)
  • Social Icon: Added WhatsApp icon to the Social Icon Block. (42137)
  • Template Part: Swap block action places. (42221)
  • Template Part: Add search to replacement modal. (42459)

General UIUI User interface

  • Equalize modal content padding. (42370)
  • Remove top margin on the first paragraph in a modal. (42369)

Components

  • BorderControl: Render border color/style dropdown as UnitControl prefix. (42212)
  • ColorPicker: Cleanly implement large size. (42002)
  • InputControl: Decrease large default padding if has prefix/suffix. (42166)
  • SelectControl: Add flag for larger default size. (42456)
  • ToggleGroupControl: Add size variants. (42008)
  • UnitControl: Update unit select’s focus styles. (42383)
  • CustomSelectControl: Use styles from SelectControl. (42460)
  • Dropdown: Add wrapper for custom padding. (42595)
  • InputControl: Add padding wrapper for prefix/suffix. (42378)
  • ScrollLock: Improve Storybook story for documentation view. (42344)
  • ColorPalette: Display checkered preview background when value is transparent. (42232)

Global Styles

  • Add layout content size controls to global styles. (42309)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. support for root padding and align full blocks. (42085)
  • 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.: Add block support feature level selectors for blocks. (42087)
  • Theme.json: Add support forw heading / caption elements in theme.json schema. (42433)

Document Settings

  • Make ‘Move to trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.’ button full width. (42577)

Block Editor

  • Add setting to display rich text toolbar inline. (42399)
  • Add block variations for individual template parts. (42454)
  • Enable onEnter support for group block. (40724)

Site Editor

  • On template creation, don’t show search if not needed. (42357)

Icons

  • Add shuffle icon to library. (42193)

Nested / Inner Blocks

  • Quote: Use nested blocks. (25892)

Colors

  • Update color palette popover style. (41900)

Bug Fixes

Block Library

  • Button Block: Change text-decoration style to low specificity. (42545)
  • Cover Block: Prevent transform to Group block when 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. is set. (42638)
  • Cover block: Adding background-size and background-repeat properties to the block CSS. (42470)
  • Fix tab/focus order issue in Media & text block. (40806)
  • Page List: Fetch items with ‘view’ context. (42559)
  • Post title: Fix single line paste. (42321)
  • Social Icons Block: Fix button opacity in template parts. (42641)
  • Group block: Add context to the word “Row”. (42255)
  • Post terms: Hide prefix and suffix placeholders in post terms. (42418)
  • [Media Text]: Fix deprecations 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.. (42816)

Components

  • AnglePickerControl: Fix gap between elements in RTL mode. (42534)
  • ColorPalette: Fix background image in RTL mode. (42510)
  • Context System: Don’t explicitly set undefined value to children. (42686)
  • MaybeCategoryPanel: Update categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. selector. (42663)
  • Popover: Fix width on expandOnMobile. (42635)
  • RangeControl: Clamp initialPosition between min and max values. (42571)
  • Tooltip: Avoid unnecessary re-renders of <select> child elements. (42483)
  • Tooltip: Fix positioning by anchoring to child element. (41268)
  • Fix condition bug on BoxControl. (42402)

Post Editor

  • Avoid 403 errors for users with low permissions. (42413)
  • Display post template selection for non-adminadmin (and super admin) users. (42705)
  • Fix typo in translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. string. (42673)

Block Editor

  • Prevent link control popover from going offscreen. (42389)
  • Writing flow: Fix caret movement for multiple lines. (42423)
  • Writing flow: Fix caret placement in corners. (42437)
  • Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection. (42530)

Global Styles, CSS & Styling

  • Elements: Buttons: Fix the path with the css to style the cursor for all button elements. (42129)
  • Link elements: Add a :where selector to the :Not to lower specificity. (42669)
  • Element styles: Adding stylesheet to load in the editor. (42132)
  • Elements: Fix heading and caption element selectors. (42479)
  • Layout content size controls: Add left alignment to line up with description and other elements. (42576)
  • Layout: Ensure defaultEditorStyles are still output in Classic themes. (42906)
  • Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. (42756)
  • Theme.json: Fix schema for button elements. (42431)

Widgets Editor

  • Add configuration option to skip autop on freeform blocks when parsing blocks. (42623)

Rich Text

  • Annotation API: Fix __experimentalGetPropsForEditableTreePreparation. (42596)

Site Editor

  • Fix typo in default category template’s description. (42586)
  • Fix Reakit warning on creation template component. (42392)
  • Remove leftover class. (42591)

Themes

  • Remove core/post-comments-form block styles that are overriding button element styles. (42053)

Icons

  • Icons Package: Fix line icons styling. (40315)

Accessibility

  • BorderControl: Update labelling, tooltips and wrap with fieldset and legend. (42348)
  • Add aria-hidden to query pagination arrows. (42583)
  • Fix labelling and semantics of the paragraph block Left to right control. (42324)
  • Fix mismatching label and visible text on the Toggle block inserter button. (42359)
  • Fix the description text of block movers for horizontal movement. (42393)
  • Replace clickable div elements with buttons in the Add template modal. (42668)

Experiments

Style Engine

  • Style Engine Rules & Store objects. (42222)
  • Add a WP_Style_Engine_Processor object. (42463)
  • Add elements to the frontend. (41732)
  • Allow removing CSS declarations from the WP_Style_Engine_CSS_Declarations object. (42428)
  • Style engine: Check item value validity. (42487)

List v2

  • Add forward delete. (42564)
  • Improve paste handling. (42524)
  • Merge with nested items. (42551)
  • Switch to default block type on Backspace from start. (42633)
  • Remove quote transforms as removed by Quote v2. (42700)

Global Styles

  • Block supports: Add fluid typography. (39529)
  • Layout: Reduce specificity of fallback blockGap styles. (42665)

Documentation

  • Add examples to core/blocks selectors. (42572)
  • Consolidate editor filters and actions. (42356)
  • Correct the documented return type for WP_Block_Parser::Render(). (42642)
  • Doc: Update getEntityRecord/s param description. (42488)
  • Docs: Add variations key to block.json JSON schema definition. (42539)
  • Docs: Add missing data module references. (42651)
  • Fix: Repetition of wrong word in string. (42621)
  • Flex: Remove experimental from documentation and storybook. (42301)
  • Include section on how to test code for a given WP major. (42390)
  • Marking internal action as @ignore to remove them from the documentation. (42163)
  • Theme JSON Docs: Clarify null, true, and false values for blockGap setting. (42447)
  • ToolsPanel: Add a readme section related to laying out a ToolsPanel. (42615)

Components

  • Improve documentation for the SpaceInput type. (42376)
  • BorderControl: Add missing changelog for accessibility enhancements. (42411)

Code Quality

  • Base Styles: Apply long-content-fade gradient from transparent to color. (42401)
  • Fix jsx-a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) label-has-associated-control configuration. (42671)
  • Two code issues on navigation link edit missing text. (42440)
  • Remove deprecated eslint rules. (42654)

Style Engine

  • Rename WP_Style_Engine_CSS_Rule->set_declarations to add_declarations. (42464)
  • Update return PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher doc comment and other nitpicks. (42453)

Componentes

  • ComboboxControl: Refactor onKeyDown to use keyboardEvent.code. (42569)
  • Elevation: Convert component to TypeScript. (42302)
  • ScrollLock: Covert component to TypeScript. (42303)
  • Shortcut: Covert component to TypeScript. (42272)
  • Divider: Complete TypeScript migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of component. (41991)
  • Lodash: Refactor a few components away from _.isEmpty(). (42468)
  • Lodash: Refactor away from _.compact(). (42438)
  • Lodash: Refactor PageAttributesParent away from _.deburr(). (42429)
  • Lodash: Refactor away from _.snakeCase(). (42427)
  • Lodash: Refactor away from _.fromPairs(). (42217)

Global Styles

  • Dimensions Global Styles: Split props into separate hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. to tidy up the panel component. (42620)

Block Library

  • Remove unnecessary ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Fragments. (42529)

Tools

Testing

  • Added 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 cover block render function. (42108)
  • Migrate hooks api test to playwright. (42584)
  • Skip flaky navigation block permissions test. (42693)
  • end-to-end Tests: Tweak Comments block tests after migrating to Playwright. (42406)
  • Utilize WordPress PHPUnit Test Library Included By wp-env. (41852)

Build Tooling

  • Update to reflect change in Documentation label. (42395)
  • Add inline documentation on building API documentation to commit block API verify error message. (42432)
  • Scripts: Exit error code 1 when status value is null. (42396)
  • Env: Download WordPress PHPUnit Into Container. (41780)
  • Env: Restrict WP_TESTS_DOMAIN constant to just hostname and not home URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (41039)

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 the first blockKeyPress Event (typing)
Gutenberg 13.83.87s57.86ms
Gutenberg 13.73.03s57.48ms
WordPress 6.03.46s52.23ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.85.12s26.49ms
Gutenberg 13.74.5s25.72ms
WordPress 6.04.56s20.91ms

Contributor props

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @amustaque97 @andrewserong @arcangelini @aristath @bph @carolinan @chad1008 @ciampo @danielbachhuber @DAreRodz @dcalhoun @ellatrix @fabiankaegy @geriux @getdave @gziolo @jameskoster @johnbillion @jorgefilipecosta @kkmuffme @Mamaduka @matiasbenedetto @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @paulopmt1 @pedro-mendonca @pooja-muchandikar @ramonjd @ryanwelcher @scruffian @SiobhyB @sunil25393 @t-hamano @talldan @tellthemachines @tyxla @vcanales @walbo @westonruter @zaguiini

The following PRs were merged by first-time contributors:

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

Props to @priethor for the assistance with the release, @critterverse and @jameskoster for the images and videos.

#gutenberg, #gutenberg-new

What’s new in Gutenberg 13.7? (20 July)

“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.7 brings an updated modal design, the ability to apply 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. locking to inner blocks with a click of a button, a myriad of new template types, and plenty of improvements to existing features based on feedback from the community. 

This release contains 167 PRs by 58 contributors, including four first time contributors. Kudos to all the contributors that helped with the release! 👏 

It’s now available in the WordPress 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 repository

Table of Contents

Lock inside container block with one click 

Building on expanding locking capabilities, this version of Gutenberg includes a new toggle when locking blocks to quickly apply the selected lock settings to all blocks inside a container block (Group, Cover, and Column blocks). (41876)

This release also comes with an updated modal design for various screens. These design changes help provide focus on what someone might want to accomplish within the modal itself by blurring the background and reducing visual noise with softer corners. (40781)

Create templates now for specific categories, pages and more

In this release, the template editor was expanded with even more types of templates for various use cases.  You can add and edit templates for Custom posts types and taxonomies. You can get very specific and offer a different template for single categories or tags. 

For instance, you can use a different template for all personal blogblog (versus network, site) posts, a second one for all developer related blog posts, and a third one for all travel posts. 

If your site registered additional post types, like books, or products, your editor instance will automatically list them in the selection box for the Add New template button.
Note: The template for the archive-{posttype} is the only one still missing in the list of template options when you click on the Add New button in the Site editor. (42127)(41875)(42138) (42457).

To learn more, read: Core Editor Improvement: Deeper customization with more template options

Other Notable Highlights

Start with a 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 media placeholder.

With this release, users can directly select Use the feature image, in addition to the Upload  and Media Library options in the placeholder for a new cover block. This streamlines the workflow when editing a template.  (41722)

Introducing “Time to read”

The information panel accessed through the top bar received a new number. In addition to the numbers of  words, characters, block, headings, and paragraphs it now also contains the estimated time to read for this document (page, post, custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept.).  (41611)

Improved Document settings

In previous releases, the post settings panel in the 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. received a design update. In this release, the same section becomes has been refined: 

The fields for post format, slug, template, and authors are aligned and have the same width. The template displays ‘default template’ instead of none, and the Permalink link opens a popover to edit the slug, when clicked. The result is a cleaner, more organized display that should help you more readily access all the important information about your post/page at a glance.   (42146)(42063)(42033

Changelog

Enhancements

  • Update the modal design. (40781)
  • Themes: Adds text decoration support to post title block. (42328)
  • Social Link: Automatically prepend emails with mailto protocol. (42186)
  • Add better ARIA labels to toggle buttons in Summary panel. (42114)
  • Start with featured image in media placeholder. (41722)

Components

  • ColorPicker: Widen hex input field for mobile. (42004)
  • ComboboxControl / FormTokenField: Add flag for larger default size. (40746)
  • Try tabs instead of segmented control for switching between solid/gradient in color panels. (41937)

Document Settings

  • Make Post Format, Slug and Author fields fill the sidebar. (42146)
  • Post Template: Update fallback label. (42063)
  • Rewrite URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org (Permalink) panel as a popover. (42033)

Full Site Editing

  • Expand the templates that can be added – custom taxonomies, specific term, specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and tag. (41875)
  • Expand the templates that can be added – specific pages. (42138)
  • List View: Use heading content for button label text if available. (41855)
  • Add New – Custom/General template. (42127)
  • Add the ‘Apply to inner blocks’ option to Block locking (41876)
  • Update: Wording on add generic template modal. (42379)

Post Editor

  • Add estimated time to read to table of contents in editor. (41611)
  • Add month and day as a suggest format to the date format picker. (42317)
  • Post Editor: Preload templates post type permissions (REST-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.). (42209)

New APIs

  • JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. Error Tracking: Allow custom error reporting logic to be called in Error Boundaries via a WP action hook. (42024)

Bug Fixes

  • Enable shift in URLPopover component. (42214)
  • Multi-selection: Fix select all in Safari. (42340)
  • Playwright: Fix relative URLs. (42361)
  • Document Settings: Fix tooltip appearing when opening popovers in Summary panel. (42381)
  • MediaReplaceFlow: Fix UIUI User interface showing stale URL by avoiding state duplication. (42116)
  • Template Mode: Allow clearing name field while typing. (42065)
  • Navigation: Prevent title and href props from being rendered as HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. attributes. (41833)
  • Recurse into conditional CSSCSS Cascading Style Sheets. rules for 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. stylesheets. (41110)

Block Library

  • Comment template: Left, center and right alignments. (41892)
  • Comments block: Remove stray legacy class from edit. (42335)
  • 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. out images with no local id before loading media library. (42083)
  • Fix undo trap in Gallery block when transforming from shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site.. (42001)
  • Remove sticky posts setting when we inherit the query. (40656)
  • Social Links: Set the default protocol to ‘httpsHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information.’ if not specified. (42167)

Components

  • Add missing label to border radius range control. (42118)
  • ComboboxControl: Use custom prefix when generating the instanceId. (42134)
  • Popover: Pass missing anchor ref to the getAnchorRect callback prop. (42076)
  • Popover: 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. of in between inserter in site editor. (42329)

Block Editor

  • Fix Link Control ‘Open in new tab’ option not saving properly on committing link in buttons block. (42073)
  • Fix list view drop indicator positioning. (42353)
  • Make sure comments keep their location when inside paragraph. (31374)
  • Handle cases when getBlockType returns undefined. (41884)

Site Editor

  • Allow clearing template name field while typing. (42149)
  • Template Parts: Disable block transformations. (42090)
  • Update template details browse label. (42350)
  • Fix pattern carousel / grid styling regression. (42194)

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 aria-checked to the selected heading level menu item. (42273)
  • Fix tabbing from first or last block in site editor. (42036)
  • Navigation block: Only focus submenu trigger on escape key press. (41986)

Global Styles

  • Filter block level styles before compiling global stylesheet. (42207)
  • Fix link element hover bleeding into button element default styles. (42072)

Post Editor

  • Editor: Fix term selector component exports. (41784)
  • Post Template: Fix condition checks. (42038)

Build Tooling

  • Tests: Ignore test files in build-types folder. (42260)
  • Fix IsEditedPostAutosaveable test case. (42280)

Performance

  • Work on refactor away from Lodash to reduce build size continued

Documentation

  • Add support for @ignore in the docgen tool. (42198)
  • Button Component readme : Suggest label in case there is not text. (40639)
  • New handbook page for curating the editor experience. (42022)
  • Rename Templates page to Block Templates. (42276)
  • Gutenberg Data Tutorial 5: Adding a Delete Button. (40940)
  • Added new FAQ on disabling caching of 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.. (42346)
  • Update link to sample code in gutenberg-examples. (42208)
  • Add @example for getNotices to create example in the handbook. (42023)
  • Add examples for all actions/selectors for the wordpress/notice package. (42077)
  • Update versions in WordPress for upcoming 6.0.1 release. (42161)
  • Fix code blocks for Block Transforms API. (42287)
  • Fix formatting problems with curating handbook page. (42135)
  • Fix link to 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 example. (42293)
  • Update attributes example: Alter source children. (41016)

npm publishing workflow

  • Simplify workflow with GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions (42189)
  • Update details related to npm publishing. (42364)

Experiments

  • Add a WP_Style_Engine_CSS_Declarations object. (42043)
  • Style engine: Rename ‘css_var’ option property to ‘convert_vars_to_classnames’. (42113)
  • Style engine: Return declarations in array response. (42307)
  • Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json. (40875)

Code Quality

  • Block Editor: Use optional chaining in ‘block-list’ component. (42068)
  • Blocks: Remove no longer used Block Content Context. (41395)
  • Chore: Remove two empty unrequired object destructuring. (42279)
  • Fix fix. (42160)
  • Fix: Inexistent parameter passed to getBlockIndex on getBlockInsertionPoint. (42250)
  • Fix: State type in automaticChangeStatus reducer. (42251)
  • Style engine: Add unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. coverage for WP_Style_Engine_CSS_Declarations. (42306)
  • Style engine: Rename main public function to reflect functionality. (42140)
  • Update: Remove repeated and condition on useElevation. (42048)
  • useSelect: Use useDebugValue to better display data in DevTools. (42225)
  • Site Editor: Re-architect templates addition. (42457)

MigrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. to Typescript

  • Grid: Convert component to TypeScript. (41923)
  • HStack: Convert component to TypeScript. (41580)
  • RangeControl: Convert component to TypeScript. (40535)
  • RangeControl: Convert stories to TypeScript. (41444)
  • RangeControl: Convert unit tests to typescript. (41445)
  • Scrollable: Convert component to TypeScript. (42016)
  • TextHighlight: Convert component to TypeScript. (41698)
  • Tip: Covert component to TypeScript. (42262)
  • VisuallyHidden: Convert component to TypeScript. (42220)
  • Spacer: Complete TypeScript migration of component. (42013)

Components

  • Add eslint to prevent SSR breakage. (42248)
  • Fix typos in components changelog. (42244)
  • Refactor ColorPicker to pass exhaustive-deps. (41294)
  • Refactor Navigation to pass exhaustive-deps. (41612)
  • RefactorFocalPointPicker to pass exhaustive-deps. (41520)

Block Library

  • More Block: Remove duplicate block class. (42120)
  • Page Break Block: Remove duplicate block class. (42121)
  • Page List Block: Remove duplicate useBlockProps hook. (42123)
  • Remove client side variation fallbacks. (42180)
  • Site Logo: Remove unnecessary state. (42042)

Tools

  • Automate the cherry-picking process for WordPress and Gutenberg releases. (40969)
  • Update the minimum WP version to 5.9. (41306)
  • Components: Remove duplicate CHANGELOG titles. (42334)
  • Site Editor: Make Code Editor reflect block conversions. (42081)
  • Remove the Template panel option from the Preferences modal (42030)
  • Theme.json: Add spacing size presets. (41527)

Testing

  • Fix multiple regex in packages/env/lib/config/test/config.js. (42249)
  • Migrate Block Mover Test For Playwright. (42039)
  • Migrate format API test for playwright. (42035)
  • Migrate list block test to Playwright. (41555)
  • end-to-end Tests: Migrate Comments block test to Playwright. (39826)
  • fix: Update Image block native end-to-end test fixture. (42050)
  • SelectControl: Use roles and @testing-library/user-event in unit tests. (42308)

Build Tooling

  • Ignore *.d.ts files when running unit tests. (42304)
  • Dependency Extraction: Output asset.php files for shared chunks too. (41002)

Create Block

  • Added prompt to continue when minimum system requirements not met. (42151)
  • More careful prompts to continue when minimum system requirements are not met. (42254)
  • Fix regression from _.size() refactoring. (42049)

Block Library

  • Comments block: Change ID to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./comments. (40506)
  • Elements: Buttons: Style the cursor for all button elements. (42102)
  • Post Comments Form: Fix warning 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.. (42131)
  • Use more clear and inclusive language in comments. (42155)

Global Styles

  • Add link element :Hover interactivity control to global styles UI. (41976)
  • Add support for heading elements. (41981)
  • Add visited to link element allowed pseudo selector list. (42096)
  • Button Elements: Allow element styles in classic themes. (42012)
  • Theme.json Schema: Add support for button elements. (42133)

Accessibility

  • Change the BoxControl ARIA role from region to group. (42094)
  • Update site editor region labels to match post editor. (42037)

Block Editor

  • Rich text: Remove placeholder on composition start. (41970)
  • Rich text: Remove space handling (for BUTTON and SUMMARY). (41977)

Data Layer

  • Enable useSelect autocompletion. (41911)
  • Update wordpress/data documentation to prefer store object instead of store name to access the store. (41210)

First time contributors

The following PRs were merged by first time contributors:

  • @MarieComet: Button Component readme : Suggest label in case there is no text. (40639)
  • @rflw: Update attributes example: Alter source children. (41016)
  • @schutzsmith: Theme.json Documentation – Added new FAQ on disabling caching of theme.json. (42346)
  • @welenofsky: Update link to sample code in gutenberg-examples. (42208)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @alexstine @andrewserong @annezazu @aristath @bph @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @hz-tyfoon @jameskoster @jorgefilipecosta @jsnajdr @kevin940726 @Mamaduka @MarieComet @mcliwanow @mcsf @mikachan @mirka @ndiego @noisysocks @ntsekouras @ockham @oguzkocer @opr @pavanpatil1 @pooja-muchandikar @ralucaStan @ramonjd @renatho @rflw @ryanwelcher @schutzsmith @scruffian @SiobhyB @stokesman @t-hamano @talldan @torounit @tyxla @vdwijngaert @walbo @welenofsky @youknowriad

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 13.7 5.83s46.46 ms
Gutenberg 13.65.84s46.78 ms
WordPress 6.05.74s45.31 ms

Site Editor

VersionTime to first blockKeyPress Event (typing)
Gutenberg 13.76.55s39.32 ms
Gutenberg 13.66.35s41.86 ms
WordPress 6.05.84s38.88 ms

Again, kudos to all the contributors that helped with the release! 👏

Props to @priethor, @desrosj for their assistance with the release, @annezazu for review of this post and @javiarce for the images and video.

7-21: Updated the Performance Benchmarks and added the link to the Core Improvement post on creating templates

#gutenberg