What’s new in Gutenberg 14.8? (21 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).

What's new in Gutenberg 14.0

Gutenberg 14.8 has been released and is available for download!


A new, reorganized Site Editor interface

With Gutenberg 14.8, the Site Editor interface gets a major overhaul and introduces Browse Mode. It is now easier than ever to navigate through templates and template parts. It’s even possible to add new ones through 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.. The work on this feature is ongoing and will continue to improve as new Gutenberg versions are released. (44770), (45100), (46458)

Introducing the Style Book

Users and designers can view and edit all blocks via the new Style Book feature, which is an extension of the Styles panel in the Site Editor. The interface exposes both coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and third-party blocks from plugins and are broken down by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. The Style Book provides an overview of all 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. styles in a centralized location while also making it easier to quickly make changes at the global level. (45960).

The Styles panel also offers a preview when customizing individual blocks. (45719)

Add custom CSSCSS Cascading Style Sheets. rules for your site

Bringing feature parity with the WordPress customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., you can now add custom CSS via the Styles > Custom panel in the Site Editor. This will allow users and designers to quickly make changes that won’t be overwritten by a theme update. (46141), (46561), (46663)
Currently, this is an experimental feature that can be enabled by visiting Gutenberg > Experiments and ticking the Global styles custom CSS checkbox.

Other Notable Highlights

List/quote: Unwrap inner block when pressing Backspace at start

Gutenberg 14.8 will now unwrap inner blocks of the List and Quote blocks when backspacing at the start. This results in the first inner block becoming a Paragraph that is separate from its previous parent List or Quote container. (45075)

Pattern title tooltip

The inserter now shows pattern titles when focused on or hovering an individual pattern preview. These were previously hidden from view and only shown to screen readers. (46419)

Navigation Block Improvements

This release continues to improve on the Navigation block with several changes that are building blocks for future releases. These include adding a location fallback for classic menus and an “open list view” button. The Page List block also has a convert panel when used within a Navigation block. (46426), (45976), (46286), (46335), (46070), (46352)

Changelog

Enhancements

Block Library

  • Add a current-menu-ancestor class to navigation items. (40778)
  • Page List Block: Adds a longdash tree to the parent selector. (46336)
  • Page List Block: Hide page list edit button if no pages are available. (46331)
  • Page List: Add convert panel to Inspector Controls when within Nav block. (46352)
  • Page List: Prevent users from adding inner blocks to Page List. (46269)
  • Reusable block: Pluralize the message “Convert to regular blocks” depending on the number of blocks contained. (45819)
  • Heading Block: Don’t rely on the experimental selector anymore. (46284)
  • Media & Text Block: Create undo history when media width is changed. (46084)
  • Navigation block: Add page list to Link UIUI User interface transforms in Nav block. (46426)
  • Navigation block: Add location->primary to fallback nav creation for classic menus. (45976)
  • Navigation block: Update fallback nav creation to the most recently created menu. (46286)
  • Navigation block: Add a ‘open list view’ button. (46335)
  • Navigation block: Removes the 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. from the navigation list view in the experiment. (46070)
  • Query: Remove color block supports. (46147)
  • Table block: Make figcaption styles consistent between editor and front end. (46172)
  • List/quote: Unwrap inner block when pressing Backspace at start. (45075)

Inspector Controls

  • Sidebar Tabs: Refine the use of inspector tabs and disable filters for Nav blocks. (46346)
  • Sidebar Tabs: Use editor settings to override display. (46321)
  • Summary panel: Try improving spacing and grid. (46267)

Global Styles

  • Add Style Book to Global Styles. (45960)
  • Add block preview component in global styles. (45719)
  • Move border from layout to own menu. (45995)
  • Add a CSS style to 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. to allow the setting of custom CSS strings. (46255)
  • Expose before 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. hook in useSettings for injecting block settings in the editor. (45089)
  • Global styles: Add a custom CSS panel to the site editor (currently behind an experimental flag). (46141)

Site Editor

  • Allow adding new templates and template parts directly from the sidebar. (46458)
  • Synchronize the sidebar state in the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (46433)
  • Try template drill down on the shell sidebar (browse mode). (45100)
  • Reorganize the site editor to introduce Browse Mode. (44770)

Block Editor

  • Update the synced block hover styles in Inserter. (46442)
  • Add new selector getLastInsertedBlockClientId. (46531)
  • Block editor: Hide fixed contextual toolbar. (46298)
  • Inserter: Pattern title tooltip. (46419)
  • useNestedSettingsUpdate: Prevent unneeded syncing of falsy templateLock values. (46357)
  • Design: Augmented shadows for modals and popovers. (46228)

Components

  • Tabs: Try a simpler tab focus style, alt. (46276)
  • BaseControl: Add convenience hook to generate id-related props. (46170)
  • Dashicon: Refactor to TypeScript. (45924)
  • Lighten borders to gray-600. (46252)
  • Popover: Check positioning by adding and testing is-positioned class. (46429)

Icons

  • Icons: Update the border icon. (46264)

Testing

  • Tests: Fix toBePositionedPopover matcher message function. (46239)

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

  • Update the Gutenberg plugin to require at least the WP 6.0 version. (46102)
  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher: 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. changes from core theme resolver. (46250)
  • Update: Move gutenberg_register_core_block_patterns from 6.1 to 6.2. (46249)
  • 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/. packages to v18. (45235)

Themes

  • Empty Theme: Add the $schema property in theme.json and rename template directories. (46300)

Mobile

  • Mobile: Disable Unsupported Block Editor Tests (Android). (46542)
  • Mobile: Inserter – Remove .done() usage. (46460)
  • Mobile: Update Heading block end-to-end test. (46220)
  • Mobile: Updates packages to not use GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. HTTPSHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information. URLs. (46422)

Bug Fixes

Block Library

  • Fix Nav Submenu block Link UI text control. (46243)
  • Fix auto Nav menu creation due to page list inner blocks. (46223)
  • Handle innerContent too when removing innerBlocks. (46377)
  • Image Block: Ensure drag handle matches cursor position when resizing a center aligned image. (46497)
  • Navigation Block: Add social link singular to list of blocks to be allowed. (46374)
  • Navigation Block: Fixes adding a submenu. (46364)
  • Navigation Block: Prevent circular references in navigation block rendering. (46387)
  • Navigation Block: Recursively remove Navigation block’s from appearing inside Navigation block on front of site. (46279)
  • Navigation link: Use stripHTML. (46317)
  • Page List Block: Fix error loading page list parent options. (46327)
  • 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. Block: Add migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of colors to v2 deprecation. (46522)
  • Site Logo: Correctly set the image’s natural height and width. (46214)
  • Strip markup from link label data in inspector. (46171)
  • Template Parts: Fix modal search stacking context. (46421)
  • Video: Avoid an error when removal is locked. (46324)
  • Layout child fixed size should not be fixed by default and should always have a value set. (46139)

Blocks

  • Paste handler: Remove styles on inline paste. (46402)
  • Improve performance of gutenberg_render_layout_support_flag. (46074)

Global Styles

  • Allow indirect properties when unfiltered_html is not allowed. (46388)
  • Fix Reset to defaults action by moving fills to be within context provider. (46486)
  • Fix duplication of synced block colors in CSS output. (46297)
  • Make style book label font size 11px. (46341)
  • Style Book: Clear Global Styles navigation history when selecting a block. (46391)
  • Global Styles REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. endpoint: Check custom CSS is included before attempting to validate. (46561)
  • Reverts the custom CSS to an experiment while we resolve the handling of unfiltered HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. capabilities. (46663)

Block Editor

  • Block Editor: Fix content locked patterns. (46494)
  • Block Editor: Fix memoized pattern selector dependant arguments. (46238)
  • Block Editor: Restore draggable chip styles. (46396)
  • Block Editor: Revert deoptimization useNestedSettingsUpdate. (46350)
  • Block Editor: Fix some usages of useSelect that return unstable results. (46226)
  • useInnerBlockTemplateSync: Cancel template sync on innerBlocks change or unmount. (46307)

Patterns

  • Add new pattern categories. (46144)
  • Block Editor: Add initial view mode in BlockPatternSetup. (46399)

Site Editor

  • Do not remount 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.. (46431)
  • Fix the top bar ‘exit’ animation. (46533)
  • Keep edited entity in sync when Editor canvas isn’t mounted. (46524)
  • [Site Editor]: Add default white background for themes with no background color set. (46314)

Components

  • InputControl: Fix Flex wrapper usage. (46213)
  • Modal: Fix unexpected modal closing in IME Composition. (46453)
  • MaybeCategoryPanel: Avoid 403 requests for users with low permissions. (46349)
  • Rich text: Add button to clear unknown format. (44086)

Document Settings

  • Fix template title in summary panel and requests for low privileged users. (46304)
  • Permalink: Hide edit field for users without publishing capabilities. (46361)

Patterns

  • Content lock: Make filter hook namespace unique. (46344)

Layout

  • Child Layout controls: Fix help text for height. (46319)

Widgets Editor

  • Shortcuts: Add Ctrl+Y for redo to all editor instances on Windows. (43392)

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.

  • HTML block: Fix parsing. (27268)

Mobile

  • Social Links mobile test: Wait for URL bottom sheet to appear. (46308)

Performance

Components

  • Avoid paint on popover when hovering content. (46201)
  • CircularOption: Avoid paint on circular option hover. (46197)
  • Lodash: Replace _.isEqual() with fastDeepEqual. (46200)
  • Popover: Avoid paint on popovers when scrolling. (46187)
  • Resizable Box: Avoid paint on resizable-box handles. (46196)
  • ListView: Avoid paint on list view item hover. (46188)

Code Quality

  • Lodash: Refactor blocks away from _.find(). (46428)
  • Lodash: Refactor core-data away from _.find(). (46468)
  • Lodash: Refactor edit-site away from _.find(). (46539)
  • Lodash: Refactor away from _.orderBy(). (45146)
  • Lodash: Refactor block library away from _.find(). (46430)
  • Remove usage of get_default_block_editor_settings. (46112)

Post Editor

  • Lodash: Refactor editor away from _.find(). (46464)
  • Lodash: Refactor post editor away from _.find(). (46432)

Block Editor

  • Avoid paint on inserter animation. (46185)
  • Improve inserter search performance. (46153)
  • Block Editor: Refactor the “order” state in the block editor reducer to use a map instead of a plain object. (46221)
  • Block Editor: Refactor the block-editor parents state to use maps instead of objects. (46225)
  • Refactor the block-editor “tree” state to use maps instead of objects. (46229)
  • Refactor the block-editor byClientId redux state to use maps instead of plain objects. (46204)
  • Fix typing performance issue for container blocks. (46527)

Testing

  • E2E: Fix performance tests by making inserter search container waiting optional. (46268)

Mobile

  • Columns mobile block: Avoid returning unstable innerWidths from useSelect. (46403)

Experiments

Block Library

  • Navigation List View: Remove empty cell when there is no edit button. (46439)

Web Fonts

  • WP Webfonts: Avoid duplicated font families if the font family name was defined using fallback values. (46378)

Documentation

  • Adds clarifications and clears up inaccuracies. (46283)
  • Adds details of how to find the .zip file. (46305)
  • Doc: Fix description and documentation for link color support. (46405)
  • Docs: Add missing useState import in BorderBoxControl documentation. (42067)
  • Docs: Add missing useState import in color picker docs. (42069)
  • Docs: Add missing useState import in confirm dialog docs. (42071)
  • Docs: Adds reminder to use Node.js v14 in Quick Start. (46216)
  • Docs: Fix missing link to primitives package. (46290)
  • Docs: Update reference to IE 11. (46296)

Code Quality

  • Block Editor: Fix no-node-access violations in BlockPreview. (46409)
  • Block Editor: Fix no-node-access violations in BlockSelectionClearer. (46408)
  • Columns mobile edit: Remove unused updateBlockSettings action bind. (46455)
  • ESLint: Fix warning in getBlockAttribute documentation. (46500)
  • List View: Use default parameters instead of defaultProps. (46266)
  • Removed: Remove small APIs marked to be removed in WP 6.2. (46106)
  • Site Editor: Remove 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. CSS. (46288)

Block Library

  • Group Block: Remove placeholder leftovers. (46423)
  • Group: Remove unnecessary ‘useCallback’. (46418)
  • Navigation Block: Add tests for Nav block uncontrolled blocks dirty state checking. (46329)
  • Navigation Block: Update attribute test for are-blocks-dirty.js. (46355)
  • Page List Block: Move shared “convert” description to constant. (46368)
  • Page List Block: Simplify Page List convert to links function API. (46365)
  • Query: Cleanup variation picker component. (46424)
  • RNMobile: Add an inline comment to clarify usage of ‘hard’ limit vs. unbounded query. (46245)
  • Shared standard Link UI component between Nav Link and Submenu blocks. (46370)
  • Template Parts: Remove unnecessary ‘useCallback’. (46420)

Components

  • AlignmentMatrixControl: Refactor to TypeScript. (46162)
  • Also ignore no-node-access for some components. (46501)
  • Fix no-node-access violations in FocalPointPicker tests. (46312)
  • Fix no-node-access violations in Popover. (46311)
  • Fix no-node-access violations in Theme. (46310)
  • Fix no-node-access violations in ToolsPanel tests. (46313)
  • withFilters: Use ‘act’ from React Testing Library. (46237)

Data Layer

  • Data: Add ability to subscribe to one store, remove __unstableSubscribeStore. (45513)
  • ESLint: Fix warnings in the data package. (46499)

Global Styles

  • Add “custom-css” as an acceptable value in the documentation for gutenberg_get_global_stylesheet. (46493)
  • PaletteEdit: Add changelog. (46095)

Block Editor

  • Inserter: Update mobile tab navigation styles. (46186)

Layout

  • Clarify inline comment about switching to safecss_filter_attr. (46061)

Tools

Build Tooling

  • Adds 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/ Action to validate Gradle Wrapper. (46247)
  • Prevent api-fetch and core-data from being imported in the block editor package. (46302)
  • Serialize the map objects properly in the Redux dev tools. (46282)

Testing

  • E2E: Fix flaky Block Switcher tests. (46406)
  • end-to-end tests: Add width and color test to button block. (46452)

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.87.8s48.14ms
Gutenberg 14.76.25s46.4ms
WordPress 6.15.9s48.04ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.83.36s31.7ms
Gutenberg 14.75.47s34.78ms
WordPress 6.15.72s36.1ms

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

First time contributors

The following PRs were merged by first time contributors:

  • @corentin-gautier: Avoid paint on popover when hovering content. (46201)
  • @ingeniumed: Expose before filter hook in useSettings for injecting block settings in the editor. (45089)
  • @janusqa: Reusable block: Pluralize the message “Convert to regular blocks” depending on the number of blocks contained. (45819)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @ajlende @andrewserong @aristath @chad1008 @chintu51 @corentin-gautier @derekblank @draganescu @ellatrix @geriux @getdave @glendaviesnz @hideokamoto @ingeniumed @jameskoster @janusqa @jasmussen @jffng @jorgefilipecosta @jsnajdr @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mburridge @mikachan @mirka @noisysocks @ntsekouras @oandregal @oguzkocer @ramonjd @scruffian @SiobhyB @spacedmonkey @t-hamano @talldan @tellthemachines @tyxla @WunderBart @youknowriad

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

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