What’s new in Gutenberg 17.2? (6 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 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 Site Editor project (formerly called Full Site Editing).



Gutenberg 17.2 has been released and is available for download! This release includes a few improvements for the Site Editing experience — including the ability to drag and drop to the top and bottom of the document and sticky table headers —, improvements to the 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. docs, and a lot of Bug fixes and other improvements. Let’s take a closer look!

  1. Allow dragging and dropping onto the beginning and end of a document.
  2. Sticky table headers and pagination.
  3. Toolbar for the Distraction-Free Mode
  4. Other notable highlights
  5. Changelog
  6. Contributors

Allow dragging and dropping onto the beginning and end of a document.


Improves the experience of dragging and dropping Blocks onto the very top and/or bottom of the document by virtually enlarging the area — this doesn’t have a visual impact on the rest of the editing experience or on the front end, and makes it a much less finicky experience! (#56070)

Sticky table headers and pagination.


These provide extra context when scrolling down on large datasets, saving us from scrolling back up every time we inevitably forget what each column is supposed to contain, or which page you’re currently looking at. (#56157)

Toolbar for the Distraction-Free Mode


The 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. Toolbar will now slide into view by moving your mouse to the top of the editor when using Distraction-Free mode. (#56295)

Other notable highlights

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data 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.: Extend support to other post types. (#56353)
  • Render htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. in post titles in visual mode and edit HTML in post title in code view. (#54718)
  • Interactivity API: Use modules instead of scripts in the frontend. (#56143)

Changelog

Features

Modules API

  • Interactivity API: Use modules instead of scripts in the frontend. (56143)

Enhancements

  • Add translator comments for strings containing date formats. (56531)
  • Block Theme Preview: Display the theme name on the activate button. (55752)
  • Core data revisions: Extend support to other post types. (56353)
  • Improve tooltip for parent blocks on the block toolbar. (56146)
  • Simplify template author token. (56566)
  • Style engine: Allow CSSCSS Cascading Style Sheets. var output for fontSize and fontFamily and update documentation. (56528)
  • Try: Change “Detach pattern” to “Detach”. (56323)
  • useEntityRecord: Improve unit tests. (56415)

Components

  • Add focus rings to focusable disabled buttons. (56383)
  • DropdownMenu V2 tweaks. (56041)
  • DropdownMenu V2: Add support for rendering in legacy popover slot. (56342)
  • FormToggle: Refine animation. (56515)
  • Slot: Add styles prop to bubblesVirtually version. (56428)
  • Tabs: Cleanup and improvements. (56224)
  • Try Ariakit Select for new CustomSelectControl component. (55790)

Block Editor

  • Block Settings: Only display parent block selector on small screens. (56431)
  • Drag and drop: Allow dragging to the beginning and end of a document. (56070)
  • List View: Expand state if a block is dragged to within a collapsed block in the editor canvas. (56493)

Data Views

  • Data list view: Make 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. row, 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., and pagination sticky. (56157)
  • Simplify dataviews view button. (56485)
  • Update data view menu item actions. (56398)

Global Styles

  • Global style revisions: Redesign style revision items. (55913)
  • Global styles revisions: Migrate API call to getRevisions(). (56349)
  • Style Revisions: Remove style revisions dropdown menu. (56454)

Site Editor

  • Add ‘View site’ action to ‘Site updated’ snackbar. (52693)
  • Add the Post Author component to the Page 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.. (56368)
  • Redirect to main page menu if page record not found. (56177)

Layout

  • Add layout classes to legacy Group inner container. (56130)
  • Add setting to disable custom content size controls. (56236)

Patterns

  • Small tweaks to CreatePatternModal. (56016)
  • Update Labels in Block Inserter (block patterns tab). (55986)

Icons

  • Update 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. icon. (56569)

Block Library

  • Disable block renaming support for Nav Link block. (56425)

Distraction Free

  • Add top toolbar to distraction free mode. (56295)

CSS & Styling

  • Gallery Block: Use styled scrollbars for image captions. (56252)

Typography

  • Font Library: Remove insecure properties. (56230)

New APIs

  • Revisions: Add new selectors to fetch entity revisions. (54046)

Interactivity API

  • MigrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. to the new store() API. (55459)

Bug Fixes

  • Core data: Harmonize getRevision selector and resolver function signatures. (56416)
  • Editor styles: Scope without adding specificity. (56564)
  • Fix Restore Post title placeholder. (56580)
  • Post Schedule Panel: Remove text overflow ellipsis. (56319)
  • Rich text: Pad multiple spaces through en/em replacement. (56341)
  • Site Editor: Add a fallback template showing the title and content for the post only mode. (56509)
  • useEntityRecord: Do not trigger 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/. requests when disabled. (56108)

Block Editor

  • (RichText)(Workaround)(17.1.x) Fallback to a string arg in collapseWhiteSpace() if value is not a string. (56570)
  • Cover block: Pass dropZoneElement reference to fix dragging within cover block area. (56312)
  • PostCSS style transformation: Fail gracefully instead of throwing an error. (56093)
  • Undeprecate the ‘__experimentalImageSizeControl’ component. (56414)
  • useMovingAnimation: Clear translate3d rule when animation is finished. (56410)

Block Library

  • File block: Remove anchor 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.) when copy pasting to file name. (56508)
  • Fix label of columns inspector panel. (56647)
  • Post Template: Fix incorrect offset query. (56440)

Components

  • Design Tools: Fix last ToolsPanelItem styling. (56536)
  • Fix FormTokenField suggestions broken scrollbar when __experimentalExpandOnFocus is defined. (56426)
  • Tabs: Fix flaky unit tests. (55950)

Global Styles

  • Additional CSS: Fix on change validation. (56434)
  • Global styles revisions: Update isResolving flag. (56491)
  • Spacing: Fix block error if spacing unit array empty in 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.. (56306)

Post Editor

  • Editor: Fix issue where createBlock in block template caused list view collapse. (56666)
  • Save post button: Avoid extra re-renders when enablng/disabling tooltip. (56502)

CSS & Styling

  • Reduce specificity of default Cover text color styles. (56411)
  • Restore Post Title visual styles in Code View mode. (56582)

Site Editor

  • Fix template resolution for templates assigned as home page. (56418)
  • Site Editor Sidebar: Fix actions vertical alignment. (56218)

Modules API

  • Modules: Fix import map polyfill not being copied on the generated 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 ZIP. (56655)

Saving

  • Editor: Reinstate anonymous callback for saved post state. (56529)

Plugin

  • Update Readme.txt tested up to 6.4. (56427)

Patterns

  • Fix issue with template in replace template screen. (56407)

Layout

  • Fix issue where layout classnames are injected for blocks without layout support. (56187)

Typography

  • Font Library: Fix fonts not displaying correctly. (55393)

Colors

  • Duotone: 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. from Core to fix filters in classic themes. (54778)

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)

Data Views

  • DataViews: Make disabled pagination buttons focusable. (56422)

Block Library

  • Image Block: Enable image block to be selected correctly when clicked. (56043)

Block Editor

  • Tooltip: Don’t render buttons tooltip when show button text labels is enabled. (55842)

Components

  • Improve Button saving state accessibility. (55547)

Patterns

  • Fix focus loss after converting to a synced pattern. (55473)

Site Editor

  • Migrating StyleBook to use updated Composite implementation. (55344)

Performance

  • Avoid calling postcss when not needed. (56601)

Block Editor

  • Optimize ‘Connections’ inspector controls. (56443)

Global Styles

  • Make search more responsive for block type list. (56139)

Experiments

Data Views

  • DataViews: Document view.layout. (56637)
  • DataViews: Extract common constants to file. (56251)
  • DataViews: Rename InFilter component to FilterSummary. (56506)
  • DataViews: Scope names of V2 UIUI User interface components. (56503)
  • DataViews: Update field API to generate filters based on type. (55996)
  • DataViews: Update filter component. (56110)
  • Dataviews: Add confirmation step before deleting a page. (56504)
  • Dataviews: Add preview and grid view in templates list. (56382)
  • Dataviews: Grid layout refinements. (56441)
  • Dataviews: Remove link from author. (56467)
  • Dataviews: Update item actions in grid view. (56501)
  • Fix data view menu item radius. (56395)

Post Editor

  • Render html in post titles in visual mode and edit HTML in post title in code view. (54718)

Documentation

  • Add the attributes definition page to the create block tutorial of the platform documentation. (56429)
  • Add the transforms page to the create block tutorial of the platform documentation. (56559)
  • Add thee block supports page to the create block tutorial of the framework docs. (56483)
  • Added clarifications and examples to “Get started with wp-scripts”. (56298)
  • Block Editor: Fix typo in URLInput‘s onKeyDown prop documentation. (56322)
  • Bring back non-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. tabs in block editor handbook. (56561)
  • Docs: Fix incorrect build script description in script package. (56332)
  • Docs: Fundamentals of Block Development – File structure of a block. (56551)
  • Docs: Fundamentals of Block Development – Registration of a block. (56334)
  • Docs: Fundamentals of Block Development – The block wrapper. (56596)
  • Docs: Fundamentals of Block Development – Working with 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/. in the Block Editor. (56553)
  • Docs: Fundamentals of Block Development – block.json. (56435)
  • Docs: Improve downloadBlob example. (56225)
  • Documentation – Block Editor Handbook – Add end user documentation about Block Editor as a resource on the Landing Page of the Block Editor Handbook. (49854)
  • Fix overly complex code example in ComboboxControl readme. (56365)
  • Fix version in useSetting deprecation notice. (56377)
  • Fundamentals block development – landing and first pages. (56584)
  • Fundamentals of Block Development – fix save definition. (56605)
  • Interactivity API: New store() API documentation. (56764)
  • Interactivity API: Update TS/JSDocs after migrating to the new store() API. (56748)
  • Link preview image to live example using WordPress Playground. (56292)
  • NavigableContainers: Fix doc typo in onKeyDown prop. (56352)
  • Release docs: Add new section about troubleshooting the release. (56436)
  • Remove all {% codetabs %} instances and any vanilla JS references. (56121)
  • Simplify code example in ToggleControl component readme. (56389)
  • Text and Heading: Improve documentation around default values and truncation logic. (56518)
  • Theme JSON schema: Add heading/button key to color definition. (55674)
  • Update for 6.4.1 for versions in WP. (56216)
  • Update references to the gutenberg-examples repo to the new block-development-examples. (56119)
  • Update template name in create-block command. (56281)
  • Update webpack options for wp-scripts in README.md. (56314)
  • BoxControl: Update story and refactor to Typescript. (56462)

Code Quality

  • Blocks pkg: Remove ‘browser’ dependencies. (56433)
  • DataViews: Code Quality remove some unused props from action. (56477)
  • Editor: Move the template focus modes to the editor store. (56472)
  • Extract a PostPanelRow component from the different sidebar panels. (56238)
  • Interactivity API: Add missing changelog entry for the new store() API. (56611)
  • Move the DisableNonContentBlocks component to the editor package. (56423)
  • Post Schedule Panel: Fix Sass deprecation warning for division. (56412)
  • Remove compatibility layer for WP 6.2. (56464)
  • Unify the PostSchedule component between site and post editors. (56196)
  • Update: Refactor useAddedBy to use authorText and originalSource fields. (56568)

Block Library

  • Add align support to the image block – alternative. (55954)
  • Backmerge block renaming fixes/refactors from 6.4 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". into Gutenberg trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (56386)
  • Pattern placeholder: Remove duplicate ‘useDispatch’ hook. (56397)

Components

  • Remove incorrect version from deprecated __nextHasNoMarginBottom prop of AnglePickerControl Component. (56336)
  • Revert “DropdownMenu V2: Add support for rendering in legacy popover slot”. (56484)

Block Editor

  • Migrating block editor BlockPatternsList component. (56210)
  • useInnerBlocksProps: Stabilise dropZoneElement prop. (56313)

Data Views

  • Dataviews: Ensure items and fields are using a unique id. (56366)

Design Tools

  • Fix: Theme.json font settings in 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.. (56309)

Tools

  • Workflows: Update ‘days-before-stale’ for flaky test report issues. (56585)
  • scripts: Update jest-dev-server to v9. (56552)

Testing

  • Dataviews: Add first end-to-end tests. (56634)
  • Migrate ‘align hook’ end-to-end tests to Playwright. (56480)
  • Migrate ‘block directory’ end-to-end tests to Playwright. (56593)
  • Migrate ‘block icons’ end-to-end tests to Playwright. (56610)
  • Migrate ‘custom taxonomies’ end-to-end test to Playwright. (56486)
  • Migrate ‘sidebar permalink’ end-to-end tests to Playwright. (56253)
  • Migrate Is Typing Test to Playwright. (56616)
  • Page spec: Merging create page and toggle preview tests. (56129)
  • Playwright Utils: Fix the method of getting post ID in ‘publishPost’. (56421)
  • end-to-end tests: Merge Puppeteer into single job, split Playwright further. (56363)

Build Tooling

  • Add missing labels to changelog script, and enhance mapping function. (55066)
  • Create block: Update interactive-template to the new store() API. (56613)

Security

  • WP_Theme_JSON_Gutenberg: Add nested indexed array schema sanitization. (56447)

Various

  • Add: Author text and original source to wp_template_part. (56567)

Data Views

  • Dataviews: All Templates: Add filters to template author. (56338)
  • Dataviews: All templates: Add: Sorting to template author and add author_text to the rest API. (56333)

Block Editor

  • Migrating BlockPatternSetup to use updated Composite implementation. (55425)
  • Migrating InserterListbox to use updated Composite implementation. (56246)

HTML API

  • Backport updates from Core. (56578)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewhayward @andrewserong @annezazu @apeatling @arthur791004 @bph @brookewp @chad1008 @chiilog @ciampo @DAreRodz @dmsnell @draganescu @ellatrix @fabiankaegy @flootr @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @jameskoster @jasmussen @jeryj @jffng @jorgefilipecosta @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @megane9988 @NekoJonez @ntsekouras @oandregal @ramonjd @richtabor @ryanwelcher @SavPhill @Soean @t-hamano @talldan @tellthemachines @vcanales @youknowriad @zaguiini

Many thanks to @annezazu for the assist when publishing the plugin, @jameskoster for designing graphics for this post, and @draganescu, @ramonjd, @scruffian and @cbravobernal for gathering highlights!

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