prep build 6/20

backport-changelog/6.6/6854.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6854
+
+* https://github.com/WordPress/gutenberg/pull/62670

bin/cherry-pick.mjs

@@ -6,6 +6,7 @@ import readline from 'readline';
 
 import { spawnSync } from 'node:child_process';
 
+const REPO = 'WordPress/gutenberg';
 const LABEL = process.argv[ 2 ] || 'Backport to WP Beta/RC';
 const BACKPORT_COMPLETED_LABEL = 'Backported to WP Core';
 const BRANCH = getCurrentBranch();
@@ -113,7 +114,7 @@ function cli( command, args, pipe = false ) {
  */
 async function fetchPRs() {
 	const { items } = await GitHubFetch(
-		`/search/issues?per_page=100&q=is:pr state:closed sort:updated label:"${ LABEL }" repo:WordPress/gutenberg`
+		`/search/issues?per_page=100&q=is:pr state:closed sort:updated label:"${ LABEL }" repo:${ REPO }`
 	);
 	const PRs = items
 		// eslint-disable-next-line camelcase
@@ -143,7 +144,7 @@ async function fetchPRs() {
 	const PRsWithMergeCommit = [];
 	for ( const PR of PRs ) {
 		const { merge_commit_sha: mergeCommitHash } = await GitHubFetch(
-			'/repos/WordPress/Gutenberg/pulls/' + PR.number
+			`/repos/${ REPO }/pulls/` + PR.number
 		);
 		PRsWithMergeCommit.push( {
 			...PR,
@@ -380,15 +381,17 @@ function reportSummaryNextSteps( successes, failures ) {
 function GHcommentAndRemoveLabel( pr ) {
 	const { number, cherryPickHash } = pr;
 	const comment = prComment( cherryPickHash );
+	const repo = [ '--repo', REPO ];
 	try {
-		cli( 'gh', [ 'pr', 'comment', number, '--body', comment ] );
-		cli( 'gh', [ 'pr', 'edit', number, '--remove-label', LABEL ] );
+		cli( 'gh', [ 'pr', 'comment', number, ...repo, '--body', comment ] );
+		cli( 'gh', [ 'pr', 'edit', number, ...repo, '--remove-label', LABEL ] );
 
 		if ( LABEL === 'Backport to WP Beta/RC' ) {
 			cli( 'gh', [
 				'pr',
 				'edit',
 				number,
+				...repo,
 				'--add-label',
 				BACKPORT_COMPLETED_LABEL,
 			] );
@@ -444,7 +447,7 @@ function reportFailure( { number, title, error, mergeCommitHash } ) {
  * @return {string} PR URL.
  */
 function prUrl( number ) {
-	return `https://github.com/WordPress/gutenberg/pull/${ number } `;
+	return `https://github.com/${ REPO }/pull/${ number } `;
 }
 
 /**

docs/reference-guides/core-blocks.md

@@ -902,7 +902,7 @@ Summarize your post with a list of headings. Add HTML anchors to Heading blocks
 
 -	**Name:** core/table-of-contents
 -	**Experimental:** true
--	**Category:** layout
+-	**Category:** design
 -	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** headings, onlyIncludeCurrentPage
 

docs/reference-guides/interactivity-api/api-reference.md

@@ -299,6 +299,9 @@ The returned value is used to change the inner content of the element: `<div>val
 
 ### `wp-on`
 
+> [!NOTE]  
+> Consider using the more performant [`wp-on-async`](#wp-on-async) instead if your directive code does not need synchronous access to the event object. If synchronous access is required, consider implementing an [async action](#async-actions) which yields to the main thread after calling the synchronous API.
+
 This directive runs code on dispatched DOM events like `click` or `keyup`. The syntax is `data-wp-on--[event]` (like `data-wp-on--click` or `data-wp-on--keyup`).
 
 ```php
@@ -325,8 +328,16 @@ The `wp-on` directive is executed each time the associated event is triggered.
 
 The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored.
 
+### `wp-on-async`
+
+This directive is a more performant approach for `wp-on`. It immediately yields to main to avoid contributing to a long task, allowing other interactions that otherwise would be waiting on the main thread
+to run sooner. Use this async version whenever there is no need for synchronous access to the `event` object, in particular the methods `event.preventDefault()`, `event.stopPropagation()`, and `event.stopImmediatePropagation()`.
+
 ### `wp-on-window`
 
+> [!NOTE]  
+> Consider using the more performant [`wp-on-window-async`](#wp-on-window-async) instead if your directive code does not need synchronous access to the event object. If synchronous access is required, consider implementing an [async action](#async-actions) which yields to the main thread after calling the synchronous API.
+
 This directive allows you to attach global window events like `resize`, `copy`, and `focus` and then execute a defined callback when those happen.
 
 [List of supported window events.](https://developer.mozilla.org/en-US/docs/Web/API/Window#events)
@@ -354,8 +365,15 @@ store( "myPlugin", {
 
 The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored. When the element is removed from the DOM, the event listener is also removed.
 
+### `wp-on-window-async`
+
+Similar to `wp-on-async`, this is an optimized version of `wp-on-window` that immediately yields to main to avoid contributing to a long task. Use this async version whenever there is no need for synchronous access to the `event` object, in particular the methods `event.preventDefault()`, `event.stopPropagation()`, and `event.stopImmediatePropagation()`. This event listener is also added as [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive).
+
 ### `wp-on-document`
 
+> [!NOTE]  
+> Consider using the more performant [`wp-on-document-async`](#wp-on-document-async) instead if your directive code does not need synchronous access to the event object. If synchronous access is required, consider implementing an [async action](#async-actions) which yields to the main thread after calling the synchronous API.
+
 This directive allows you to attach global document events like `scroll`, `mousemove`, and `keydown` and then execute a defined callback when those happen.
 
 [List of supported document events.](https://developer.mozilla.org/en-US/docs/Web/API/Document#events)
@@ -383,6 +401,10 @@ store( "myPlugin", {
 
 The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored. When the element is removed from the DOM, the event listener is also removed.
 
+### `wp-on-document-async`
+
+Similar to `wp-on-async`, this is an optimized version of `wp-on-document` that immediately yields to main to avoid contributing to a long task. Use this async version whenever there is no need for synchronous access to the `event` object, in particular the methods `event.preventDefault()`, `event.stopPropagation()`, and `event.stopImmediatePropagation()`. This event listener is also added as [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive).
+
 ### `wp-watch`
 
 It runs a callback **when the node is created and runs it again when the state or context changes**.
@@ -772,7 +794,7 @@ We need to be able to know when async actions start awaiting and resume operatio
 
 The store will work fine if it is written like this:
 ```js
-store("myPlugin", {
+const { state } = store("myPlugin", {
   state: {
     get isOpen() {
       return getContext().isOpen;
@@ -788,6 +810,27 @@ store("myPlugin", {
 });
 ```
 
+As mentioned above with [`wp-on`](#wp-on), [`wp-on-window`](#wp-on-window), and [`wp-on-document`](#wp-on-document), an async action should be used whenever the `async` versions of the aforementioned directives cannot be used due to the action requiring synchronous access to the `event` object. Synchronous access is reqired whenever the action needs to call `event.preventDefault()`, `event.stopPropagation()`, or `event.stopImmediatePropagation()`. To ensure that the action code does not contribute to a long task, you may manually yield to the main thread after calling the synchronous event API. For example:
+
+```js
+function toMainThread() {
+  return new Promise(resolve => {
+    setTimeout(resolve, 0);
+  });
+}
+
+store("myPlugin", {
+  actions: {
+    handleClick: function* (event) {
+      event.preventDefault();
+      yield toMainThread();
+      doTheWork();
+    },
+  },
+});
+```
+
+You may want to add multiple such `yield` points in your action if it is doing a lot of work.
 
 #### Side Effects
 

lib/class-wp-theme-json-gutenberg.php

@@ -2933,10 +2933,10 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
 			$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
 			// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
 			$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
-			// Nested children of the container with left and right padding that are not wide or full aligned do not get padding.
-			$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }';
-			// Nested children of the container with left and right padding that are not wide or full aligned do not get negative margin applied.
-			$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0; }';
+			// Nested children of the container with left and right padding that are not wide or full aligned do not get padding, unless they are direct children of an alignfull flow container.
+			$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }';
+			// Alignfull direct children of the containers that are targeted by the rule above do not need negative margins.
+			$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0; }';
 		}
 
 		$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "18.6.0-rc.1",
+	"version": "18.6.0",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -230,6 +230,7 @@
 		"patch-package": "8.0.0",
 		"postcss": "8.4.16",
 		"postcss-loader": "6.2.1",
+		"postcss-local-keyframes": "^0.0.2",
 		"prettier": "npm:wp-prettier@3.0.3",
 		"progress": "2.0.3",
 		"react": "18.3.1",

packages/block-editor/README.md

@@ -45,7 +45,7 @@ In this example, we're instantiating a block editor. A block editor is composed
 
 Inside `BlockEditorProvider`, you can nest any of the available `@wordpress/block-editor` UI components to build the UI of your editor.
 
-In the example above we're rendering the `BlockList` to show and edit the block list. For instance we could add a custom sidebar and use the `BlockInspector` component to be able to edit the advanced settings for the currently selected block. (See the [API](#API) for the list of all the available components).
+In the example above we're rendering the `BlockList` to show and edit the block list. For instance we could add a custom sidebar and use the `BlockInspector` component to be able to edit the advanced settings for the currently selected block. (See the [API](#api) for the list of all the available components).
 
 The `BlockTools` component is used to render the toolbar for a selected block.
 

packages/block-editor/src/components/block-toolbar/shuffle.js

@@ -60,7 +60,9 @@ export default function Shuffle( { clientId, as = Container } ) {
 				pattern.blocks.length === 1 &&
 				pattern.categories?.some( ( category ) => {
 					return categories.includes( category );
-				} )
+				} ) &&
+				// Check if the pattern is not a synced pattern.
+				( pattern.syncStatus === 'unsynced' || ! pattern.id )
 			);
 		} );
 	}, [ categories, patterns ] );

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -924,8 +924,8 @@ export const toStyles = (
 			ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
 				`;
 		}
 

packages/block-library/src/image/style.scss

@@ -1,4 +1,9 @@
 .wp-block-image {
+
+	a {
+		display: inline-block;
+	}
+
 	img {
 		height: auto;
 		max-width: 100%;
@@ -27,6 +32,11 @@
 		text-align: center;
 	}
 
+	&.alignfull a,
+	&.alignwide a {
+		width: 100%;
+	}
+
 	&.alignfull img,
 	&.alignwide img {
 		height: auto;

packages/block-library/src/media-text/style.scss

@@ -68,6 +68,10 @@
 	/*!rtl:end:ignore*/
 }
 
+.wp-block-media-text__media a {
+	display: inline-block;
+}
+
 .wp-block-media-text__media img,
 .wp-block-media-text__media video {
 	height: auto;

packages/block-library/src/table-of-contents/block.json

@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/table-of-contents",
 	"title": "Table of Contents",
-	"category": "layout",
+	"category": "design",
 	"description": "Summarize your post with a list of headings. Add HTML anchors to Heading blocks to link them here.",
 	"keywords": [ "document outline", "summary" ],
 	"textdomain": "default",

packages/components/CHANGELOG.md

@@ -2,12 +2,16 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   DropZone: rewrite animation without depending on framer-motion. ([#62044](https://github.com/WordPress/gutenberg/pull/62044))
+
 ## 28.1.0 (2024-06-15)
 
 ### Enhancements
 
-- Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233))
-- Updates the space between input + label to `8px` in CheckboxControl and RadioControl. Also increased the space between RadioControl components to `12px` to make it consistent with CheckboxControl. ([#61696](https://github.com/WordPress/gutenberg/pull/61696))
+-   Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233))
+-   Updates the space between input + label to `8px` in CheckboxControl and RadioControl. Also increased the space between RadioControl components to `12px` to make it consistent with CheckboxControl. ([#61696](https://github.com/WordPress/gutenberg/pull/61696))
 
 ### Bug Fixes