What’s new in Gutenberg 14.9? (4 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 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 14.9 has been released and is available for download!

Table of Contents

Push 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. changes to Global Styles

Gutenberg 14.9 introduces a new button titled Push changes to Global Styles under the Advanced panel for individual blocks. This allows users to make changes while editing a template in the Site Editor but apply those changes on the global level. The new feature makes it much easier to keep a consistent design without needing to edit individual templates. (46446)

WordPress post editor with a Post Title block shown.  In the sidebar, there is a button for pushing changes to global styles under the Advanced tab.

Typography support for Page List block

The Page List block now supports all typography options, including setting the font size, family, and more. This change is part of a larger effort to bring a consistent set of design tools across all coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks. (43316)

WordPress post editor with a page list block in the content editor.  The design tools panel in the sidebar shows a font-size selector.

Import 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. widgets to template parts

When inserting a new template part into a template in the Site Editor, users can now import widgets from a previously-registered dynamic sidebar. This is a transitioning tool to help users move from classic theme setups to blocks without losing work that they’ve put into their sites. (45509)

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. support: shadow presets and minimum fluid font size

WordPress theme authors can now opt into the new box-shadow feature, creating a set of custom presets to use in their designs. This system works similarly to colors, gradients, and other opt-in design tools. (46813)

Currently, the UIUI User interface that would allow user overrides for this feature is still under development. However, the following screenshot is a preview of what it might look like:

WordPress Style Editor that displays a Border & Shadow section in the sidebar.  It is displaying a preview of a button with a dark shadow behind it.

Theme authors who use the built-in fluid typography system in theme.json can now set a minimum font size via settings.typography.fluid.minFontSize. By default, the minimum is set to 14px, but this may not be ideal for all designs. This new setting gives developers more control over how fluid typography is handled. (42489)

Other Notable Highlights

The previous Gutenberg release (version 14.8) introduced a new Site Editor sidebar, a hub for navigating the sections of a site. Version 14.9 continues iterating on this feature. The sidebar now displays the template title and type with a contextual edit button that sits beside them. The sidebar’s width has also increased, giving its content a bit more breathing room. (46736), (46769), (46700)


Developers can also now register patterns for specific template types, limiting where the patterns appear. For example, an Error 404 pattern would only make sense when used with the 404 template. (45814)

Change log

Features

Global Styles

  • Site Editor: Add new ‘Push changes to Global Styles’ button. (46446)

Patterns

  • Add: Template types to the patterns 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.. (45814)

Enhancements

  • Post 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. for block-based themes. (46212)
  • Move word count to the top of the outline. (46648)
  • Update: Remove need for template prefix in gutenberg_get_template_hierarchy. (46257)
  • Update: Use offsite navigation editor on the navigation inspector sidebar. (46440)

Site Editor

  • Add the template title and type to the site hub. (46736)
  • Increase the width of the site editor sidebar. (46769)
  • Move the edit button in the site editor sidebar to a contextual 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.. (46700)

Block Library

  • Navigation: Adds page list as child of submenu. (46414)
  • Navigation: Bring back the heading and the menu selector in the ellipsis menu. (46622)
  • Template Parts: Add an option to import widgets from the sidebars. (45509)

Design Tools

  • Page List: Add typography supports. (43316)
  • Style Engine: Add support for text columns (column-count). (46566)

CSSCSS Cascading Style Sheets. & Styling

  • Edit-post site logo: Fix focus style. (46733)
  • Base Styles: Extract long-content-fade to its own file so it can be imported and reused. (46485)

Components

  • TextareaControl: Add new opt-in prop. (46559)

Colors

  • Remove clearable from link ColorPanel item. (46507)

Global Styles

  • Shadow: Add shadow presets support via theme.json. (46813)
  • Fluid typography: Add configurable settings for minimum font size to theme.json. (42489)
  • Inline preview: Center align block in global styles inline preview. (46727)

Bug Fixes

  • DOM: Fix findNext/findPrevious tabbable if target is not in findFocusable list. (46580)
  • Fix: Bug on withSafeTimeouts. (46595)
  • Fixed incorrect CHANGELOG link. (46609)
  • Fixed table block footer section issue. (46567)
  • Iframe: Restore typewriter effect in post editor. (46745)
  • Parse the attributes in a case-insensitive way to comply with the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. parsing spec. (46748)
  • Update: Guard against null block in off canvas editor. (46594)
  • docgen: Add function to handle list of types for theme.json schema. (46375)
  • Post editor: Fix title margin. (46698)

Block Library

  • Fix Off Canvas Editor add submenu item option. (46562)
  • Make table of contents label in placeholder translatable. (46788)
  • 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.: Fetch terms suggestions dynamically. (46649)

Components

  • FocalPointPicker: Fix layout misalignment when placed in the BlockInspector. (46631)
  • Storybook: Fix crash when parameters is undefined. (46670)
  • Toolbar: Fix duplicate focus style on anchor link button. (46759)

Widgets Editor

  • Revert “[customize-widgets/utils/widgetToBlock] Initialize a widget’s raw_content.content to an empty string if it’s undefined“. (46600)
  • [customize-widgets/utils/widgetToBlock] Initialize a widget’s raw_content.content to an empty string if it’s undefined. (46487)

Nested / Inner Blocks

  • Inner Blocks: Fix provides context condition. (46729)

Global Styles

  • Allow content/wide widths when unfiltered_html is not allowed. (46712)

CSS & Styling

  • Fix nav list alignment. (46682)

Block Editor

  • Inserter: Try fix media tab when upload of media types has been disabled. (46676)

Build Tooling

  • Restore gutenberg_ prefix to function calls in PHPUnit tests. (46662)

Patterns

  • Pattern Setup: Fix full heights during transition. (46615)

Design Tools

  • Verse: Prevent default styles overriding theme.json font family. (46560)

Block Variations

  • Block Variation Picker: Adds support to declared icon with source. (46373)

Themes

  • theme.json schema: Allow object type on style properties. (45897)

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)

  • Block editor: iframe/writing flow: Change tab index to 0. (46323)
  • Fix region navigation in the site editor. (46525)
  • Keycodes: Fix tilde (~) character isn’t displayed correctly. (46826)
  • useNavigateRegions: Use closest to determine the next region to navigate to. (44883)

Performance

  • Add a performance metric to measure typing within containers. (46529)
  • Block Editor: Optimize useAvailableAlignments performance. (46655)
  • Reset the page between every performance test. (46646)
  • Lodash:
    • Refactor block editor away from _.find(). (46577)
    • Remove omit usage from RN test mocks. (46660)
    • Remove dependency from server-side-render. (46746)
    • Remove from block editor reducer. (46656)

Widgets Editor

  • Lodash: Remove dependency from customize-widgets. (46747)

Block Library

  • Gallery: Avoid creating new layout objects on every render. (46715)

Site Editor

  • Memoize sidebar component. (46604)

Components

  • Lodash: Refactor components away from _.find(). (46537)

Experiments

  • Add rough animation to navigation and links. (46342)
  • Tag Processor: Fix a problem backing up too far after updating HTML. (46598)

Block Library

  • Improve empty menu state in nav off-canvas editor. (46602)
  • Nav offcanvas – handle non-direct insert block inserter. (46503)
  • Navigation list view: Use smaller lock icon. (46578)

Documentation

  • Add missing prefix in PHPDocPHPDoc (docblock, inline docs) comment. (46808)
  • Clarifying the npm package release process for the RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). release. (46555)
  • Doc: Fix missing link to Block Styles page. (46695)
  • Fix: Missing links in block.json schema. (46694)
  • Lodash: Refactor away from _.omit(). (46674)
  • Update PHPDoc for gutenberg_get_global_stylesheet. (46817)
  • Added a note to register_block_pattern_category(). (46628)

Code Quality

  • Block Editor:
    • Improve ImageSizeControl tests. (46765)
    • Make URLPopover tests more precise. (46654)
  • Chore: Remove Inexistent parameter from function call in categories block. (46804)
  • ESLint: Enable testing-library/no-node-access rule. (46703)
  • Fix return type of getSpacingPresetSlug function. (46805)
  • Iframe: Simplify/reactify compat styles logic. (46732)
  • Mobile BlockToolbar: Improve useSelect for fewer rerenders. (46697)
  • Remove leftover pattern. (46701)
  • Remove the nux package. (46110)
  • Remove: __experimentalHasMultipleOrigins prop from colors and gradients. (46315)
  • Use instead of Fragment. (46633)
  • package-lock.json: Dedupe the scheduler package. (46605)
  • withFilters tests: More precise act() calls. (46630)
  • Jest config: Use real timers by default. (46714)
  • Element: Export new 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 APIs. (46610)

Block Library

  • Comments Block: Remove unnecessary editorStyle prop in legacy metadata. (46514)
  • Extract hook for offcanvas inserted block. (46618)
  • Try making page list a controlled block. (46416)

Components

  • BorderControl: Improve popover waiting. (46713)
  • Improve PanelBody tests. (46659)

Data Layer

  • Data: Fix no-node-access violation in suspense tests. (46657)

Tools

Testing

  • Always run initialization code before Playwright end-to-end tests. (46459)
  • E2E: Fix confirmValidDropZonePosition() when dropzone not ready. (46677)
  • E2E: Refactor global inserter utility. (46366)
  • Fix CORS error in the demo end-to-end test. (46668)
  • Migrate Font Size Picker tests to Playwright. (46591)
  • Migrate Toolbar roving tabindex tests to Playwright. (46634)
  • Migrate quote end-to-end tests to playwright. (46549)
  • Post a summary of the flaky tests to the commit. (45798)
  • Update performance tests to work with themes that load editor into an iframe. (46665)

Block Library

  • Update OffCanvasEditor to use clientids tree. (46541)
  • Update copy of off canvas editor ‘add submenu item’ option. (46564)
  • Page List:
    • Remove duplicate code. (46620)
    • Update the icon to demonstrate that the pages are automatically updated. (46438)
  • Query Loop:
    • Only show the Filters panel when there are allowed controls that need to be displayed. (45869)
    • Connect scoped block variation to inserter variations. (46410)
    • Show pattern titles in setup. (46688)

Components

  • Icon: Remove knobs in stories. (46517)
  • Refactor Dropdown component to TypeScript. (45787)
  • Theme component: Remove public export. (46427)
  • ToolTip: Remove knobs in stories. (46515)

Block Editor

  • BlockListAppender: With custom appender, don’t react to nested list settings changes. (46461)
  • Paste: Reuse file transforms for file pasting. (45891)
  • Site Editor: Don’t show block inserter when the canvas is view mode. (46763)

Data Layer

  • Data: Recreate listeningStores set for every markListeningStores call. (46607)
  • useSelect: Add unit tests for static select mode. (46606)

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. Sidebar

  • Navigation Sidebar: Hide behind the experiment flag. (46710)

Icons

  • Update the update icon. (46575)

Accessibility

  • Change SpacingSizesControl ARIA from region to group. (46530)

Global Styles

  • Inline block preview: Add preview block in nested global style panels. (46401)

Typography

  • Typography block supports: Sync with 6.1 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.. (43928)

Web Fonts

  • Change architecture to use Core’s Dependencies API. (43492)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @ajlende @alexstine @artemiomorales @brookewp @danielbachhuber @DAreRodz @dmsnell @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @gigitux @hellofromtonya @jasmussen @jorgefilipecosta @jsnajdr @kevin940726 @kienstra @madhusudhand @MaggieCabrera @Mamaduka @marekdedic @mikachan @mirka @mmtr @noisysocks @ntsekouras @oandregal @ramonjd @richtabor @ryanwelcher @scruffian @t-hamano @talldan @tyxla @viralsampat-multidots @vykes-mac @websitegenii @WunderBart @youknowriad

Thanks to @jameskoster for helping with assets and @priethor for reviewing.

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