prep build 009/03

Author: bph

backport-changelog/6.7/6910.md renamed to backport-changelog/6.8/6910.md

@@ -84,7 +84,7 @@ It provides a **local** state available to a specific HTML node and its children
 The `wp-context` directive accepts a stringified JSON as a value.
 
 ```php
-//render.php
+// render.php
 <div data-wp-context='{ "post": { "id": <?php echo $post->ID; ?> } }' >
   <button data-wp-on--click="actions.logId" >
     Click Me!
@@ -110,13 +110,13 @@ store( "myPlugin", {
 Different contexts can be defined at different levels, and deeper levels will merge their own context with any parent one:
 
 ```html
-<div data-wp-context="{ foo: 'bar' }">
+<div data-wp-context='{ "foo": "bar" }'>
   <span data-wp-text="context.foo"><!-- Will output: "bar" --></span>
 
-  <div data-wp-context="{ bar: 'baz' }">
+  <div data-wp-context='{ "bar": "baz" }'>
     <span data-wp-text="context.foo"><!-- Will output: "bar" --></span>
 
-    <div data-wp-context="{ foo: 'bob' }">
+    <div data-wp-context='{ "foo": "bob" }'>
       <span data-wp-text="context.foo"><!-- Will output: "bob" --></span>
     </div>
 
@@ -356,8 +356,7 @@ The callback passed as the reference receives [the event](https://developer.mozi
 
 ### `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()`.
+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`
 
@@ -369,8 +368,7 @@ This directive allows you to attach global window events like `resize`, `copy`,
 
 [List of supported window events.](https://developer.mozilla.org/en-US/docs/Web/API/Window#events)
 
-The syntax of this directive is `data-wp-on-window--[window-event]` (like `data-wp-on-window--resize`
-or `data-wp-on-window--languagechange`).
+The syntax of this directive is `data-wp-on-window--[window-event]` (like `data-wp-on-window--resize` or `data-wp-on-window--languagechange`).
 
 ```php
 <div data-wp-on-window--resize="callbacks.logWidth"></div>
@@ -406,8 +404,7 @@ This directive allows you to attach global document events like `scroll`, `mouse
 
 [List of supported document events.](https://developer.mozilla.org/en-US/docs/Web/API/Document#events)
 
-The syntax of this directive is `data-wp-on-document--[document-event]` (like `data-wp-on-document--keydown`
-or `data-wp-on-document--selectionchange`).
+The syntax of this directive is `data-wp-on-document--[document-event]` (like `data-wp-on-document--keydown` or `data-wp-on-document--selectionchange`).
 
 ```php
 <div data-wp-on-document--keydown="callbacks.logKeydown"></div>
@@ -520,6 +517,8 @@ Here's another example with several `wp-init` directives on the same DOM element
   <summary><em>See store used with the directive above</em></summary>
 
 ```js
+import { store, getElement } from '@wordpress/interactivity';
+
 store( "myPlugin", {
   callbacks: {
     logTimeInit: () => console.log( `Init at ` + new Date() ),
@@ -882,10 +881,10 @@ const { state } = store( "myPlugin", {
       GBP: 0.85,
     },
     get amountInUSD() {
-      return state.currencyExchange[ 'USD' ] * state.amount,
+      return state.currencyExchange[ 'USD' ] * state.amount;
     },
     get amountInGBP() {
-      return state.currencyExchange[ 'GBP' ] * state.amount,
+      return state.currencyExchange[ 'GBP' ] * state.amount;
     },
   },
 } );
@@ -965,7 +964,7 @@ This approach enables some functionalities that make directives flexible and pow
 
 *In the `view.js` file of each block* the developer can define both the state and the elements of the store referencing functions like actions, side effects or derived state.
 
-The `store` method used to set the store in javascript can be imported from `@wordpress/interactivity`.
+The `store` method used to set the store in JavaScript can be imported from `@wordpress/interactivity`.
 
 ```js
 // store
@@ -1111,7 +1110,7 @@ store( "myPlugin", {
   actions: {
     log: () => {
       const element = getElement();
-			 // Logs "false"
+			 // Logs attributes
       console.log('element attributes => ', element.attributes)
     },
   },
@@ -1122,7 +1121,7 @@ The code will log:
 
 ```json
 {
-	"data-wp-on--click": 'actions.increaseCounter',
+	"data-wp-on--click": 'actions.log',
 	"children": ['Log'],
 	"onclick": event => { evaluate(entry, event); }
 }
@@ -1147,6 +1146,7 @@ store('mySliderPlugin', {
 				3_000
 			);
 		},
+  },
 })
 ```
 
@@ -1245,7 +1245,7 @@ echo $processed_html;
 
 will output:
 ```html
-<div data-wp-text="create-block::state.greeting">Hello, World!</div>
+<div data-wp-text="myPlugin::state.greeting">Hello, World!</div>
 ```
 
 ### wp_interactivity_data_wp_context

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

@@ -196,6 +196,8 @@ public static function decode( $context, $text ) {
 	 *
 	 * @since 6.6.0
 	 *
+	 * @global WP_Token_Map $html5_named_character_references
+	 *
 	 * @param string $context            `attribute` for decoding attribute values, `data` otherwise.
 	 * @param string $text               Text document containing span of text to decode.
 	 * @param int    $at                 Optional. Byte offset into text where span begins, defaults to the beginning (0).

lib/compat/wordpress-6.6/html-api/class-gutenberg-html-decoder-6-6.php

@@ -196,6 +196,8 @@ public static function decode( $context, $text ): string {
 	 *
 	 * @since 6.6.0
 	 *
+	 * @global WP_Token_Map $html5_named_character_references
+	 *
 	 * @param string $context            `attribute` for decoding attribute values, `data` otherwise.
 	 * @param string $text               Text document containing span of text to decode.
 	 * @param int    $at                 Optional. Byte offset into text where span begins, defaults to the beginning (0).

lib/compat/wordpress-6.7/html-api/class-gutenberg-html-decoder-6-7.php

@@ -107,12 +107,12 @@ export default function BlockInvalidWarning( { clientId } ) {
 						onClick={ convert.toRecoveredBlock }
 						variant="primary"
 					>
-						{ __( 'Attempt Block Recovery' ) }
+						{ __( 'Attempt recovery' ) }
 					</Button>,
 				] }
 				secondaryActions={ secondaryActions }
 			>
-				{ __( 'This block contains unexpected or invalid content.' ) }
+				{ __( 'Block contains unexpected or invalid content.' ) }
 			</Warning>
 			{ compare && (
 				<Modal

packages/block-editor/src/components/block-list/block-invalid-warning.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import {
 	chevronRight,
@@ -38,7 +38,7 @@ const CarouselNavigation = ( {
 		<Button
 			// TODO: Switch to `true` (40px size) if possible
 			__next40pxDefaultSize={ false }
-			icon={ chevronLeft }
+			icon={ isRTL() ? chevronRight : chevronLeft }
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
 			disabled={ activeSlide === 0 }
@@ -47,7 +47,7 @@ const CarouselNavigation = ( {
 		<Button
 			// TODO: Switch to `true` (40px size) if possible
 			__next40pxDefaultSize={ false }
-			icon={ chevronRight }
+			icon={ isRTL() ? chevronLeft : chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
 			disabled={ activeSlide === totalSlides - 1 }

packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js

@@ -27,11 +27,9 @@ import InserterDraggableBlocks from '../inserter-draggable-blocks';
 import BlockPatternsPaging from '../block-patterns-paging';
 import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
+const { CompositeV2: Composite, CompositeItemV2: CompositeItem } = unlock(
+	componentsPrivateApis
+);
 
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
@@ -206,19 +204,23 @@ function BlockPatternsList(
 	},
 	ref
 ) {
-	const compositeStore = useCompositeStore( { orientation } );
-	const { setActiveId } = compositeStore;
+	const [ activeCompositeId, setActiveCompositeId ] = useState( undefined );
 
 	useEffect( () => {
-		// We reset the active composite item whenever the
-		// available patterns change, to make sure that
-		// focus is put back to the start.
-		setActiveId( undefined );
-	}, [ setActiveId, shownPatterns, blockPatterns ] );
+		// Reset the active composite item whenever the available patterns change,
+		// to make sure that Composite widget can receive focus correctly when its
+		// composite items change. The first composite item will receive focus.
+		const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
+			shownPatterns.includes( pattern )
+		)?.name;
+		setActiveCompositeId( firstCompositeItemId );
+	}, [ shownPatterns, blockPatterns ] );
 
 	return (
 		<Composite
-			store={ compositeStore }
+			orientation={ orientation }
+			activeId={ activeCompositeId }
+			setActiveId={ setActiveCompositeId }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }

packages/block-editor/src/components/block-patterns-list/index.js

@@ -34,7 +34,6 @@ import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
-import Shuffle from './shuffle';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 
 /**
@@ -66,22 +65,18 @@ export function PrivateBlockToolbar( {
 		shouldShowVisualToolbar,
 		showParentSelector,
 		isUsingBindings,
-		canRemove,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockMode,
 			getBlockParents,
 			getSelectedBlockClientIds,
 			isBlockValid,
-			getBlockRootClientId,
 			getBlockEditingMode,
 			getBlockAttributes,
-			canRemoveBlock,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
 		const firstParentClientId = parents[ parents.length - 1 ];
 		const parentBlockName = getBlockName( firstParentClientId );
@@ -106,7 +101,6 @@ export function PrivateBlockToolbar( {
 			isDefaultEditingMode: _isDefaultEditingMode,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
-			rootClientId: blockRootClientId,
 			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
 			showParentSelector:
 				parentBlockType &&
@@ -119,7 +113,6 @@ export function PrivateBlockToolbar( {
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
 			isUsingBindings: _isUsingBindings,
-			canRemove: canRemoveBlock( selectedBlockClientId ),
 		};
 	}, [] );
 
@@ -202,9 +195,6 @@ export function PrivateBlockToolbar( {
 							</ToolbarGroup>
 						</div>
 					) }
-				{ ! isMultiToolbar && canRemove && (
-					<Shuffle clientId={ blockClientId } />
-				) }
 				{ shouldShowVisualToolbar && isMultiToolbar && (
 					<BlockGroupToolbar />
 				) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, waitFor, queryByAttribute } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,9 +10,22 @@ import ColorPaletteControl from '../control';
 
 const noop = () => {};
 
+async function renderAndValidate( ...renderArgs ) {
+	const view = render( ...renderArgs );
+	await waitFor( () => {
+		const activeButton = queryByAttribute(
+			'data-active-item',
+			view.baseElement,
+			'true'
+		);
+		expect( activeButton ).not.toBeNull();
+	} );
+	return view;
+}
+
 describe( 'ColorPaletteControl', () => {
 	it( 'matches the snapshot', async () => {
-		const { container } = render(
+		const { container } = await renderAndValidate(
 			<ColorPaletteControl
 				label="Test Color"
 				value="#f00"