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