What’s new in Gutenberg 16.0? (14 June)

“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 tag) are posted following every Gutenberg release on a biweekly basis, showcasing 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 called Full Site Editing).


Gutenberg 16.0 has been released and is available for download!

With WordPress 6.3 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 just around the corner, Gutenberg 16.0 gives us a sneak peek at the features that will soon be available in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. WordPress. This latest release brings significant enhancements to the Site Editor, introduces a newly stabilized 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., refines dimension controls, and includes many quality-of-life improvements and 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. fixes. In total, there are 164 pull requests authored by 54 contributors, including four new contributors!

Table of contents

Page management comes to the Site Editor


Gutenberg 16.0 introduces big changes to the Site Editor, including the ability to create new pages (50565) and view page details 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. (50767). This means you can practically build out a website without leaving the Site Editor, which speeds up the site creation process, makes it easier to see what the final result will look like, and reduces the overall cognitive load of switching between editors.

One of the challenges of editing page content within the Site Editor is that it can be difficult to know what is actually being edited. To address this, Gutenberg 16.0 adds the ability to focus on either the page’s content or the page’s template (50857). See the video demonstration below.

Refined dimension controls and Post Template gets block spacing


Block spacing and layout controls have been added to the Post Template block, which is part of the Query block, making it possible to control the space between posts from within the Editor (49050). This is a major improvement for theme authors, who have previously had to resort to custom CSSCSS Cascading Style Sheets..

Dimension controls have also been redesigned to optimize and condense unlinked controls (50660). This makes it easier to apply margin and padding while taking up less vertical space in the block settings sidebar.

The Details block is now stable


The Details block was introduced in Gutenberg 15.6 as an experiment. After community testing and feedback, the block was scaled back and stabilized into what is now available in 16.0 (50997). This block uses <details> and <summary> HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. elements to hide content until the reader is ready to view it. You can also configure the content to be visible by default.

Other Notable Highlights

In Gutenberg 15.9, the experimental flag was removed from the Command Center, and now in 16.0 its 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. is public (51169). This will allow extenders to begin experimenting with custom commands.

The color palette component has been improved for better readability (50450). The name and value no longer overlay the swatch. And icon-only labels are now possible in the Query Pagination block (50779).

There have also been improvements to drag-and-drop in the List View. It is now much easier to position blocks at the top and bottom of the list (#50726). Furthermore, when blocks are dragged into a container, such as a Group block, they are now added to the bottom of the container as opposed to the top (#50936).

Changelog

Enhancements

Block Editor

  • Block Controls SlotFill: Refactor to allow passing multiple contexts, including internal components context. (51264)
  • Block Toolbar: Update the ‘Unlock’ button label. (51083)
  • 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. Editor if all blocks are v3. (48286)
  • Improve (and relax) search vs direct URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org entry detection in Link Control. (51011)
  • Link Control require user to manually submit any changes. (50668)
  • List View: Allow dragging outside the immediate area by passing down a dropZoneElement. (50726)
  • List View: Append when dragging into collapsed blocks. (50936)
  • Reinstate Text control outside of settings in Link Control. (50957)
  • Update the document title in the template mode of the post editor. (50864)
  • Use “Save” instead of “Apply” in Link Control. (50964)
  • Use checkbox for Open in new tab within Link Control. (50961)
  • Visually hide the LinkControl initial/results heading. (50977)

Site Editor

  • Add delete action for pages in navigation sidebar. (51101)
  • Add page details to the Site Editor sidebar. (50767)
  • Add Paragraph prompt to Post Content when empty. (50623)
  • Add template actions in site editor navigation sidebar. (51054)
  • Add the ability to create a new page in the Site Editor. (50565)
  • Add the ability to focus on editing a page’s content vs the page’s template. (50857)
  • Directly save if only changing current context. (50567)
  • Disable block supports derived design tools when Blocking Editing Mode is not default. (50912)
  • DocumentActions: Animate between page and template mode. (51224)
  • Site Editor sidebar: Refactor page details. (51093)
  • Styles Screen: Add link to global styles revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.. (51149)
  • Try adding dynamic page templates to pages section. (50630)
  • Tweak edit site resizable frame handle. (50878)
  • Update the bottom sticky section in the site editor details panel. (51274)

Block Library

  • Details Block: Remove experimental flag and stabilize. (50997)
  • 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.: Improve preview on the editor site. (50167)
  • Post Title: Improve preview on the editor site. (50147)
  • Query Pagination: Address feedback from #50779. (51165)
  • Query Pagination: Allow hiding the label text. (50779)
  • Search Block: Add button only with expandable input. (50487)
  • Search block: Refactor to use HTML Tag Processor. (51273)
  • Post Link: Update block variation icon to match the one used in the Link UIUI User interface results. (50190)
  • Post Template: Add block spacing and layout. (49050)

Components

  • Button: Add opt-in prop for larger isSmall size. (51012)
  • ListView: Converted additional content render into a component. (51163)
  • ColorPalette: Improve color name readability. (50450)
  • Spacing: Optimize and condense unlinked spacing controls. (50660)

Data Layer

  • Merge selector-binding code (except resolvers) into a new bindSelector function. (51176)
  • Move action-binding code to a bindAction function. (51161)

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 TabPanel to document overview replacing fake tabs. (50199)
  • BorderControl: Improve color code readability in aria-label. (51197)
  • Handle isDraft or isInvalid Enter keypress via onKeyDown instead of a Keyboard Shortcut. (51021)
  • ListView: Allow deleting blocks using keyboard. (50422)
  • Site Editor: Add view site link to site editor nav. (50420)
  • Use generic div instead of nav for the SidebarNavigationScreen component. (51111)

New APIs

  • Command Center: Marks the selectors and actions of the commands store as a public API. (51169)

Bug Fixes

Block Editor

  • Add inert attribute to disabled blocks that have only disabled descendants. (51079)
  • Fix multi-entity multi-property undo redo. (50911)
  • Hide the save draft button for published posts. (51193)
  • Iframe enqueuing: Add editorStyle and warning. (50091)
  • Improvements to how blocks with a ‘disabled’ editing mode behave. (51148)
  • Link Control: Add missing translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization.. (51081)
  • Make sure post content always has correct layout. (51431)
  • Navigation: Memoize link value passed to the LinkControl. (51155)

Site Editor

  • Browse Mode: Remove horizontal scrollbar during screen transitions. (51189)
  • Fix styling of actions in site editor navigation sidebar. (51153)
  • Properly decode new template title in snackbar. (51057)
  • Site Editor: Update untitled copy and rendering. (51074)

Widgets Editor

  • Update the settings icon in Widgets Editor. (51029)

Block Library

  • Freeform/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.: Prevent blocks from converting HTML entities. (51123)
  • Navigation: Apply color classes to the navigation container element. (50968)
  • Post Template: Set block context via 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.. (50313)
  • Post Template: Output number of columns as classname for backwards compatibility. (51358)
  • Post Title: Fix autofocus when iframed. (5133151367)
  • Query: Fix deprecation error when migrating layout. (51311)
  • Term Description: Handle default margin styles. (51137)

Global Styles

  • DimensionsPanel: Fix site editor error on Columns block level screen. (51252)
  • Fluid typography: Ensure max viewport width is used in the editor. (51146)
  • Global styles revisions: Ensure redirect runs once for back button. (51316)
  • SpacingSizesControl: Fix problem with the slider position being reset when saving global styles. (50956)
  • Styles Screen: Ensure variations previews will render in mobile viewports. (51080)

Components

  • Fix: Can’t type space if RichText component is inside button/summary in Firefox. (50540)
  • FontSizePicker: Fix control headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. spacing. (50855)

Themes

  • Avoid changing non-theme-preview requests. (51221)

Data Layer

  • Data: Fix a bug where private selectors on a store with resolvers are inaccessible. (51166)

Accessibility

  • Add aria labels to the focal point picker component. (50993)
  • Block Toolbar: Fix text only label for locked blocks. (50944)
  • Fix Navigable Toolbar initialIndex. (51181)
  • Fix screen readers not announcing updated aria-describedby in Firefox. (51035)
  • Link Control: Fix the ‘Save’ button’s disabled state. (51117)
  • Social Icons: Manually set Snapchat label color. (51237)

Performance

  • Make getBlockEditingMode() return ‘default’ when parent is ‘contentOnly’. (51185)
  • Use static closures when not using $this. (50723)
  • Add removeAllNotices action to allow all notices to be removed from a given context. (44059)
  • Add a new action removeNotices which allows bulk removal of notices. (39940)

Experiments

Interactivity API

  • Change label and description for the gutenberg-interactivity-api-core-blocks experiments setting. (51059)
  • Disable Lightbox UI if link has an image. (51180)
  • Experiment: Put directives on element and insert lightbox as its child. (51089)
  • Image Lightbox: Add a reset button. (51239)
  • Image Lightbox: Add support for external urls in the lightbox. (51278)
  • Image Lightbox: Fix design of close button for the lightbox (correct PR). (51206)
  • Image Lightbox: Improve image block lightbox escaping. (51061)
  • Move the directives and markup needed for the lightbox to block supports. (51232)
  • Navigation block: Set correct aria-expanded on hover. (50953)
  • Remove experimental flag from navigation and file blocks to use the Interactivity API (as private). (51266)
  • Rename directives suffix character and island directive in the Interactivity API. (51152)
  • Remove not needed aria-hidden attribute in navigation block experiment. (51044)

DropdownMenu v2

  • Change default placement to match the legacy DropdownMenu component. (51133)
  • Render in the default Popover.Slot. (51046)
  • Style tweaks. (50967)
  • Tweak styles, add toolbar-specific styles. (51097)

Documentation

  • Add documentation about the entities abstraction and the undo/redo stack. (51052)
  • Fix code example error in the Curating the Editor doc. (51070)
  • Fix formatting and use sentence case for titles in Scripts doc. (51069)
  • Fix headings in the View component readme. (51157)
  • Fix text in readme. (51268)
  • Remove Block Grammar doc and all corresponding internal links. (51106)
  • Remove Roadmap doc. (51062)
  • Undo/Redo: Minor edits. (51085)
  • Update README.md on SlotFills to add info + example about the prop fillProps. (51013)
  • Update ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. documentation link for propTypes. (51208)

Code Quality

  • Extract BlockThemePreviews-related code from the editor package. (50863)
  • Fluid typography: Extract logic to derive fluid typography settings. (51188)
  • Fonts API: Refactor 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. global functions into WP_Fonts_Resolver. (50811)
  • Iframe: Clarify how dependencies related to inline styles work. (51199)
  • Iframe: Fix blob cleanup. (51004)
  • Iframe: Remove obsolete readyState checks. (51003)
  • Iframe: Remove obsolete styles HTML parsing. (51136)
  • Lodash: Remove _.isEmpty(). (5109650974510985091751168)
  • mapSelectorsWithResolvers: Don’t init hasResolver, mapSelectors already did it. (51160)
  • mapValues: Use fromEntries, avoid re-creating object in each reducer call. (51159)
  • Refactor code that adds resolver fulfillment to selector calls. (51009)
  • Remove legacy logic for __unstableResolvedAssets. (51100)
  • Remove outdated Babel spread optimization from selectors. (50987)
  • Remove the insert.ref field from insertUsage data. (51130)
  • Rename ‘page content lock’ to ‘page content focus’. (51280)
  • Separate template screens in the Site Editor. (51040)
  • Writing flow: Fix tab into iframe. (50955)

Block Editor

  • Refactor Link Control Settings Drawer to avoid unnecessary prop drilling. (50963)
  • ListView: Remove unused ‘useSelect’ dependency. (51134)

Components

  • BlockDraggable: Use the getBlockType selector. (51174)
  • PreferenceToggleMenuItem: Add missing useSelect dependency. (51158)

Tools

wp-env

  • Fixed Docker Image Size Ballooning. (51034)
  • Preferentially Execute Local wp-env. (50980)

Scripts

  • Scripts: Optimize updating render paths when developing blocks. (51162)
  • Fix: Build render.php when webpack watch in progress. (50939)

Testing

  • Add tests to useIsDirty. (51036)
  • Button: Add basic visual 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. tests. (51000)
  • Comment Template Block: Add test coverage for context setting. (50879)
  • Comment Template Block: Retain inner blocks inserted via render_block_data filter. (50883)
  • Fix flaky Behaviors UI end-to-end tests. (50954)
  • Ignore framer-motion warning when running end-to-end tests locally. (50938)
  • Link Control test migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.: Should contain a label when it should open in a new tab. (51001)
  • Link control: Migrate tests to Playwright. Can be created by selecting text and using keyboard shortcuts. (50996)
  • End-to-end tests: Add an assertion to confirm that the URL changed. (50835)

Build Tooling

  • babel-preset-default: Enable the bugfixes option for preset-env. (50994)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @alexstine @andrewserong @anton-vlasenko @artemiomorales @benlk @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @derekblank @ellatrix @fluiddot @geriux @getdave @gigitux @glendaviesnz @gziolo @jameskoster @jeryj @jffng @jsnajdr @juanfra @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @mcsf @michalczaplinski @mikachan @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @ockham @okmttdhr @opr @ramonjd @richtabor @rmorse @SantosGuillamot @SaxonF @scruffian @SiobhyB @t-hamano @Takshil-Kunadia @tellthemachines @tyxla @wayheming @westonruter @youknowriad

Props to @joen for the visual assets, @bph for peer review, and @bernhard-reiter for helping get the release published to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/.

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