What’s new in Gutenberg 18.8 (17 July)

“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 Editor.

Gutenberg 18.8 has been released and is available for download!

A total of 217 PRs were merged in Gutenberg 18.8, with 10 first-time contributors! With WordPress 6.6 releasing this week, many contributors are focusing on 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. There are still some great features and enhancements in this release, highlighted below.

  1. Group block shadow support
  2. Background image support for blocks in global styles
  3. Other notable highlights
  4. Changelog
  5. First time contributors
  6. Contributors

Group 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. shadow support

A popular feature requestfeature request A feature request should generally begin the process in the ideas forum, on a mailing list, as a plugin, or brought to the attention of the core team, such as through scope meetings held for each major release. Unsolicited tickets of this variety are typically, therefore, discouraged., shadows can now be added to the Group block. (63295)

Background image support for blocks in global styles

The background image block support has been updated to allow images to be set in global styles (60100). This means that a background image can be set for all quote or pull quote blocks within a site or theme. Additionally, the controls for background images have been updated to use a popover (60151) so that they’re tucked away when not making changes.

Other notable highlights

Toolbar justification controls for Group and Content blocks

The justification controls for the Group and Content blocks are now exposed in the block toolbar. This makes it easier to quickly update these blocks to be left or right-aligned, using a similar interface to text and button blocks. (62924)

Color support for individual list item blocks

Individual list items within a list block can now have different color styles to the overall list they belong to. (59892)

Block inserter no longer behaves like a dialog box

When opening the block inserter, it will now stay open when interacting with the editor canvas. This makes it easier to move around the document while adding blocks. (63059)

Changelog

View full list of changes

Features

  • DataForm: Implement first prototype using duplicate page action. (63032)

Enhancements

Components

  • BaseControl: Forward ref on VisualLabel. (63169)
  • CustomSelectControlV2: Allow wrapping item hint to new line. (62848)
  • CustomSelectControlV2: Expose legacy wrapper through private APIs. (62936)
  • CustomSelectControl V2: Keep legacy arrow down behavior only for legacy wrapper. (62919)
  • CustomSelectControlV2: Collapse checkmark space when unchecked. (63229)
  • CustomSelectControlV2: Keep item checkmark top aligned. (63230)
  • DateTime: Create TimeInput component and integrate into TimePicker. (60613)
  • FontSizePicker: Use CustomSelectControl V2 legacy adapter. (63134)
  • Tabs: Add vertical indicator animation. (62879)
  • TimeInput: Add label prop. (63106)
  • TimePicker: Add dateOrder prop to sort day, month, and year. (62481)
  • ToolbarButton: Deprecate isDisabled prop and merge with disabled. (63101)
  • Tooltip Component: Add custom class name support. (63157)

Data Views

  • Add padding around selected values in author 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.. (63212)
  • DataViews filterSortAndPaginate utility: Support sorting by number. (63187)
  • DataViews: Make view.hiddenFields optional. (62876)
  • DataViews: Remove Table Cells animation. (63079)
  • DataViews: Replace supportedLayouts prop with defaultLayouts prop instead. (63287)
  • Duplicate modal: Move to 40px components. (63246)
  • Pages: Include avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. in Author field. (63142)
  • Patterns Page: Hide preview column by default. (63213)
  • Posts list powered by DataViews. (62705)
  • Split layout / view options. Use active layout icon for the layout button. (63205)
  • Use status icons in field display. (63289)

Block Library

  • Add example for query block and posts list. (63286)
  • 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. block: Add example of the block. (63010)
  • Group: Add block support for shadow. (63295)
  • Login/out block: Add example of the block. (62937)
  • Post content block: Add example of the block. (62968)
  • Post title: Add example of the block. (62955)
  • Table Block: Add toolbar button to add a caption. (47984)

Block Editor

  • Block position controls: Use V2 legacy adapter instead of V1 CustomSelectControl. (63139)
  • DateFormatPicker: Use CustomSelectControl V2 legacy adapter. (63171)
  • Fix inspector inner shadow border. (63245)
  • FontAppearanceControl: Use CustomSelectControl V2 legacy adapter. (63179)
  • Inserter: Remove the dialog behaviour. (63059)
  • SpacingInputControl: Use CustomSelectControl V2 legacy adapter. (63190)

Global Styles

  • Background image: Move controls into a popover. (60151)
  • Block background UIUI User interface controls. (60100)
  • Tweak block background position preview height. (63225)

Extensibility

  • DataViews: Register the deletePost action like any third-party action. (62913)
  • DataViews: Register the export pattern action like any third-party action. (63046)
  • DataViews: Register the reset template and template part action like any third-party action. (63017)

Design Tools

  • Flex dimensions: Rename “Fill” to “Grow”. (62779)
  • List Item: Add color support. (59892)
  • Uniform Focal point labels. (62438)

Font Library

  • Font Library Modal: Enhance pagination appearance. (63210)
  • Font Library: Store font subdirectory in post metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.. (63000)
  • Move font directory into uploads to match WP 6.5. (60354)

Layout

  • Add justification to block toolbar in addition to 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.. (62924)

Site Editor

  • Align rename modals. (62874)

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.

  • block.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.: Allow passing filename as variations field. (62092)

Template Editor

  • Update: Move template areas into a panel. (62033)

Block Variations

  • Automatically select group variation if there is only one available. (61871)

Zoom Out

  • Add a vertical toolbar for zoom out mode. (60123)

New APIs

Block API

  • Introduce “local” attributes and use it for the image block. (63076)

Bug Fixes

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Commands: Fix Pages command link. (63235)
  • Docgen: Fix function param for const function expression. (63034)
  • Enable save draft button for posts with custom post status. (63293)
  • Ensure device previews extra scrollbar only appears when needed. (62952)
  • Styles specificity: Allow comment form input overrides. (62960)

Components

  • CustomSelectControl V2 legacy adapter: Fix trigger button font size. (63131)
  • CustomSelectControl V2: Fix labelling with a visually hidden label. (63137)
  • CustomSelectControl V2: Fix trigger text alignment in RTL languages. (62869)
  • CustomSelectControl V2: Prevent keyboard event propagation in legacy wrapper. (62907)
  • CustomSelectControlV2: Add root element wrapper. (62803)
  • CustomSelectControlV2: Fix item styles. (62825)
  • CustomSelectControlV2: Fix popover styles. (62821)
  • CustomSelectControlV2: Fix select popover content overflow. (62844)
  • CustomSelectControlV2: Tweak item inline padding based on size. (62850)
  • Editor: Fix duplicate save panels. (62863)
  • Fix UnitControl select disabled state colors. (62970)
  • Fix extra scrollbar when a popover extends past the viewport. (62894)
  • Fix the ‘useUpdateEffect’ hook in strict mode. (62974)
  • ProgressBar: Fix indeterminate RTL support. (63129)
  • RangeControl: Fix RTL support for custom marks. (63198)
  • SelectControl: Fix disabled styles. (63266)
  • Tabs: Fix “With tab icons” Storybook example. (63297)
  • Tabs: Fix text-align when text wraps in vertical mode. (63272)
  • TimePicker: Fix time zone overflow. (63209)
  • UnitControl: Fix an issue where keyboard shortcuts unintentionally shift focus on Windows OS. (62988)

Block Library

  • Add Aspect ratio control on Image blocks in Grids. (62891)
  • Audio Block: Do not persist blob urls and fix undo. (63257)
  • File block: Do not persist blob urls and fix undo. (63282)
  • Fix Incorrect URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org basename logic in EmbedPreview. (63052)
  • Fix: Update “Link Text” label to “Text” on Social Icons block #60966. (61715)
  • List: Maintain nested list on parent item removal. (62949)
  • Navigation: Allow themes to override block library text-decoration rule. (63406)
  • Patterns: Check for edited entity content property when exporting. (63227)
  • Reduce specificity of social link icon specific colors. (63049)
  • Refactor Post Date Relative Time Rendering for Future Dates. (62979)
  • Site Editor: Fix template parts ‘Reset’ action. (62951)
  • Video Block: Do not persist blob urls and fix undo. (63238)

Post Editor

  • Editor: Do not truncate post excerpt if not editable. (63314)
  • Fix: Background height and padding in non-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 canvas. (63222)
  • Fix: Crash when onActionPerformed is used with callback actions. (63120)
  • Fix: Permanently delete post action does not calls onActionPerformed. (63121)
  • Fix: Triple scrollbars in device previews. (62940)
  • Post editor: Increase specificity of bottom padding. (63288)
  • Actions: Translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. should depend on number of items. (62857)

Data Views

  • DataViews list layout: Fix action alignment. (62971)
  • DataViews: Restore preview focus outline in grid layout. (62991)
  • Fix buttonless table 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. alignment. (62877)
  • Fix typo in string for trashing posts. (63119)
  • Patterns: Avoid mapping template parts objects to patterns. (62927)

Block Style Variations

  • Block supports: Ensure tools panel dropdown are visible on mobile. (62896)
  • Section Styles: Fix error when blocks are deregistered. (63252)
  • Section Styles: Prevent flash of variation styles in post editor. (63071)
  • Section Styles: Resolve ref values in variations data. (63172)

Layout

  • Only hide drop indicator when grid has isManualPlacement set. (63226)
  • Remove dotted border from grid dropzone. (63162)
  • Resizing in Auto mode shouldn’t add columnStart and rowStart values. (63160)
  • 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. css for nested fullwidth layouts with zero padding applied. (63436)

Global Styles

  • Elements: Avoid specificity bump for top-level element-only selectors. (63403)
  • 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.: Ensure that user-defined variation styles CSSCSS Cascading Style Sheets. is generated. (62768)
  • Root padding styles: Include alignwide in nested has-outer-padding logic. (63207)
  • Remove letter-spacing from typography element preview. (60322)
  • Only add 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. additional CSS to global styles in block themes. (63331)

Site Editor

  • Make SiteHub available for Pages, Patterns, and Templates in mobile viewports. (63118)
  • Patterns and templates cannot be edited from sidebar mobile view. (63002)
  • Site Editor Sidebar: Hide horizontal scrollbar when navigating. (63194)

Synced Patterns

  • Ensure disable overrides button is active for image blocks with captions or links. (62948)
  • Fix second scrollbar when editing patterns in the post editor. (62909)
  • Pattern overrides: Fix aspect ratio not working in image with overrides. (62828)

Block Editor

  • 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. Panel: Align text and icons horizontally to avoid clipping. (62842)
  • Zoom Out: Move the hook to the inserter component. (63315)
  • Fix error when calling the PostActions view-post callback. (63460)

Block bindings

  • Disable post meta editing in blocks inside a 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.. (63237)
  • Image block: Ensure extenders that rely on media ids in block htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. are supported by block bindings. (63013)

Patterns

  • Fix: Restrict export pattern action to user patterns. (63228)

Posts/Tags/Categories Screen

  • Constrain is-fullscreen-mode adminadmin (and super admin) body class to posts list. (63166)

Inspector Controls

  • Fix button wrapping in the document Inspector. (63062)

Design Tools

  • Duotone: Fix code typo, to ensure Duotone updates correctly in Safari. (62953)

Commands

  • Fix issue of HTML entities rendering in command menu. (62606)

Typography

  • Use available font weights and styles in FontAppearanceControl. (61915)
  • Font Appearance Control: Refactor font appearance fallbacks. (63215)

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)

  • Allow Escape key to move focus to editor region when in select mode. (62196)
  • Focus Editor Region from Template Footer Click. (62595)

Components

  • Button: Stabilize __experimentalIsFocusable prop. (62282)
  • Fix inaccessible disabled Buttons. (62306)
  • Make Tabs have a fluid height. (62027)
  • ToolbarButton: Always keep focusable when disabled. (63102)

Global Styles

  • Fix unlabeled Remove shadow buttons. (63197)

Block Library

  • Make usage of the settings icon more consistent. (63020)

Data Views

  • Add translation context for ‘view options’ label. (63031)
  • Fix filter chip contrast. (62865)

Media

  • Update URLPopover role and focus return. (61313)

Performance

  • Core data: Batch receiveUserPermission. (63201)
  • Perf tests: Make pages test compatible with base 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".. (63204)

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

  • Optimize selectors in the control component. (63141)

Experiments

Layout

  • Allow inserting blocks directly in empty grid cells. (63108)
  • Use manualPlacement attribute to set manual grid mode and allow responsive behaviour in both modes. (62777)

Documentation

  • Add note about postcss-urlrebase package patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing.. (63015)
  • Add RichText formatting example to the Editor curation documentation. (63065)
  • Block supports: Add documentation for ‘splitting’. (63016)
  • Fix typo to be preposition, not verb, in some package comments and documentations. (62945)
  • Fix urls to developer documentation. (63104)
  • Interactivity API: Fix minor typos in code snippets. (62890), (63234)
  • Interactivity API: Fix variable name in color directive example. (62912)
  • Interactivity API: Include references to more examples from the documentation. (63025)
  • Interactivity API: Recommend kebab-case in data-wp-class. (62817)
  • Remove link to polyfill.io. (62883)
  • Storybook: Fix links for block editor examples. (63132)
  • ToolbarButton: Fix documentation for accessibleWhenDisabled. (63140)
  • 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/. dev docs rule hook URL. (62995)

Code Quality

  • Add linguist-documentation attribute to docs/ directory. (62651)
  • Conditionally call focus with getEditorRegion. (62980)
  • Core Data: Remove entity configuration ‘__experimentalNoFetch’ flag checks. (63303)
  • Dependencies: Upgrades and deduplication. (62657)
  • Format Library: Clean up ‘Highlight’ format components. (62965)
  • Remove postcss-local-keyframes from dependencies. (63224)
  • Upgrade postcss-urlrebase package. (63075)

Data Views

  • DataViews: Fix double check in isTemplateRemovable. (63021)
  • DataViews: Remove the AnyItem type. (62856)
  • DataViews: Removing mapping of user patterns to temporary object. (63042)
  • DataViews: Replace hiddenFields configuration with fields property instead. (63127)
  • DataViews: Simplify selection setting. (62846)

Block Editor

  • Remove CSS hack for Internet Explorer 11. (63220)
  • Remove duplicate translator comment. (62860)

Components

  • Allow ariakit and framer motion imports in the components package. (63123)
  • Normalize focusable disabled ToolbarButton usage. (63130)
  • Sidebar: Add a shared component for the inserter and list view. (62343)
  • Tabs: Split animation logic into multiple separate composable utilities. (62942)

Global Styles

  • Global Styles: Allow variations to be filtered by multiple properties. (62847)
  • Global Styles: Simplify code to fetch color and typography variation. (62827)
  • Make a shared component for typography and color preview. (62829)
  • Section Styles: Clean up block style variation filters. (62858)

Block Library

  • Gallery Block: Clean up v1 code. (63285)

Site Editor

  • Clean up unused Table component. (63283)

Rich Text

  • Raw handling: Remove IE11 fallback code. (63219)

Zoom Out

  • Replace deprecated selector. (63144)

Block bindings

  • Add comment about useSelect usage in withBlockBindingSupport. (63005)

HTML API

  • Compat: Update HTML API with changes from 6.6. (63089)

Tools

  • Dependency extraction: Map to regenerator-runtime instead of wp-polyfill. (63091)
  • Env: Remove version field from docker-compose configuration. (63099)
  • Eslint-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: Add method-signature-style TypeScript lint rule. (62718)
  • Scripts: Ensure that typescript-eslint checks for unused vars. (62925)
  • Update new release issue template to remove core editor chat item. (62864)

Testing

  • Automatically sync 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. changelog to issue. (62973)
  • Block styles variations E2E: Wait for Save button before editing global styles. (62915)
  • Cherry pick automation: Fix for forks. (62900)
  • Cherry pick workflow: Improve message after conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved.. (62826)
  • DataViews: Add performance test for pages. (63170)
  • Fix typo in column block fixture file. (63007)
  • Performance tests: Fix for 6.5. (62871)
  • Performance tests: Restore 6.5-compatible locator. (63041)
  • Re-enable image block cropping test (#62781). (62854)
  • Update method for changing the content in ‘editor-modes’ end-to-end test. (62957)
  • Update the project-management-automationaction to use Node.js 20. (62851)
  • Upgrade web-vitals package. (63019)

Plugin

  • Add local version of wp-env schema to .wp-env.json. (63253)

Build Tooling

  • Build: Enable TypeScript skipDefaultLibCheck. (63056)

First time contributors

The following PRs were merged by first-time contributors:

  • @airman5573: Fix variable name in color directive example for Interactivity API. (62912)
  • @aliaghdam: Tooltip Component: Add custom class name support. (63157)
  • @bogiii: DateTime: Create TimeInput component and integrate into TimePicker. (60613)
  • @Chrico: Scripts: Ensure that typescript-eslint checks for unused vars. (62925)
  • @dhananjaykuber: Fix Incorrect URL basename logic in EmbedPreview. (63052)
  • @iamibrahimriaz: Update iapi-about.md. (63234)
  • @iworks: Translation should depend on number of items. (62857)
  • @roygbyte: Fix typo to be preposition, not verb, in some package comments and documentations. (62945)
  • @shreya0204: Add justification to block toolbar in addition to sidebar. (62924)
  • @sejas: Fix: Error when calling the PostActions view-post callback. (63460)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @airman5573 @akasunil @aliaghdam @amitraj2203 @bogiii @carolinan @Chrico @ciampo @costasovo @creativecoder @DaniGuardiola @desrosj @dhananjaykuber @dmsnell @ellatrix @fluiddot @geriux @hbhalodia @iamibrahimriaz @iworks @jameskoster @jasmussen @jeryj @jffng @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @michalczaplinski @mikachan @mirka @ndiego @ntsekouras @oandregal @ockham @peterwilsoncc @ramonjd @richtabor @roygbyte @SantosGuillamot @scruffian @shail-mehta @shreya0204 @sirreal @stokesman @swissspidy @t-hamano @talldan @tellthemachines @tyxla @vipul0425 @westonruter @youknowriad

Props to @aaronrobertshaw, @annezazu, and @priethor for their support with this post, and @joen for the visual assets!

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