What’s new in Gutenberg 18.2? (24 April)

“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 project (formerly called Full Site Editing).

Gutenberg 18.2 is ready and available for download!

The latest release includes 234 pull requests from 54 contributors, and generally focuses on polishing features, and addressing bugs. Significant activity has also been directed towards improving documentation and code quality.

We extend a warm welcome and thanks to four new first-time contributors! 🎉

Improve Pattern Overrides Experience

Gutenberg 18.2 refines the flow of turning pattern overrides on and off. It introduces a new DisallowOverridesModal for easier interaction. The solution removes complexity by focusing on a more intuitive workflow, including a modal confirmation when disallowing overrides and pre-populated names for quicker re-enablement. Through consistent interaction, we aim to simplify the user experience. (60769)

Enabling Template Preview in the Post Editor for Non-Administrators

We aim to enhance collaboration and flexibility in WordPress. By changing the rules for template previews, we now allow users with lower roles, like Editor, to view and switch between templates. This update resolves a previous issue by permitting non-administrators to see templates while editing content. (60447)

Site Editor: Support Starter Patterns

When creating a new post or page in the site editor, a modal window allows users to choose a pattern to kickstart their layout and design flow. This feature was previously only available in the post editor. (60745)

Simplify Template Reset Language

A frequent observation from previous outreach: 

Why are “clear customizations” for a template in a different place (in the title area) and named differently from “reset defaults” for styles?

The term “Clear customizations” was changed to “Reset,” with label updates to maintain consistency across the Site Editor and Command Palette. This change aims to improve clarity and reduce confusion for users performing template resets. The updated terminology aligns with other languages throughout the editorial experience, making the process more intuitive. (60256)

Other Notable Highlights

  • Animation improvements – subtle easing can make a huge impact
    • Adjust frame animation profile. (60589)
    • Animate the radius of the frame. (60415)
    • Improve 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. animation. (60408)
    • Editor: Animate opening and closing editor right 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.. (60561)
    • Editor: Animate the inserter and list view panels. (60665)
  • Post Editor: Update publish flow (60456)

Changelog

Full changelog available
  • Bump minimum required PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher version to 7.2 (60714)

Enhancements

Site Editor

  • Add rename and 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. actions to page panel. (60232)
  • Adjust frame animation profile. (60589)
  • Animate the radius of the frame. (60415)
  • Create router adapter for sidebar. (60466)
  • Improve the header animation. (60408)
  • Index view for Templates & Parts: Use grid layout as default. (60069)
  • Pages: Display content frame in mobile when canvas is not edit. (60409)
  • Simplify template reset language. (60256)
  • Template parts in patterns page: Add author field. (60372)
  • Template parts: Set backpath to patterns page. (60667)
  • Update hub markup and animation. (60410)
  • Update site hub action positioning. (60511)

Components

  • CustomSelectControlV2: Support disabled in item types. (60896)
  • ExternalLink: Replace icon with unicode arrow. (60255)
  • InputBase: Simplify focus styles. (60226)
  • ProgressBar: Moved width to css var for perf. (60388)
  • SlotFill: Replace valtio with custom ObservableMap. (60879)
  • Tabs: Fallback to first enabled tab if no active tab Id. (60681)
  • Text: Add text-wrap: Pretty. (60164)
  • Try: Reduce checkbox size in data views. (60475)

Post Editor

  • Confirm dialog: Use more descriptive text for the confirm button. (60364)
  • Editor: Add wordcount and reading time info in post card. (60672)
  • Editor: Animate opening and closing editor right sidebar. (60561)
  • Editor: Animate the inserter and list view panels. (60665)
  • Editor: Update post URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org component. (60632)
  • Editor: Use the ‘ConfirmDialog’ component in template validation notice. (60385)
  • Enable template preview in post editor for non administrators. (60447)
  • Support insert before/after keyboard shortcuts when focus is within the list view. (60651)
  • Update publish flow. (60456)

Patterns

  • Add a “All Template Parts” section. (60775)
  • Back Compatback compat Backward compatibility - a desire to ensure that plugins and themes do not break under new releases - is a driving philosophy of WordPress. While it is a commonly accepted software development practice to break compatibility in major releases, WordPress strives to avoid this at all costs. Any backward incompatible change is carefully considered by the entire core development team and announced, with affected plugins often contacted. It should be noted that external libraries, such as jQuery, do have backward incompatible changes between major releases, which is often going to be a greater concern for developers.: Add Patterns submenu for WordPress 6.4. (60804)
  • Patterns page: Add edit & view revision actions to parts. (60659)
  • Remove “Template parts” sidebar group. (60359)
  • Site Editor: Support starter patterns. (60745)

Synced Patterns

  • Adjust allow pattern overrides UXUX User experience flow. (60769)
  • Consolidate “bound 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.” color and “synced” colors. (60617)
  • Improve override indication for editable blocks in synced patterns. (60599)
  • Refine rename flow for blocks with overrides. (60234)

Zoom Out

  • Adjust block selection button. (60348)
  • Animation: Avoid fixed width when animating the secondary sidebar. (60693)
  • Introduce section container selection when assembling patterns (zoom out mode). (59249)
  • Update zoom out scale. (60618)

Block Library

  • Add loading state on image upload in 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., Site logo and Cover blocks. (59519)
  • File: Use HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. 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. to update the PDF preview label. (60494)
  • Navigation block: Add current-menu-item class for post type archive. (57808)
  • Remove block renaming control from advanced inspector controls group. (60453)

Data Views

  • Add ability to display fields as a badge in grid layout. (60284)
  • Data views table row: Make checkboxes and actions visible on touch devices. (60829)
  • DataViews: Make the experiment about custom views. (60813)

Layout

  • Add a Row control to grid layout in manual mode. (60652)
  • Apply negative margins for alignfull children of blocks with custom padding set. (60716)
  • Try reducing specificity of layout style selectors. (60228)

Block Editor

  • Remove animation from InlineLinkUI. (60575)
  • Remove root appender. (60697)
  • Try: Add new textAlign block support. (59531)

Global Styles

  • Background image: Display default background size value in global styles. (60490)
  • Background UIUI User interface control labels. (60264)
  • Use text and button background color for color indicators. (59514)

Font Library

  • Change Spinner to ProgressBar component. (60570)

Interactivity API

  • Include preact/debug when SCRIPT_DEBUG is enabled. (60514)

New APIs

Extensibility

  • Editor: Support PluginPostStatusInfo Slot in the site editor. (60814)
  • Editor: Unify PluginMoreMenuItem API between post and site editors. (60778)
    • Fix: Use coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. instead of core/editor on normalizeComplementaryAreaScope. (60821)
  • Editor: Unify PluginSidebarMoreMenuItem. (60853)
  • Editor: Unify the PluginSidebar slot between post and site editors. (60815)

Bug Fixes

  • Fix: Add types to useSuspenseSelect. (60733)
  • Fix experimental useHasRecursion deprecation. (60451)
  • Fix translatable string in pagination modal. (60742)
  • Interactivity: Return useMemo and useCallback 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.. (60474)
  • Only show block icon in toolbar for contentOnly blocks when block is a synced block. (60647)
  • Patterns: Guard for unknown pattern in server-side resolver. (60464)
  • Snackbar: Make the explicitDismiss string translatable. (60368)
  • Update standardisation of ‘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.’ to have both words capitalised in user-facing menus. (60262)
    • Standardise capitalisation of Navigation Menu in sidebar. (60527)

Block Library

  • Embed: Avoid retrying valid URLs. (60655)
  • File: Mark update for setting default label as non-persistent. (60492)
  • Fix don’t close overlay menu when focus leaves submenu. (60406)
  • Fix pattern block recursion handling. (60452)
  • Image: Fix cropper resize on align change (reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-easy-crop upgrade). (60581)
  • Latest Posts: Remove wrapper div and apply consistent class. (60728)
  • List: Disable edit as HTML support. (55656)
  • Media & Text: Hide the alt text option for featured images. (60496)
  • Post title: Re-add the paragraph level (without UI). (60548)
  • Pullquote: Reduce specificity of padding rule to avoid conflicts with global styles. (60649)
  • Separator block: Reduce default border styles to avoid conflicts with global styles. (60740)

Site Editor

  • Chore: Fix missing comma on welcome guide styles. (60596)
  • Fallback to URL when site title is empty. (60885)
  • Fix activating a theme in site editor when previewing. (60699)
  • Fix site icon animation. (60419)
  • Fix small 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. on the resize handle. (60427)
  • Fix the removePropertyFromObject function throws an error if the object is null. (60831)
  • Fix: Style issue on page actions button. (60592)
  • Pattern page: Fix deps for onActionPerformed useCallback. (60784)
  • Remove outdated border radius animation. (60454)
  • Router: Load proper sidebar for /wp_template. (60850)
  • [Site Editor]: Fix ability to edit trashed pages. (60236)

Post Editor

  • Editor: Do not render publish time and post status panels in design post types. (60857)
  • Editor: Fix post status label styles for low-capability users. (60854)
  • Fix display of shortcut to add non breaking space in the post editor. (60625)
  • Fix: Action button alignment on details panel. (60773)
  • Fix: Action order is different from inspector and dataviews. (60877)
  • Fix: Do not show pattern and template actions on the post editor. (60568)
  • Fix: Missing items parameter and or missing onActionPerformed calls. (60753)
  • Fix: Trash Post action and permanently delete post action do not show errors on single item. (60597)
  • Post Editor Header: Make block toolbar toggle button focus visible. (59781)

Block Editor

  • Avoid errors when a block variation icon is an object. (60766)
  • Fix external link indicator in Link Control. (60439)
  • Fix for isPossibleTransformForSource handling selecting inexistent block. (59410)
  • Fix stuck dragging mode in UI in Firefox when dealing with deeply nested lists. (60845)
  • Prevents delete key from undoing automatic changes. (60858)
  • Raw Handling – msListIgnore – Check attributes are valid. (60375)

Data Views

  • DataViews: Fix typing in combobox 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.. (60819)
  • Fix default layout configuration in pages list. (60407)
  • Fix pattern titles. (60640)

Zoom Out

  • Don’t allow shuffle for locked patterns. (60381)
  • Prevent exiting Zoom Out mode from stealing focus. (60441)
  • Respect reduced motion when engaging zoom out mode. (60808)

Font Library

  • Avoid overriding custom settings on font library save. (60438)
  • Fix modal scrollbar. (60641)
  • I18Ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: Add context to ‘Library’ string. (60520)

Components

  • Fix link control link preview when it displays long URLs. (60890)
  • ProgressBar: Fix CSSCSS Cascading Style Sheets. variable with 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. value. (60576)

Layout

  • Always add semantic classes. (60668)
  • Don’t output base flow and constrained layout rules on themes without 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.. (60764)
  • Fix responsive column span logic on the front end. (60976)
  • Restore classic auto margin rule to its previous specificity. (60802)

Interactivity API

  • Allow multiple event handlers for the same type with data-wp-on. (60661)
  • Update the query block to permit non-core interactive blocks. (60006)

Templates API

  • Fix static posts page setting resolved template. (60608)
  • Fix: Honor ‘template_hierarchy’ filters on template fallbacks. (60377)

Distraction Free

  • Only show inserter in document tools if DFM is off. (60426)
  • Remove alpha from edit post header. (60431)

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

  • Fix PHP notice triggered by ‘gutenberg_update_initial_settings’. (60862)

Global Styles

  • Editor styles: Delete duplicate backwards compat CSS custom properties. (60400)
  • Fix browser warning regarding highlight colors. (60555)

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)

  • Details Block: remove overflow:Hidden style. (60270)
  • Do not render pattern aria description if not button is rendered. (60653)
  • Fix inserter pattern pagination focus loss. (60620)
  • Make sure Social icons links aren’t empty and improve UI clarity. (60047)

Performance

  • Add null check to prevent errors in get_block_template filter. (60491)
  • Block preview: Build in async rendering. (60425)
  • Editor canvas: Reduces resize listeners. (60682)
  • Layout support: Avoid two block editor store subs. (60612)
  • Optimize the rendering of the EditorStyles component. (60493)
  • Post Title: Avoid accidental types requests. (60531)
  • Preview: Skip rendering rich text. (60544)
  • Previews: Avoid unneeded block selectors. (60543)
  • Site Editor: Close the editor sidebar by default. (60820)
  • Zoom-out: Scale should be stable function. (60580)
  • getEntityRecords: Batch actions. (60591)

Block Library

  • Avoid calling getBlocks selector for navigation link blocks. (60458)
  • Image cropper: Remove clientWidth prop with useResizeObserver. (60674)
  • Navigation block: Avoid selector + style recalc on mount. (60572)
  • Pattern block: Avoid fetching all reusable blocks on mount. (60310)
  • Post Featured Image: Optimize store subscriptions. (60770)

Site Editor

  • Optimize the AddTemplate component used in data views pages. (60586)
  • Sidebar slide animation: Replace motion.div with CSS animation. (60849)

Documentation

  • Add AutosaveMonitor component JSDoc and populate README with auto-gen documentation. (60882)
  • Add documentation for disableLineBreaks property of RichText. (56284)
  • Added Documentation for PostExcerptCheck. (60864)
  • Added links to related components. (60726)
  • Correct link to the theme json reference. (60517)
  • DimensionControl: Fix story configuration. (60703)
  • Docs: Fix typos in interactivity API reference. (60870)
  • Docs: Update wording in Block Editor Handbook to reflect that all examples now use JSX. (56315)
  • Fix: Grammar typo on packages/dataviews/src/search-widget.js. (60588)
  • Fix: Link to the block building tutorial. (60518)
  • Fixes a link to the getEntityRecord documentation. (60823)
  • Improve documentation for block variation isActive property. (60801)
  • Update: Hardcoded documentation link to a 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". that does not exist. (60671)
  • Update: Reference editor scope instead of edit-site, edit-post on interface package documentation. (60818)
  • [Create Block] Adding documentation for the transformer property. (60445)

Code Quality

  • Added @return after @global in php doc. (60611)
  • Blocks: Remove client-side polyfill for ‘selectors’. (60846)
  • [Block Bindings] Don’t use hooks. (60724)
  • Chore: Fix: Wrong JSDOC for an action return. (60786)
  • Chore: Simplify some CSS margin rules. (60816)
  • Editor: Serve as a proxy for the interface package. (60748)
  • Editor: Unify the auto-switch sidebars behavior. (60869)
  • Editor: Unify the keyboard shortcuts modal. (60866)
  • Editor: Unify the names of the sidebars between edit post and edit site. (60856)
  • Editor: Unify the preferences modal name. (60871)
  • Fix: Remove unused CSS for TemplatePartHint. (60852)
  • Fix: Remove unused css from page panels styles. (60774)
  • Fix: Font Library typo. (60751)
  • Fix: Remove unused CSS code from the site editor. (60662)
  • Interactivity API refactor to TypeScript (utils & kebabToCamelCase). (60149)
  • Reexport createSelector from data package. (60370)
  • Refactor: UseBlockTools cleanup. (59450)
  • Remove comment that no longer applies about appearance-tools support. (60844)
  • Reuse and unify post and page actions, accross the different use cases. (60486)
  • Test: Validate block & theme json. (57374)
  • Tests: Shard JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. unit tests. (60045)
  • Tests: Share JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. build assets across PHP workflows. (60428)
  • Update: Avoid two useSelect calls on PostActions. (60752)
  • Update: Make content locking related selectors private. (60827)
  • Update: Move template actions to the editor store. (60395)
  • Update: Remove keyCode usage from dataviews package. (60585)
  • Update: Use util getVariationClassName instead of computing the variation inline. (60664)

Components

  • Deprecate reduceMotion util. (60839)
  • Navigation: Soft deprecate component. (59182)
  • NavigatorProvider: Move the same-location check to the goTo function. (60767)
  • ObservableMap: Optimize unsubscribe and add unit tests. (60892)
  • Remove CSS hack for Internet Explorer 11. (60727)

Post Editor

  • Editor: Optimize the ‘PostSlug’ component. (60422)
  • Editor: Use hook instead of HoC in ‘ThemeSupportCheck’. (60807)
  • Editor: Use hooks instead of HoCs in ‘PostTrashCheck’. (60380)
  • [Editor]:Get post content in PostContentInfo component. (60743)

Data Views

  • DataViews: Remove onDetailsChange event. (60387)
  • Rename displayAsColumnFields to columnFields API. (60504)
  • Simplify visually hidden label. (60835)

Block Editor

  • Refactor Link UI States. (59762)
  • Switching pattern categories inserter to Tabs component with arrow key navigation. (60257)

Tools

  • Update @talldan in codeowners file, remove from edit-widgets package. (60800)

Testing

  • Add end-to-end test for activating themes in site editor. (60707)
  • Automated Testing: Update end-to-end test npm commands. (60376)
  • Fix flaky Site Editor URL navigation end-to-end test. (60675)
  • PHP unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. workflow: Try removing 7.0 and 7.1. (60686)
  • Perf: Improve way we measure template loading by adding posts. (60516)
  • Performance Tests: I’m tired of doing head math 😊. (60509)
  • Upgrade Playwright to v1.43. (60635)
  • tip: Remove unecessary delay in tests except where needed. (60897)

Build Tooling

  • Dependencies: Upgrade babel. (57311)
  • Upgrade simple-git dependency. (59915)
  • Update Typescript to 5.4.5. (60793)

First-time contributors

The following PRs were merged by first-time contributors 👏

  • @asheshmagar 🏅 Font library: Fix typo. (60751)
  • @DaniGuardiola 🏅ProgressBar: Moved width to CSS var for performance. (60388)
  • @garridinsi 🏅 Interactivity API refactor to TypeScript (utils & kebabToCamelCase). (60149)
  • @xhemals 🏅 Update standardization of ‘Navigation Menu’ to have both words capitalized in user-facing menus. (60262), Standardise capitalization of the Navigation Menu in the sidebar. (60527)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewserong @arthur791004 @artpi @asheshmagar @atachibana @carolinan @colinduwe @colorful-tones @DaniGuardiola @DAreRodz @draganescu @ellatrix @fabiankaegy @flexseth @garridinsi @geriux @getdave @ixkaito @jameskoster @jasmussen @jeryj @johnhooks @jorgefilipecosta @jsnajdr @kevin940726 @Mamaduka @matiasbenedetto @mhkuu @mikachan @mirka @noisysocks @ntsekouras @oandregal @ocean90 @okmttdhr @prajapatisagar @ramonjd @richtabor @ryanwelcher @scruffian @shail-mehta @shimotmk @simonhammes @sirreal @Soean @sunil25393 @t-hamano @talldan @tellthemachines @tyxla @xhemals @youknowriad

Props to @joen, @priethor and @bph for assisting with the preparation of this post and @vcanales, @mcsf, and @dmsnell for supporting me through my first Gutenberg release.

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