What’s new in Gutenberg 17.1 (22 November)

“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.1 has been released and is available for download!

The latest release includes several new enhancements, loads of 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, and continued work on Phase 3 features.

  1. Improvements to accessibility and writing flow
  2. Design tools: block spacing for Quote block
  3. Other notable highlights
  4. Changelog
  5. First-time contributors
  6. Full contributor list

Improvements to 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) and writing flow

There are a few improvements that contribute to a better editing experience:

  • The Image and Media&Text blocks properly show the pressed state for the link button in 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 (56123).
  • The buttons block now mimicks the list behavior: enter twice on the last button goes to the next line (56134).
  • New keyboard shortcut in the list view (CMD+A on Mac, CTRL+A on Windows) to select all blocks (54899).
Video showing how media blocks now show a toggled link button when linked, pressing Enter twice in the buttons block to escape it, and pressing CMD+A successively to expand the selection range.

Design tools: block spacing for Quote block

The Quote block has gained support for layout and so it’s now possible to control the spacing of its inner blocks (56064).

New block spacing control in the quote block.

Other notable highlights

  • Escape on Block Toolbar returns focus to Editor Canvas (55712).
  • Continue polishing the 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.: return the user to the editor and global styles panel after a revision is applied (55881), improve copy text (55868), load unsaved revision in the preview (55880).
  • Patterns: in the front-end, they show embeds (55979), and the site editor’s pattern page now shows theme patterns specified in theme.json (55877).

Changelog

See full changelog.

Enhancements

Block Library

  • Navigation block: Fix Inaccurate description of the Show icon button setting. (55429)
  • 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.: Add accessibility markup at the end of the loop in all cases. (55890)
  • Template Part: Add fallback to the current theme when not provided. (55965)
  • Update components to use __next40pxDefaultSize. (56022)

Components

  • Tabs: Improve focus behavior. (55287)
  • Tabs: Update subcomponents to accept full HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element props. (55860)
  • TextControl: Add opt-in prop for 40px default size. (55471)
  • ToggleGroupControl: Add opt-in prop for 40px default size. (55789)

Patterns

  • Move “Manage patterns” below “Detach pattern”. (56018)
  • Show theme patterns from directory in site editor. (55877)

Global Styles

  • Global Style Revisions: Ensure consistent back button behaviour. (55881)
  • Global Styles Revisions: More descriptive text timeline. (55868)
  • Global styles revisions: Add route for single styles revisions. (55827)

Block Locking

  • Block Quick Navigation: Truncate text. (56142)

Block Editor

  • Button block: Support double enter to skip to default block. (56134)

Design Tools

  • Add block gap support to Quote block. (56064)

Post Editor

  • “Detach” text change in template options. (55870)

Site Editor

  • Site editor: Add edit page slug field. (55767)

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.

  • Server directive processing: Process only root blocks. (55739)

Block settings menu

  • Remove the extraneous template part title in replace control. (55603)

List View

  • Add keyboard shortcut to select all blocks. (54899)

New APIs

  • Download blob: Remove downloadjs dependency. (56024)

Bug Fixes

Block Library

  • Background Image Support: Hide the background image reset button when there’s no image. (55973)
  • Background image support: Fix focus loss when resetting background image. (55984)
  • Custom Link: Decode value in URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input field. (55549)
  • Fix lightbox trigger styles. (55859)
  • Form block: Use type="submit" for buttons. (55690)
  • Image block: Add check for lightbox values during image 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.. (56057)
  • Image block: Don’t show pointer cursor on linked image in the editor. (55882)
  • Lightbox: Fix button misalignment in gallery image. (56060)
  • Lightbox: Fix close button position. (56125)
  • Missing block: Use raw source for originalContent. (56014)
  • Navigation Link block: Register variations on post type / taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. registration. (54801)
  • Pattern: Fix 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. error in post type templates. (55858)
  • Pattern: Process embeds. (55979)
  • Post feature image block: Wrap images with hrefs in an A 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.). (55498)
  • Quote Block: Fix the Quote block layout supports. (55240)
  • Read More block: Reduce text decoration specificity. (56038)

Data Views

  • DataViews: Add missing key to ResetFilters component. (56189)
  • DataViews: Fix issue with irrelevant statuses. (55967)
  • DataViews: Fix nested button tags on 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.. (56089)
  • DataViews: Fix pagination on manual input. (55940)
  • DataViews: Fix spacing issue in top-level bar. (56151)
  • DataViews: Fix status 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. upon switching the default views from the sidebar. (55856)
  • DataViews: Make items per page an even number. (55906)
  • DataViews: Make used taxonomy private. (55918)
  • DataViews: Reset pagination upon filter change. (55797)
  • Dataviews: Add a missing icon for the side by side view. (55925)

Components

  • DropdownMenu: Remove extra vertical space around the toggle button. (56136)
  • DropdownMenuV2: Prevent default on Escape key presses. (55962)
  • DropdownMenuV2: Use the Icon component to render radio checks. (55964)

Typography

  • Fix fatal error in WP_Fonts_Resolver::Get_settings(). (55981)
  • Font Library: Create fonts dir if a font face needs to use the filesystem. (56120)
  • Font Library: Fix font installation failure. (55893)

Block Editor

  • 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.: Bubble events from html element instead of body element to fix drag chip positioning. (56099)
  • 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.: Handling correctly when uploading a file without mime type. (56133)
  • Block Editor: Fix Block editor crash. (56051)
  • Move clientId key to BlockContextualToolbar. (56008)

Patterns

  • Add context for translators to any unclear usage of “synced”. (55935)
  • Use existing download function for 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. downloads to fix non-ASCII encoding. (55912)

Inspector Controls

  • Global Styles: Don’t show “Apply Styles Globally” button in non-block based themes. (56033)

Template Editor

  • Templates: Update filter to call all of the individual methods. (55980)

Global Styles

  • Global styles revisions: Load unsaved revision item into the revisions preview. (55880)

Post Editor

  • Edit Post: Fix pattern modal reopening when making the title empty again. (55873)

Data Layer

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data: Fix wrong store results when page receives less items that what is stored. (55832)

Accessibility

Data Views

  • DataViews: Add labels to “in-filters”. (56001)
  • DataViews: Show actions label. (56027)

Components

  • Fix the image link button pressed state. (56123)

Block Editor

  • Fix mismatching link control action buttons visual order and DOM order. (56042)
  • Escape on Block Toolbar returns focus to Editor Canvas. (55712)

Site Editor

  • Prevent sidebar focus in site editor on small screens. (55934)

Block Library

  • Heading level dropdown: Remove obtrusive tooltips in favor of visible text. (56035)

Performance

Tooling

  • Add a metric to trace template navigation in the site editor. (55796)

List View

  • ListViewBlock: Combine ‘useSelect’ 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.. (55889)

Block Editor

  • Block Editor: Optimize ‘Block Hooks’ inspector controls. (56101)
  • Block Editor: Optimize BlockListAppender. (56116)

Site Editor

  • Avoid rerendering the sitehub unnecessarily. (55818)

Layout

  • Block Editor: Optimize layout style renderer subscription. (55762)

Experiments

Data Views

  • DataViews: Add ability to create custom views. (55773)
  • DataViews: Add control to reset all filters at once. (55955)
  • DataViews: Add delete and restore actions. (55781)
  • DataViews: Add initial “Side by side” prototype. (55343)
  • DataViews: Add new page size option. (56112)
  • DataViews: Add rename functionality to custom views. (55997)
  • DataViews: Allow users to add filters dynamically. (55992)
  • DataViews: Update ‘All pages’ sidebar heading. (56148)
  • DataViews: Update ‘View’ button. (56144)
  • DataViews: Update all templates page. (55848)
  • DataViews: Update author and title fields in template’s list. (56029)
  • DataViews: Update filters in view configuration. (55735)
  • DataViews: Add filters to table columns. (55508)
  • DataViews: Add: Ability to delete custom views. (55924)
  • DataViews: Add: Custom views 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. indication. (55926)
  • DataViews: Remove unnecessary label when no visible filters exist. (55838)

Documentation

  • Add a first block type page to the platform documentation. (56109)
  • Add new block development “Quick Start Guide” and update the create-block-tutorial-template. (56056)
  • Clean up DataViews docs: filter.id is not used. (55833)
  • DataViews: Document enableSorting and enableHiding. (55988)
  • DataViews: Document actions. (55959)
  • Doc: Corrected + updated links. (56084)
  • Doc: Fixes wrong link in #56084. (56106)
  • Docs: Changes imports from wp.editor to wp.blockEditor for PlainText and RichText. (55841)
  • Fix formatting issue in the “Get started with create-block” doc. (55872)
  • Fix: 404 Link on git workflow docs. (55897)
  • Fix: 404 link in get-started-with-create-block docs. (55932)
  • Fix: Create 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. block link in block attributes documentation. (55804)
  • Fix: Filter duotone link on block-supports documentation. (55896)
  • Fix: Two 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. links on docs/contributors/documentation/README.md. (55843)
  • New additional resource for wp-env. (55987)
  • Update documentation to clarify workflow 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". for release package publishing. (56183)
  • Update jest links to the new site. (55802)

Code Quality

  • Block lib: Remove multiline=false (deprecated). (56113)
  • Delete unused SelectedBlockPopover component. (55821)
  • Fix: Remove unrequired nullish coalescing. (55854)
  • Fix: Use of integer value in a conditional rendering condition on Gradients. (55855)
  • Give nice unique names to block controls HOCs. (55795)
  • Migrating PatternTransformationsMenu. (56122)
  • Migrating block inserter media tab components. (56195)
  • Move document tools motion to header-edit-mode layout level. (55904)
  • Only render block toolbar if blockType has value. (55861)
  • Refactor Edit Widgets Document Tools Navigation to own component. (55778)
  • Refactor Selected Block Tools. (55737)
  • Refactor Site Editor Document Tools Navigation to own component. (55770)
  • Remove BlockStyles.Slot empty component. (55991)
  • Remove obsolete queryContext. (56034)
  • Remove unnecessary empty className. (55998)
  • Rename Unforward to Unforwarded and export the named const. (55820)
  • Render Selected Block Tools in Header when using Top Toolbar. (55787)
  • Reusable Blocks: Unlock a private hook and a component at the file level. (55809)
  • Server directive processing: Improve how block references are saved. (56107)
  • Share the editor settings between the post and site editors. (55970)
  • Site Editor: Fix deprecation console error in top toolbar. (55678)
  • Site Editor: Unlock global styles’ private hooks at the file level. (55800)
  • Site Editor: Update edited entity sync logic. (55928)
  • Site Editor: Use EditorProvider instead of custom logic. (56000)
  • SiteEditor: Optimize BackToPageNotification component. (56102)
  • SiteEditor: Refactor disable non page content blocks. (56103)
  • Unify the PageUrl and PageSlug components between site and post editors. (56203)

Data Views

  • DataViews: Fix translatable string. (56075)
  • DataViews: Remove filter.name. (55834)
  • DataViews: Remove reset values from filters. (55839)
  • DataViews: Remove unnecessary sortingFn prop from field description. (55989)
  • DataViews: Simplify filters API. (55917)
  • DataViews: Update actions API. (56026)

Block Editor

  • Rich text: Remove preserveWhiteSpace serialisation differences. (55999)
  • Rich text: highlight format: Gracefully handle old span format. (56071)
  • Update Link Control labels to use gray-900. (55867)

Components

  • DisclosureContent: Migrate from reakit to @ariakit/react. (55639)
  • Divider: Migrate from reakit to @ariakit/react. (55622)
  • RadioGroup: Migrate from reakit to ariakit. (55580)

Site Editor

  • Core Data: Move the template lookup to core-data selectors/resolvers. (55883)
  • Don’t use ‘useEntityRecord’ to only dispatch actions. (56076)

Block Library

  • Navigation: Refactor the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher render function to make it easier to make changes in the future. (55605)
  • Update blockEditor.__unstableCanInsertBlockType hook namespace. (55845)

Data Layer

  • Data: Fix ESLint warnings for the ‘useSelect’ hook. (55916)

Post Editor

  • Edit Post: Use a single ‘useSelect’ hook for getting selectors. (55902)

Colors

  • Add Unit testing for duotone enhanced pagination. (55542)

Patterns

  • Split up the block editor inserter patterns tab into separate component files. (55315)

Design Tools

  • Block styles: Remove __unstableElementContext in favour of useStyleOverride. (54493)

Tools

  • Issue Templates: Add default type labels to issue templates. (55826)
  • Label enforcer: Make the warning message less scary for new contributors. (55900)
  • Quote 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. label. (55862)

Testing

  • Disable ‘no-conditional-in-test’ ESLint rule for Playwright. (56088)
  • Fix ‘Block Switcher’ test file name for Playwright end-to-end tests. (55840)
  • Fix flaky ‘Meta boxes’ end-to-end tests. (56083)
  • Migrate ‘CPT locking’ end-to-end tests to Playwright. (55929)
  • Migrate ‘Meta boxes’ end-to-end tests to Playwright. (55915)
  • Migrate ‘Plugins API’ end-to-end tests to Playwright. (55958)
  • Migrate ‘annotations’ end-to-end tests to Playwright. (55966)
  • Migrate ‘container blocks’ end-to-end tests to Playwright. (56141)
  • Migrate ‘inner-blocks-prioritized-inserter-blocks’ end-to-end tests to Playwright. (55828)
  • Migrate ‘inner-blocks-render-appender’ end-to-end tests to Playwright. (55814)
  • Migrate ‘meta-attribute-block’ end-to-end tests to Playwright. (55830)
  • Migrate Child Block Test to Playwright. (55199)
  • Migrate flaky PostPublishButton end-to-end tests to Playwright. (52285)
  • Perf Tests: Stabilise the Site Editor metrics. (55922)
  • Playwright Utils: Fix ‘clickBlockOptionsMenuItem’ helper. (55923)
  • Query block enhanced pagination: Simplify test setup. (55805)
  • Site editor template preview: Add end-to-end test and aria-pressed attribute to template preview toggle. (56096)
  • Upgrade Playwright to 1.39.0. (54051)
  • end-to-end Utils: Add setPreferences and editPost utils. (55099)
  • end-to-end Utils: Add support for web-vitals.js. (55660)

Build Tooling

  • Package @ariakit/test should be a dev dependency. (56091)

First-time contributors

The following PRs were merged by first time contributors:

Full contributor list

The following contributors merged PRs in this release:

@afercia @andrewhayward @andrewserong @anomiex @anton-vlasenko @aristath @artemiomorales @bph @brookewp @c4rl0sbr4v0 @chad1008 @ciampo @DAreRodz @dcalhoun @dsas @ellatrix @flootr @fluiddot @gaambo @glendaviesnz @gziolo @jameskoster @jeryj @jhnstn @joanrodas @jorgefilipecosta @JorgeVilchez95 @jsnajdr @juanmaguitar @kevin940726 @Mamaduka @masteradhoc @matiasbenedetto @ndiego @ntsekouras @oandregal @peterwilsoncc @pooja-muchandikar @priethor @ramonjd @renatho @richtabor @sacerro @scruffian @shimotmk @SiobhyB @Soean @swissspidy @t-hamano @talldan @tellthemachines @torounit @tyxla @WunderBart @youknowriad


Props to @joen for designing the assets and @annezazu for reviewing this draft.

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

#gutenberg-new