“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/” is published following every Gutenberg biweekly release, showcasing new features included in the release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Site Editor (formerly called Full Site Editing) projects. Previous release posts can be found via the #gutenberg-new tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.).

Gutenberg 15.3 has been released and is available for download!

The latest version of Gutenberg, 15.3, tightens up the site editing experience, adds a new “Time to Read” 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. for adding estimated read time to posts, and a number of Duotone enhancements. Combined with a multitude of improvements across the board, this release is a solid step forward for Gutenberg.

Table of contents

1. A tightened-up site editing experience
2. New “Time to Read” block 
3. Leveling-up Duotone
4. Changelog
5. First time contributors
6. Contributors

A tightened-up site editing experience

The Site Editor has received a number of enhancements, culminating in a tightened-up, design-forward experience that brings site editing center stage. 

With another round of polish, the Site Editor experience is feeling more refined than ever. 

New “Time to Read” block 

The new “Time to Read” block allows you to display the estimated time the average reader takes to read the current page, or post. Letting readers know right off what their estimated reading time helps them to decide if they should continue reading, or save the post for later. (43403)

The block is relatively simple as-is, with follow-ups to enhance styling capabilities. 

Leveling-up Duotone

This release includes a number of enhancements around leveling-up the popular Duotone design tool. You can now set a Duotone 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. globally within the Site Editor’s Styles panel, whereas in previous releases you could only do this manually within the 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. file. (48255) 

Duotone presets are now stored as slug values, instead of hard-coded color values (i.e. #FFFFFF). Using the preset itself means that Duotones are no longer locked to a specific theme, or theme variation.

If you apply a Duotone, then change a theme to another that uses the same slug value, the new theme’s Duotone will now take effect. (48318)

And last, Duotone styles are now generated using the WordPress Style Engine, meaning that CSSCSS Cascading Style Sheets. is generated as part of the block supports CSS — rather than inline. (48281)

Changelog

Enhancements

Site Editor

• Refactor the site editor URLs for better backward compatibility. (48063)
• Remove TemplateAreas from template details. (48490)
• Update the edit button. (48584)
• Change “Browse all templates” to “Manage all templates” in template details popover. (48496)
• Match color of the focus template view with site dark material. (48430)
• Polish add template modal style. (48445)
• Site Editor 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.: Add line-height for template/parts name and update width for edit button. (48160)
• Extract a DimensionsPanel component as a reusable component between Global Styles and Block Inspector. (48070)
• Remove copy for managing a block’s style variations. (48367)

Block Editor

• Apply keyboard shortcut conversions between paragraphs and headings to all editor instances. (47972)
• Create automatic change higher order reducer. (48312)
• [Inserter]: Preload media categories empty check – client side. (47503)

Post Editor

• Revert iframed editor for WP coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. only. (48076)
• PageAttributesCheck: Return boolean value directly from the selector. (48336)
• Apply busy status to the publish button in progress and unify button width. (48444)

Block Library

• [New Block] Add post time to read block. (43403)
• Add all allowed innerblocks to the inspector animation experiment. (47834)
• Make the Site Logo block placeholder state smaller. (48218)
• ToggleControl: Remove margin overrides and add opt-in prop. (47866)
• Post Terms block: Add transforms for variations. (48328)
• Navigation List View: Add block movers to the more menu. (48099)
• Navigation: Always create a fallback menu. (47684)
• Navigation: Don’t create a fallback 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. if there are inner blocks. (48585)
• Navigation: Don’t create duplicate navigation menus. (48599)
• Navigation: Update the dependencies for the useEffect that handles notifications. (48066)
• Navigation: Wrap the dependent functions in useCallback. (48195)
• Page List: Move the modal to its own file. (47922)
• Classic Block: Replace the deprecated isPrimary prop with variant. (48230)
• Refactor core blocks to use HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Tag Processor. (43178)

Block APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.

• HTML Tag Processor: Add WP 6.3 compat layer. (47933)
• Tag Processor: Add bookmark invalidation logic. (47559)

Design Tools

• Duotone: Use the style engine to generate CSS for Duotone. (48281)
• Duotone: Add Global Styles controls for blocks that support duotone. (48255)
• Use Duotone presets in block duotone attributes. (48318)
• Duotone: Use CSS variables instead of slugs in block attributes. (48426)
• Border Panel: Add missing dep for onBorderChange callback. (48010)
• Disable layout toolbar controls for content locked blocks. (47939)
• SpacingSizesControl: Fix white dot on thumb. (48574)

List View

• Scroll selected block into view when single block selection changes. (46895)

Components

• Change higher order with-constraint-tabbing from .js to .tsx. (48162)
• CircularOptionPicker: Refactor to TypeScript. (47937)
• Extract delete handler to hook for RichText. (48273)
• ToolsPanel: Remove unnecessary dep from resetAll callback. (48011)
• Link Control – Add support for text only labels. (47930)
• Pin floating-ui/reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-dom version. (48402)
• Use React 18 rendering for import dropdown. (48244)

Tools

• Migrate switch-to-draft to Playwright. (48120)
• VizReg end-to-end tests: Programmatically test all combinations of a given list of props/values. (48260)
• List block: Add Firefox end-to-end tests. (48271)
• Update end-to-end test snapshots to Jest 29 default. (48626)
• Update snapshot format to Jest 29 default. (48366)
• Move react-native-editor parser tests to a test directory. (48615)
• ToolsPanel: Refactor unit tests to TypeScript. (48275)
• Migrate block deletion end-to-end tests to Playwright. (48012)
• Migrate list view end-to-end tests to Playwright. (47919)
• Navigation block: End-to-end code quality fixes. (48071)
• Remove old end-to-end tests for the navigation block. (48126)
• Update assertion Autocomplete end-to-end tests. (48344)
• [Automated Testing]: Fix wrong button fixture. (48305)

Code Quality

• TabPanel: Refactor unit tests in prep for controlled component updates. (48086)

Bug Fixes

Site Editor

• Fix Site Editor perf tests. (48240)
• Fix routing for Classic themes using block-based template parts. (48343)
• Fix the ‘Browse all’ link in the template details modal. (48301)
• Fix the site editor home page loading when installed in a subdirectory. (48363)
• Fix the tooltip and shortcut for the global save button. (48282)
• Prevent distracting focused back button on site editor load. (48472)
• Sort templates and template parts by slug. (48473)
• Specify focus state color for template navigation button. (48134)
• [Site Editor]: Set html block as freeform fallback block. (48129)
• Remove broken site editor redirect. (48283)
• Fix: Inserter does not appear on sidebar navigation. (48623)
• Fix: Make navigation page list load its items on navigation sidebar. (47853)
• Revert Site Tagline placeholder attribute, move example to block.json. (48383)

Block Editor

• MediaReplaceFlow: Fix styling for LinkControl. (47949)
• Fix “Reset All” button in the typography panel of the block inspector. (48123)
• [Inserter – Media tab]: Upload Openverse images when inserted. (48501)
• Block alignment controls: Don’t remount the block when alignments change. (48209)
• Pin valtio version. (48237)
• Fix block style preview flickering when a ‘style’ is focused. (48418)
• Enable access to block settings within UBE. (48435)
• Fix: Content only CPT template locking. (48434)
• Firefox: Fix input rules (React async state issue). (48210)
• Fix: Multiple overwrites on rest_controller_class for wp_template/wp_template_part. (48078)
• Select blocks in outline list. (48118)
• Only add layout classes to inner wrapper if block is a container. (48611)

Widgets Editor

• 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. Editor: Fix a problem with ‘Move to Widget Area’ button not working. (48233)

Block Library

• Add support for orientation-based block movers to core/social-links. (48452)
• Fix 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.: Read more link is always on new line in the editor. (47772)
• Fix: OffCanvasEditor does not inserts submenu on collapsed items. (48214)
• List Item: Avoid an error when the ‘onReplace’ prop is undefined. (48639)
• Add missing code on the fix page list loading PR. (48621)
• Prevent text decoration from showing up in all blocks. (48117)
• Widget Importer: Don’t render controls when there’s nothing to import. (48396)
• [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.] Fix top border in pattern selection modal. (48303)
• [Query Loop] Sync gutenberg_build_query_vars_from_query_block with core. (48640)
• 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.: Clean up border application in editor. (48024)

Global Styles

• Fix for WP_Theme_JSON_Resolver_Gutenberg::Get_merged_data. (48644)
• Display preset names via the tooltip. (48304)
• Fix typo in valid settings for fluid typography. (48605)
• Prevent the global styles previews thumbnails from resizing on load. (48474)
• Site Tagline: Add example so that it will display in style book. (48300)
• Fix wrong property name letterSpacing to lineHeight. (48091)
• Update code position for constants and methods in WP_Theme_JSON_Gutenberg class. (48631)
• WP_Theme_JSON_Gutenberg: Update comments to be aligned with core, so backports are easier. (48624)

Testing

• Add typescript-eslint rules with type informations to end-to-end tests. (48267)
• Fix snapshots for Spacer mobile unit tests. (48406)
• Add command to run performance tests in debug mode. (48614)
• Make the performance tests more stable. (48094)

Developer

• Playwright: Fix request utils for non Docker envs. (48206)
• [Private APIs] Only prevent module re-registration if IS_WORDPRESS_CORE. (48352)
• Add a manual performance job that we can trigger from 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/ UIUI User interface. (48302)
• Track new front-end metric: LCP-TTFB. (48288)

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)

• Autocomplete: Duplicate list within 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. for non visual users. (47907)
• Fix site editor switch mode message. (48136)
• Fix the Publish region position and focus style. (48102)
• Focus 1st parent block on block remove, if no previous block is available. (48204)
• List view: Allow selected block to override roving tabindex. (48339)
• Style Book: Allow button text labels for style book icon. (48088)
• Style Book: Focus the Style Book when opened, and enable ESCAPE key to close. (48151)
• Try to fix 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) test flakiness. (48236)
• Make the template customized info accessible. (48159)

Performance

Block Editor

• Block Editor: Improve empty getBlockParents() perf. (48242)
• Fix perf 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. in duotone 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.. (48401)
• Writing flow: Avoid recalc style on every selection change. (48409)
• useAsyncList: Flush state updates when processing queue. (48238)

Components

• Autocomplete: Reduce work before finding trigger. (48327)
• Disable lazy term metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. loading render_block_core_template_part. (48000)
• Rich text: Only selectively handle keyup/pointerup. (48385)
• Rich text: Remove unnecessary handleSelectionChange call. (48373)
• Rich text: Try removing store change on focus. (48342)
• Autocomplete: Avoid calling setState on input. (48565)
• Autocomplete: Don’t change state on every keystroke. (48485)
• Lodash: Refactor context system provider away from _.merge(). (48036)

Code Quality

• Fixed incorrect type annotations in wordpress/data, part 2. (48221)
• Lodash: Refactor away from _.merge(). (48239)
• Lodash: Remove from integration tests. (48122)
• Lodash: Remove remaining _.get() from core-data. (48310)
• Lodash: Remove _.get() for post type usages. (48121)
• Lodash: Remove remaining _.get() from editor. (48314)
• Lodash: Remove some _.get() from editor. (48104)
• Lodash: Remove _.merge() from getMappedColumnWidths(). (48032)
• Lodash: Remove some _.get() from Gallery block. (48488)
• Lodash: Remove some _.get() from Image block. (48489)

Documentation

• Clarify 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. status of appearance-tools theme support. (48622)
• Docs: Clarify release process for major WP 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. 1. (48248)
• Docs: Markdown fix for wp_enqueue_script usage. (48212)
• Fix e2e-test-utils-playwright’s jsdoc and types. (48266)
• Fix incorrect css property in editor-color-palette documentation. (48333)
• Proactively update versions in WordPress ahead of 6.2. (48145)
• Update curation document to include theme.json filters. (48576)
• Updates to the curating the editor experience to include 6.1 & 6.2 items. (48294)

First time contributors

The following PRs were merged by first time contributors:

• @abhi3315: Link Control – Add support for text only labels. (47930)
• @hbhalodia: Change higher order with-constraint-tabbing from .js to .tsx. (48162)
• @sboerrigter: Fix incorrect css property in editor-color-palette documentation. (48333)
• @shreyasikhar: Site Editor Sidebar: Add line-height for template/parts name and update width for edit button. (48160)
• @suvrodattamitu: Style Engine: Fix wrong property name letterSpacing to lineHeight. (48091)
• @tomdevisser: Remove copy for managing a block’s style variations. (48367)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @abhi3315 @adamziel @afercia @alexstine @andrewserong @annezazu @brookewp @carolinan @chad1008@ciampo @dcalhoun @draganescu @ellatrix @fluiddot @geriux @getdave @gvgvgvijayan @gziolo @hbhalodia @jorgefilipecosta@jsnajdr @kevin940726 @MaggieCabrera @Mamaduka @marekdedic @ndiego @ntsekouras @oandregal @ockham @richtabor@sboerrigter @scruffian @shreyasikhar @spacedmonkey @suvrodattamitu @tellthemachines @tomdevisser @tyxla@WunderBart @youknowriad @t-hamano

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