Cherry-picked commits for WordPress 6.4.2

packages/block-editor/src/components/global-styles/filters-panel.js

@@ -54,13 +54,15 @@ function useMultiOriginColorPresets(
 }
 
 export function useHasFiltersPanel( settings ) {
-	const hasDuotone = useHasDuotoneControl( settings );
-
-	return hasDuotone;
+	return useHasDuotoneControl( settings );
 }
 
 function useHasDuotoneControl( settings ) {
-	return settings.color.customDuotone || settings.color.defaultDuotone;
+	return (
+		settings.color.customDuotone ||
+		settings.color.defaultDuotone ||
+		settings.color.duotone.length > 0
+	);
 }
 
 function FiltersToolsPanel( {
@@ -148,11 +150,6 @@ export default function FiltersPanel( {
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );
 
-	const disableCustomColors = ! settings?.color?.custom;
-	const disableCustomDuotone =
-		! settings?.color?.customDuotone ||
-		( colorPalette?.length === 0 && disableCustomColors );
-
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -210,12 +207,9 @@ export default function FiltersPanel( {
 									<DuotonePicker
 										colorPalette={ colorPalette }
 										duotonePalette={ duotonePalette }
-										disableCustomColors={
-											disableCustomColors
-										}
-										disableCustomDuotone={
-											disableCustomDuotone
-										}
+										// TODO: Re-enable both when custom colors are supported for block-level styles.
+										disableCustomColors
+										disableCustomDuotone
 										value={ duotone }
 										onChange={ setDuotone }
 									/>

packages/block-editor/src/components/inserter/block-patterns-filter.js

@@ -9,7 +9,7 @@ import {
 	MenuItemsChoice,
 	ExternalLink,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useMemo, createInterpolateElement } from '@wordpress/element';
 
@@ -70,15 +70,24 @@ export function BlockPatternsSyncFilter( {
 
 	const patternSyncMenuOptions = useMemo(
 		() => [
-			{ value: SYNC_TYPES.all, label: __( 'All' ) },
+			{
+				value: SYNC_TYPES.all,
+				label: _x( 'All', 'Option that shows all patterns' ),
+			},
 			{
 				value: SYNC_TYPES.full,
-				label: __( 'Synced' ),
+				label: _x(
+					'Synced',
+					'Option that shows all synchronized patterns'
+				),
 				disabled: shouldDisableSyncFilter,
 			},
 			{
 				value: SYNC_TYPES.unsynced,
-				label: __( 'Not synced' ),
+				label: _x(
+					'Not synced',
+					'Option that shows all patterns that are not synchronized'
+				),
 				disabled: shouldDisableSyncFilter,
 			},
 		],

packages/block-editor/src/hooks/background.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { isBlobURL } from '@wordpress/blob';
 import { getBlockSupport } from '@wordpress/blocks';
+import { focus } from '@wordpress/dom';
 import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	DropZone,
@@ -19,7 +20,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Platform, useCallback } from '@wordpress/element';
+import { Platform, useCallback, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
@@ -150,6 +151,8 @@ function BackgroundImagePanelItem( props ) {
 	const { id, title, url } =
 		attributes.style?.background?.backgroundImage || {};
 
+	const replaceContainerRef = useRef();
+
 	const { mediaUpload } = useSelect( ( select ) => {
 		return {
 			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
@@ -241,17 +244,22 @@ function BackgroundImagePanelItem( props ) {
 		};
 	}, [] );
 
+	const hasValue = hasBackgroundImageValue( props );
+
 	return (
 		<ToolsPanelItem
 			className="single-column"
-			hasValue={ () => hasBackgroundImageValue( props ) }
+			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
 			onDeselect={ () => resetBackgroundImage( props ) }
 			isShownByDefault={ true }
 			resetAllFilter={ resetAllFilter }
 			panelId={ clientId }
 		>
-			<div className="block-editor-hooks__background__inspector-media-replace-container">
+			<div
+				className="block-editor-hooks__background__inspector-media-replace-container"
+				ref={ replaceContainerRef }
+			>
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ url }
@@ -267,9 +275,23 @@ function BackgroundImagePanelItem( props ) {
 					}
 					variant="secondary"
 				>
-					<MenuItem onClick={ () => resetBackgroundImage( props ) }>
-						{ __( 'Reset ' ) }
-					</MenuItem>
+					{ hasValue && (
+						<MenuItem
+							onClick={ () => {
+								const [ toggleButton ] = focus.tabbable.find(
+									replaceContainerRef.current
+								);
+								// Focus the toggle button and close the dropdown menu.
+								// This ensures similar behaviour as to selecting an image, where the dropdown is
+								// closed and focus is redirected to the dropdown toggle button.
+								toggleButton?.focus();
+								toggleButton?.click();
+								resetBackgroundImage( props );
+							} }
+						>
+							{ __( 'Reset ' ) }
+						</MenuItem>
+					) }
 				</MediaReplaceFlow>
 				<DropZone
 					onFilesDrop={ onFilesDrop }

packages/block-library/src/image/deprecated.js

@@ -1047,6 +1047,14 @@ const v8 = {
 		},
 	},
 	migrate( { width, height, ...attributes } ) {
+		// We need to perform a check here because in cases
+		// where attributes are added dynamically to blocks,
+		// block invalidation overrides the isEligible() method
+		// and forces the migration to run, so it's not guaranteed
+		// that `behaviors` or `behaviors.lightbox` will be defined.
+		if ( ! attributes.behaviors?.lightbox ) {
+			return attributes;
+		}
 		const {
 			behaviors: {
 				lightbox: { enabled },

packages/block-library/src/query/index.php

@@ -44,11 +44,15 @@ function render_block_core_query( $attributes, $content, $block ) {
 			$block->block_type->supports['interactivity'] = true;
 
 			// Add a div to announce messages using `aria-live`.
-			$last_div_position = strripos( $content, '</div>' );
+			$html_tag = 'div';
+			if ( ! empty( $attributes['tagName'] ) ) {
+				$html_tag = esc_attr( $attributes['tagName'] );
+			}
+			$last_tag_position = strripos( $content, '</' . $html_tag . '>' );
 			$content           = substr_replace(
 				$content,
 				'<div
-					class="wp-block-query__enhanced-pagination-navigation-announce screen-reader-text"
+					class="screen-reader-text"
 					aria-live="polite"
 					data-wp-text="context.core.query.message"
 				></div>
@@ -57,7 +61,7 @@ class="wp-block-query__enhanced-pagination-animation"
 					data-wp-class--start-animation="selectors.core.query.startAnimation"
 					data-wp-class--finish-animation="selectors.core.query.finishAnimation"
 				></div>',
-				$last_div_position,
+				$last_tag_position,
 				0
 			);
 		}

packages/components/CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### Bug Fix
 
+-   `Autocomplete`: Add `aria-live` announcements for Mac and IOS Voiceover to fix lack of support for `aria-owns` ([#54902](https://github.com/WordPress/gutenberg/pull/54902)).
 -   `Placeholder`: Improved DOM structure and screen reader announcements ([#45801](https://github.com/WordPress/gutenberg/pull/45801)).
 -   `DateTimePicker`: fix onChange callback check so that it also works inside iframes ([#54669](https://github.com/WordPress/gutenberg/pull/54669)).
 -   `Popover`: Apply the CSS in JS styles properly for components used within popovers. ([#54912](https://github.com/WordPress/gutenberg/pull/54912))

packages/components/src/autocomplete/index.tsx

@@ -22,6 +22,8 @@ import {
 	isCollapsed,
 	getTextContent,
 } from '@wordpress/rich-text';
+import { speak } from '@wordpress/a11y';
+import { isAppleOS } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -39,6 +41,35 @@ import type {
 	WPCompleter,
 } from './types';
 
+const getNodeText = ( node: React.ReactNode ): string => {
+	if ( node === null ) {
+		return '';
+	}
+
+	switch ( typeof node ) {
+		case 'string':
+		case 'number':
+			return node.toString();
+			break;
+		case 'boolean':
+			return '';
+			break;
+		case 'object': {
+			if ( node instanceof Array ) {
+				return node.map( getNodeText ).join( '' );
+			}
+			if ( 'props' in node ) {
+				return getNodeText( node.props.children );
+			}
+			break;
+		}
+		default:
+			return '';
+	}
+
+	return '';
+};
+
 const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
 export function useAutocomplete( {
@@ -163,20 +194,35 @@ export function useAutocomplete( {
 		) {
 			return;
 		}
+
 		switch ( event.key ) {
-			case 'ArrowUp':
-				setSelectedIndex(
+			case 'ArrowUp': {
+				const newIndex =
 					( selectedIndex === 0
 						? filteredOptions.length
-						: selectedIndex ) - 1
-				);
+						: selectedIndex ) - 1;
+				setSelectedIndex( newIndex );
+				// See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.
+				if ( isAppleOS() ) {
+					speak(
+						getNodeText( filteredOptions[ newIndex ].label ),
+						'assertive'
+					);
+				}
 				break;
+			}
 
-			case 'ArrowDown':
-				setSelectedIndex(
-					( selectedIndex + 1 ) % filteredOptions.length
-				);
+			case 'ArrowDown': {
+				const newIndex = ( selectedIndex + 1 ) % filteredOptions.length;
+				setSelectedIndex( newIndex );
+				if ( isAppleOS() ) {
+					speak(
+						getNodeText( filteredOptions[ newIndex ].label ),
+						'assertive'
+					);
+				}
 				break;
+			}
 
 			case 'Escape':
 				setAutocompleter( null );

packages/edit-site/src/components/global-styles/screen-block.js

@@ -284,13 +284,7 @@ function ScreenBlock( { name, variation } ) {
 					inheritedValue={ inheritedStyleWithLayout }
 					value={ styleWithLayout }
 					onChange={ setStyle }
-					settings={ {
-						...settings,
-						color: {
-							...settings.color,
-							customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
-						},
-					} }
+					settings={ settings }
 					includeLayoutControls
 				/>
 			) }

packages/edit-site/src/components/page-patterns/grid-item.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import downloadjs from 'downloadjs';
 import { paramCase as kebabCase } from 'change-case';
 
 /**
@@ -52,6 +51,25 @@ import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
 import { unlock } from '../../lock-unlock';
 
+/**
+ * Downloads a file.
+ * Also used in packages/list-reusable-blocks/src/utils/file.js.
+ *
+ * @param {string} fileName    File Name.
+ * @param {string} content     File Content.
+ * @param {string} contentType File mime type.
+ */
+function download( fileName, content, contentType ) {
+	const file = new window.Blob( [ content ], { type: contentType } );
+	const a = document.createElement( 'a' );
+	a.href = URL.createObjectURL( file );
+	a.download = fileName;
+	a.style.display = 'none';
+	document.body.appendChild( a );
+	a.click();
+	document.body.removeChild( a );
+}
+
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 const templatePartIcons = { header, footer, uncategorized };
@@ -118,9 +136,9 @@ function GridItem( { categoryId, item, ...props } ) {
 			syncStatus: item.patternBlock.wp_pattern_sync_status,
 		};
 
-		return downloadjs(
-			JSON.stringify( json, null, 2 ),
+		return download(
 			`${ kebabCase( item.title || item.name ) }.json`,
+			JSON.stringify( json, null, 2 ),
 			'application/json'
 		);
 	};