What’s new in Gutenberg 15.0? (18 January)

“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, 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 project (formerly called Full Site Editing).

What's New in Gutenberg 15.0 header image

Gutenberg 15.0 has been released and is available for download!

This release sees the 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. inspector tabs experiment stabilized, prevents images from being resized larger than their containing element, and adds the ability to paste styles from one block to another. In addition, there’s now a “sticky” option for blocks enabling them to stay in view while the rest of the content scrolls.

Table of contents

Block inspector tabs experiment has been stabilized

Three screenshots of the block controls panel showing tabs

The block inspector tabs experiment has been stabilized with the release of Gutenberg 15.0. Some blocks now split controls between separate tabs in the inspector panel. If you’ve enabled the “Off canvas navigation editor” experiment then you will additionally see the list view tab whenever a Navigation block is selected in the editor. This in turn will contain a list of the links that you can edit. This enables a new way of editing menus that supplements, and doesn’t replace, the on-canvas functionality. (47045)

“Paste styles” option added to the block settings

Gutenberg 15.0 introduces “Paste styles” making it easier to create multiple blocks with identical styling. This enables the user to copy a block and then paste just the styling of that block into another block The “Paste styles” option is available in the drop-down menu from the block’s settings panel, as demonstrated in the video above. (45477)

Edit block style variations from global styles

In a block that has variations, e.g., Button, Image, or Site Logo, it is now possible to change their styles via the Global styles panel, and those changes should only affect that specific variation. See a demo in the video above. (46343)

Images constrained to their containers

Prior to this release if you resized an image block using the handles it could easily be set to a size larger than the container. Now when you drag the handles the image remains constrained to the container and is prevented from being resized larger than its container. (45775)

New “Sticky” Position block support

A block can now be decoupled from the page layout. A new Position block support adds a “Sticky” option so that a block remains within the viewport and is stuck to the top of the page when the content is scrolled instead of scrolling with the rest of the content. This is useful if you need to ensure that an element, such as a status message or a promotion, remains on screen regardless of the page’s scroll position. It works in the block editor as well as in the front-end so the editor provides a true WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. experience for this feature. You can learn about some follow up tasks to this initial implementation in this issue. (46142)

Other notable highlights

Allow 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. and frame resizing

This release enables the ability to resize the sidebar in the site editor allowing you to change the proportion of sidebar to frame. See it in action in this video. (46903)

Synchronize the canvas mode with the site editor URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org

Gutenberg 15.0 updates the site editor to persist the “edit mode” in the URL. So for example if you’re in edit mode and then refresh the page, you get back to the same state thereby avoiding the need to click “edit” every time you reload the page. (47002)

Enable copy/cut shortcut

Keep your hands on the keyboard – the copy/cut/paste shortcuts (Ctrl/Cmd + C, Ctrl/Cmd + X, Ctrl/Cmd + V) now work in the Site Editor. (45752)

Changelog

Enhancements

Site Editor

  • Allow resizing the sidebar and frame of the site editor. (46903)
  • Remove the editor notices from the site editor frame. (46931)
  • Synchronize the canvas mode with the site editor URL. (47002)
  • Site Editor: Enable copy/cut shortcut. (45752)

Block Library

  • Add paste styles to the block settings. (45477)
  • Prevent the image from being resized larger than its container. (45775)
  • Replace block settings menu with a custom menu in off canvas editor. (46675)
  • Add help text on the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element for the Comments and 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. blocks. (46989)
  • Navigation: Add an icon to the add submenu item option. (46884)
  • Navigation: Remove ghost inserter. (46919)
  • Navigation: Show the loading indicator when users add a new 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.. (46855)
  • Page List Block: Fix warning error when the parent page has no child pages. (46829)
  • Page List Item: Disable block toolbar. (46950)
  • Template Parts: Avoid duplicate titles on creation. (46996)
  • Navigation: Add more explicit labels to the Navigation Menu Selector. (47015)

Block Editor

  • URLInput: Deprecate bottom margin. (46692)
  • Block editor: Move content styles to avoid triggering 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. compat mode. (46728)
  • Iframe: Preload style assets to avoid flash of unstyled content. (46706)

Inspector Controls

  • Sidebar Tabs: Add text only mode for block inspector tabs. (46968)
  • Sidebar Tabs: Stabilize the block inspector tabs experiment. (47045)
  • Remove Block Inspector Button. (46709)

Global Styles

  • Update push changes to global styles label text to “apply globally”. (46965)
  • Edit block style variations from global styles. (46343)

Components

  • SelectControl: Remove margin overrides and add new opt-in prop. (46448)
  • Use data URI for FocalPointPicker video story. (42377)
  • TabPanel: Add prop to allow disabling of a tab button. (46471)

List View

  • Update template part children background color. (46708)
  • Update template part hover style in list view. (46707)

Bug Fixes

Block Editor

  • Align labels on Link Control. (46936)
  • Remove the border property from the body element on previews. (46946)
  • [Inserter]: Don’t show empty reusable tab if not allowed to insert reusable blocks. (46922)
  • [Inserter]: Hide empty pattern categories. (46923)
  • Fix offsite navigation editor component loading issue. (46937)
  • Iframe: compat styles: Check for ownerNode === null. (46932)

Block Library

  • Navigation Block: Properly decode URL-encoded links. (46435)
  • RSS: Correctly output ‘datetime’ string. (47027)
  • [Social Icon]: Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning when adding link label. (46905)

Components

  • ComboboxControl: Fix unexpected behavior in IME Composition. (46827)
  • Fix TreeGrid keyboard nav skipping Edit Block button in off canvas editor. (46998)
  • [Placeholder]: Set fixed right margin for label’s icon. (46918)
  • Tabs in preferences: 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. from horizontal tabs. (46796)

Global Styles

  • Fix the ‘test_remove_invalid_element_pseudo_selectors’ test case. (47049)
  • Fixed Global Styles variables for colors, font family, gradient, fontSize. (46944)

Inspector Controls

  • Block Inspector: Fix browser warning error when block is not selected. (46875)

Performance

Post Editor

  • Lodash: Remove _.pickBy() from editor 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.. (46982)
  • Lodash: Remove _.pickBy() from template deletion. (46975)
  • Lodash: Remove _.pickBy() from block editor and deprecate. (46999)
  • Optimize keydown event handlers. (46653)

Global Styles

  • Lodash: Remove _.pickBy() from getNodesWithStyles(). (46980)

Block Library

  • Lodash: Remove _.pickBy() from latest posts block. (46974)

Experiments

  • WP_HTML_Tag_Processor: Add get_attribute_names_with_prefix() method. (46840)

Block Editor

  • Update last inserted block state to track multiple blocks. (46885)

Block Library

  • Alternative Nav Offcanvas show link UIUI User interface for submenu creation. (46857)
  • Nav offcanvas disable direct insertion. (46898)

Layout

  • Design Tools: Add a Position block support (including sticky), decoupled from layout. (46142)

Documentation

  • Adds “fluid” field inside settings.typography. (45705)
  • Docs: Add recommendation for developers to use GH CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress.. (46847)
  • Quick update to versions in WordPress doc for 6.1.1. (46850)
  • ReactDOM.render deprecated, update Element README. (46925)
  • Remove stack exchange from new issue templates. (36158)
  • Revise NPM to npm. (46963)
  • Update 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.-block.md. (44343)
  • Updating missing shortcut in FAQ section. (44968)
  • [RFC] Add documentation for snapshot testing in Playwright end-to-end tests. (45709)
  • Update copyright year to 2023 in license.md. (46910)
  • Docs: Fix typos. (46912)

Code Quality

Components

  • Dashicon: Remove unnecessary type for className prop. (46849)
  • ItemGroup: Migrate Storybook to controls, refactor to TypeScript. (46945)
  • Toolbar: Move all subcomponents under the same folder. (46951)
  • ColorPicker: Remove knobs in stories. (46772)
  • Guide: Remove knobs in stories. (46773)
  • Notice: Remove knobs in stories. (46956)
  • Panel: Remove knobs from stories. (46958)
  • ResizableBox: Remove knobs in stories. (46774)
  • ResponsiveWrapper: Convert to TypeScript. (46480)
  • SandBox: Convert to TypeScript. (46478)
  • SlotFill: Remove knobs in stories. (46957)
  • useSelect: Implement with useSyncExternalStore. (46538)

Block Library

  • Navigation Link: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notices in unit tests. (47070)
  • Video Block: Fix browser warning error when settings are toggled. (46835)
  • Adds an identifier prop to the RichText component for captions, allowing annotation. (46917)
  • Fix: Use of array index instead of post id on latest posts. (46911)

Block Editor

  • Simplify the way we create a link UI control in the offcanvas editor. (46744)
  • Fix number of arguments passed to hasBlockMetadataSupport. (46842)

Tools

Testing

  • Block inserter search end-to-end test: Scope list item lookup to the inserter panel. (47066)
  • Migrate Manage Reusable Block to Playwright. (45621)
  • Migrate Post Visibility Test to Playwright. (44488)
  • Navigation block end-to-end tests: Default to a list of pages if there are no menus. (45070)
  • Only use a single comment for the flakiness report on PRs. (46785)
  • Mobile – Move the gutenberg-editor-block-insertion-2 end-to-end tests to integration tests. (46882)
  • Chore: Fix incorrect usage of map instead of forEach. (46853)
  • Chore: Remove unreachable line from phpunit/fixtures/mock-provider.php. (46843)

Build Tooling

  • package.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 script to profile unit tests. (46909)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @alanjacobmathew @alexstine @andrewserong @annezazu @apeatling @BogdanUngureanu @brookewp @cameronjonesweb @ciampo @d-alleyne @draganescu @ellatrix @geriux @getdave @jameskoster @jasmussen @jorgefilipecosta @joshuatf @jsnajdr @juanfra @kevin940726 @kozer @MaggieCabrera @Mamaduka @mateuswetah @mhkuu @mirka @ntsekouras @ockham @pooja-muchandikar @scruffian @Soean @stokesman @t-hamano @talldan @tekapo @tellthemachines @tomjn @TonyGravagno @tyxla @youknowriad

Props to @annezazu, @priethor, @chanthaboune, @cbringmann and @greenshady for reviewing this post.

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