What’s new in Gutenberg 14.7? (7 December)

“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 released 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 Site Editor project (Formerly known as Full Site Editing).

Gutenberg 14.7 has been released and is available for download!

It introduces a new experimental tabbed 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., colors to help identify some 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. types in list view, and improvements to the Page List block to make it easier to manage page links in your content.


Improved organization of block settings with split control

An experimental view in the block inspector sidebar separates appearance and settings controls by adding a tabbed interface. This feature will make blocks with many controls, such as the Group Block and Navigation Block, easier to manage. You can enable this and other experimental features from Gutenberg > Experiments in the adminadmin (and super admin) sidebar. Leveraging this new tabbed interface, the Navigation Block also includes a Menu tab for the Navigation List View introduced in Gutenberg 14.6. (45483), (45991), (46027), (45005)

Quickly identify Template Parts and Reusable Blocks by color

To more easily differentiate Template Parts and Reusable Blocks from other types of blocks, these synced block types will now be outlined in a different color in the List View, Block Toolbar, and canvas. (45473)

Add media to your content directly from the inserter

A new media tab will be available, when media exists on the site, to allow users to add media from their library. A button to open the Media Library modal is also available, making it much more convenient to add images, video, and other media to your content. (44918)

See all pages in List View for the Page List block 

The Page List block can now be expanded to see the hierarchy of pages in the List View. An option to select the root page to build the Page List from has also been added in the Block Inspector Sidebar. This will allow a subset of pages within the hierarchy to be displayed in the content. (45776), (45861)

Layout controls added to children of flex layout blocks

A new dimensions control (width for row, height for stack) will be available for children Row and Stack blocks. An option to select between fit, fill and fixed has been added. If the fixed option is selected, an `input` for a dimension will be shown, where the fixed size can be set. (45364)

Improved load times by caching the results of querying settings from theme.json

Adding WP_Object_Cache to gutenberg_get_global_settings to cache the results of querying settings from theme.json, resulted in a significant load time improvement.

This change reduced the total time of a request with the Twenty Twenty-Three theme from 521.59ms to 339.62ms, a ~35% performance increase. Testing with the Twenty Twenty showed an improved load time from 329.60ms to 290.93ms, a ~12% performance improvement. These times were measured by testing the time required to load the “hello world” post for a logged-out user.  (45372)

Changelog

Enhancements

Style Engine

  • Style engine: Trim multiple selector strings. (45873)

Block Library

  • Heading Block: Add a wp-block-heading CSSCSS Cascading Style Sheets. class. (42122)
  • Nav Block: Clarify explanation of how ‘Convert to Links’ works in Page List block. (45394)
  • Nav Block: Add label field to navigation link and navigation submenu. (45964)
  • Nav Block: Add link URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to the navigation submenu inspector controls. (45816)
  • Nav Block: Fix for navigation anchor links to close modal. (45829)
  • Template Part Block: Colorize template parts and Reusable blocks. (45473)
  • List: Allow pasting pre/code. (45016)
  • Page List: Enable page list to expand in list view. (45776)
  • Page List: Add a starting page for page list block’s hierarchy. (45861)
  • Page List Item: Hide edit button. (46163)
  • Site Logo: Apply width to logo container in editor. (45821)
  • Table Block: Support colspan attribute in table HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., including when pasting. (45981)

Components

  • Add themeable background color. (45466)
  • Autocomplete: Only show UIUI User interface on user input. (45904)
  • Bump DateTimePicker deprecated prop removal version. (46006)
  • ComboboxControl: Add new opt-in prop. (45796)
  • FocalPointPicker: Add new opt-in prop. (45958)
  • Global styles: Add onChange actions to color palette items. (45681)
  • InputControl: Add help prop. (45931)
  • RangeControl: Remove margin override and add new opt-in prop. (45985)
  • SearchControl: Remove margin overrides and add new opt-in prop. (46081)
  • Storybook: Opt in to story store v7. (42486)
  • ToggleControl text overflows when it has a long label. (45962)
  • useControlledValue: Let TypeScript infer the return type. (46164)

Inspector Controls

  • Sidebar: Add list view tab for Navigation block et al. (45483)
  • Sidebar: Only render sidebar tabs possessing items to display. (45991)
  • Sidebar: Rename appearance tab to styles. (46027)
  • Sidebar: Split block tools into menu, settings, and appearance tabs. (45005)

Design Tools

  • Min Height: Add height control component with slider. (45875)
  • Spacing: Make visualiser appear on focus. (46096)

Block Editor

  • [Inserter]: Replace text in Reusable tab with an icon. (45851)
  • [Inserter]: Update pattern explorer button css. (45735)
  • [Inserter]: Add media tab. (44918)

Patterns

  • [Pattern Directory]: Add categories endpoint. (45749)
  • [Patterns]: Update pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. descriptions. (46005)

Nested / Inner Blocks

  • Mark applying block templates not persistent. (45843)

Rich Text

  • Create undo level before autocorrect. (45670)

Layout

  • Add Layout controls to children of Flex layout blocks. (45364)

Bug Fixes

Preferences

  • Disable distraction-free preference effects on small viewports. (45591)

Block Library

  • List Block: Fixed a 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. that List block attributes were reset in 6.1.1. (46000)
  • Gallery: Use unbound query when fetching image details. (46143)
  • Heading: Add block classname deprecation. (46138)
  • Page List: If no parent page is set, still render all children. (45967)
  • Page List: Render the children correctly in the editor. (46165)
  • Post Author: Avoid errors when the user avatars are disabled. (45989)
  • Nav Block: 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. doesn’t appear when hamburger clicked on. (45773)

Block Editor

  • Fix broken Link Control hook. (46113)
  • Fix inserter tab panel content buttons’ position. (45800)
  • Block editor: rich text: Return early if __experimentalUndo is not defined. (46152)

Global Styles

  • Global Style Context: Consider global user styles ready if a theme has none. (46073)
  • Merged data should consider origin to return early. (45969)

Components

  • Remove CircleIndicatorWrapper focus-visible outline. (45758)
  • ColorPalette: Show Clear button even when colors array is empty. (46001)

Site Editor

  • Fix template list width. (45888)
  • Prevent edit-post from being loaded in edit-site. (45895)

CSS & Styling

  • Fix the editor area height. (45799)

Full Site Editing

  • Ensure post-featured-image block is intheloopLoop 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.() for BC with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and plugins, and to fix lazy-loading. (45534)

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 “Testing Instructions for Keyboard” to PR template to encourage accessibility testing. (45957)
  • BlockVariationPicker: Remove Unnecessary ARIA Role. (45916)
  • Sidebar Tabs: Set default tab to first available. (45998)
  • TabPanel: Support manual tab activation. (46004)
  • – Constrained tabbing: Fix unstable behavior in firefox. (42653)

Performance

  • Work on refactor away from Lodash to reduce build size continued” (see 13.7)

Global Styles

  • Add WP_Object_Cache to the gutenberg_get_global_settings method. (45372)
  • Global styles WP_Query. (46043)
  • Ignore cached wp_theme_has_theme_json when WP_DEBUG is enabled. (45882)
  • Make theme.json object caches non persistent. (46150)
  • Remove test_global_styles_user_cpt_change_invalidates_cached_stylesheet. (45993)
  • Update gutenberg_get_global_stylesheet to use WP_Object_Cache. (45679)
  • Update which origins are queried for gutenberg_get_global_settings. (45971)

Post Editor

  • useBlockEditorSettings: Return const empty array to avoid rerenders. (46117)

Block Editor

  • Update the attributes reducer to use a map instead of a regular object. (46146)

Experiments

Block Library

  • Nav Block: Add basic edit button UI to Nav block offcanvas editor. (45815)
  • Nav Block: Add submenu menu item to list view. (45794)
  • Nav Block: Alternative: Add inserter to Nav block offcanvas experiment. (45947)
  • Nav Block: Display inserter popover in offcanvas UI. (46013)
  • Nav Block: List View – Stop child item selecting a parent which is already selected. (45860)
  • Nav Block: Add simple back button to inspector controls. (45852)
  • Nav Block: Move color controls to support panel. (46049)
  • Nav Block: Enable easier drag and drop for navigation building. (45906)
  • Nav Block: Hide the create new menu button if the experiment is enabled. (46019)
  • Navigation List view: Fix incorect class. (46129)
  • Navigation List view: Include offcanvas specific styles. (45963)
  • Navigation List view: Scroll horizontally when table overflows. (45966)

Documentation

  • (docs) Document the special case of shipping point releases when new release branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". already exists. (46083)
  • Added InspectorControls import to example. (45872)
  • Fix NavigableRegion README. (45879)
  • Fix link & code markdown. (45708)
  • Navigation: Adds a warning about duplicate code for the future. (45844)
  • Storybook: Add link to component folder on 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/, retire Storysource. (45727)
  • Style Engine: Add first draft of contributing doc. (45930)
  • Update applying-styles-with-stylesheets.md. (45925)

Code Quality

Components

  • Cleanup the BlockPreview component. (45936)
  • Convert the Snackbar component to TypeScript. (45472)
  • Fix ESLint violations in ContextSystemProvider tests. (46010)
  • Fix ESLint violations in NoticeList tests. (46011)
  • Fix no-node-access in Grid tests. (45900)
  • Fix no-node-access in Sandbox tests. (45908)
  • Fix no-node-access in Text tests. (45898)
  • Fix no-node-access in Theme tests. (45896)
  • Fix no-node-access violation in ControlLabel tests. (46007)
  • Fix no-node-access violations in Card tests. (46158)
  • Fix no-node-access violations in Disabled tests. (46156)
  • Improve BoxControl tests. (45968)
  • Improve Dropdown tests. (45911)
  • LinkedButton: Remove unnecessary span tag. (46063)
  • TextControl: Restrict type prop in TypeScript. (45433)
  • Tooltip: Add readme and unit tests for shortcut prop. (46092)
  • NumberControl: Refactor styles/tests/stories to TypeScript, replace fireEvent with user-event. (45990)
  • useBaseField: Convert component to TypeScript. (45712)
  • Small refactoring to the NavigableRegion component. (45849)

Block Library

  • ESLint: Fix minor ESLint warning in LinkUI. (46161)
  • Fix ESLint warnings in tests. (46034)
  • 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. attribute markup in core/home-link block. (46089)
  • Link UI: Destructure the props earlier in the component. (46209)
  • Navigation Link UI: Try to align both files. (46205)
  • Navigation Menu Selector: Share the functions needed for the NavigationMenuSelector. (46053)
  • Navigation: Extract components. (45850)
  • Navigation: Reduce duplicate code. (45779)
  • Navigation: Remove unused clientId prop. (46020)
  • 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.: Only get the post title when rendering alt text. (45835)
  • Reduce prop drilling in Block Card component. (46052)
  • Refactor link creation UI to standalone component/file. (46031)
  • Remove Nav block specific classes from Nav offcanvas Link UI. (46182)
  • Remove WrappedNavigationMenuSelector. (46056)
  • Update offcanvas back button to select parent Nav block and limited to Nav block only. (46037)
  • Don’t check if constants set by wp_initial_constants() are defined. (45979)

Block Editor

  • LinkControl unit tests: Use user.type to type into search field. (45802)
  • Simplify api for link UI abstraction to use a single prop for the value. (46189)
  • URLInput: Keep the search results label in sync with the results list. (45806)
  • Use wordpress/escape-html escapeHTML in Link UI in preference to Lodash method. (46184)

Global Styles

  • Cleaner logic in wpthemehasthemejsonJSON 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.. (45950)
  • Remove usage of wpgettheme. (45770)

Post Editor

  • Update BlockCard to pass className instead of isSynced prop. (46021)

Full Site Editing

  • Block editor: Separate content styles for the 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.. (44298)

Tools

Build Tooling

  • Bump caniuse-lite version. (46093)

Testing

  • Fix Quote block’s unwrap end-to-end test. (46168)
  • Remove ‘response.deleted’ check. (45992)
  • Warning: Fix ESLint warnings in tests. (46033)
  • ESLint: Enable testing-library/no-container rule. (46160)
  • Element: Fix no-node-access in createInterpolateElement. (45894)
  • Block Editor: Fix ESLint warnings in MediaUpload tests. (46035)
  • Block Editor: Fix no-node-access in RecursionProvider tests. (45902)
  • Block Editor: Fix block alignment tests for ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 18. (45937)
  • Block Editor: Wait for popover positioning in MediaReplaceFlow tests. (45863)
  • Compose: Fix ‘no-container’ violations in ‘useDisabled’ tests. (45797)
  • Compose: Fix ESLint violations in withGlobalEvents tests. (46012)

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.711.45s59.36ms
Gutenberg 14.611.41s62.36ms
WordPress 6.110.72s68.08ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.79.68s58.42ms
Gutenberg 14.610.8s67.09ms
WordPress 6.111.69s64.87ms

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

First time contributors

The following PRs were merged by first time contributors:

  • @albarin: Remove ‘response.deleted’ check. (45992)
  • @artemiomorales: Clarify explanation of how ‘Convert to Links’ works in Page List block. (45394)
  • @coreyworrell: Fix for navigation anchor links to close modal. (45829)
  • @devanshijoshi9: Components: ToggleControl text overflows when it has a long label. (45962)
  • @flexseth: Added InspectorControls import to example. (45872)
  • @hiyascout: Update applying-styles-with-stylesheets.md. (45925)
  • @marissa-makes: BlockVariationPicker: Remove Unnecessary ARIA Role. (45916)
  • @mpkelly: Support colspan attribute in table HTML, including when pasting. (45981)
  • @TobiasBg: Fix invalid attribute markup in core/home-link block. (46089)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @ajlende @albarin @alexstine @andrewserong @artemiomorales @brookewp @chad1008 @ciampo @coreyworrell @ddryo @devanshijoshi9 @draganescu @ellatrix @felixarntz @flexseth @fullofcaffeine @geriux @getdave @glendaviesnz @gvgvgvijayan @hiyascout @jsnajdr @kienstra @MaggieCabrera @Mamaduka @marissa-makes @mikachan @mirka @mmtr @mpkelly @ntsekouras @oandregal @ocean90 @oguzkocer @ramonjd @scruffian @SiobhyB @spacedmonkey @stokesman @t-hamano @tellthemachines @TobiasBg @tyxla @walbo @youknowriad

Thanks to @joen for helping with the assets for this post and to @annezazu, @bph & @priethor for reviewing.

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