What’s new in Gutenberg 16.9? (25 October)

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

Decorative image that reads "What's new in Gutenberg 16.9?"

Gutenberg 16.9 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.

Rename (almost) all blocks from the editor

After a successful implementation of renaming Group blocks in Gutenberg 16.7 and feedback that the feature should be opened up, version 16.9 lets you rename nearly every block. A bonus for this feature is that theme authors can use this to label blocks in their theme templates and patterns.

Two panels shown next to each other. The first is a "Rename" field for customizing a block's name. The second is the "List View" in the block editor with the block highlighted to be renamed.

There are a few blocks that cannot be renamed:

  • core/block
  • core/template-part
  • core/pattern
  • core/navigation

Duplicate and rename patterns and more

Pattern management is getting a lot of nice feature additions. For individual patterns, you can now rename or duplicate them:

A block pattern showing a demo quotation. Above it is a dropdown menu with Rename, Duplicate, Export as JSON, and Delete options.

You can also rename or delete pattern categories directly from the user interface:

Patterns shown in the Site Editor in WordPress. At the top of the menu, a dropdown shows with Rename and Delete options for managing the current pattern category.

Gutenberg 16.9 also introduces two new media categories: Audio and Video. This should help better organize patterns by media type.

Other Notable Highlights

  • The Dimensions design tool control’s layout is much improved (55060).
  • The Template Part 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. now falls back to the current theme is there is no theme attribute provided (55217).
  • ​​A ton of CSSCSS Cascading Style Sheets. Level 4 viewport-relative units are now supported for more flexible control over various sizing options (54415).
  • getEntityRecords() calls now return pagination totals in the returned data (55164).

Changelog

Features

Create Block

  • Introduce the transformer property. (55423)

Data Views

  • Enable users to sort by date. (55388)

Block Library

  • Enable Block Renaming support for (almost) all blocks. (54426)

Enhancements

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

  • Add block-specific commands as contextual suggestions [#53539]. (53974)

Components

  • Add Tabs (a composable TabPanel v2). (53960)
  • Add type="button" to vanilla <button> elements. (55125)
  • ConfirmDialog: Ts 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. storybook. (54954)
  • GradientPicker: Remove padding and disable overflow of color picker popovers. (55265)
  • Migrate Composite component from reakit to ariakit. (54225)
  • Remove margins from Notice component. (54800)

Patterns

  • Add duplicate pattern command. (55292)
  • Add rename command. (55188)
  • Add rename/delete options for pattern categories in site editor. (55035)
  • Register new media related categories. (55236)
  • Use modal for pattern duplication flow as workaround for changing sync status. (54764)

Block Editor

  • Migrating DownloadableBlocksList to use updated Composite implementation. (55272)

Block Library

  • Improve DimensionsTool control layout. (55060)
  • Template Part block: Fall back to current theme if no theme attribute is given. (55217)

Post Editor

  • Editor: Introduce PluginPostExcerpt slot. (55200)
  • Editor: Use 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. instead of HoCs in PostExcerpt. (55189)

Design Tools

  • Allow using CSS level 4 viewport-relative units. (54415)
  • Add changelog entry for #54415. (55201)
  • Remove 16:10 from 10:16 options from AspectRatioDropdown. (55053)

Data Views

  • Add drop down with action in headers. (55293)

Icons

  • Update fullscreen icon. (55021)

Format Library

  • Link format: Auto link pasted urls. (55195)

Site Editor

  • Migrating AddCustomTemplateModalContent to use updated Composite implementation. (55256)

Private APIs

  • Update consent string for using private APIs. (55182)

New APIs

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Retrieve the pagination totals in the getEntityRecords calls. (55164)

Bug Fixes

Block Library

  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice when an image with lightbox is deleted. (55370)
  • Cover Block: Check for previously uploaded media before setting the dimRatio. (55422)
  • Cover: Fix media type check in the onSelectMedia hook. (55168)
  • Fix Block Rename UIUI User interface perf 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.. (55250)
  • Fix PHP notice when an image with lightbox is deleted in the behaviors file. (55385)
  • Fix: Wrong condition on cover block dimRatioToClass. (55356)
  • Focus submenu button when clicked. (55198)
  • Hide footnotes block from the inserter. (55058)
  • Image: Fix Lightbox display bug in Classic Themes. (54837)
  • Latest Posts: Add screen reader title text to Read more links and use alternative to excerpt_more 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.. (55029)
  • Latest Posts: Sync updates from Core (6.4). (55181)
  • List View: Change the aria-description attribute to aria-describedby. (55264)
  • 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: Reuse existing screen-reader-text CSS class for the enhanced pagination aria-live region. (55309)

Site Editor

  • Alternative: Fix template part area listing when a template has no edits. (55115)
  • Do not display ‘trashed’ navigation menus in 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.. (55072)
  • Pages list: Set status as no sortable. (55210)
  • Remove duplicate template areas from the site view sidebar. (54942)
  • Site Editor Styles Screen: Fix dancing styles previews. (55183)
  • Use accessorFn instead of cell to render status. (55196)

Interactivity API

  • Add aria-label attribute to navigation block only when it is open. (54816)
  • Fix server processing of wp-context getting out of sync. (55436)
  • Image: Disable lightbox editor UI for linked images. (55141)
  • Image: Reimplement lightbox trigger as a minimal button in corner of image. (55212)
  • Image: Stop crashing with Lightbox on image blocks without an image. (55269)
  • Remove the lightbox filter and view file when the lightbox setting is disabled. (55120)
  • Reset “Expand on click” image styles when window is resized. (55077)

Components

  • Changing Button component toggled style selector. (55065)
  • ColorPicker: Improve UXUX User experience of dragging the handle when in popover on top of the editor. (55149)
  • Colors: Fix color button border radii. (55207)
  • 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. / block drag chip: Fix positioning when dragging over an iframe. (55150)
  • ProgressBar: Use text color to ensure enough contrast against background. (55285)
  • Toolbar: Add unstyled variant. (55139)
  • useBlockPreview: Try outputting EditorStyles to ensure local style overrides are rendered. (55288)

Block Editor

  • LinkControl: Prevent horizontally long preview image from being stretched vertically. (55156)
  • List: Fix forward merging of nested list. (55121)
  • Paste: Fix MS Word list paste. (55127)
  • Writing flow: Fix selecting synced pattern. (55221)
  • Writing flow: Preserve block when merging into empty paragraph. (55134)
  • url: Update filterURLForDisplay to include all image, video, and audio file types. (54920)
  • Block Styles: Display default style label correctly in the block sidebar. (55008)
  • useBlockSettings: Add missing useMemo dependencies. (55204)

Data Views

  • Add linked title fallback. (55248)
  • PagePages: Fix unintended object mutation inside component. (55314)
  • Fix pagination. (55387)
  • Make date 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. translatable. (55445)

Patterns

  • Add categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. selector to pattern creation modal. (55024)
  • Fix scrollbars on pattern transforms. (55069)

HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. API

  • Fix: Directive processor failing on updated HTML API. (55404)

Widgets Editor

  • Only suppress adminadmin (and super admin) notices when 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/. is enabled. (55403)

Data Layer

  • Fix combineReducers() types. (55321)
  • Get the page count as derived data. (55316)

Layout

  • Add selector as id to layout style overrides. (55291)

History

  • Try: Only render LastRevision component if 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 is active. (55253)

Block Directory

  • Fix filtering for downloadable blocks in inserter. (55243)

Global Styles

  • Use all the settings origins for a block that consumes paths with merge. (55219)

Post Editor

  • Fix wrong notification message shown when an entity is moved to 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.. (55155)

Typography

  • Font Library: Show error if fetching collection fails. (54919)

Colors

  • 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. Make No color selected translatable text. (54814)

Rich Text

  • Paste: Only link selection if URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org protocol is http(s). (53000)

Patterns

  • Remove the version enforcement for npm in engines field. (55245)

Code Quality

  • Fix: Use y-webrtc room name terminology instead of docName. (55260)

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)

Global Styles

  • Fix flickering when focusing on global style variations. (55267)

Interactivity API

  • Fix Image block lightbox missing alt attribute and improve accessibility. (55010)

Components

  • Modal: Fix closing when contained iframe is focused. (51602)

Block Library

  • Cover: Add aria-label to fixed and repeated image backgrounds. (50990)

Performance

Block Editor

  • Rich Text: Cleanup excess focusin/focusout listeners. (55382)
  • Optimize customClassName controls. (55345)
  • useBlockControlsFill: Avoid unneeded store subscriptions. (55340)

Parsing

  • Remove empty attrs. (54496)

Data Layer

  • Fix resolver resolution status key types mismatch causing unwanted resolver calls for identical state data. (52120)

Experiments

Data Views

  • Add status entity and use it in “admin views” experiment. (55050)
  • Add Grid Layout. (55353)
  • Add 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. field to the page list. (55246)
  • Adds a control to the views actions to switch layouts. (55311)
  • Fix the actions menu in the list view. (55426)

Block Library

  • Introduce experimental form and input blocks to allow building basic forms. (44214)
  • Mark forms blocks as experimental in block.json files. (55187)
  • Update the apiVersion in experimental blocks block.json files. (55186)

Components

  • Expose Tabs as private API. (55327)

Site Editor

  • Add author and status filter to the page list. (55270)

Documentation

  • Add “Get started with create-block” doc to the Getting Started section. (55373)
  • Add a “Get started with wp-scripts” doc to the Getting Started section. (55372)
  • Add backgroundImage to the 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. documentation for appearanceTools. (55376)
  • Add initial documentation for the DataViews component. (55435)
  • Augment Block.Edit filter documentation with performance guidance. (55252)
  • Correct the documented type for the $w parameter of block_core_navigation_add_directives_to_submenu(). (53585)
  • Document kind, name, plural for entity configuration. (55158)
  • Document updating the consent string to unlock private APIs. (55235)
  • Explain how to translate Gutenberg in standalone apps using the editor packages. (55080)
  • Fix callouts in end-to-end test documentation. (55300)
  • Fix code formatting due to bug in the “Get started with wp-env” doc. (55458)
  • Fix the position of the callout in the “Get started with wp-scripts” doc. (55457)
  • Font Library: Change all references to 6.4.0 by 6.5.0 core version. (55320)
  • Initial documentation of entity configuration. (55103)
  • PHP lib docs: Update to include information about prefixes in block PHP code. (55402)
  • Platform docs: Add a page to explain how to render HTML from a list of blocks. (55140)
  • Remove @return void from PHP function docs. (55237)
  • Remove the wp-now getting started doc. (55136)
  • Update LinkControl documentation with advice to memoize value prop. (54659)
  • Update nested-blocks-inner-blocks.md for WP 6.4 release. (55375)
  • docs/get-started-with-wp-env: Diagram and links added. (55381)
  • Update broken anchor link. (55233)

Code Quality

Data Views

  • Allow actions to be provided declaratively as a prop. (55192)
  • In list view, automatically insert header menu separators. (55412)
  • Update the data views component to pass a view object. (55154)
  • Update the view actions menu to be independent from current view APIs. (55294)
  • Normalize render fields function. (55411)
  • Rename accessorFn to getValue. (55434)
  • Update the view configuration to include fields visibility. (55247)

Block Library

  • Query block: Remove unnecessary class. (55438)

Site Editor

  • Fix: Remove unrequired nullish coalescing operator on canEditCss con…. (55357)

Global Styles

  • Update: Unset variable set by reference after a foreach loop. (55261)

Design Tools

  • Elements: Add unit tests for class and style generation. (55113)

Block Editor

  • Remove value syncing in Link Control. (51387)
  • Chore: Fix: Remove third parameter passed to shouldDismissPastedFiles. (55262)
  • Chore: Simplify code by removing unnecessary and condition. (55268)
  • useBlockSync: Fix typo and simplify test. (55203)

Data Layer

  • Update status entity label to Status and plural to getStatuses. (55160)

Gutenberg Plugin

  • Text Component: Typescript’n. (54953)

Tools

Testing

  • Don’t change error handling in WP_Theme_JSON_Gutenberg::Set_spacing_sizes(). (55354)
  • E2E: Add missing comment. (55093)
  • E2E: Try to fix the flaky autocomplete spec. (55081)
  • Migrate ‘Post Title block’ end-to-end tests to Playwright. (55297)
  • Migrate ‘text color’ end-to-end test to Playwright. (55323)
  • Migrate demo page tests to Playwright. (55054)
  • Migrate remaining Link UI tests to Playwright. (52828)
  • Playwright Utils: Introduce the editor.saveDraft helper. (55308)
  • Try to fix flaky synced pattern test. (55406)
  • Try to fix multi-block-selection flakiness. (55075)
  • WP_Theme_JSON_Gutenberg Unit tests: Fix phpunit warnings about set_spacing_sizes. (55313)
  • end-to-end Utils: Use frameLocator for retrieving editor canvas. (54911)

Build Tooling

  • Packages: Ensure only changed packages get published for WP releases. (55334)
  • WP_Env: tests-cli phpunit executable file not found in $PATH: Unknown. (54508)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewhayward @andrewserong @anton-vlasenko @apeatling @aristath @artemiomorales @brookewp @carolinan @chad1008 @ciampo @dcalhoun @dmsnell @ecgan @ellatrix @fluiddot @getdave @glendaviesnz @gziolo @jffng @jhnstn @johnbillion @jorgefilipecosta @jrtashjian @jsnajdr @juanmaguitar @kevin940726 @kishanjasani @luisherranz @MaggieCabrera @Mamaduka @margolisj @matiasbenedetto @mcsf @michalczaplinski @mikachan @ndiego @ntsekouras @oandregal @ockham @peterwilsoncc @ramonjd @retrofox @richtabor @ryanwelcher @SantosGuillamot @scruffian @sethrubenstein @shimotmk @SiobhyB @spacedmonkey @stokesman @t-hamano @talldan @tellthemachines @tyxla @unscripted @WunderBart @youknowriad

Props to @jameskoster for designing assets for this post.

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

What’s new in Gutenberg 16.8? (11 October)

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

This latest release includes many enhancements, 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, some new experiments, and essential groundwork for the future Phase 3.

  1. Cover block: automatically set overlay color when applying the initial background image
  2. Show template toggle when editing pages
  3. Font Library: add an Uploads tab
  4. Other notable highlights
  5. Changelog
  6. Contributors

Cover 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.: automatically set overlay color when applying the initial background image


The Cover Block just got a bit smarter by setting an Overlay color based on the background image. The Overlay color is extracted from the image via magic (actually, code, which you can see coming into existence here (#54054).

Show template toggle when editing pages


This great new option allows you to see your Pages within the Template context where they’re meant to be displayed while you edit them. As @noisysocks puts it:

Allows users to focus on their content when desired. Moreover, it is small a step towards one day unifying the post editor and site editor.

– @noisysocks (#52674)

Font Library: add an Uploads tab


All about decluttering: font uploads have been moved to a separate tab within the Font Library interface. The team has also worked on improving error messages and their visibility.

Other notable highlights

  • Footnotes now make use of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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. revisioning capabilities when available. Gutenberg PR (#52988) and Trac Ticket (#20564).
  • Experiment: the first version of the pages list in the site editor (#54966). This experiment is one of many pieces of the Data Views work (#55083), crucial for Phase 3.
  • Add template replace flow to template inspector (#54609).

Changelog

Features

Block Editor

  • Adds ‘nofollow’ setting to Button block. (54110)

Site Editor

  • Add ‘Show template’ toggle when editing pages. (52674)

Enhancements

  • Update pattern import menu item. (54782)

Components

  • Adding label/description to BlockEditor/DuotoneControl. (54473)
  • Deprecating isPressed in Button component. (54740)
  • Follow ariakit best practices. (54696)
  • InputControl-based components: Add opt-in prop for next 40px default size. (53819)
  • Modal: Add contentWidth prop to support a selection of preset modal sizes. (54471)
  • Remove unused components from ui/. (54573)
  • Update ariakit to 0.3.3. (54818)
  • Update compact search control metrics. (54663)
  • Wrapped TextareaControl in a forwardRef call. (54975)

Block Library

  • Add a brief description to the Footnotes block. (54613)
  • Footnotes: Use core’s meta revisioning if available. (52988)
  • Login/out: Add spacing support. (45147)
  • Query view.js: Code quality. (54982)
  • Set custom color when applying initial background image. (54054)
  • Use wp_get_inline_script_tag() in build_dropdown_script_block_core_categories(). (54637)

Block Editor

  • Default suggested links to pages. (54622)
  • Remove base URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org from link control search results. (54553)
  • Simplify BlockHTMLConvertButton. (54972)
  • Update strings in blocks ‘RenameModal’ component. (54887)

Post Editor

  • Edit Post: Use 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. instead of HoCs in ‘PostStatus’ components. (54951)
  • Editor: Use hooks instead of HoCs in ‘PostSticky’ components. (54949)
  • Editor: Use hooks instead of HoCs in ‘PostSwitchToDraftButton’. (54695)
  • Show confirmation dialog when moving a post to the 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.. (50219)

Site Editor

  • Add template replace flow to template inspector. (54609)
  • [Site Editor]: Update copy of using the default template in a page. (54728)

Patterns

  • Remove categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. description in inserter panel. (54894)

Typography

  • Font Library: Refactor endpoint permissions. (54829)

Bug Fixes

  • Fix the ShortcutProvider usage. (54851)
  • Fix warning when a template calls a template area twice. (54861)
  • Revert “Fix warning when a template calls a template area twice”. (54926)

Block Library

  • All Nav block items to break long titles. (54866)
  • Fallback to Twitter provider when embedding X URLs. (54876)
  • Fix Deleted 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. warning string. (55033)
  • Fix Search Block not updating in Nav block. (54823)
  • Fix left and right aligmnent in children of Post Template. (54997)
  • Fix output of Navigation block classnames in the editor. (54992)
  • Fix overwriting of published post meta when previewing footnote changes. (54339)
  • Image: Ensure Expand on Click toggle is shown if block-level lightbox setting exists. (54878)
  • Image: Fix layout shift when lightbox is opened and closed. (53026)
  • Media & Text: Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning. (55038)
  • Search block: Allow space for input field only when form expanded. (54846)
  • Search block: Update alignment and icon button width. (54773)

Site Editor

  • Avoid same key warnings in template parts area listings. (54863)
  • Avoid stale navigation block values when parsing entity record. (54996)
  • Don’t display the navigation section in template parts details when a menu is missing. (54993)
  • Fix ToolSelector popover variant. (54840)
  • Reset ‘Show template’ toggle when leaving edit mode. (54679)
  • remove overflow: Hidden from the entity title in the site editor 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.. (54769)

Components

  • FormTokenField: Add box-sizing reset style and reset default padding. (54734)
  • Popover: Fix the styles for components that use emotion within popovers. (54912)
  • Remove hover style for secondary Button when aria-disabled is set. (54978)
  • Reverting addition of aria-selected style hook in Button. (54931)
  • SlotFill: Pass Component instance to unregisterSlot. (54765)

Block Editor

  • Avoid double-wrapping selectors when transforming the styles. (54981)
  • [Inserter]: Fix reset of registered media categories. (55012)

Typography

  • Font Library: Changed the OTF mime type expected value to be what PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher returns. (54886)
  • Font Library: Move font uploads to a new tab. (54655)

Global Styles

  • Block custom CSSCSS Cascading Style Sheets.: Fix incorrect CSS when multiple root selectors. (53602)
  • Image: Ensure false values are preserved in memory when defined 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.. (54639)

List View

  • Fix performance issue when selecting all blocks. (54900)

Colors

  • Format Library: Try to fix highlight popover jumping. (54736)

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.

  • Image: Fix duotone not being applied to lightbox image. (54670)

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)

Block Library

  • Footnotes: Add aria-label to return links. (54843)

Components

  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block: Fix accessibility issues on back-end. (54408)
  • Modal: Accessibly hide/show outer modal when nested. (54743)

Patterns

  • Use list role instead of listbox in patterns list. (54884)

Post Editor

  • Editor: Always render the ‘Switch to Draft’ button to avoid focus loss. (54722)

Block Editor

  • Block Switcher: Use a different label for multi-selection. (54692)

Performance

  • Tests: Support the Site Editor’s legacy spinner. (54784)
  • Use instanceOf over property_exists. (54835)

Block Editor

  • Subscribe only to block editor store in useBlockSync. (55041)

Experiments

Site Editor

  • al]: First version of pages list in site editor. (54966)

Block Editor

  • Expose getDuotoneFilter() as private API. (54905)

Documentation

  • Add a documentation page about the block editor settings. (54870)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamsilverstein @alexstine @andrewhayward @andrewserong @annezazu @anton-vlasenko @artemiomorales @aurooba @bangank36 @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @jameskoster @jeryj @jsnajdr @juhi123 @kevin940726 @leemyongpakvn @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @michalczaplinski @mirka @mtias @mujuonly @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ockham @pbking @priethor @ramonjd @richtabor @scruffian @SiobhyB @spacedmonkey @stokesman @swissspidy @t-hamano @tellthemachines @tellyworth @them-es @torounit @tyxla @westonruter @WunderBart @youknowriad

Props to @joen for the visual assets and @annezazu for the help reviewing and collecting highlights!

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

What’s new in Gutenberg 16.7? (27 September)

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

What's New In Gutenberg 16.7?

Gutenberg 16.7 has been released and is available for download!

16.7 is the last Gutenberg release ahead of the upcoming WordPress 6.4 release, so it’s packed with features and 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. Exciting new features include the new Font Library for font management within the editor, lots of enhancements to pattern management, simplified lightbox functionality, and many UXUX User experience enhancements.

This release consists of 331 pull requests authored by 88 contributors, including 7 new contributors! 🥳 🎉

Table of Contents

  1. Font Management with the Font Library
  2. Import/Export of Patterns
  3. Explore New Pattern Filtering
  4. Naming Group Blocks in the Editor
  5. “My Patterns” Category Reinstated in Post Editor Inserter
  6. Simplified Lightbox Functionality for Images
  7. Background Image Control Added to Group Block
  8. New Social Link Icon for X
  9. Changelog
  10. First time contributors
  11. Contributors

Font Management with the Font Library

Screenshot of the Styles panel in the editor with the Typography settings open

The new Font Library allows users to install, remove, and activate typographic fonts from various sources in WordPress via the editor. The installed fonts are enabled globally, independent of the active theme in the /wp-content/fonts directory, similar to the Media Library. As part of this new feature, users can add fonts manually by uploading them from their local machine or choosing from a list of Google Fonts. (#53884 & #53307)

Import/Export of Patterns

Screenshot of a pattern in the editor with the options panel open, showing the new "Export as JSON" option

It’s now possible to import and export patterns as 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. files directly from the site editor’s patterns screen. This change mirrors the existing import/export functionality in the /wp-admin patterns screen, making it more straightforward for all users to migrate patterns between sites. (#54337)

Explore New Pattern Filtering

Screenshot of the pattern list panel, highlighting the new filters dropdown

Pattern filters have been restructured, with filters now being housed within a dropdown at the top of the pattern list panel. A sticky 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. has also been added to the top of the list panel for improved navigation. (#54681)

Naming Group Blocks in the Editor

Screenshot of the editor with the List View open, showing a custom named block with the name, "My custom name"

Group blocks can now be named using custom naming. Naming these blocks will update their name in the List View, making it easier to distinguish between blocks. This enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. marks another step forward as the Site Editor’s tools and features continue to expand. (#53735)

“My Patterns” CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. Reinstated in Post Editor Inserter

Prompted by feedback, the “My patterns” category has been reintroduced to the post editor’s inserter, providing a central place for users to view their custom patterns. (#54767)

Simplified Lightbox Functionality for Images

The Behaviors UIUI User interface introduced as an experimental feature in Gutenberg 15.9 has been removed and replaced with an “Expand on click” toggle in the Image 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.’s Inspector Controls and in the Global Styles. (#54509) (#54509)

The support for Behaviors in the theme.json has also been deprecated and will be removed completely in Gutenberg 17.0:

  • Users who enabled the “lightbox” behavior in their theme.json file should migrate to a new syntax where the lightbox is simply a new block-level setting:
“settings”: {
	“blocks”: {
		“core/image”: {
			“lightbox”: {
				“enabled”: true | false
				“allowEditing”: true | false
			}
		}
	}
}
  • Note that the support for the “animation” value has been removed.

If you enabled the lightbox on any Image blocks using the previous Behaviors UI, please open and re-save posts that include those blocks to ensure they get migrated to the latest syntax.

With the removal of support for the “animation” value, all images will now only use the “expand” (zoom) animation, even if they had previously used the “fade” animation.

Background Image Control Added to Group Block

Background image support has been added to the Group block, in line with the color controls. (#53934 & #54439)

A new social link icon has been added for the X service. It can be found when searching for “X” or “Twitter”. (#54092)

Changelog

Features

Block Library

  • Social Links: Add X. (54092)

Typography

Font Library:

  • Add mime type validation for font uploads. (53986)
  • Font Collection backend. (54098)
  • Frontend [Stage 1]. (53884)
  • Font Collections frontend. (54566)

Patterns

  • Allow import/export patterns as JSON files. (54337)

Block Editor

  • Adds ‘nofollow’ setting to inline links (rich text only). (53945)
  • Rename Group blocks in the Editor via Modal. (53735)

Enhancements

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

  • Add edits data to the useEntityRecord. (54167)

Components

  • Add non-listbox functionality back to CircularOptionPicker. (54290)
  • Added missing “middle” allowed tooltip position. (52147)
  • BlockSettingsMenu: Ensure only one block settings menu is open at a time. (54083)
  • Bundle the block copy handler within the BlockCanvas component. (54207)
  • Bundle the block selection clearer hook into the BlockCanvas component. (54209)
  • Ensure that ‘Duotone 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.’ color pickers have relevant labels. (54468)
  • Export ProgressBar to allow it to be used. (54404)
  • FormTokenField – add prop to allow saving of tokens onBlur. (53976)
  • Refactoring BorderControl‘s unit tests. (54155)
  • Remove unnecessary padding-right on the dismissible notice. (52240)
  • Support controlling open/closed state for Dropdown and DropdownMenu. (54257)
  • ToggleGroupControl: Rewrite backdrop animation with framer motion shared layout animations. (50278)
  • ToolTip: Refactor using ariakit. (48440)
  • Tooltip: Add placement prop to replace deprecated position. (54264)
  • Tooltip: Add new hideOnClick prop. (54406)
  • Tweak border control button to proper metrics and simpler action. (53998)
  • Update FormTokenField styling for consistency and visibility. (54402)
  • Update spacing sizes control metrics and icons. (54470)
  • Update/form token field onblur. (54445)
  • Popover: Update positionToPlacement types. (54101)
  • SearchControl: Allow for 32px compact size, introduce option to change default size to 40px. (54548)

Block Library

  • #39457: Image block keep image size on replacing image. (49982)
  • Add __next40pxDefaultSize to 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. opacity control. (54389)
  • Add aspect ratio to image placeholder. (54216)
  • Allow using a button element for button blocks. (54206)
  • Buttons Block: Show inserter if button have variations (#53498). (53783)
  • Change dialogdescription for renaming group block. (54358)
  • Footnotes: Add missing placeholder instructions text. (54056)
  • Heading block: Add support for writingMode. (54351)
  • Improved description for the post-terms core block. (47715)
  • Make matrix position behave like valign. (54050)
  • Navigation block: Add core/buttons to the allowed blocks. (53966)
  • Remove unused prop from GroupPlaceHolder component. (51493)
  • Template parts: Use the template actions component for template parts patterns. (54173)
  • Text orientation: Rotate vertical text when the text is aligned (Upside down text). (53175)
  • Update parent labels in page attributes panel and page list block. (54403)
  • Use __next40pxDefaultSize on more UI. (54400)

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.

  • Add timeout option to navigate(). (54474)
  • Add manual Server Side Rendering (SSR) to the Interactivity API blocks. (54343)
  • Ensure that the view scripts of core blocks have the wp-interactivity dependency. (54594)
  • Image block: Revise lightbox UI to remove ‘behaviors’. (53851)
  • Image block: UI updates for the image lightbox (redo). (54509)
  • Override unfinished navigate calls. (54201)
  • 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 design enhancements for the “enhanced pagination” setting. (54455)
  • Query Loop: Allow “enhanced pagination” only with core blocks. (54347)
  • Query block: Start prefetching on first click to next/previous. (54781)

Patterns

  • Add categories to user patterns, and allow filtering by these in site and post editor. (53835)
  • Add editing of pattern categories to site editor. (54640)
  • Add user categories to site editor 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. navigation screen. (53837)
  • Add user pattern categories to post editor inserter patterns tab. (53933)
  • Apply white background to the preview as a fallback. (54534)
  • Merge unsynced into inserter patterns tab and add paging and filtering. (54007)
  • Update empty template part label. (53842)
  • Memoize useSelect for usePatterns. (54588)
  • Site Editor: Prevent unintended actions on the classic theme. (54422)

Design Tools

  • Add back tooltip to styles UI. (54574)
  • Add block gap to Post Content block. (54282)
  • Add block instance elements support for buttons and headings. (53667)
  • Background Image block support: Add reset menu item. (54341)
  • Block Supports: Add background image support to Group block. (53934)
  • Columns: Adopt button and heading element colors. (54104)
  • Update block styles UI. (54446)
  • Improve background image control. (54439)

Site Editor

  • Copy: End the Templates page description in the Site Editor with a period. (54221)
  • Edit Site: Update progress bar to determinate. (53399)
  • Follow up visual tweaks to block-specific commands. (54427)
  • Site editor sidebar: Abstracting footer so it can be used across details screens. (54082)
  • [Page Inspector]: Add ability to switch templates. (51477)

Global Styles

  • Rename settings & userSettings props to value & inheritedValue respectively in ImageSettingsPanel. (54593)
  • Update Block specific CSSCSS Cascading Style Sheets. label to include additional instructions. (49626)

Block Editor

  • Use gray color on link control advanced toggle. (54545)
  • Verse: Exit on triple Enter. (53332)
  • Block editor: 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.: Fix rules of hooks violations (2). (48943)
  • Always show the total number of patterns even with only one page. (54813)

Typography

  • Font Face: 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 changeset 56500. (54218)
  • Font Library: Changing the upload directory to wp-content/fonts. (54122)
  • Font Library: Load collection JSON data from a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in the collection configuration. (54067)
  • Font Library: Use wporg cdn to host the google fonts json data. (54795)

Themes

  • Theme Previews: Make the back button customizable. (54242)

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

  • Remove ‘Footnotes’ and ‘Comments’ from the non-dynamic block registration list. (54154)

Media

  • Correct function name handleFileChange is replaced by wrong function name. (52250)

List View

  • Allow Escape key to deselect blocks if blocks are selected. (48708)
  • Try directing focus to the list view toggle button when closing the list view. (54175)

Block API

  • Deprecated get_file_path_from_theme method. (45831)

Keyboard Shortcuts

  • Make the shortcuts provider optional. (54080)

Blob

  • refactor(blob): Type URL parameter as optional. (49201)

Collaborative Editing

  • Try bundling sync package. (54738)

New APIs

Components

  • Revert “Export ProgressBar to allow it to be used”. (54428)

Block API

  • Stabilize Block Hooks feature. (54293)

Data Layer

  • Data: Introduce countSelectorsByStatus redux metadata selector. (53767)

Framework

  • Add useStateWithHistory hook and use to show a block editor with undo/redo. (54377)
  • BlockEditor: Add BlockCanvas component = 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. + BlockList + WritingFlow. (54149)
  • Extract undo/redo as a separate package. (54292)

Bug Fixes

Components

  • Add children back to toolbar item render for rendered components. (53314)
  • Add missing useState import in Border Control documentation. (49476)
  • Adjust input-style__focus mixin to proper focus size. (54398)
  • DropdownMenu v2: Fix submenu chevron direction in RTL languages. (54036)
  • Fix incorrect focus style size on InputControl. (54394)
  • Make CircularOptionPicker focus styles resilient to button size changes. (54196)
  • PaletteEdit: Fix padding in RTL mode. (54034)
  • Popover: Set is-positioned class only after animation has finished. (54178)
  • Storybook: Restore previous URL for the introduction documentation page. (54247)
  • Storybook: Update doc param values for ConfirmDialog. (54130)
  • Update borderFocus to ADMIN.theme. (54425)
  • Use standard focus style on BorderControl. (54429)
  • DateTimePicker: Fix onChange callback check so that it also works inside iframes. (54669)

Post Editor

  • Adds animation state for DFM off to post editor header. (54244)
  • Block Editor: Memoize the createPageEntity callback. (54580)
  • Edit Post: Avoid fetching the edited template for non-viewable posts. (54158)
  • Editor: Catch errors when creating terms. (53369)
  • Fix layout when post content is root block. (54485)
  • Make order of pinned items consistent. (53908)
  • Prevent the list view shortcut from typing unexpected characters. (54078)
  • Top Toolbar: Prevent the focus outline of the button from being cut off. (54172)
  • Try using fallback layout instead of default in post editor. (54371)
  • [Edit Post]: Toggle Distraction free mode mode based on compatibility. (54073)

Block Library

  • Block Moving Mode: Prevent the block from being moved into itself. (54137)
  • Fix navigation block submenu focus when closing menu with the ESC key. (54299)
  • List Block: Fix numbering style to be applied correctly. (53301)
  • Navigation Link: Restore tooltip. (54263)
  • Post navigation link: Fix the writing mode setting on the front. (54053)
  • PreviewOptions: Fix critical error when children not passed. (54284)
  • Remove role attribute when set to null in data-wp-bind. (54608)
  • [Commands]: Add group/ungroup commands only when eligible. (53988)
  • Replace the gutenberg_ prefix with wp_ in image block. (54678)
  • Navigation block: Fix padding on mobile overlay when global padding is 0. (53725)

Patterns

  • Command Palette: Fix duplicate Patterns command. (54133)
  • Don’t output root padding when editing patterns. (54373)
  • Fix user pattern categories in site editor inserter. (54641)
  • Remove pattern category as a variation for post terms block. (54532)
  • StartPageOptions: Improve conditions to show modal only on a brand new page. (54245)
  • Add My patterns back to post editor inserter categories. (54767)
  • De-emphasise pattern filters in inserter. (54681)
  • Fix All Patterns category default display. (54721)
  • Fix bug with new categories not showing. (54768)
  • Fix bug with pattern categories not saving sometimes. (54676)
  • Fix category type for back link. (54753)
  • Fix duplication of uncategorized patterns. (54755)
  • Inject the theme name into the block attributes. (54595)
  • Reinstate my patterns category in site editor. (54726)
  • Require a title in the creation modal. (54717)
  • Use slug as fallback for empty title. (54731)
  • Allow non-user patterns under Standard sync filter. (54756)
  • Check that pattern is synced before replacing blocks with synced pattern on creation. (54804)
  • Fix back navigation after pattern creation. (54852)
  • Fix category control width in site editor. (54853)
  • Improve sentence case consistency of labels and notices. (54807)

Block Editor

  • Add keyboardReturn submit button back to LinkControl. (52620)
  • Formats: Memoize link value passed to the LinkControl. (54603)
  • List: Merge consecutive lists. (52995)
  • Rich text: Fix useAnchor (remove nextElementSibling). (54013)
  • Iframe: Adjust keydown event bubbling. (54565)
  • Reset page after changing pattern filters or search value. (54774)
  • Block Editor: Fix ‘isBlockSubtreeDisabled’ private selector. (54618)

Site Editor

  • Bump the z-index of the rename modal. (54277)
  • Default template lookup should use slug, not the full permalink, in the site editor. (54599)
  • Fix “Blogblog (versus network, site) title” input border radius in Index / Home details panel. (54192)
  • Hide ghost top toolbar. (54555)
  • CreateTemplatePartModal: Disable the ‘Create’ button while saving. (54716)

Plugin

  • Ensure font-face styles are printed in iframe editors. (54313)
  • Font Face & Font Library: Load PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher files only if the main class does not exist. (54103)
  • Gutenberg Plugin: Add hook to allow writing-mode as a safe CSS property. (54581)
  • Update readme.txt “tested up to 6.3”. (54072)
  • Update cherry-pick script to correctly verify GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. setup. (54720)
  • Conditionally remove deprecated ‘print_emoji_styles’. (54828)

Typography

  • Font Library: Ensure merged fontFace data is enconded as an array instead of an object. (54435)
  • Font Library: Fix duplicate variants with different file types. (54490)
  • Font Library: Setting wp_font_family custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. as _builtin and not plublic. (54559)
  • Font Face: Get name from “fontFamily” setting, not “name”. (54615)
  • Font Library: Fix modal width on mobile viewport. (54518)
  • Font Library: Fix space above theme fonts in font library modal. (54598)
  • Font Library: Fix error installing system fonts. (54713)
  • Font Library: Remove font files created by tests after tests run. (54771)
  • Font Library: Avoid rendering font library ui outisde gutenberg plugin. (54830)

Widgets Editor

  • Edit Widgets: Fix broken layout. (54372)
  • Edit Widgets: Fix invisible action area when the top toolbar is enabled. (54329)
  • Fix top toolbar for the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. widgets sidebar control. (54255)

Global Styles

  • Font Library: Fix notification error for actions related to custom fonts. (54535)
  • Prevent layout changes from saving the whole inherited settings object. (54500)

Block API

  • Blocks: Fix incorrect placement for hooked blocks in the parent container. (54349)
  • Pass correct content argument to enter transforms. (54108)
  • Block Hooks: Avoid processing empty content for loaded templates. (54719)

Rich Text

  • Revert: Rich text: Copy 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.) name on internal paste. (54301)

Interactivity API

  • Image: Fix block serialization test case to cover deprecation of behaviors. (54570)
  • Query Loop: Select first anchor inside Post Template with “enhanced pagination” enabled. (54730)

Icons

  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. forwardRef warnings for TooltipAnchors. (54492)

History

  • Fix extra undo/redo step when removing or replacing all blocks. (54457)

Synced Patterns

  • Patterns: Apply layout and alignment to synced patterns in the editor. (54416)

npm Packages

  • Workflow: Fix the issue with npm publishing for WP major version. (54088)

Media

  • useMediaQuery: Avoid crashing on Safari < 14. (54023)

Nested / Inner Blocks

  • Fix: InnerBlocks allowed blocks change with different sizes. (53943)

Layout

  • Post Content: Ensure layout classnames are applied in readonly preview. (53864)

Document Settings

  • Set the timezone correctly. (48083)

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

  • Fix: Invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. import in react-i18n documentation. (54308)

Design Tools

  • Background Image control: Use consistent button, ensure descriptive text accounts for no image selected. (54711)

Collaborative Editing

  • Make sure sync code only runs when experiment is enabled. (54710)

Core Data

  • core-data: Fix nested property access with undefined name. (54790)

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)

Block Library

  • Comments form: Accessibility fixes for back-end. (54393)
  • Navigation: Add ariaLabel block support. (54418)
  • Table block: Fix semantic structure for screen readers on back-end. (54324)

Components

  • Improve Notice component accessibility. (54498)
  • Making Circular Option Picker a listbox. (52255)
  • Allow Modal to place focus on first element within contents via new API. (54590)
  • Improve the placeholder instructions accessibility. (45801)

Site Editor

  • Clarify the “Entity” message of the snackbar. (54333)
  • Use solid accent color selection in command palette. (54318)

Block Editor

  • Update nofollow control label. (54184)

Performance

  • Use median instead of average to stabilize First Block metric. (54157)
  • improvement: Reduce the use of the _wp_array_get function. (51116)

Block Library

  • Footnotes: Add block-level caching when parsing content for footnotes. (52577)
  • Table of Contents: Use a custom store subscription for observing headings. (54094)
  • getClientIdsOfDescendants: Support single ‘clientId’ as a argument. (54421)

Site Editor

  • Edit site: Prevent enqueuing entire stylesheet in iframe. (54254)
  • Fix first block locator’s page reference. (54188)

Patterns

  • Move mapping of values from core-data selector into consumers. (54576)

Block API

  • Unnecessary JSON decoding in block parser. (54424)

Components

  • Tooltip: Render tooltip markup in the DOM only when open. (54312)

Post Editor

  • Editor: Memoize ‘getNestedEditedPostProperty’ selector helper. (54160)

Developer Experience

  • Tests: Improve the environment setup. (54309)

Experiments

Interactivity API

  • Remove wp_store from query block. (54359)

Documentation

  • Add a documentation page to explain how to implement undo/redo in a third-party editor. (54546)
  • Add the Commands Data page to Handbook. (53634)
  • Bootstrap a documentation website tailored towards the usage of Gutenberg outside WordPress. (54375)
  • Button: Undocument the focus prop. (54397)
  • Docs: Add missing callout class. (54558)
  • Docs: Add note about enqueueing assets in the iframe and trim whitespace. (54125)
  • Docs: Consolidated design Reference with the main Design Contributions doc. (51065)
  • Docs: Move Glossary page to Getting Started. (54120)
  • Docs: Move the FAQ page to Getting Started. (54117)
  • Docs: Overhaul the Development Environment section of the Block Editor Handbook. (54395)
  • Docs: Remove Outreach doc from Getting Started section. (54314)
  • Docs: Remove unneeded block theme docs. (51071)
  • Fix bullet hierarchy. (47178)
  • Fix createI18n package import location. (51328)
  • Fix incorrect image src in Design Contributions doc. (54302)
  • Fix: Broken links on ToolbarGroup documentation. (54229)
  • Fix: Remove unrequired code from BorderControl documentation. (54348)
  • Fix: Wrapped ref in quotes in theme.json documentation. (54591)
  • Incorrect file extension?. (54134)
  • Theme JSON schema: Fix “not allowed error” in settings property. (54521)
  • Try: Allow multiple attribute to be a string in upload components. (53350)
  • Update Commands documentation with examples and more context. (54441)
  • Update the components changelog to mark the popover slot removal as a breaking change. (54022)
  • Update versions in WP for 6.3.1. (54069)
  • Updated Related Components Links. (49176)
  • Updates Edit and Save code examples to have matching open/closing tags. (53915)
  • [Docs: Getting Started / Block Development Environment] Updates on the text to improve clarity and preciseness. (54563)
  • documentation – Contribution Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.: Formatted text and changed some titles and structure. (54258)
  • documentation [Block Editor Handbook / Getting Started / Block Development Environment]: Fix links. (54571)
  • Add missing global declaration in DocBlockdocblock (phpdoc, xref, inline docs) of interactivity files. (54683)

Code Quality

  • Adds removal notice to view.js.mustache. (54105)
  • Block editor: Remove __unstableElementContext and filter EditorStyles instead. (52888)
  • Improving error messages and codes in jest-console, matcher.js. (53743)
  • Indicate nested paths on __experimentalSaveSpecifiedEntityEdits. (54161)
  • JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. unit tests: Update popover matcher. (54168)
  • Style engine: Sync doc changes from core. (54650)

Components

  • Composite: Refactor to TypeScript. (54028)
  • FocusableIframe: Refactor to TypeScript. (53979)
  • IsolatedEventContainer to Typescript (just test file). (54316)
  • Popover: Remove custom frame scroll/resize listeners. (54286)
  • Revert FormTokenField – add prop to allow saving of tokens onBlur. (54444)
  • Toolbar/ToolbarDropdownMenu Typescript Conversion. (54321)
  • ToolbarGroup – Typescript. (54317)
  • with-focus-outside: Convert to TypeScript. (53980)

Patterns

  • Revert usePatternsState to return an array instead of object. (54582)
  • Add missing dependency of @wordpress/patterns on @babel/runtime. (54118)
  • Move category map creation out of useSelect. (54584)
  • Remove experimental prefixes from patterns package. (54338)
  • Site editor: Consolidate constants. (54484)
  • Fix sidebar nav screen fallback category. (54754)

Post Editor

  • Annotations: Run end-to-end tests with iframe. (54191)
  • EditPostPreferencesModal: Refactor to remove snapshots for index.js. (54141)
  • Extract WordPress specific styles from the BlockTools component. (54356)
  • PageAttributesParent: A minor fixes for useSelect and useMemo hook usages. (54433)
  • PostSyncStatus: Derive sync status inside the selector. (54159)

Block Library

  • Heading: Remove unused ‘aria-label’. (54223)
  • Image Editor: Fix ESLint warnings and remove unnecessary dependencies. (53506)
  • Pattern Category: Set ‘publicly_queryable’ to false. (54567)
  • Post Terms: Fix a ‘useSelect’ warning in the ‘usePostTerms’ hook. (54068)

Interactivity API

  • Prepare image lightbox for private version of the Interactivity API in 6 4. (54547)
  • Remove gutenberg_should_block_use_interactivity_api and the old implementation of interactive blocks. (54297)
  • Search block: Switch interactivity to the Interactivity API. (53343)

Site Editor

  • Remove Tooltip workarounds added in the site and block editor. (54450)
  • 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.: Remove ‘gutenberg’ query param from revisions.php. (54166)
  • Prune store constants. (54585)
  • Use constants rather than hard coded template strings. (54586)

Rich Text

  • RichText: Remove __unstableOnSplitMiddle. (54183)

Typography

  • Fluid typography: Backporting Core since annotations. (54204)
  • Font Face: Remove static instance in wp_print_font_faces(). (54228)
  • Font Library: Refactor logic to disable font library in the frontend. (54748)

Block Editor

  • Improve code commenting around focus mount behaviour of rich text Link UI. (54085)
  • List e2e: Run all tests with iframe. (54181)

Layout

  • Use override editor style API. (54466)

Plugin

  • Require minimum WordPress 6.2. (53451)
  • Ensure that Block Hooks work correctly after landing in WP core. (54651)
  • Update uuid package to 9.0.1. (54725)

Themes

  • Iframe: Skip scoping styles. (46752)

Tools

Testing

  • Button: Update test assertion to match test name. (54260)
  • E2E: Do not run page actions in beforeEach hook when using fixme. (54065)
  • Fix Font library unit tests. (54645)
  • Font Library: Remove upload_mimes filter after uploading fonts. (54647)
  • Migrate RichText end-to-end tests to Playwright. (53493)
  • Perf Tests: Update base point to compare. (54111)
  • Puppeteer tests: Try to fix failing tests related to notices in core. (54452)
  • Remove accidental addition of perf test results (2). (54363)
  • Remove accidental addition of perf test results. (54355)
  • Update WPCSWPCS The collection of PHP_CodeSniffer rules (sniffs) used to format and validate PHP code developed for WordPress according to the WordPress Coding Standards. May also be an acronym referring to the Accessibility, PHP, JavaScript, CSS, HTML, etc. coding standards as published in the WordPress Coding Standards Handbook. to v3.0, and fix all reported Coding Standards issues. (53866)
  • Modal: Add more unit tests. (54569)
  • end-to-end Test Utils: Add new fixtures for performance metrics. (52993)
  • end-to-end Tests: Fix ‘no-useless-not’ ESLint warnings. (54652)
  • package(e2e-test-utils): Update fixtures. (54128)
  • wp-scripts: Add support for Playwright. (53108)
  • Font Library: Use resolvable domain in test. (54763)
  • Global styles tests: Fire hooks when updating post. (54836)
  • Remove action to fix tests. (54806)
  • Font Library: Fix set upload dir test. (54762)

Build Tooling

  • Backport tools: Filter PRs to be cherry picked by merged date. (54171)
  • Changelog tool: Update Automated Testing label. (54070)
  • Running npm run format:Php may result in an error. (54162)
  • Scripts: Correctly resolve entry points when the directory is symlinked. (54212)
  • Upgrade wp-prettier to v3.0.3. (54539)
  • Update typescript-eslint to v6. (53975)

First time contributors

The following PRs were merged by first time contributors:

  • @andrewhayward: Making Circular Option Picker a listbox. (52255)
  • @jamiemchale: Fix createI18n package import location. (51328)
  • @johnhooks: refactor(blob): Type URL parameter as optional. (49201)
  • @MericKarabulut: Improving error messages and codes in jest-console, matcher.js. (53743)
  • @Piyush-Deshmukh: Fix: Wrapped ref in quotes in theme.json documentation. (54591)
  • @Rajinsharwar: Editor: Catch errors when creating terms. (53369)
  • @toolstack: Set the timezone correctly. (48083)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @alexstine @andrewhayward @andrewserong @annezazu @anomiex @anton-vlasenko @aristath @artemiomorales @atachibana @bangank36 @bfintal @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @chintu51 @ciampo @DAreRodz @dcalhoun @derekblank @draganescu @ediamin @ellatrix @fluiddot @gaambo @geriux @getdave @glendaviesnz @gvgvgvijayan @gziolo @hellofromtonya @jameskoster @jamiemchale @jeherve @jffng @johnhooks @jordesign @jorgefilipecosta @joshuatf @jrtashjian @jsnajdr @juanmaguitar @kevin940726 @kkoppenhaver @kmanijak @leewillis77 @luisherranz @madhusudhand @MaggieCabrera @Mamaduka @margolisj @masteradhoc @matiasbenedetto @mburridge @mcsf @MericKarabulut @mhimon @michalczaplinski @mikachan @mikejolley @mokagio @ndiego @ntsekouras @Olein-jp @petitphp @Piyush-Deshmukh @Rajinsharwar @ramonjd @richtabor @SantosGuillamot @SaxonF @scruffian @spacedmonkey @stokesman @swissspidy @t-hamano @tellthemachines @thelovekesh @toolstack @torounit @tyxla @vcanales @walbo @WunderBart @youknowriad

Props to @siobhyb, @czapla, and @artemiosans for co-writing; @saxonafletcher for the visual assets; @annezazu, @priethor, @andraganescu, @cbringmann, and @ngreennc for peer review; @bernhard-reiter for helping publish the release to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/.

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

What’s new in Gutenberg 16.6? (06 September)

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

This latest release comes packed with improvements and bugfixes, including an enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. to the List View in the post editor, introducing a horizontal scrollbar for heavily nested list views, a fix for the Cover 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. on Safari on iPad, addressing an issue where images with a “Fixed background” were zoomed in excessively, and more!

Table of Contents

  1. 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-inserted blocks.
  2. Captured toolbars.
  3. Changelog.

Block hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same., formerly known as Auto-inserted blocks

On activation, plugins are now equipped with the capability to auto-insert blocks, enhancing the integration and automation between plugins and the Gutenberg editor. Early versions of this experiment were called Auto-inserted blocks, but after some discussion, they have now been dubbed Block hooks. (#52969, #54029, #54024, #54147)

Captured toolbars for an easier editing experience

Toolbars for child blocks are now seamlessly attached to their parent blocks, offering a more intuitive and organized editing experience. This feature is currently supported for Navigation, List, and Quote blocks. (#53699, #53697)

Other Notable Highlights:

  • Make mid size parameter settable for Query Pagination block. (#51216)
  • Add keyboard shortcut for duplicating blocks. (#53559)
  • Add toggle list view command in site editor. (53983)

Changelog

Features

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.

  • Add Slot and Fill directives. (53958)
  • Query block: Client-side pagination. (53812)
  • Update data-wp-bind directive logic. (54003)
  • Query block: Move “Enhance pagination” toggle under Settings. (54198)

Enhancements

  • Bundle ObserveTyping within the BlockList component. (53875)
  • Default appender: Hide the dashed indicator until ancestor is selected. (53761)
  • Register the block editor keyboard shortcuts automatically when using BlockEditorProvider. (53910)
  • [Commands]: Add toggle list view command in site editor. (53983)

Components

  • Bundle SlotFillProvider within BlockEditorProvider. (53940)
  • Make the Popover.Slot optional. (53889)
  • Popover: Update @floating-ui to latest version, remove custom fix for 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. positioning and scaling. (46845)
  • AlignmentMatrixControl: Replace act() with userEvent. (53703)
  • ProgressBar: Add transition to determinate indicator. (53877)

Block Library

  • Blocks: Move bootstrapped block types to Redux state. (53807)
  • Capture toolbars in navigation block. (53697)
  • Content Block: Change placeholder and end-to-end test to refer to Content block. (53902)
  • Make mid size parameter settable for Query Pagination block. (51216)

Block Editor

  • Capture toolbars in quote block. (53699)
  • Improve writing flow for lists by capturing list item toolbars. (53306)
  • RichTextValue: Typescript Adjustment. (54002)

Typography

  • Font Face: Prepare for merge into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (53858)
  • Renames “Fonts Library” to “Font Library”. (53780)

Post Editor

  • Edit Post: Use hooks instead of HoCs in TaxonomyPanel. (53773)

List View

  • Add keyboard shortcut for duplicating blocks. (53559)

Patterns

New APIs

Interactivity API

  • Router with region-based client-side navigation. (53733)

Bug Fixes

  • Add missing aria roles for block locking toolbar and menu buttons. (53734)
  • Block Editor: Fix cleanup in the ‘useNavModeExit’ hook. (53795)
  • Command Palette: Fix crash on block-related commands. (53923)
  • Date: Add relative time translations for moment.js. (53931)
  • Date: Update translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. domains for strings to be translatable. (53995)
  • Iframe: Set character encoding to utf-8. (53519)
  • Replace horizontal ellipsis icon with vertical ellipsis icon. (52731)
  • Toggle Distraction free mode mode based on compatibility. (54030)
  • Warning: Introduce SCRIPT_DEBUG to make the package compatible with webpack 5. (50122)
  • [Commands]: Fix move to command condition for registering. (54049)
  • [Commands]: Fix block editor commands availability. (53994)
  • [Format library]: Fix language popover position. (53841)

Block Library

  • Add init.js module for the Footnotes block. (53763)
  • Adding center align css for social icon issue. (43120)
  • Cover block: Fix exception when adding video background. (53961)
  • List View: Allow replacing template part when a block isn’t selected. (53757)
  • Post Navigation Link: Remove unnecessary space between arrows and label. (53572)
  • Search block: Fix width input field. (53952)
  • Simplify check for no posts in query-no-results block. (53772)
  • Site Logo: Remove line-height for the anchor element. (53909)

Components

  • Always render the fallback Popover anchor within the Popover’s parent element. (53982)
  • Fix the cleanup method for SandBox. (53796)
  • PaletteEdit: Fix component height. (54000)

Post Editor

  • Edit Post: Fix tab border conflicts in the Document Overview panel. (53711)
  • EditPostPreferencesModal: Fix intermittently failing tests. (53814)
  • getInsertionPoint: Fix type check for the state value. (53793)

npm Packages

  • Workflow: Run Learn directly from GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ action when publishing to npm targeting WP core. (53762)
  • Workflows: Fix issues with the npm publishing workflow when using locally. (53565)

Themes

  • Command Palette: Proper handling of page/post links in all themes. (53718)
  • Fix 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. bugs by correctly relying on the main query and removing problematic workaround. (49904)

Block Editor

  • Fix: Indicator style when block moving mode. (53972)

Icons

  • Fix invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. namespaces. (53955)

Patterns

  • Disable the preview option button when editing. (53913)

Global Styles

  • Gallery: Re-enable block spacing at block level while still hiding in global styles. (53900)

Layout

  • BlockList: Ensure element styles (and svg) are always appended at the end of the document. (53859)

Interactivity API

  • Add “supports.interactivity” to Image block. (53850)

Style Variations

  • Block Styles: Fix misplaced preview popover on RTL site. (53726)

List View

  • Recalculate window list when expanded state changes (fix logic for long nested lists). (53716)

Widgets Editor

  • Block 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.: Fix content cutoff in the keyboard shortcut modal. (53638)

Rich Text

  • Fix cleanup in useRemoveBrowserShortcuts. (52225)

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)

  • Edit site: Add missing label to post status password protected input field. (52885)
  • [a11yAccessibility 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)] Fix: Aria-haspop, aria-expanded attributes on the link format button. (53691)

Site Editor

  • Add missing aria roles to the ‘Create template part’ menu item. (53754)
  • Unify the delete button style in the dropdown menu with red. (52597)

Block Library

  • Add missing aria roles to the ‘Replace template part’ menu item. (53755)

Patterns

  • Add missing aria roles to the ‘Create pattern’ menu item. (53739)

List View

  • [a11y] Fix: Aria-haspop and aria-expanded attributes on list view button. (53693)

Block Editor

  • [a11y] Fix: Aria-haspop and aria-expanded attributes on the inserter button. (53692)

Performance

  • Revert “Switch performance tests to Playwright (#52022)”. (53741)
  • StartPageOptions: Load and parse patterns only after establishing the need for them. (53673)
  • Switch performance tests to Playwright: Take 2. (53768)

Experiments

Block API

  • Auto-inserting blocks: Add block inspector panel. (52969)
  • – Auto-inserting blocks: Add block icon to block inspector panel toggles. (54029)
  • Auto-inserting blocks: Remove toggle if block is present elsewhere. (54024)
  • Rename “auto inserting blocks” to “block hooks”. (54147)

Documentation

  • Add juanmaguitar as codeowner of /packages/interactivity/docs. (53845)
  • Add new How-to Guide for enqueueing assets in the Editor. (53828)
  • Adds example for useBlockProps hook. (53646)
  • Adds explanatory text to view.js template. (53870)
  • Clarification for parent and ancestor hierarchical relationships. (53855)
  • Docs: Extend the information about using render with block.json. (53973)
  • Docs: Remove duplicate sections from FAQ page. (53830)
  • Document the naming convention for block-library PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher functions. (53777)
  • Fix ‘lerna’ links in the release documentation. (53770)
  • Fix typo in code sample for Interactivity API. (53916)
  • MenuItem: Add Storybook stories. (53613)
  • Shortcut: Add Storybook stories. (53627)
  • Storybook: Add back subcomponents to props table. (53751)
  • Storybook: Fix default source visibility. (53749)
  • Storybook: Show main story before description. (53753)
  • Update local instructions on the dev env documentation. (53924)
  • Update the Block Variations API doc. (53817)
  • Update to node 16 and npm 8 in the getting started with code contribution doc. (53912)
  • docs: Fix report-flaky-test link. (53848)

Code Quality

  • Components: Update Popover per reviews. (53907)
  • Edit Site: Rename CanvasSpinner to CanvasLoader. (53728)
  • Enforce valid function names in the packages/block-library/src//.php files. (53438)
  • Fonts Library: Update properties name from snake case to camel case to match the rest of the properties. (53746)

Block API

  • Auto-inserting blocks: Remove obsolete TODO, fix 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/. field description. (54208)

Post Editor

  • Editor: Fix the ‘useSelect’ warning in the ‘useIsDirty’ hook. (53759)
  • Fix browser console error when changing device preview mode. (53969)
  • Refactor latest content selectors in ‘CopyContentMenuItem’ components. (53676)

Components

  • Remove unnecessary utils. (53679)
  • SlotFill: Refactor <Slot bubblesVirtually />. (53272)
  • Storybook: Update TypeScript types. (53748)

List View

  • Fix warning error when the gallery block has the same image URLs. (53809)

Typography

  • Font Face API: Use gutenberg_get_global_settings instead of private API. (53805)

Tools

  • Try: Change PR label enforcer automation not to work on draft PRs by default. (53417)

Testing

  • Attempt to fix intermittent end-to-end test failure. (53905)
  • Fonts Library: Test improvements. (53702)
  • Make fonts test files use Core approach. (53856)
  • Migrate shortcut help end-to-end tests to Playwright. (53832)
  • Relocates Font Face and Fonts Library PHP files into Core’s fonts directory. (53747)
  • ColorPalette: Refine test query. (53704)
  • end-to-end Playwright Utils: Automatically detect canvas type. (53744)
  • test: Automate mobile editor tests. (53991)

Build Tooling

  • Update Jest to latest version, and use optimized JSDOM. (53736)

Plugin

  • 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. themes is_block_theme collection param from core. (53846)

First time contributors

The following PRs were merged by first time contributors:

  • @JEverhart383: Fix typo in code sample for Interactivity API. (53916)
  • @krokodok: Make mid size parameter settable for Query Pagination block. (51216)
  • @mklute101: Update local instructions on the dev env documentation. (53924)

Contributors

The following contributors merged PRs in this release:

@afercia @andrewserong @anton-vlasenko @bangank36 @brookewp @ciampo @colorful-tones @DAreRodz @dcalhoun @derekblank @ellatrix @felixarntz @geriux @glendaviesnz @gziolo @hellofromtonya @jasmussen @jblz @JEverhart383 @jordesign @jorgefilipecosta @jsnajdr @juanmaguitar @krokodok @luisherranz @Mamaduka @margolisj @matiasbenedetto @mburridge @mirka @mklute101 @mokagio @ndiego @ntsekouras @oandregal @ocean90 @ockham @priethor @ramonjd @richtabor @SiobhyB @Smit2808 @stokesman @t-hamano @torounit @tyxla @walbo @WunderBart @youknowriad

Many thanks to @jameskoster for the release assets, @annezazu and @priethorfor the general support and help collecting highlights, and @jeffikus for the copy check!

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

What’s new in Gutenberg 16.5? (23 August)

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

This version is packed with enhancements and 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, many focused on enriching the Command Palette and enabling further customization of blocks. It features contributions from 63 contributors across 219 pull requests, including five new contributors! 🥳

Continue reading

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

What’s new in Gutenberg 16.4? (9 August)

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

What's New In Gutenberg 16.4?

Gutenberg 16.4 has been released and is available for download!

16.4 introduces some exciting new features, including both a new experimental feature and a new component, alongside many enhancements and 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. Bug fix highlights include many improvements to the recently added Footnotes 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. and enhancements to Patterns.

This release consists of 184 pull requests authored by 60 contributors, including two new contributors! 🥳

Table of Contents

  1. Auto-Inserting Blocks (Beta)
  2. New Progress Bar Component
  3. New Commands in the Command Palette
  4. New Block Supports for Footnotes Block
  5. Minimum Supported PHP Version Bumped to 7.0
  6. Changelog
  7. First time contributors
  8. Contributors

Auto-Inserting Blocks (BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.)

Activating the new “Auto-inserting blocks” feature on the Gutenberg > Experiments page enables blocks to specify a location in which they will be automatically inserted. This applies both to the frontend and to the Site Editor (via the 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/.), allowing for further user customization.

See an example in the video below of a “Like button” block that has been auto-inserted after each Comment Template block. You can also see how this block can be re-positioned using the existing block editor tools.

To try this new experimental feature, you can add an __experimentalAutoInsert field to the block.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file of a dynamic block of your liking. You have to specify the “anchor” block and the relative position (before, after, firstChild, or lastChild) for auto-insertion:

"__experimentalAutoInsert": {
    "core/comment-template": "lastChild"
}

Note that the block will only be auto-inserted as long as the containing template or template part doesn’t have any modifications by the user. (This is by design, in order not to override a user’s choice to discard an auto-inserted block in the editor.)

This feature aims to improve the extensibility of block themes through plugins and continues to be actively developed.

For more details please see the tracking issue and the testing instructions in this PR. It would be great to hear your feedback! (#51449)

New Progress Bar Component

A new, horizontal ProgressBar component that can be used in various places. Whilst this new component has been merged with this release, it has not yet been applied in the Site Editor. It will likely replace the Spinner component that is currently used in the Site Editor loading experience. There is another PR for this work in #53032, aiming to introduce an indeterminate progress bar for the Site Editor, and further experimentation in #53399 to change it to a determinate progress bar. In the meantime, this component can be tested in Storybook. (#53030)

New Commands in the Command Palette

Screenshot of the site editor, with "pre" being typed into the command palette

There are three new commands available in the command palette:

  • Show/hide block breadcrumbs
  • Enable/disable pre-publish checklist
  • Preview in a new tab

As well as expanding the functionality available in the new command palette, this effort starts to establish user experience patterns around commands, such as “show/hide” vs. “toggle”, and using snackbar notices more prominently. (#53073)

New Block Supports for Footnotes Block

The Footnotes block now includes support for updating the block’s link color, background color, and text color, as well as controls for typography, dimensions, and borders. The link and text color controls are expanded by default, as they will likely be used more frequently; the other new controls are collapsed by default. (#52897 & #53044)

Minimum Supported PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Version Bumped to 7.0

The Gutenberg 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’s minimum PHP version has been bumped from 5.6 to 7.0, to maintain parity with WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (#52982)

Changelog

Features

Components

  • Introduce a basic ProgressBar component. (53030)

Block Editor

  • Link Control: Persist advanced settings toggle state to preferences if available. (52799)

Block Library

  • Behaviors: Extend Global Styles 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 read/write behaviors config. (52370)

Enhancements

Site Editor

  • Add context to the “Reset template” “Delete template” and “Edit template” commands. (52989)
  • Add xhuge breakpoint (1920px) and update pattern grid. (52942)
  • Display keyboard shortcut for command palette in site view. (52841)
  • Make sure only one Site updated notice displays at a time. (53087)
  • Template Descriptions: Tidy up all abbreviations of ‘example’ to be e.g. (52848)
  • Try adding further details to template part panel. (52476)
  • Update the ConfirmDialog that appears when applying a style revision over unsaved changes. (52972)
  • Update: Improve titles of author templates in query title block. (52732)

Post Editor

  • Add common commands (breadcrumbs, live preview, pre-publish checklist). (53073)
  • Use 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. instead of HoCs for:

Block Library

  • Footnotes: Add link, background, and text color support. (52897)
  • Footnotes: Add typography, dimensions, and border block supports (53044)
  • Preformatted: Add spacing support. (45196)
  • Social Links: Add Threads Icon. (52685)
  • Verse: Enable the line breaks. (52928)

Patterns

  • Align height of save button and patterns pagination. (52764)
  • Allow inserting of unsynced patterns from quick inserter. (52866)
  • Show the default patterns icons for all pattern blocks in inserter. (53208)
  • Update the Manage all my patterns command to redirect to site editor patterns list. (52817)
  • Pattern library: Switch to three column layout on huge screens. (52927)

Interactivity API

  • Use defer loading strategy for frontend view scripts. (52536)
  • [create-block] Refinements to the create-block-interactive-template package. (52801)

Components

  • Settings: Show message when Visual or Code editor are disabled. (52737)
  • TabPanel: Implement Ariakit internally. (52133)

Global Styles

  • Site editor: Conditionally render 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. footer in 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.. (53204)

Block Editor

  • Remove duplicated display URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in LinkControl. (53167)

Synced Patterns

  • Remove extraneous “Detach” ToolbarButton for synced patterns. (53121)

Icons

  • Add keyboard icon and use in relative commands. (53083)

Plugin

  • Bump plugin minimum supported PHP version to 7.0. (52982)

Data Layer

  • Promisify action creator return type for WP data dispatch. (52530)

Bug Fixes

Block Library

  • 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.: Fix global border styles generation. (53007)
  • Check if object exists before accessing its properties. (52870)
  • Cover block: Disable contrast checker. (53080)
  • Disambiguate “Import” button string. (52907)
  • Footnotes:
    • Footnotes/RichText: Fix getRichTextValues for deeply nested blocks. (53034)
    • Disable based on post type. (52934)
    • Disable for synced patterns and prevent duplication for pages in site editor. (53003)
    • Fix published preview. (53072)
    • Store in revisions. (52686)
  • Image block: Fix image size at wide and full width. (53184)
  • Navigation Sidebar: Fetch the blocks from the content when trying to load navigations. (52899)
  • Navigation: Load the raw property on the navigation fallback. (52758)
  • Remove block tools 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. component schedule for deprecated in 6.3. (53115)
  • Verse: Disable line breaks. (52783)
  • Video: Fixing styles that vertical alignment of the video. (53131)

Site Editor

  • Add navigation type to title labels map. (53074)
  • Command Palette:
    • Add Open styles revisions command conditionally. (52945)
    • Command Palette: Remove double border on results pages. (52873)
    • CommandPalette: Fixed to not execute commands in IME composition. (52844)
    • Defer to preceding handlers in command palette keyboard shortcut. (53001)
    • [Core Commands]: Handle navigation commands based on access of site editor. (52987)
  • Fix block top toolbar artifact in navigation isolation. (53110)
  • Fix canvas mode sync with URL. (52996)
  • Fix the template parts link on the list page. (52891)
  • Open template parts from the list page in canvas view mode. (52916)
  • Fix the typo in the title label map. (53071)
  • Fix: Block toolbar obscuring document tools when Top Toolbar is enabled. (52722)
  • ResizableFrame: Account for window resizing. (52697)
  • Sidebar: Restore Back button ‘go to parent’ functionality. (52910)
  • Top toolbar: Fix issues with save button overlap and plugin buttons. (53101)
  • Update document title buttons radius. (53221)

Patterns

  • Add id to pattern inserted notice to stop multiple notices stacking. (52746)
  • Allow orphaned template parts to appear in “general” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (52961)
  • Correctly color code unsynced patterns titles in Site Editor. (52958)
  • Fix auto-size patterns triggering scrollbar flickering on certain size. (52921)
  • Fix color and behavior of unsynced patterns in block inserter when searching for reusable. (53205)
  • Fix editor crashing on certain search 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. combinations. (52956)
  • Fix empty general template parts in Patterns. (52747)
  • Fix not expanding pattern in page editor. (53169)
  • Fix: Snack bar not fixed on certain pages in the Site Editor. (53207)
  • Pattern: Add getBlockRootClientId call. (53206)
  • Patterns Browse Screen: Fix back button when switching between categories. (52964)
  • Reset current page when search filters change. (52933)
  • Site Editor: Fix site link 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) issues. (52744)
  • Site Editor: Use the correct icon for Patterns in sidebar card. (52931)

Post Editor

  • Allow styles to be changed dynamically through editor settings. (52767)
  • Distraction Free: Fix conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with showListViewByDefault preference. (52914)
  • Editor: Set default parameter for ‘__unstableSaveForPreview’. (53079)
  • Fix toolbar when previewing devices in post editor. (52770)
  • 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 missing Gettext wrapper on strings in Edit Post overview sidebar. (52971)
  • shimAttributeSource: Don’t run outside the registerBlockType filter. (53015)

Global Styles

  • Global styles revisions: Display text if no revisions are found. (52865)
  • Spacing presets: Fix bug with select control adding undefined preset values. (53005)
  • Style Engine: Switch off optimize by default. (53085)

Block Editor

  • Fix spacing for LinkControl actions. (53055)
  • List: Allow ENTER on multi-selection. (52947)
  • List: Fix merging nested lists. (52949)

Design Tools

  • Borders: Prevent console error when clearing custom border color. (52963)
  • Check if spacing tool is defined before displaying controls. (53008)

Distraction Free

  • Add missing command in Site Editor. (52868)
  • Distraction Free Keyboard Shortcut: Fix notices in Site Editor. (52867)

Layout

  • Prevent the Dimensions UIUI User interface from being displayed when the block does not support Dimensions. (53092)

List View

  • Ensure onBlockDrop does not fire if there is no target. (52959)

Template Editor

  • Site Editor: Don’t navigate to the patterns in Template Parts mode. (52884)

Navigation Menus

  • Navigation: 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. Core changes for the navigation fallback. (52878)

REST API

  • Global styles revisions: Update private methods to protected. (52748)

Block API

  • Parser / Site Editor: Ensure autop is not run when freeform block is set to core/htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (52716)

Accessibility

  • 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. with Edit site Navigate regions. (52940)
  • Return focus more from focus return hook. (52710)
  • [Commands]: Add aria-activedescendant attribute to suggestions. (52930)
  • ColorPalette, BorderControl: Don’t hyphenate HEX value in aria-label. (52932)
  • Modal: Fix loss of focus when clicking outside. (52653)
  • My Patterns page: Increase color contrast for the toggle group. (52678)
  • Improve consistency of the Post Editor and Site Editor Document actions. (52246)

Performance

  • Replace array_key_exists() with isset() check. (53098)
  • Footnotes: Use static closures when not using ‘$this’. (52781)

Experiments

Block Library

  • Set freeform handler only if Classic block exists. (52936)
  • Backend handle freeform blocks with TinyMCE removal. (52938)
  • Fix TinyMCE removal for heartbeat requests. (52935)

Interactivity API

  • Improve the Interactivity API priority levels logic. (52323)
  • Remove the wp-show directive temporarily. (53240)

Block API

  • Auto-inserting blocks on the frontend and in the editor (via REST API). (51449)

Documentation

  • API Reference documentation for Interactivity API. (52948)
  • Adding description of the –no-watch option. (53139)
  • Adds documentation about selectors. (52941)
  • Add Block API Version 3. (53046)
  • Added missing images via developer.wp.org site. (53051)
  • Clarify that blockGap support depends on layout support. (53254)
  • Interactivity API > Getting Started Guide – minor adjustments. (52786)
  • Update Appearance Tools. (52785)
  • Open “docs” folder for the Interactivity API package and Getting Started Guide. (52462)
  • Update the Gutenberg release process documentation. (52955)

Code Quality

Block Editor

  • Block Editor: Fix ESLint warning for the useBlockEditingMode hook. (53218)
  • Block Editor: Simplify check in ‘withBlockControls’ styles hook. (53227)
  • BlockVariationPicker: Remove unused withSelect. (53100)
  • Improve the efficiency of the useDebouncedInput hook. (53263)
  • Refactor useShowMoversGestures hook. (52792)

Block Library

  • Add PHP since annotations. (52820)
  • Footnotes: Add missing _ in revision field filter. (53135)
  • Refactor navigation title usage. (52807)
  • Template Part Block: Use get_block_file_template for rendering. (52892)

Site Editor

  • Site Editor: Remove unnecessary hook from ‘PageTemplates’. (52903)

Global Styles

  • Don’t use named arguments for sprintf. (52782)
  • Remove experimental setting for interactivity API and behaviors. (52833)
  • Site editor: Update function name. (52869)
  • Update PHP unit tests. (52819)

Format Library

  • Remove withSpokenMessages HoC from the Link format. (53106)

Interactivity API

  • Move Store’s data encoding to the echo call. (51974)
  • Update the block.json schema to include Behavior supports. (52895)
  • [Create Block] Add support for the example property and add template defaults. (52803)

Typography

  • Fluid typography: Rename viewport variables. (53082)

Components

  • Update framer-motion to 10.13.0. (52804)

Themes

  • Behaviors – Lightbox: Update theme.json schema. (51156)

Tools

  • Add GH action to enforce PR labels. (52760)
  • Changelog automation:
    • Make Accessibility a top-level section. (52900)
    • Update to work with consolidated a11yAccessibility 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) labels. (52896)
    • Use the correct label to filter Mobile app PRs. (53024)
  • Enforce PR labels:
    • Change permissions to read. (52980)
    • Fully re-enabling the pre-merge check. (52990)
    • Make PR label checks non-blocking to merge while trying a different GH token setting. (52975)
    • Try using a different token. (52979)
    • Use pull_request_target trigger to work with PRs coming from forks. (52981)
  • Use proper casing on PR template. (52999)
  • Enforce checks against redeclaration for functions and classes. (52696)

Testing

  • Add end-to-end tests for Behaviors in the site editor. (52809)
  • Ignore local test theme folders created by wp-env. (53031)
  • Improve slug generation & matching in request utils. (52414)
  • Migrate ‘iframed inline styles’ end-to-end tests to Playwright. (53269)
  • Migrate Allowed Block Test to Playwright. (53171)
  • Patterns: Reinstate template parts mode spec. (52780)
  • Route to published post instead of homepage on navigation end-to-end tests. (52802)
  • Temporarily skip 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. import end-to-end test. (53226)
  • Update end-to-end tests that use code editor. (52788)
  • Image block: Fix flaky tests. (52442)
  • Add options for debugging PHP unit tests in package.json. (52778)

First time contributors

The following PRs were merged by first time contributors:

  • @Armondal: Adding description of the –no-watch option. (53139)
  • @lunaluna: Video: Fixing styles that vertical alignment of the video. (53131)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewserong @anton-vlasenko @Armondal @artemiomorales @audrasjb @bph @c4rl0sbr4v0 @carolinan @chad1008 @danielbachhuber @DAreRodz @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @geriux @getdave @glendaviesnz @hellofromtonya @jameskoster @jasmussen @jeherve @jeryj @jordesign @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @lunaluna @Mamaduka @mburridge @michalczaplinski @mikachan @mirka @ndiego @noahtallen @noisysocks @ntsekouras @ockham @pedro-mendonca @pooja-muchandikar @priethor @ramonjd @richtabor @ryanwelcher @scruffian shimotmk @Soean @stokesman @swissspidy @t-hamano @tellthemachines @torounit @tyxla @westonruter @WunderBart

Props to @joen and @richtabor for the visual assets; @bernhard-reiter, @tyxla, @priethor, @mburridge, and @matveb for peer review; @bernhard-reiter, @youknowriad, and @dmsnell for helping get the release published to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/; and @karmatosed and @siobhyb for riding along during the release process.

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

Proposal: improve the editor tech workflow for major releases

Following on from this conversation, let’s look at how this process can be run more smoothly!

The Problem

Updating coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. with the latest features from the 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/ 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 almost always causes problems and delays at release time. Historically, it has been done in a large batch just before BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1, and the volume of changes means there is a high probability of something going wrong in the process.

A brief look through the “retrospective“ tag shows this has been a major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope. pain point for a while.

The idea of syncing Gutenberg code to core earlier in the release cycle has often been mentioned as a way to fix or at least ease the pain of this process: by merging new features into core as they are developed, it’s possible to fix any bugs identified during the process as they are caught, the new features get a little extra testing in 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., and most importantly, the risk of things going wrong on the eve of major release milestones is substantially reduced, with much less stress for all involved.

So, let’s get doing this! But… why has this idea been recurrently mentioned as a good solution, and still not implemented?

The answer lies mostly in the Gutenberg development process, and its differences from the rest of core.

Iterative code

Developing features in Gutenberg often starts as a quick, messy experimental process, before stabilising into mature, tested, shippable code. And there are multiple features simultaneously in development, which means that at any given point, there is some amount of unstable code in the plugin, which is undesirable to have in core. 

The good news is that there are mechanisms already available to avoid merging unstable code into core: using the IS_GUTENBERG_PLUGIN flag means that code won’t run in core. The historical __unstable and __experimental prefixes previously used in functions are being replaced with a private 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. system that makes experimental code inaccessible to extenders.

These mechanisms are not uniformly enforced during development though, and this is where there is some room for improvement. Whereas it’s possible to measure things like code coverage, there is no good way to automate checking whether code is otherwise stable or not, so implementation is largely up to individual contributors. Here is where documentation of expectations for the development process might be useful, so folks are aware that these rules exist and why.

Package ecosystem problems

Given that core largely consumes Gutenberg code in the shape of npm packages, there are occasional hiccups due to breaking changes in dependencies that are only noticed in core. This is because the package install process pulls the latest versions of all nested dependencies that might have not yet been updated in Gutenberg. This is the sort of problem that would hugely benefit from being detected early on, so that Gutenberg code can be updated to support the breaking changes.

One thing that could help here is regenerating the package-lock file in Gutenberg and committing it back to the repo when packages are published, so that any updated dependencies can be tested as part of the plugin release process.

Fixing dependency-related breakage also needs to be prioritised, and often during the Alpha part of the cycle developers are busy building out features so it’s easy for these bugs to slip between the cracks.

One thing that could mitigate this issue is nominating the release team (or at least the editor tech part of the team) for the next release before the current release ships. The overlap would allow for handover, so the new team is aware of any pending issues that didn’t get solved during the previous cycle, and able to coordinate fixing them, or at least not be tripped up by unexpected bugs. This means there will always be someone with ownership of the process to follow up with these issues.

Release cycle timing

Another point to consider is that the core workflow of committing changes to trunk before backporting them to the release 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"., is an impediment to updating packages in trunk with the latest changes from Gutenberg until after the stable release ships. This is because the package updates for the release during Beta/RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). will be committed to trunk, and those package versions have only the 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 necessary for the release. 

This may not be a huge problem though, as starting the sync process only after the stable release still leaves plenty of time for testing and solving any issues.

To summarise: what needs to be done in order to successfully start syncing core and Gutenberg earlier in the release cycle?

  • On the Gutenberg side, make sure all experimental/unstable code is made private and/or put behind a feature flag;
  • On the release organisation side, have some overlap between release teams so handover is easier and ownership of ongoing issues isn’t dropped.

Further suggestions, problems, feedback and ideas are very welcome!

Thanks to @andrewserong, @ramonopoly and @mamaduka for reviewing this post and @0mirka00 and @noahtallen for the package-lock suggestion 🙂

#block-editor, #gutenberg, #release-process

What’s new in Gutenberg 16.3? (26 July)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Site Editor project (formerly called Full Site Editing).

Gutenberg 16.3 has been released and is available for download!

16.3 is largely a maintenance release. This means that lots of bugs have been fixed behind the scenes, though this release does see some enhancements to patterns in addition to plenty of other minor improvements. Read on to find out how working with patterns has been improved.

This release consists of 180 pull requests authored by 54 contributors, including three new contributors! 🎉

Table of contents

  1. ‘Focus mode’ editing for patterns
  2. Sticky header bar on Patterns page
  3. Rename, duplicate, and delete patterns
  4. Changelog
  5. First time contributors
  6. Contributors

‘Focus mode’ editing for patterns

When editing template parts in the Site Editor the interface is in ‘focus mode’. However ‘focus mode’ was not previously available when working with patterns. This release enables ‘focus mode’ editing for patterns. (52427)

Sticky 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. bar on Patterns page

Previously on the Patterns page the header bar containing the search box scrolled out of view when you scrolled down the page. Other pages, such as the Templates page, did not have this problem and the header bar remained in view while scrolling the page. Gutenberg 16.3 fixes this and the header bar now remains firmly fixed to the top of the screen when you scroll the Patterns page. (52663)

Rename, duplicate, and delete patterns

Patterns now have a drop-down menu, accessed via the three dots, that allows you to rename, duplicate, and even delete patterns easily. Performing these operations has now been made much easier than it previously was.. (52270)

Changelog

Enhancements

Site Editor

  • Add delay and fade-in animation to loading spinner. (51902)
  • Make “My patterns” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. permanently visible. (52531)
  • Remove “Theme patterns” heading in Pattern library. (52570)
  • Remove 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. group descriptions. (52453)
  • Show warning on removal of Post Template 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. in the site editor. (52666)
  • Swap pattern creation options. (52726)
  • Update Dashboard button tooltips in the site editor. (52465)
  • Update Site Editor frame z-index. (52180)
  • Update locked pattern tooltips. (52497)
  • Update 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. title size & weight in detail panels. (52477)
  • Update pattern library copy. (52340)
  • Show more intuitive archive titles on Query Title block. (52521)
  • Adapt template part hint copy. (52527)

Patterns

  • Add hint to show template part move. (52395)
  • Add renaming, duplication, and deletion options. (52270)
  • Add sync tooltip. (52458)
  • Display all custom template part areas in sidebar nav. (52355)
  • Don’t override the rootClientID in create menu – only set if undefined. (52713)
  • Enable focus mode editing. (52427)
  • Remove reusable text from menu once rename hint has been dismissed. (52664)
  • Stop endless snackbars appearing. (52012)
  • Sticky header and pagination on Patterns page. (52663)
  • Update manage pattern links to go to site editor if available. (52403)
  • Separate sync status into a 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. control. (52303)

Components

  • Adding support for defined IDs in TextControl component. (52028)
  • Updated “position” default value. (52148)

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.

  • Add filter to turn off Interactivity API for a block. (52579)
  • Add runtime support for the wp-style directive. (52645)

Block Library

  • Add back old Navigation and File blocks 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/. implementation when Gutenberg is not installed. (52553)
  • Home link block: Add ‘current-menu-item’. (51478)
  • Use next40pxDefaultSize on RangeControl components. (52257)

Block Editor

  • Add maxLength to LinkControl search item URLs. (52523)
  • Make the tab labels of ColorGradientSettingsDropdown component translatable. (52669)
  • Add support for arrays to setImmutably util. (52280)
  • Stabilize defaultBlock, directInsert API’s and getDirectInsertBlock selector. (52083)

NUX

  • Restore wordpress/nux to 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.. (52455)

Bug Fixes

Patterns

  • Alternative grid layout to improve keyboard 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). (52357)
  • Add handling of sync status to the wp-adminadmin (and super admin) patterns list page. (52346)
  • Add missing decoding entities processing in Patterns and Template/Parts pages. (52449)
  • Add option to set sync status when adding from wp-admin patterns list. (52352)
  • Avoid copying global style presets via the styles compatibility hook. (52640)
  • Command Palette: Update label and icon for Patterns. (52742)
  • Ensure that the unsaved title is not persisted when reopening the modal. (52473)
  • Fix 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. with Create Patterns menu not showing in site editor page editing. (52671)
  • Fix renaming in Site View sidebar rename saves all edits for Template Parts and Navigation Menus. (52373)
  • Fix: Patterns & template parts: Remove “apply globally” option from block settings. (52160)
  • Rename edit label to Edit Block Pattern to resolve edge case in Chrome. (52496)
  • Show uncategorized patterns on the Editor > Patterns page. (52633)
  • Site Editor Patterns: Filter out patterns that are not available in the inserter. (52675)
  • Update the title of Pattern block in the block inspector card. (52010)

Site Editor

  • Fix the pattern with the post types becomes the placeholder pattern when editing template part. (52503)
  • Fix “Manage all patterns” link appearance. (52532)
  • Fix document title icon appearance. (52424)
  • Fix entering edit mode in site editor. (52406)
  • Fix missing Add Template Part button in Template Parts page. (52542)
  • Fix undo/redo in site editor code editor’s mode. (52695)
  • Remove status icon. (52457)
  • Reset device preview type when exiting the editing mode. (52566)
  • ResizableFrame: Fix styling in Firefox. (52700)
  • Site Editor Pages: Load the appropriate template if posts page set. (52266)
  • Site Editor Patterns: Ensure sidebar does not shrink when long pattern titles are used. (52547)
  • Use lowercase p in “Manage Patterns”. (52617)
  • Do not navigate to the styles pages unless you’re in a random listing page. (52728)
  • Fix multiple navigation blocks in pattern template. (52707)
  • Don’t allow creating template part on the Patterns page for non-block themes. (52656)
  • Exit template focus when opening the W menu. (52235)

Block Library

  • Fix console warning by improving error handling in Nav block classic menu conversion. (52591)
  • Fix importing classic menus. (52573)
  • Fix: Focus loss on navigation link label editing on Firefox. (52428)
  • List block: Fix selected numbering style option. (52472)
  • Post Title: The changes should be reflected when previewing a post. (52369)
  • Quote block: Add transform to paragraph. (51809)
  • Remove synced blocks from lastBlockInserted. (52558)
  • Rich Text/Footnotes: Fix getRichTextValues for useInnerBlocksProps.save. (52682)
  • Search block: Enqueue view script through block.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.. (52552)
  • Use _get_block_template_file function and set $area variable. (52708)
  • Cover Block: Fix block deprecation when fixed background is enabled. (51612)
  • Fix image block v6 deprecation. (52822)
  • Image: Use the correct method for caption class in recent deprecation. (52853)

Accessibility

  • Change Delete page menu item to Move to 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.. (52641)
  • Change password input to type text so contents are visible. (52622)
  • Do not autofocus page title field in the ‘Draft a new page’ modal dialog. (52603)
  • Fix Shift+Tab to Block Toolbar. (52613)
  • Unify focus style and add default font styles. (52495)
  • Navigation block: Add notice on reduced accessibility. (52251)
  • Password protected field: Remove autofocus and improve placeholder text consistency. (52634)
  • ResizableFrame: Make keyboard accessible. (52443)
  • Site Editor: Fix navigation menu sidebar actions order and label. (52592)

Block Editor

  • Add ‘reusable’ keyword to Pattern blocks. (52543)
  • Avoid errors in Dimension visualizers when switching between iframed and non-iframed editors. (52588)
  • Ensure synced patterns are accounted for in ‘getAllowedBlocks’. (52546)
  • Fix: Remove link action of Link UIUI User interface for draft pages created from Nav block does not correctly remove link. (52415)
  • LinkControl: Add width to ensure ellipsis truncating works. (52575)
  • LinkControl: Fix mark highlight to bold. (52517)
  • Post Content link color should not be applied to placeholder component links. (52367)
  • Fix highlight change when using transform menu. (52752)
  • Fix: Apply text color selection to link color. (52379)

Components

  • Block Editor: Display variation icon in the ‘BlockDraggable’ component. (52502)
  • Copy tweak for the reusable block rename hint. (52581)
  • Fix reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-dropdown-menu version to avoid breaking change from one of …. (52356)
  • FormTokenField: Fix token overflow when moving cursor left or right. (52662)
  • Site Editor: Make sidebar back button go back instead of up if possible. (52456)
  • Top Toolbar: Move the preferences selection into the main useSelect. (52332)

Post Editor

  • Remove a block select button from the multi-entity saving flow. (52753)
  • Fix Site editor page when JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. support is disabled. (52376)
  • Fix initial block parsing. (52417)
  • Simplify the code editor of edit-post. (52751)

Global Styles

  • DimensionsPanel: Fix unexpected value decoding/encoding. (52661)
  • Global font sizes: Ensure sizes are unique. (52483)
  • Spacing Sizes: Fix zero size typo and to be output directly. (52711)

Themes

  • Fix admin_url() for preview link of block themes. (52399)

Fonts API

  • Deprecate and make Fonts API non-functional. (52485)
  • Fix font printing 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. when metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. exists. (52343)

Extensibility

  • Page Content Focus: Ignore page content within a Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block. (52351)

Performance

Post Editor

  • Fix performance regression for isEditedPostEmpty selector. (52759)

Patterns

  • Add client side pagination to patterns list. (52538)

Site Editor

  • Fix entity cache misses for single posts due to string as recordKey. (52338)

Block Library

  • Experimental: Disable TinyMCE compat with classic editor. (52325)

Experiments

Interactivity API

  • Prevent scripts from loading if behaviors are not used. (52140)

Fonts API

  • Font Face: To generate and print font-face styles for theme.json fonts. (51770)

Documentation

  • Document the new process for releasing point releases for old release branches. (49968)
  • Add layout API documentation. (52673)
  • Added README for the “caption” component. (52033)
  • Added documentation text-transform component #52072. (52243)
  • Block Editor: Add README for BlockControls. (52366)
  • Lodash: Remove completely. (52571)
  • Removed line break within the code block. (46920)
  • Theme JSON schema: Add missing block names and unify block properties. (51293)
  • Update layout architecture documentation after stabilisation. (52316)

Code Quality

Block Editor

  • Add missing @emotion/react dep to block-editor. (52475)
  • Lodash: Remove remaining _.get() from block editor and deprecate. (52561)
  • Make use of accessing private APIs from thunks directly. (52214)

Block Library

  • Footnotes: 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. coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. changes to excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. trim. (52709)
  • Navigation: Simplify the useSelect for useNavigationMenus. (51977)
  • Query Pagination: Set ‘clientId’ as useSelect dependency. (52358)
  • Search: Remove unnecessary useEffect. (52604)
  • Template Parts: Set attributes ‘area’ as useSelect dependency. (52330)

Global Styles

  • Lodash: Refactor away from _.set() in PushChangesToGlobalStylesControl. (52404)
  • Lodash: Refactor away from _.set() in getNodesWithSettings(). (52278)
  • Lodash: Refactor away from _.set() in global styles. (52279)
  • Lodash: Remove completely from site editor. (52480)

Post Editor

  • EntityRecordItem: Fix ESLint warnings and remove unnecessary memoization. (52630)
  • PostPreviewButton: Rewrite to functional, avoid state transitions in lifecycles. (44971)
  • correct a typo: Sapce -> space. (52578)

Site Editor

  • Fix incorrect ‘useSelect’ usage. (52683)
  • SiteHub: Combine site data selector 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.. (52567)

Reusable Blocks

  • Update package to use relative path. (52712)

Core Data

  • Core Data: Fix ESLint warning for ‘useEntityProp’ hook. (52757)

Tools

Testing

  • 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.: Silence style compat warnings when in a BlockPreview. (52627)
  • Make query optional in visitAdminPage. (52413)
  • Migrate Adding Inline Token test to Playwright. (52020)
  • Migrate site editor multi-entity save flow tests. (52372)
  • Move request utils reset to global setup. (52412)
  • Nav block: Link text color inheritance fixes and tests. (51710)
  • Refactor and split navigation block end-to-end tests into separate files. (52647)
  • Try fixing block context end-to-end test failure. (52513)
  • Use posts instead of template parts for navigation color tests. (52654)
  • end-to-end Test Utils: Improve test reliability in plugins/themes and login procedures. (52144)
  • Enable jest-watch-typeahead for native tests. (51869)
  • Expand mobile editor tests. (52446)

Build Tooling

  • Backport tools: Sort PRs to be cherry picked by merged/closed date. (52667)
  • Create block interactive template. (52612)
  • Fix Webpack to watch the interactivity package files. (52642)
  • Update caniuse-lite, browserslist and core-js. (52420)
  • Lodash: Deprecate _.set(). (52407)

Project Management

  • Update issue gardening automation with new label. (52173)
  • Revert “Update Changelog for 16.1.2”. (52433)
  • GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ workflow: Add a PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher backport changes action. (52096)

First time contributors

The following PRs were merged by first time contributors:

  • @andrewhayward: Adding support for defined IDs in TextControl component. (52028)
  • @ghorivipul97: Post Content link color should not be applied to placeholder component links. (52367)
  • @sethrubenstein: Stabilize defaultBlock, directInsert API’s and getDirectInsertBlock selector. (52083)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewhayward @andrewserong @anomiex @arthur791004 @BenjaminZekavica @bfintal @carolinan @Clorith @dcalhoun @derekblank @diegohaz @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @ghorivipul97 @glendaviesnz @hellofromtonya @jameskoster @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @michalczaplinski@ mirka @noisysocks @ntsekouras @peterwilsoncc @pooja-muchandikar @Presskopp @priethor @ramonjd @richtabor @SantosGuillamot @SavPhill @SaxonF @scruffian @sethrubenstein @spacedmonkey @swissspidy @t-hamano @tellthemachines @tyxla @walbo @westonruter @youknowriad

Props to @jjameskoster for the visual assets, @greenshady for peer review, and @cbravobernal for helping to get the release published to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/.

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

What’s new in Gutenberg 16.1? (29 June)

What’s new in Gutenberg 16.1

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/ 16.1 is now available to download.

16.1 is loaded with exciting features, 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, 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) improvements and enhancements. Patterns, whose changes are synched across your site? Check. Automated footnotes for text blocks? You got it!

This release consists of 247 pull requests, authored by 72 contributors, including three new contributors. What’s more, many of 16.1’s highlights will be included in the upcoming WordPress 6.3 release.

Table of contents

  1. Your templates and patterns, your library
  2. Create your site without distraction
  3. Text blocks: now with footnotes
  4. Achieve more with the Site editor sidebar
  5. Worthy mentions
  6. Changelog
  7. Contributors

Your templates and patterns, your library

You can now create and sync design patterns across your entire site, and access them in the Pattern Library. (PR #51078)

“Reusable blocks” have been renamed to “Patterns”, and come with the option to synchronize. 

Changes you make to a synchronized pattern will update all instances of that pattern no matter where it appears on your site.  

Unsynchronized patterns, on the other hand, can be edited independently after being inserted. 

All your existing Reusable blocks, custom template parts, and patterns are displayed and are searchable in the Pattern Library. They’re also available 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. inserter.

Gutenberg Pattern Library

Create your site without distraction

Gutenberg 16.1 introducees a Distraction Free mode to the site editor; the same feature available for writing posts users love since Gutenberg 14.4 can now help you build your site, too. (PR #51173)

Once activated, this new mode removes all controls and menus, offering an environment for focused work while allowing you to edit a 1:1 preview of your site.

The Distraction Free setting is accessible via a keyboard shortcut Shift+Cmd+\ in Mac (Shift+Ctrl+\ in Windows) or in the top right options menu. “Calm, blue ocean” productivity is just a click away.

Text blocks: now with footnotes

Gone are the days of creating and constantly re-sorting dozens of anchor links. After a great deal of exploration and testing, automated footnote functionality comes to the Block Editor. (PR #51201)

Footnotes are available in text blocks including paragraph, heading and lists, and can be added from the block context menu.

The Footnotes block will remove and reorder your footnotes as you edit your text, which means less time managing links and lists and more time for writing.

Achieve more with the Site editor 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.

When viewing Home page templates, you’ll now see more template settings and configuration details in the sidebar. (PR #51223) Quickly access the home template’s 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., footer and other template areas and control blogblog (versus network, site) options such as posts per page and allowing comments.

Site editor sidebar showing home template settings

When browsing a template part that contains one or more navigation menus, for example the Header template part, you will see those menus displayed in the sidebar. From here you can conveniently view and edit all the menu items featured in that template part. (PR #51492)

Furthermore, in 16.1, live theme previewing in the Site editor (introduced in 15.8) has been moved from beyond the experimental curtain, and is available for installed blocks themes under Appearance > Themes. (PR #50983)

Worthy mentions

Take control over the dimensions of Image blocks with new aspect-ratio tools. (PR #51545)

The Link Control UIUI User interface has also seen a major revamp in this release, streamlining the editing process further. (PR #50890)

#51831 makes it easier to shuffle your Button blocks to and fro and up and down by providing direction-based arrows in the context toolbar.

Changelog

Features

  • Add focus mode for Navigation Menus. (39286)
  • Allow renaming, duplication and deleting of Navigation menus from Browse Mode Sidebar. (50880)

Block Library

  • Add Navigation Menus to Template Parts screen sidebar in Browse Mode. (51492)
  • Add Footnotes block to text blocks. (51201)

Patterns

  • Allow for filtering of block patterns by source. (51672)
  • Reusable blocks: Rename to ‘Patterns’ and add option to also add a non-synced Pattern. (51144)
  • Site Editor: Add Library for Template Parts & Patterns Management. (51078)

Themes

  • Remove the experiment option for Block Theme Previews. (50983)

Site Editor

  • Add distraction free to site editor (51173)

Enhancements

Site Editor

  • Edit Site: Make adminadmin (and super admin) background consistent with layout. (51741)
  • Edit Site: Remove first loading spinner. (51736)
  • Edit Site: Use global background color while loading. (51709)
  • Improve guidance to editing template when focused on editing a page. (51366)
  • Only show view site link in view mode. (51279)
  • Page Details View: Show 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. only if there is one. (51649)
  • Page Details View: Show parent only if there is one. (51648)
  • Site editor sidebar: Home template details. (51223)
  • Navigation on Browse Mode: Move the action to the leaf menu. (50843)
  • Remove 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. as an option in the add template flow. (51586)
  • Remove shadows in Site Editor sidebar. (51546)
  • Show warning on critical block removal. (51145)
  • Site editor navigation: Use chevron left in RTL mode. (51588)
  • Add ability to set status, publish date and password in site editor. (51408)
  • Add table view to manage templates page. (50766)
  • Update Library panel footer. (51652)
  • Update page list footer. (51438)
  • List draft navigations in Browse mode Navigation section. (51422)
  • Show actions for empty menus in Navigation on Browse mode. (51420)
  • Unify welcome guides labels casing. (51700)
  • Site editor sidebar: Add footer to template part and ensure nested template areas display. (51669)
  • Update colors in ‘Site view’. (51856)
  • Site Editor: Make string to add Template parts and Patterns consistent and translatable 51743

Components

  • ItemGroup: Update button focus styles to be more consistent. (51576)
  • Toolbar: Use Ariakit instead of Reakit. (51623)
  • Update: Adjust modal radius to be between frame and buttons. (51254)
  • UnitControl: Revamp support for changing unit by typing. (39303)
  • Move HeadinglevelDropdown to its own component. (46003)
  • Button: Introduce size prop (51842)

Block Editor

  • List View: Try showing blocks that are dragged (no longer hide them). (51724)
  • Updated unstyled Button hover selector to change fill of svg and path element. (50819)
  • Writing Flow: Allow Escape key to deselect blocks and selection during multiselection. (48904)
  • Change “Copy block” to “Copy”. (51532)
  • Limit Copy/Paste Styles menu item. (51503)
  • Force disable suggestions until URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org field is dirty in Link Control. (51354)
  • Top toolbar: Refine the icons on the right. (51735)
  • Improve LinkControl Edit UI. (51712)

Block Library

  • List block: Add numbering type selection. (51186)
  • Patterns: Removes the pattern experiment. (51719)
  • Remove accordion from details block keywords. (51597)
  • Add init modules to details and post-time-to-read blocks. (51606)
  • Improve logic in render_block_core_template_part. (50636)
  • Indicate Draft status of menus in Nav block menu selector. (51427)
  • Mobile – Image block – Fix issue with set width and height images. (51463)
  • Navigation: Remove destructive colors from modal. (51691)
  • Pass the block to the onGoToPage function. (51699)
  • Post Author – don’t show 0 in inspector controls. (51345)
  • Remove anchor support from dynamic blocks. (51288)
  • Site Tagline Block: Remove unnecessary square path from block icon SVG. (51611)
  • Add image block aspect ratio control (51545)
  • Updating social link attributes (51997)

Accessibility

  • Autocomplete: Announce results to screen readers when first becoming visible. (51018)
  • List View: A11YAccessibility 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) focus enhancements for edit-site based on modifications to edit-post. (51404)
  • Add a description key to 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. style variations. (45242)
  • Focus first focusable on Link UI. (51105)
  • BlockLockModal: restore focus on fallback toolbar button when original button is not rendered (51666)
  • Site Editor Sidebar: improvements to buttons (51762)

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.

  • Add missing tests for the Image block. (51305)
  • Image block: Add animation toggle to lightbox behavior. (51357)

Global Styles

  • Accept transforms in gutenberg_get_global_styles context params. (50484)
  • Split styles menus in 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. and everything else. (51318)

Icons

  • Tweak icons for improved HiDPI devices. (51511)

Templates API

  • Return post modified datetime in response. (51362)

List View

  • Style Book: Close list view when opening the style book. (50438)

Design Tools

  • List View: Add an indicator of when a position type is set for a block. (49122)
  • Sticky Position: Try re-enabling non-root sticky position. (49321)
  • Clarify error message if duotone color values is incorrect. (51397)
  • List all the font families and font sizes from all the theme.json origins in the font picker. (51488)

Post Editor

  • Adjust the name of the custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes. button labels. (47407)
  • Block manager: Display a ‘Reset’ button when blocks are hidden to quickly enable all. (51200)

Media

  • Prepublish: Suggest uploading external images. (46014)

Patterns

  • Block Options: Use consistent capitalization on template parts and patterns. (51761)

CSSCSS Cascading Style Sheets. & Styling

  • Update editor UI modal width. (51733)

Commands

  • Add commands to access template, template parts and styles. (51501)
  • Add global styles related commands. (51637)

Themes

  • Block Theme Previews: Change the URL query string for more safety. (51312)
  • Update the Save Button label when you’re previewing a theme. (51361)
  • Ensure there is always a Navigation available in the browse mode sidebar via fallback algorithm 50321

Bug Fixes

Block Library

  • Fix navigation error in library. (51589)
  • Fix site editor rendering of Categories block. (51329)
  • Gallery block – Add default value for innerBlockImages. (51443)
  • Latest posts: Make more link consistent between frontend and editor. (51190)
  • Navigation: Don’t interfere with pointer events. (51378)
  • Post editor: Make the Post Content block available as a child of the Query block. (51405)
  • Search Block: Fix problem with buttons not outputting primary status. (51529)
  • Try providing a non-zero value for client width in image editor. (51285)
  • 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.: Properly initialize and update perPage when we inherit from global query. (51641)
  • 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. block: Fix not 1:1 between the editor and the front-end. (49963)
  • Spacer block: Fix invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. markup when set to fill. (51317)
  • Buttons Block: add support for orientation-based block movers (51831)
  • Rename navigation fallback classes from WP_ to Gutenberg_ (51959)

Commands

  • Show pages with any status in the command center. (51324)
  • Add manage all custom patterns command (51845)
  • Add another batch of commands to the site editor (51832)
  • Add UI commands to the post editor (51900)
  • Add preferences and keyboard shortcuts commands (51862)

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

  • Core Data: Fix ESLint warning for the ‘useEntityRecord’ hook. (51562)
  • useEntityRecord: Fix destructure error when enabled option is false. (51534)

Block Editor

  • Fix blocks autocompleter ‘rootClientId’ selector. (51673)
  • Inserter: Fix arrows in RTL mode. (51622)
  • Link Format: Don’t return focus on the selected text ‘onFocusOutside’. (51684)
  • ListView: Update drop indicator line positioning to support rtl languages. (51284)
  • Page Content Focus: Default insertion point to the Post Content block. (51773)

Site Editor

  • Add ‘Edit template’ and ‘Back to page’ commands. (51364)
  • Fix template display in page details with a custom template. (51638)
  • Page details: Fix displaying slugs with non-latin characters. (51679)
  • Prevent block overlay on blocks with a ‘contentOnly’ editing mode. (51780)
  • Fix gradient background color repeats. (51374)
  • Global styles: Fix back button tooltip. (51725)
  • Site editor header: Fix document title back and shortcut color contrast. (51442)
  • Site editor sidebar: Fix the heading hierarchy. (51696)
  • Disable the revision button if there is no clickable menu 51851
  • Library: Fix misalignment of description in custom template parts 51868
  • Library: Fix delete shortcut incorrectly bound to non-user patterns 51830
  • Fix toolbar overlap in site editor 51810
  • Increase space between page 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. and details section 51858
  • Fix missing MenuGroup segment in Site Editor header more menu 51860
  • Update the add template modal design 51806
  • Update text color of site editor menu item hover/active states 51847
  • Fix library command path 51837
  • Restore sidebar in focus mode on Pattern click through in Browse Mode Library 51897

Accessibility

  • Distraction Free: Avoid focus loss when enabling/disabling distraction free mode via the more menu. (51627)
  • Library: Add an explicit label to the search control. (51781)
  • Site editor: Add a navigable region for content area of Library and Template views. (51782)
  • Fix shift+tab behavior to move to toolbar when the preceding block has a form element. (51548)

Global Styles

  • Color Panel: Fix rendering of tabs with no color. (51498)
  • Remove custom padding on style revisions button. (51269)

Components

  • MediaPlaceholder: Fix position of URLPopover. (51363)
  • Popover: Allow legitimate 0 positions to update popover position. (51320)
  • Button: Remove unnecessary margin from dashicon. (51395)
  • Keep framer-motion from updating minor version 51894
  • ConfirmDialog: Fix affirmative action being triggered an extra time when selecting a button via keyboard 51730
  • Tweak more icons for high-resolution devices 51768
  • ZStack: fix component bounding box to match children 51836

Patterns

  • Library: Reinstate sidebar navigation menu editing for template parts. (51825)

Interactivity API

  • Image block: Remove Lightbox markup if it is set as disabled. (51692)

Block Locking

  • 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. in selectors. (51541)

Typography

  • Fluid typography: Custom font-sizes should use max viewport width. (51516)

Widgets Editor

  • Fix fixed toolbar in customize widgets. (51092)
  • Hide the hidden navigation block. (50662)

Block Variations

  • [Block Library – Post Terms]: Custom taxonomies do not show icons when transforming from the toolbar. (51476)

Page Content Focus

  • Switch to Page panel when deselecting a block 51881
  • Don’t show ‘Back to page’ notification when navigating away from page 51880
  • useBlockSync(): Reset inner blocks when component unmounts 51783
  • Fix black pixel appearing when block toolbar is empty 51779
  • Only show Page Content Focus commands when in edit mode 51888

Performance

Site Editor

  • Edit Site: Add a loading timeout. (51049)
  • Improve DocumentActions performance. (51432)
  • Prevent BlockBreadcrumb from re-rendering unnecessarily when typing. (51628)
  • Reduce number of List View re-renders while typing. (51518)
  • Improve PagePanels performance. (51319)

Block Editor

  • Improve getBlockEditingMode() and useAppender() performance. (51675)

Experiments

Global Styles

  • Color Randomizer: Fix an error when the theme has no color palette. (51539)

Documentation

  • Docs: Fix incorrect import of useEntityRecords in code example. (51630)
  • Fix broken links in editor documentation. (51321)
  • Fix grammar in the Create a Block > WordPress 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 page. (51663)
  • Fix grammar on the Create a Block tutorial page. (51662)
  • Fix grammar on the Getting Started page. (51661)
  • Update broken link. (41758)
  • Update components README.md. (51557)
  • Update wp-env changelog. (51614)
  • Updated getEntityRecord doc by using selector instead of dispatch. (51298)

Code Quality

General

  • Adopt lock-unlock.js and private-apis.js convention. (51322)
  • Formats: Avoid rerendering language edit component when typing. (51440)
  • Keyboard Shortcut: Clean up shortcut names. (51739)
  • Lodash: Refactor away from _.kebabCase() in block editor. (51687)
  • Lodash: Refactor away from _.mergeWith(). (51483)
  • Lodash: Remove from blocks package. (51703)
  • Remove pattern directory categories endpoint. (51340)
  • Require relocated class files for back-compat in WordPress releases. (51670)

Block Library

  • Add tests for WP_Classic_To_Block_Menu_Converter class. (51410)
  • Details: Set ‘clientId’ as useSelect dependency. (51634)
  • Move Navigation fallback files to 6.3 directory. (51572)
  • Navigation: Fix ListView deprecation notice. (51094)
  • Navigation: Just a simple refactor. (51382)
  • Remove legacy isTopLevelLink attribute from Navigation block tests. (51759)
  • Search Block: Write “Button Only” label in sentence capitalization. (51629)

Site Editor

  • Browse Mode: Move CSS to more generic selector. (51547)
  • DRY up ContentBlocksList and BlockInspectorLockedBlocks. (51281)
  • Edit Site: Refactor the NavigationMenuContent component and fix the deprecation notice. (51469)
  • PageContent: Fix unlock import. (51360)
  • Refactor Site Editor block editor code. (51524)

Block Editor

  • Lodash: Replace _.mergeWith() with deepmerge in blocks. (50637)
  • useInsertionPoint: Add missing dependency for useCallback. (51682)
  • Block Editor: Improve data selector for BlockQuickNavigationItem. (51429)
  • Block Editor: Remove redundant memoization from ‘ImageURLInputUI’. (51658)
  • Block Editor: Simplify filtering condition for getBlockParentsByBlockName selector. (51439)
  • Block Editor: Remove unused selectors. (51674)
  • Extract nav editor component in Nav in Browse mode. (51436)
  • Remove custom button and (conditionally) show single menu on Navigation route in Browse Mode. (51565)

Design Tools

  • Fluid typography: Add missing changelog from #51516. (51668)

Layout

  • Move layout definitions out of theme.json. (50621)
  • Try stabilising layout and its associated APIs. (51434)

Global Styles

  • Global styles revisions: Move from experimental to 6.3. (51474)

Post Editor

  • Fix refactor flat term selector to use data api for creating new terms. (50952)

Data Layer

  • Private actions and selectors: Return stable references, expose to thunks. (51051)

Themes

  • Block Theme Previews: Rename GET variable and prepare for core compat. (51738)

Interactivity API

  • Remove the hydration console log of the Interactivity API. (51571)
  • Use interactivity API for Navigation and File blocks only in Gutenberg. (51694)
  • Behaviors: Move behaviors code to experimental folder. (51654)

Components

  • Convert ClipboardButton to TypeScript. (51334)
  • Use internal context system to apply toolbar variant to toolbar dropdowns. (51154)

Parser

  • Split each class in parser.php to a separate file. (48693)

Tools

Testing

  • Add ‘Mamaduka’ as one of the code owners for Playwright tests. (51470)
  • Combine Site Editor list view tests into a single file. (51635)
  • Consolidate duplicate block tests. (51352)
  • Fix flaky ‘Keep styles on block transforms’ end-to-end test. (51593)
  • Fix flaky ‘Push to Global Styles’ end-to-end test. (51636)
  • Fix flaky ‘Switch to Draft’ action in preview end-to-end tests. (51564)
  • Fix flaky ‘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. API’ end-to-end test. (51592)
  • Fix flaky Image block interactivity end-to-end test. (51573)
  • Fix the flaky site editor list view tests. (51598)
  • Migrate ‘Allowed Blocks Setting on InnerBlocks’ tests to Playwright. (51677)
  • Migrate block hierarchy navigation tests to Playwright. (51517)
  • Playwright Utils: Change preference update method in setIsFixedToolbar. (51659)
  • Playwright Utils: Simplify editor preference updates in createNewPost. (51560)
  • Styles Navigation Screen: Close style book using location. (51365)
  • Update BlockEditorProvider tests. (51497)
  • Update E2E test sharding on CI, make Playwright tests faster, Puppeteer tests slower. (50362)
  • Update the ‘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. block’ test and fix flakiness. (51631)
  • end-to-end tests: Try fixing ‘networkidle’ timeout errors. (51826)
  • test: Re-enable native integration tests. (51706)
  • Migrate Navigable toolbar test to Playwright. (51514)
  • Mobile unit tests: Remove custom waitFor implementation. (46735)
  • Set fixedToolbar to false after each top toolbar test to ensure proper cleanup. (51600)
  • Fix performance test failure on 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.. (51407)
  • Performance tests: Make theme versions consistent cross-env. (50905)
  • Performance tests: Update base point to compare. (51381)

Build Tooling

  • Babel config: Enable useSpread option for JSX transform to reduce transpilation. (51574)
  • Lodash: Remove from lint staged type check. (51698)
  • Performance Tests: Update the base point to compare against. (51689)
  • wp-env: Try to fix failing PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ actions. (51513)
  • npm lockfile: Hoist reakit and date-fns packages to the top. (51500)

Plugin

  • Add script to compile usage of experimental APIs. (51341)
  • Remove Details block setting field from the experiments page. (51372)

Contributors

First time contributors merged the following PRs for 16.1 🎉:

The following contributors also merged PRs in this release:

@aaronrobertshaw @afercia @alexstine @andrewserong @aristath @artemiomorales @aurooba @bangank36 @c4rl0sbr4v0 @carolinan @ciampo @dcalhoun @derekblank @diegohaz @draganescu @ellatrix @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @jameskoster @jasmussen @jeryj @jhnstn @jsnajdr @juanfra @kozer @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @mcliwanow @mcsf @mikachan @n2erjo00 @noahtallen @noisysocks @ntsekouras @oandregal @okmttdhr @paulopmt1 @pbking @peterwilsoncc @pooja-muchandikar @ramonjd @richtabor @samnajian @SantosGuillamot @SavPhill @SaxonF @scruffian @shimotmk @Sidsector9 @SiobhyB @spacedmonkey @stokesman @sunyatasattva @t-hamano @talldan @tellthemachines @tyxla @walbo @WunderBart @xerpa43 @youknowriad @priethor @ajlende @mirka

Mega props to @jameskoster and @joen for the visual assets, @priethor for peer review, and @isabel_brison for helping get the release published to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/.

Thank you to everyone who was involved. And to those reading this post 😀


Reminder: “What’s new in Gutenberg…” posts (labeled with the #gutenberg-new 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.)) are posted after every Gutenberg release. Learn more about how to keep up to date with news about Gutenberg and the Site Editor project (formerly called Full Site Editing).

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

What’s new in Gutenberg 16.0? (14 June)

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

With WordPress 6.3 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 just around the corner, Gutenberg 16.0 gives us a sneak peek at the features that will soon be available in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. WordPress. This latest release brings significant enhancements to the Site Editor, introduces a newly stabilized 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., refines dimension controls, and includes many quality-of-life improvements and 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. In total, there are 164 pull requests authored by 54 contributors, including four new contributors!

Table of contents

Page management comes to the Site Editor


Gutenberg 16.0 introduces big changes to the Site Editor, including the ability to create new pages (50565) and view page details in the 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. (50767). This means you can practically build out a website without leaving the Site Editor, which speeds up the site creation process, makes it easier to see what the final result will look like, and reduces the overall cognitive load of switching between editors.

One of the challenges of editing page content within the Site Editor is that it can be difficult to know what is actually being edited. To address this, Gutenberg 16.0 adds the ability to focus on either the page’s content or the page’s template (50857). See the video demonstration below.

Refined dimension controls and Post Template gets block spacing


Block spacing and layout controls have been added to the Post Template block, which is part of the Query block, making it possible to control the space between posts from within the Editor (49050). This is a major improvement for theme authors, who have previously had to resort to custom CSSCSS Cascading Style Sheets..

Dimension controls have also been redesigned to optimize and condense unlinked controls (50660). This makes it easier to apply margin and padding while taking up less vertical space in the block settings sidebar.

The Details block is now stable


The Details block was introduced in Gutenberg 15.6 as an experiment. After community testing and feedback, the block was scaled back and stabilized into what is now available in 16.0 (50997). This block uses <details> and <summary> HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. elements to hide content until the reader is ready to view it. You can also configure the content to be visible by default.

Other Notable Highlights

In Gutenberg 15.9, the experimental flag was removed from the Command Center, and now in 16.0 its 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. is public (51169). This will allow extenders to begin experimenting with custom commands.

The color palette component has been improved for better readability (50450). The name and value no longer overlay the swatch. And icon-only labels are now possible in the Query Pagination block (50779).

There have also been improvements to drag-and-drop in the List View. It is now much easier to position blocks at the top and bottom of the list (#50726). Furthermore, when blocks are dragged into a container, such as a Group block, they are now added to the bottom of the container as opposed to the top (#50936).

Changelog

Enhancements

Block Editor

  • Block Controls SlotFill: Refactor to allow passing multiple contexts, including internal components context. (51264)
  • Block Toolbar: Update the ‘Unlock’ button label. (51083)
  • Iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. Editor if all blocks are v3. (48286)
  • Improve (and relax) search vs direct URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org entry detection in Link Control. (51011)
  • Link Control require user to manually submit any changes. (50668)
  • List View: Allow dragging outside the immediate area by passing down a dropZoneElement. (50726)
  • List View: Append when dragging into collapsed blocks. (50936)
  • Reinstate Text control outside of settings in Link Control. (50957)
  • Update the document title in the template mode of the post editor. (50864)
  • Use “Save” instead of “Apply” in Link Control. (50964)
  • Use checkbox for Open in new tab within Link Control. (50961)
  • Visually hide the LinkControl initial/results heading. (50977)

Site Editor

  • Add delete action for pages in navigation sidebar. (51101)
  • Add page details to the Site Editor sidebar. (50767)
  • Add Paragraph prompt to Post Content when empty. (50623)
  • Add template actions in site editor navigation sidebar. (51054)
  • Add the ability to create a new page in the Site Editor. (50565)
  • Add the ability to focus on editing a page’s content vs the page’s template. (50857)
  • Directly save if only changing current context. (50567)
  • Disable block supports derived design tools when Blocking Editing Mode is not default. (50912)
  • DocumentActions: Animate between page and template mode. (51224)
  • Site Editor sidebar: Refactor page details. (51093)
  • Styles Screen: Add link to 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.. (51149)
  • Try adding dynamic page templates to pages section. (50630)
  • Tweak edit site resizable frame handle. (50878)
  • Update the bottom sticky section in the site editor details panel. (51274)

Block Library

  • Details Block: Remove experimental flag and stabilize. (50997)
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.: Improve preview on the editor site. (50167)
  • Post Title: Improve preview on the editor site. (50147)
  • Query Pagination: Address feedback from #50779. (51165)
  • Query Pagination: Allow hiding the label text. (50779)
  • Search Block: Add button only with expandable input. (50487)
  • Search block: Refactor to use HTML Tag Processor. (51273)
  • Post Link: Update block variation icon to match the one used in the Link UIUI User interface results. (50190)
  • Post Template: Add block spacing and layout. (49050)

Components

  • Button: Add opt-in prop for larger isSmall size. (51012)
  • ListView: Converted additional content render into a component. (51163)
  • ColorPalette: Improve color name readability. (50450)
  • Spacing: Optimize and condense unlinked spacing controls. (50660)

Data Layer

  • Merge selector-binding code (except resolvers) into a new bindSelector function. (51176)
  • Move action-binding code to a bindAction function. (51161)

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)

  • Add TabPanel to document overview replacing fake tabs. (50199)
  • BorderControl: Improve color code readability in aria-label. (51197)
  • Handle isDraft or isInvalid Enter keypress via onKeyDown instead of a Keyboard Shortcut. (51021)
  • ListView: Allow deleting blocks using keyboard. (50422)
  • Site Editor: Add view site link to site editor nav. (50420)
  • Use generic div instead of nav for the SidebarNavigationScreen component. (51111)

New APIs

  • Command Center: Marks the selectors and actions of the commands store as a public API. (51169)

Bug Fixes

Block Editor

  • Add inert attribute to disabled blocks that have only disabled descendants. (51079)
  • Fix multi-entity multi-property undo redo. (50911)
  • Hide the save draft button for published posts. (51193)
  • Iframe enqueuing: Add editorStyle and warning. (50091)
  • Improvements to how blocks with a ‘disabled’ editing mode behave. (51148)
  • Link Control: Add missing translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization.. (51081)
  • Make sure post content always has correct layout. (51431)
  • Navigation: Memoize link value passed to the LinkControl. (51155)

Site Editor

  • Browse Mode: Remove horizontal scrollbar during screen transitions. (51189)
  • Fix styling of actions in site editor navigation sidebar. (51153)
  • Properly decode new template title in snackbar. (51057)
  • Site Editor: Update untitled copy and rendering. (51074)

Widgets Editor

  • Update the settings icon in Widgets Editor. (51029)

Block Library

  • Freeform/ShortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site.: Prevent blocks from converting HTML entities. (51123)
  • Navigation: Apply color classes to the navigation container element. (50968)
  • Post Template: Set block context via 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.. (50313)
  • Post Template: Output number of columns as classname for backwards compatibility. (51358)
  • Post Title: Fix autofocus when iframed. (5133151367)
  • Query: Fix deprecation error when migrating layout. (51311)
  • Term Description: Handle default margin styles. (51137)

Global Styles

  • DimensionsPanel: Fix site editor error on Columns block level screen. (51252)
  • Fluid typography: Ensure max viewport width is used in the editor. (51146)
  • Global styles revisions: Ensure redirect runs once for back button. (51316)
  • SpacingSizesControl: Fix problem with the slider position being reset when saving global styles. (50956)
  • Styles Screen: Ensure variations previews will render in mobile viewports. (51080)

Components

  • Fix: Can’t type space if RichText component is inside button/summary in Firefox. (50540)
  • FontSizePicker: Fix control 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. spacing. (50855)

Themes

  • Avoid changing non-theme-preview requests. (51221)

Data Layer

  • Data: Fix a bug where private selectors on a store with resolvers are inaccessible. (51166)

Accessibility

  • Add aria labels to the focal point picker component. (50993)
  • Block Toolbar: Fix text only label for locked blocks. (50944)
  • Fix Navigable Toolbar initialIndex. (51181)
  • Fix screen readers not announcing updated aria-describedby in Firefox. (51035)
  • Link Control: Fix the ‘Save’ button’s disabled state. (51117)
  • Social Icons: Manually set Snapchat label color. (51237)

Performance

  • Make getBlockEditingMode() return ‘default’ when parent is ‘contentOnly’. (51185)
  • Use static closures when not using $this. (50723)
  • Add removeAllNotices action to allow all notices to be removed from a given context. (44059)
  • Add a new action removeNotices which allows bulk removal of notices. (39940)

Experiments

Interactivity API

  • Change label and description for the gutenberg-interactivity-api-core-blocks experiments setting. (51059)
  • Disable Lightbox UI if link has an image. (51180)
  • Experiment: Put directives on element and insert lightbox as its child. (51089)
  • Image Lightbox: Add a reset button. (51239)
  • Image Lightbox: Add support for external urls in the lightbox. (51278)
  • Image Lightbox: Fix design of close button for the lightbox (correct PR). (51206)
  • Image Lightbox: Improve image block lightbox escaping. (51061)
  • Move the directives and markup needed for the lightbox to block supports. (51232)
  • Navigation block: Set correct aria-expanded on hover. (50953)
  • Remove experimental flag from navigation and file blocks to use the Interactivity API (as private). (51266)
  • Rename directives suffix character and island directive in the Interactivity API. (51152)
  • Remove not needed aria-hidden attribute in navigation block experiment. (51044)

DropdownMenu v2

  • Change default placement to match the legacy DropdownMenu component. (51133)
  • Render in the default Popover.Slot. (51046)
  • Style tweaks. (50967)
  • Tweak styles, add toolbar-specific styles. (51097)

Documentation

  • Add documentation about the entities abstraction and the undo/redo stack. (51052)
  • Fix code example error in the Curating the Editor doc. (51070)
  • Fix formatting and use sentence case for titles in Scripts doc. (51069)
  • Fix headings in the View component readme. (51157)
  • Fix text in readme. (51268)
  • Remove Block Grammar doc and all corresponding internal links. (51106)
  • Remove Roadmap doc. (51062)
  • Undo/Redo: Minor edits. (51085)
  • Update README.md on SlotFills to add info + example about the prop fillProps. (51013)
  • 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/. documentation link for propTypes. (51208)

Code Quality

  • Extract BlockThemePreviews-related code from the editor package. (50863)
  • Fluid typography: Extract logic to derive fluid typography settings. (51188)
  • Fonts API: Refactor 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. global functions into WP_Fonts_Resolver. (50811)
  • Iframe: Clarify how dependencies related to inline styles work. (51199)
  • Iframe: Fix blob cleanup. (51004)
  • Iframe: Remove obsolete readyState checks. (51003)
  • Iframe: Remove obsolete styles HTML parsing. (51136)
  • Lodash: Remove _.isEmpty(). (5109650974510985091751168)
  • mapSelectorsWithResolvers: Don’t init hasResolver, mapSelectors already did it. (51160)
  • mapValues: Use fromEntries, avoid re-creating object in each reducer call. (51159)
  • Refactor code that adds resolver fulfillment to selector calls. (51009)
  • Remove legacy logic for __unstableResolvedAssets. (51100)
  • Remove outdated Babel spread optimization from selectors. (50987)
  • Remove the insert.ref field from insertUsage data. (51130)
  • Rename ‘page content lock’ to ‘page content focus’. (51280)
  • Separate template screens in the Site Editor. (51040)
  • Writing flow: Fix tab into iframe. (50955)

Block Editor

  • Refactor Link Control Settings Drawer to avoid unnecessary prop drilling. (50963)
  • ListView: Remove unused ‘useSelect’ dependency. (51134)

Components

  • BlockDraggable: Use the getBlockType selector. (51174)
  • PreferenceToggleMenuItem: Add missing useSelect dependency. (51158)

Tools

wp-env

  • Fixed Docker Image Size Ballooning. (51034)
  • Preferentially Execute Local wp-env. (50980)

Scripts

  • Scripts: Optimize updating render paths when developing blocks. (51162)
  • Fix: Build render.php when webpack watch in progress. (50939)

Testing

  • Add tests to useIsDirty. (51036)
  • Button: Add basic visual 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. tests. (51000)
  • Comment Template Block: Add test coverage for context setting. (50879)
  • Comment Template Block: Retain inner blocks inserted via render_block_data filter. (50883)
  • Fix flaky Behaviors UI end-to-end tests. (50954)
  • Ignore framer-motion warning when running end-to-end tests locally. (50938)
  • Link Control test migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.: Should contain a label when it should open in a new tab. (51001)
  • Link control: Migrate tests to Playwright. Can be created by selecting text and using keyboard shortcuts. (50996)
  • End-to-end tests: Add an assertion to confirm that the URL changed. (50835)

Build Tooling

  • babel-preset-default: Enable the bugfixes option for preset-env. (50994)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @alexstine @andrewserong @anton-vlasenko @artemiomorales @benlk @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @derekblank @ellatrix @fluiddot @geriux @getdave @gigitux @glendaviesnz @gziolo @jameskoster @jeryj @jffng @jsnajdr @juanfra @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @mcsf @michalczaplinski @mikachan @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @ockham @okmttdhr @opr @ramonjd @richtabor @rmorse @SantosGuillamot @SaxonF @scruffian @SiobhyB @t-hamano @Takshil-Kunadia @tellthemachines @tyxla @wayheming @westonruter @youknowriad

Props to @joen for the visual assets, @bph for peer review, and @bernhard-reiter for helping get the release published to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/.

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