What’s new in Gutenberg 18.9? (31 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 biweekly following every Gutenberg release, 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.9 has been released and is available for download!

  1. Data Views get more flexible
  2. Consolidating design tools across blocks
  3. Improved usability in editing and applying font size presets
  4. Changelog
  5. First-time contributors
  6. Contributors

Data Views get more flexible

This release introduces several new features to Data Views. For starters, you can customize the column order in table views (63416) and adjust the density of grid views (63367).

The Pages list views also get some love, as it now displays the author’s 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. (63309) next to the publication status.

If you like these visual hints next to the page titles, you will love to hear that table views now support displaying combined fields (63236), enabling things like displaying page thumbnails next to the page title in future releases.

Finally, if you really like tinkering with early features, try out the new experimental Quick Edit for Data Views (63600). To do so, remember to enable the experiment in the Gutenberg settings first!

Consolidating design tools across blocks

In a recurring effort to provide design tool consistency across blocks (43241), Gutenberg 18.9 brings border control support to the Gallery, Buttons (which also gets color and padding support), Heading, Paragraph, Quote (spacing support, too) blocks, Social Links, and Term Description blocks. Similarly, the Image and Search blocks get margin support.

Improved usability in editing and applying font size presets

Gutenberg 18.9 iterates both using and editing font presets in global styles. The Global Styles interface now allows user-friendly editing of font size presets (63057). Moreover, these font presets and color presets can now be selected on the Global Styles 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. under “Browse styles“, bringing consistency to the interface and aligning with the left sidebar Styles menu (63173).

Changelog

Enhancements

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

  • Add Clear button for Overlay color option in Cover Block. (63580)
  • Embeds: Add ‘Embed’ to title for clarity. (63371)
  • Columns block: Fix block preview. (63609)
  • Gallery: Add border block support. (63428)
  • Image block: Show placeholder when uploading HEIC files. (63643)
  • Latest comments: Add color block support. (63419)
  • Media Text: Add border support. (63542)
  • Polish create template part modal. (63617)
  • Post Author blocks: Add example and preview. (62978)
  • Post date block: Add a block example. (63368)
  • Post 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.: Add example of the block. (63011)
  • Post terms block: Add an example. (63369)
  • 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: Remove Posts List variation. (63404)
  • Query Loop block: Convert the post content type setting to a ToggleGroupControl if there are few items. (63375)
  • Query Loop: Change default query loop variations. (63353)
  • Set query loop to have the inherit value by default. (63362)
  • Social Links: Add border block support. (63629)
  • Social Links: Updated soundcloud icon for social link block. (63504)
  • Social Links: Update Facebook’s color to match brand guidelines. (60424)
  • Term Description: Add border block support. (63630)
  • Buttons: Add border, color, and padding block supports. (63538)
  • Heading: Add border support. (63539)
  • Image: Adopt margin block support. (63546)
  • Paragraph: Add border support. (63543)
  • Quote: Add border support. (63544)
  • Quote: Add spacing supports. (63545)
  • Search: Add margin support. (63547)

Design Tools

  • Background Image: Make panel appear in a consistent location. (63551)

Data Views

  • DataViews: Allow column re-ordering. (63416)
  • DataViews: Update pagination icons. (63594)
  • DataViews: Rename 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. property of fields to label. (63843)
  • DataViews: Support combined fields. (63236)
  • Dataviews List: Update item layout. (63299)
  • Increase column-gap between fields in List layout. (63603)
  • Update ‘Front page’ badge. (63752)
  • Update: Pages: TrashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. view should default to table layout try 2. (63652)
  • Update: Grid layout: Allow users to adjust grid density. (63367)
  • Update: Include avatars on list view. (63309)
  • Update: List / Table layout – selected item stroke should be tinted blue. (63312)
  • Update: Make changing order an action on the ellipsis menu. (62189)

Global Styles

  • Add colors and typograpghy to the browse styles section. (63173)
  • Adding Font size presets UIUI User interface. (63057)
  • Apply same styles to block previews on inserter and Global Styles. (63177)
  • Background: Add background attachment to top level styles. (61382)
  • Move background panel under color panel. (63888)

Block Editor

  • Hide source 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. in my patterns. (63831)
  • List View: Remove the sticky position icon tooltip. (63850)
  • Patterns: Render draggable only when enabled. (63715)

Post Editor

  • Add post status icon in post summary. (63658)
  • Editor: Improve Header layout. (62636)
  • Post Actions: Use entity details for capability checks. (63423)

Font Library

  • Group fonts by source. (63211)
  • Include a “Select All” options to activate/deactivate all fonts. (63531)
  • Reduce duplication of font library group headings. (63532)

Zoom Out

  • Hide vertical toolbar when block is not full width. (63650)
  • Only show the inserters when a block is selected or hovered. (63668)

Block Locking

  • Tweak Block Locking UI. (63881)

General UI

  • Polish “Delete” modal. (63392)
  • Update close icon. (63597)
  • Site Editor: Reduce navigation sidebar width. (63431)

Block bindings

  • Bootstrap sources defined in the server. (63470)

Patterns

  • Limit pattern shuffling to theme and user patterns only. (62677)

Components

  • CustomSelectControl V2 legacy adapter: Stabilize experimental props. (63248)
  • CustomSelectControl: Switch to ariakit-based implementation. (63258)
  • CustomSelectControlV2: Animate select popover appearance. (63343)
  • CustomSelectControlV2: Do not flip popover if legacy adapter. (63357)
  • DropdownMenuV2: Invert animation direction. (63443)
  • FontSizePicker: Tidy up internal logic. (63553)
  • FormTokenField: Deprecate bottom margin. (63491)
  • SelectControl: Add “minimal” variant. (63265)
  • Tabs: Hyphenate tab labels. (63337)
  • Tabs: Keep full opacity of focus ring on disabled tabs. (63754)
  • Update HeightControl component to label inputs. (63761)

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data

  • Core Data: Mark ‘canUser’ related actions resolvers as resolved. (63435)
  • Core Data: Resolve user capabilities when fetching an entity. (63430)
  • Core Data: Support entities in the ‘canUser’ selector. (63322)
  • Core Data: Support entity queries in the ‘useResourcePermissions’ hook. (63653)

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

  • Update JSON Schemas to Draft 7. (63583)

New APIs

Block bindings

  • Unify getValue/getValues and setValue/setValues APIs. (63185)

Bug Fixes

Data Views

  • DataViews: Do not render bulk actions Dropdown if no actions are available. (63575)
  • DataViews: Fix default layouts in the pages data views. (63427)
  • DataViews: Fix featured image height 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.. (63424)
  • DataViews: Fix field rendering. (63452)
  • DataViews: Fix pattens list selection. (63733)
  • DataViews: Fix uncontrolled selection. (63741)
  • DataViews: Only show elligible actions in the bulk editing menu. (63473)
  • Fix patterns sorting by title. (63710)
  • Fix selected row styles in table layout. (63811)
  • Fix: DataViews: Layout resets for patterns each time a new pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. is selected. (63711)
  • Fix: Inconsistent field spacing in Grid layout. (63363)
  • Templates DataViews: Set the right context for the preview field. (63488)

Block Editor

  • Fix user patterns disabling sync filter. (63828)
  • ImageURLInputUI: Make onSetLightbox and resetLightbox optional. (63573)
  • Pattern Inserter: Fix pagination layout when “Show button text labels” enabled. (63466)
  • Patterns inserter tabs: Temporary disable animated indicator. (63352)
  • Prevent empty void at the bottom of editor when block directory results are present. (63397)
  • Remove double shadow on Inserter category panel when zoomed out. (63516)
  • Tabs: Vertical Tabs should be 40px min height. (63446)
  • Fix mobile styles for inserter pattern and media tab navigation. (63451)
  • useBlockElement: Return null until ref callback has time to clean up the old element. (63565)
  • Remove hint in the Settings tab. (63515)

Block Library

  • Avoid stripping attributes via group block migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. when no layout is specified. (63837)
  • Fix default unit issue for 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.) cloud block. (59122)
  • Footnotes: Register format within the init function. (63554)
  • Image lightbox: Remove duplicate image when lightbox is opened. (63381)
  • Query Loop: Fix ‘block’ scoped variations to get the query defaults. (63477)
  • Query Loop: Fix passing of namespace when selecting from suggested patterns. (63402)
  • Template Part: Add check if create action should be allowed. (63623)
  • Update Inherited Query Loop value from Template Settings changes. (63358)

Site Editor

  • Fix: Error while Calling edit-site getCurrentTemplateTemplateParts selector. (63818)
  • Fix error when duplicating a template part. (63663)
  • Fix: Add Template Modal layout in mobile view. (63627)
  • Make hover block outlines not present in Distraction Free. (63819)
  • Site Editor Navigation Commands: Add permission check. (63798)
  • fix: Wp icon focus issue. (62675)

Zoom Out

  • Don’t automatically show inserter when zoom out mode initiates. (63859)
  • Ensure that we only enter zoom out mode if the experiment is enabled. (63417)
  • Fix crash due to absence of selected block. (63642)
  • Fix vertical toolbar position. (63745)
  • Translate toolbar delete button. (63476)

Components

  • Button: Never apply aria-disabled to anchor. (63376)
  • Revert “Update HeightControl component to label inputs”. (63839)
  • SelectControl: Fix hover/focus color in wp-adminadmin (and super admin). (63855)
  • ToggleGroupControl: Support disabled options. (63450)

Global Styles

  • Disable “Reset styles” button when there are no changes. (63562)
  • Disallow scrolling the block preview. (63558)
  • Ensure root selector (body) is not wrapped in :root :Where(). (63726)
  • Global styles block previews: Fix scaling. (63596)
  • Style variations: Don’t display the default if its the only variation. (63555)

CSSCSS Cascading Style Sheets. & Styling

  • Comments: Allow button element shadows from theme.json. (63790)
  • List: Prevent style bleed into non-List block lists. (63537)
  • Search: Prevent override of global button radii in editor. (63789)

Font Library

  • Add ‘No fonts installed’ message on library tab when fonts aren’t available. (63740)
  • Improve ‘No fonts installed’ state when fonts are installed but not activated. (63533)

Post Editor

  • Allow editing of description only for custom templates. (63664)

Design Tools

  • Background image block support: Fix dropzone size. (63588)
  • Background tool: Fix double border. (63559)

General interface

  • Discussions panel: Distinguish between verb and adjective form of open for internationalization. (63791)
  • Fix canvas issues by removing VisualEditor’s height. (63724)

Block Transforms

  • Block Switcher Preview: Adjust the position and enable pattern list preview in mobile viewport. (63512)

Block bindings

  • Revert triggering multi-entity save panel in post with 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. changes. (63412)

Block Directory

  • Memoize store selectors. (63346)

Inner blocks

  • InnerBlocks: Make sure blockType is set before trying to use it. (63351)

Widgets Editor

  • Widgets: Memoize ‘getWidgets’ store selector. (63338)

Synced Patterns

  • Pattern overrides: Ensure “Reset” button always shows as last item and with border. (63291)

Patterns

  • Fix: Removed shuffle button when only 1 pattern is present. (63093)

Media

  • Lock post saving during image uploads. (41120)

JSON Schemas

  • Prepare JSON schemas for Draft 7 update. (63582)

Security

  • Add: Permission checks to avoid 403 errors on non admin roles. (63296)

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)

Components

  • Align checkbox, radio, and toggle input design. (63490)
  • Fix ComboboxControl reset button when using the keyboard. (63410)

Post Editor

  • Add missing aria-haspopup attribute to the buttons to set and replace the featured image. (63360)

Block Library

  • Show visual label for Categories block in dropdown mode. (56364)

Performance

Components

  • Storybook: Improve TypeScript performance for slow stories. (63388)

Experiments

Grid layout

  • Disable in-between inserter in Manual grids. (63391)
  • Don’t display default appender inside Manual grid. (63395)
  • Fix responsive behaviour so both column start and column span are taken into account. (63464)
  • Better looking block movers. (63394)
  • Place new block after currently selected block when using slash inserter and splitting text. (63333)
  • Move visualizer popover to slot under the canvas. (63389)
  • Don’t remount the block when rendering grid tools. (63557)

Data Views

  • Quick Edit: Support bulk selection. (63841)
  • DataViews: Bootstrap Quick Edit. (63600)

Documentation

  • Add to code requirements install and import Interactivity 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.. (63439)
  • Alpine vs Preact extra explanations. (63593)
  • 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. docs: Update and format. (63830)
  • Create-block – fix – update default folder name to proper default. (63530)
  • DataForm: Add a simple story for the DataForm component. (63840)
  • Fix Typo in Interactivity Api Reference. (63775)
  • Fix typo in Autocomplete component README.md. (63496)
  • FontSizePicker: Fix documentation for default units. (63577)
  • Improve the base control help prop documentation. (63693)
  • JSON Schema Docgen Rework. (63868)
  • Mark unstable__bootstrapServerSideBlockDefinitions with @ignore. (63673)
  • Move entity-provider.js exports into 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./index.ts so they are added to the documentation. (63528)
  • Small Typo in Experiment Page. (63773)
  • Storybook: Remove popover-related height buffers. (63480)
  • Update “Versions in WordPress” page. (63869)
  • Update dataviews documentation. (63860)
  • Update getContext() usage examples with namespace argument. (63411)
  • 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/. reference links in developer documentation. (62818)
  • Update react reference links in package’s readme and doc blocks. (62704)
  • Updated Useeffect URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (63494)

Code Quality

  • Add margin-bottom lint rules for CheckboxControl, ComboboxControl, SearchControl. (63679)
  • Add margin-bottom lint rules for FocalPointPicker, TextareaControl, TreeSelect. (63633)
  • Add margin-bottom lint rules for RangeControl. (63821)
  • Block editor settings: Add missing global styles links dependencies. (63823)
  • Core Data: Remove leftover ‘todo’ comment. (63842)
  • Core Data: Use meta-store actions for resolution status. (63469)
  • core-data: Fix canUser allowed methods handling. (63615)
  • DataViews: Move PostList component to its own folder. (63334)
  • JSON Schema Reorganization and Fixes. (63591)
  • Update: Simplify and do not pass renderingMode on editor SidebarContent. (63814)
  • Use Base Focus Styles for Region Focus. (62881)
  • Use static ‘key’ when filtering BlockEdit components. (63590)
  • Update: Simplify some permission checks. (63812)
  • Use entity details when calling ‘canUser’ selectors. (63415)
  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. API: Backport updates from Core. (63723)

Block Library

  • Image block: Remove unnecessary variables on expand on click implementation. (63290)
  • Image lightbox: Move image data from context to state. (63348)
  • Navigation Submenu: Remove user permission checks. (63720)
  • Query Title block: Rely on the editor store to apply the right archive title placeholder. (63478)
  • Remove unused useSplit after #54543. (63826)

Data Views

  • DataViews: Cleanup preview styles. (63365)
  • DataViews: Move the layouts into a dedicated folder. (63409)
  • DataViews: Refactor to prepare exposing the underlying UI pieces. (63694)
  • DataViews: Remove redundant setSelection prop. (63648)
  • DataViews: Rename onSelectionChange to onChangeSelection. (63087)

Components

  • ColorPicker: Use minimal variant for SelectControl. (63676)
  • Rename Button describedBy prop to description and deprecate old name. (63486)
  • Tabs: Move animation-related utilities into separate utils file. (62946)

Block bindings

  • Don’t provide default canUserEditValue in reducer. (63628)
  • Improve how the context needed by sources is extended in the editor. (63513)
  • Improve the way block bindings sources are registered. (63117)

Post Editor

  • Editor: Remove unused setNestedValue util. (63620)
  • Move useSelectNearestEditableBlock out of src/hooks. (63730)

Font Library

  • Remove unused font library experiment. (63890)

Global Styles

  • Remove unused global styles background screen. (63887)

Widgets Editor

  • 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. Editor: Remove unused values returned from ‘mapSelect’. (63738)

Block API

  • Use wordpress/warning during block registration instead of console.error and console.warn. (63610)

Synced Patterns

  • Quality: Remove “reusable block name hint” code. (63514)

Commands

Document Settings

  • FlatTermSelector: Be more defensive about termIds. (63461)

Site Editor

  • Deprecate ‘getCanUserCreateMedia’ selector. (63413)

Block Directory

  • Remove ‘edit-post’ package dependency. (63349)

Tools

Project Management

  • Issue template: Use checkboxes instead of dropdown. (63523)
  • Sync backport changelog action: Use outputs instead of env. (63792)
  • Run sync when issue is labeled with Sync Backport Changelog. (63793)

Testing

  • Downgrade node 22(.5) unit tests to 22.4. (63728)
  • Font Library: Fix flaky end-to-end tests. (63904)
  • Upgrade Playwright to v1.45. (61443)
  • Bug: Eslint recommended-with-formatting allows for unnecessary spaces. (63549)

Build Tooling & 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

  • Fix broken license check script. (61868)
  • React: Restore umd builds. (63602)
  • Upgrade TypeScript to 5.5. (63012)
  • Scripts: Remove now-obsolete getRenderPropPaths(). (63661)
  • Scripts: Include variations paths in build. (63098)

First-time contributors

The following PRs were merged by first-time contributors:

  • @hectorjarquin: Add to code requirements install and import Interactivity API. (63439)
  • @Sourav61: Fix: Removed shuffle button when only 1 pattern is present. (63093)
  • @tomllobet: Create-block – fix – update default folder name to proper default. (63530)
  • @troychaplin: change: Updated soundcloud icon for social link block. (63504)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamsilverstein @afercia @ajlende @akasunil @amitraj2203 @andrewserong @artemiomorales @barryceelen @carolinan @ciampo @DaniGuardiola @dhananjaykuber @dmsnell @dsas @ellatrix @geriux @hectorjarquin @jameskoster @jasmussen @jeherve @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mattsherman @mirka @noisysocks @ntsekouras @oandregal @ockham @priethor @ramonjd @richtabor @ryanwelcher @SantosGuillamot @scruffian @shail-mehta @sirreal @Sourav61 @stokesman @StyleShit @swissspidy @t-hamano @talldan @tellthemachines @tomllobet @troychaplin @tyxla @up1512001 @widoz @youknowriad


Props to @cbringmann for reviewing this post and @joen for the visual assets!

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