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

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


Gutenberg 14.3 has been released and is available for download!

It continues to build on recent writing flow improvements, refines image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. creation via drag-n-drop, adds an enhanced tools panel to the Styles interface, and much more!

Table of Contents

Quickly navigate blocks of text

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

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

Improved drag and drop for images

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

Improved tools panels for the Styles typography controls

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

Changelog

Enhancements

Post Editor

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

Block Library

  • Comment Pagination Numbers: Add background color. (43902)
  • Navigation Submenu: Use get_queried_object_id when setting current-menu-item classes. (44474)
  • Post Author: Include option to link author archive. (42670)
  • Post Terms: Add spacing support. (43646)
  • Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.: Hide instructions for FormTokenField. (44641)
  • Tag Cloud: Remove strtolower around taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. name. (16112)
  • Video: Update placeholder style. (44215)

Components

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

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

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

Global Styles

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

Block Editor

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

Site Editor

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

Block Directory

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

New APIs

Block Library

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

Bug Fixes

  • Add a correct TS signature for useEntityRecords. (44448)
  • BlockDraggable: Change prop name passed to children when dragging is disabled. (44371)
  • Fix Lint warning/errors in cherry-pick script. (44662)
  • Fix: Content blocks with nested blocks always appear as top level. (44098)
  • Hide the Classic block in the Site Editor. (44554)
  • PHP 8.2: Remove deprecated callable in Style Engine value functions. (44561)
  • Persisted preferences: Fix context property of user metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. configuration. (44489)
  • Resizable editor: Fix height setting bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.. (44637)
  • Style engine: Kebab case preset slugs in the editor. (44406)
  • Add submenu block href only if URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org is not empty. (44337)
  • Update Theme JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. $schema to allow pseudo selectors on button property. (44303)
  • Preserve the generic signature of getEntityRecord and getEntityRecords through currying. (44453)
  • Template editor: Fix crashes due to undefined vars. (44482)
  • Add missing value to CSSCSS Cascading Style Sheets. font-display descriptor in theme.json. (44622)
  • Rich text: Avoid updating partial selection unnecessarily. (44330)
  • useMergeRefs: Don’t call/mutate refs passed if unused. (44629)

Block Library

  • Code Block: Add box-sizing to fix inconsistent layout. (44580)
  • Comment Author: Fix empty links created for the author’s name. (44650)
  • Comments: Support nested comments settings in the comments blocks. (44351)
  • Group: Legacy Group inner block wrapper should work with a constrained layout. (44660)
  • Image: Fix rotated image crop area aspect ratio. (44425)
  • Image: Upgrade reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-easy-crop to bring in fix for site editor iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.. (44408)
  • Navigation: Fix console error. (44594)
  • Navigation: Fix semitransparent burger icon. (44525)
  • Navigation: Try fixing link color in some TT2 contexts. (44578)
  • Paragraph: Disable drop cap control if text is aligned. (42326)
  • Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.: Fix borders after addition of overlay feature. (44286)
  • Post Featured Image: Fix application of default border style in editor. (44520)
  • Query Loop: Fix condition for displaying ‘parents’ control. (44630)
  • Query Loop: Rename Query Loop variations allowControls to allowedControls. (44523)
  • Quote block: Stop slash inserter popup showing in the citation. (44634)
  • Site Title: Fix link color not being applied in editor #37071. (44333)
  • Template part: Prevent adding block in post editor or inside post template or content blocks. (44480)
  • Video: Don’t display placeholder SVG when Video block selected. (44564)

Global Styles

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

Design Tools

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

Components

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

Block Editor

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

Widgets Editor

  • Add extra guarding against legacy widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. preview errors. (44635)

Themes

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

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

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

Patterns

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

Post Editor

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

Performance

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

Documentation

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

Code Quality

  • Avoid calling get_blocks_metadata in WP_Theme_JSON constructor. (44658)
  • Block Popover: Use placement instead of position; move to useBlockToolbarPopoverProps hook. (44323)
  • CS/QA: Various minor fixes. (44551)
  • CS: Always use parentheses when instantiating objects. (44550)
  • CS: Remove redundant parentheses for include/require statements. (44544)
  • CS: Use pre-increment instead of post-increment. (44549)
  • Fix comment typo in document generation tools. (44583)
  • I18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: Use consistent string: ‘Link rel’. (20162)
  • PHP 8.2 | Fix deprecated embedded variables in text strings. (44538)
  • PHP 8.2 | Fix for partially supported callback. (44537)
  • PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS.: Use PHPCompatibilityWP. (44542)
  • QA: No control structures with empty body. (44548)
  • Script loader: Remove 6.1 wp actions. (44519)

Components

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

Block Library

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

PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party

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

Layout

  • Backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. code quality changes from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to Gutenberg. (44661)

Parsing

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

Global Styles

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

Lodash

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

Tools

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

Testing

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

Build Tooling

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

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Post Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.314.3s79.51ms
Gutenberg 14.212.6s76.31ms
WordPress 6.09.8s41.28ms

Site Editor

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

Contributors

The following contributors merged PRs in this release:

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

The following PRs were merged by first time contributors:

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

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

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

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