@wordpress/block-editor 11.8.0 → 12.0.0

package/src/components/list-view/block.js

@@ -53,7 +53,6 @@ function ListViewBlock( {
 	path,
 	isExpanded,
 	selectedClientIds,
-	preventAnnouncement,
 	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
@@ -90,6 +89,7 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = blockInformation?.title || __( 'Untitled' );
 	const blockName = useSelect(
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]
@@ -111,31 +111,27 @@ function ListViewBlock( {
 		level
 	);
 
-	let blockAriaLabel = __( 'Link' );
-	if ( blockInformation ) {
-		blockAriaLabel = isLocked
-			? sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the locked block.
-					__( '%s link (locked)' ),
-					blockInformation.title
-			  )
-			: sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the block.
-					__( '%s link' ),
-					blockInformation.title
-			  );
-	}
-
-	const settingsAriaLabel = blockInformation
+	const blockAriaLabel = isLocked
 		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Options for %s block' ),
-				blockInformation.title
+				// translators: %s: The title of the block. This string indicates a link to select the locked block.
+				__( '%s (locked)' ),
+				blockTitle
 		  )
-		: __( 'Options' );
+		: blockTitle;
+
+	const settingsAriaLabel = sprintf(
+		// translators: %s: The title of the block.
+		__( 'Options for %s' ),
+		blockTitle
+	);
 
-	const { isTreeGridMounted, expand, collapse, BlockSettingsMenu } =
-		useListViewContext();
+	const {
+		isTreeGridMounted,
+		expand,
+		collapse,
+		BlockSettingsMenu,
+		listViewInstanceId,
+	} = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -246,21 +242,16 @@ function ListViewBlock( {
 			position={ position }
 			rowCount={ rowCount }
 			path={ path }
-			id={ `list-view-block-${ clientId }` }
+			id={ `list-view-${ listViewInstanceId }-block-${ clientId }` }
 			data-block={ clientId }
 			data-expanded={ canExpand ? isExpanded : undefined }
-			isExpanded={ canExpand ? isExpanded : undefined }
-			aria-selected={ !! isSelected || forceSelectionContentLock }
 			ref={ rowRef }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
-				aria-label={ blockAriaLabel }
 				aria-selected={ !! isSelected || forceSelectionContentLock }
-				aria-expanded={ canExpand ? isExpanded : undefined }
-				aria-describedby={ descriptionId }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
@@ -277,9 +268,10 @@ function ListViewBlock( {
 								currentlyEditingBlockInCanvas ? 0 : tabIndex
 							}
 							onFocus={ onFocus }
-							isExpanded={ isExpanded }
+							isExpanded={ canExpand ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
-							preventAnnouncement={ preventAnnouncement }
+							ariaLabel={ blockAriaLabel }
+							ariaDescribedBy={ descriptionId }
 						/>
 						<div
 							className="block-editor-list-view-block-select-button__description"

package/src/components/list-view/drop-indicator.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { Popover } from '@wordpress/components';
+import { getScrollContainer } from '@wordpress/dom';
 import { useCallback, useMemo } from '@wordpress/element';
 
 export default function ListViewDropIndicator( {
@@ -40,33 +41,74 @@ export default function ListViewDropIndicator( {
 	// is undefined, so the indicator will appear after the rootBlockElement.
 	const targetElement = blockElement || rootBlockElement;
 
-	const getDropIndicatorIndent = useCallback( () => {
-		if ( ! rootBlockElement ) {
-			return 0;
-		}
+	const getDropIndicatorIndent = useCallback(
+		( targetElementRect ) => {
+			if ( ! rootBlockElement ) {
+				return 0;
+			}
+
+			// Calculate the indent using the block icon of the root block.
+			// Using a classname selector here might be flaky and could be
+			// improved.
+			const rootBlockIconElement = rootBlockElement.querySelector(
+				'.block-editor-block-icon'
+			);
+			const rootBlockIconRect =
+				rootBlockIconElement.getBoundingClientRect();
+			return rootBlockIconRect.right - targetElementRect.left;
+		},
+		[ rootBlockElement ]
+	);
 
-		// Calculate the indent using the block icon of the root block.
-		// Using a classname selector here might be flaky and could be
-		// improved.
-		const targetElementRect = targetElement.getBoundingClientRect();
-		const rootBlockIconElement = rootBlockElement.querySelector(
-			'.block-editor-block-icon'
-		);
-		const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect();
-		return rootBlockIconRect.right - targetElementRect.left;
-	}, [ rootBlockElement, targetElement ] );
+	const getDropIndicatorWidth = useCallback(
+		( targetElementRect, indent ) => {
+			if ( ! targetElement ) {
+				return 0;
+			}
+
+			// Default to assuming that the width of the drop indicator
+			// should be the same as the target element.
+			let width = targetElement.offsetWidth;
+
+			// In deeply nested lists, where a scrollbar is present,
+			// the width of the drop indicator should be the width of
+			// the scroll container, minus the distance from the left
+			// edge of the scroll container to the left edge of the
+			// target element.
+			const scrollContainer = getScrollContainer(
+				targetElement,
+				'horizontal'
+			);
+
+			if ( scrollContainer ) {
+				const scrollContainerRect =
+					scrollContainer.getBoundingClientRect();
+
+				if ( scrollContainer.clientWidth < width ) {
+					width =
+						scrollContainer.clientWidth -
+						( targetElementRect.left - scrollContainerRect.left );
+				}
+			}
+
+			// Subtract the indent from the final width of the indicator.
+			return width - indent;
+		},
+		[ targetElement ]
+	);
 
 	const style = useMemo( () => {
 		if ( ! targetElement ) {
 			return {};
 		}
 
-		const indent = getDropIndicatorIndent();
+		const targetElementRect = targetElement.getBoundingClientRect();
+		const indent = getDropIndicatorIndent( targetElementRect );
 
 		return {
-			width: targetElement.offsetWidth - indent,
+			width: getDropIndicatorWidth( targetElementRect, indent ),
 		};
-	}, [ getDropIndicatorIndent, targetElement ] );
+	}, [ getDropIndicatorIndent, getDropIndicatorWidth, targetElement ] );
 
 	const popoverAnchor = useMemo( () => {
 		const isValidDropPosition =
@@ -81,10 +123,8 @@ export default function ListViewDropIndicator( {
 			ownerDocument: targetElement.ownerDocument,
 			getBoundingClientRect() {
 				const rect = targetElement.getBoundingClientRect();
-				const indent = getDropIndicatorIndent();
-
+				const indent = getDropIndicatorIndent( rect );
 				const left = rect.left + indent;
-				const right = rect.right;
 				let top = 0;
 				let bottom = 0;
 
@@ -97,13 +137,18 @@ export default function ListViewDropIndicator( {
 					bottom = rect.bottom;
 				}
 
-				const width = right - left;
+				const width = getDropIndicatorWidth( rect, indent );
 				const height = bottom - top;
 
 				return new window.DOMRect( left, top, width, height );
 			},
 		};
-	}, [ targetElement, dropPosition, getDropIndicatorIndent ] );
+	}, [
+		targetElement,
+		dropPosition,
+		getDropIndicatorIndent,
+		getDropIndicatorWidth,
+	] );
 
 	if ( ! targetElement ) {
 		return null;

package/src/components/list-view/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	useInstanceId,
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
@@ -63,6 +64,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {?boolean}       props.showAppender      Flag to show or hide the block appender. Defaults to `false`.
  * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
  * @param {string}         props.rootClientId      The client id of the root block from which we determine the blocks to show in the list.
+ * @param {string}         props.description       Optional accessible description for the tree grid component.
  * @param {Ref}            ref                     Forwarded ref
  */
 function ListViewComponent(
@@ -74,6 +76,7 @@ function ListViewComponent(
 		showAppender = false,
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
 		rootClientId,
+		description,
 	},
 	ref
 ) {
@@ -88,6 +91,7 @@ function ListViewComponent(
 		);
 	}
 
+	const instanceId = useInstanceId( ListViewComponent );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( { blocks, rootClientId } );
 
@@ -198,14 +202,15 @@ function ListViewComponent(
 			expand,
 			collapse,
 			BlockSettingsMenu,
+			listViewInstanceId: instanceId,
 		} ),
 		[
-			isMounted.current,
 			draggedClientIds,
 			expandedState,
 			expand,
 			collapse,
 			BlockSettingsMenu,
+			instanceId,
 		]
 	);
 
@@ -229,6 +234,8 @@ function ListViewComponent(
 				onExpandRow={ expandRow }
 				onFocusRow={ focusRow }
 				applicationAriaLabel={ __( 'Block navigation structure' ) }
+				// eslint-disable-next-line jsx-a11y/aria-props
+				aria-description={ description }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch

package/src/components/list-view/leaf.js

@@ -51,6 +51,7 @@ const ListViewLeaf = forwardRef(
 				level={ level }
 				positionInSet={ position }
 				setSize={ rowCount }
+				isExpanded={ undefined }
 				{ ...props }
 			>
 				{ children }

package/src/components/list-view/style.scss

@@ -15,6 +15,18 @@
 	// Use position relative for row animation.
 	position: relative;
 
+	.components-button {
+		// When a row is expanded, retain the dark color.
+		&[aria-expanded="true"] {
+			color: $gray-900;
+		}
+
+		// Ensure that on hover, the admin color is still used.
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
 	// The background has to be applied to the td, not tr, or border-radius won't work.
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
@@ -93,7 +105,7 @@
 	&.is-branch-selected.is-first-selected td:last-child {
 		border-top-right-radius: $radius-block-ui;
 	}
-	&[aria-expanded="false"] {
+	&[data-expanded="false"] {
 		&.is-branch-selected.is-first-selected td:first-child {
 			border-top-left-radius: $radius-block-ui;
 		}
@@ -380,7 +392,7 @@ $block-navigation-max-indent: 8;
 }
 
 // Point downwards when open.
-.block-editor-list-view-leaf[aria-expanded="true"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="true"] .block-editor-list-view__expander svg {
 	visibility: visible;
 	transition: transform 0.2s ease;
 	transform: rotate(90deg);
@@ -388,7 +400,7 @@ $block-navigation-max-indent: 8;
 }
 
 // Point rightwards when closed
-.block-editor-list-view-leaf[aria-expanded="false"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="false"] .block-editor-list-view__expander svg {
 	visibility: visible;
 	transform: rotate(0deg);
 	transition: transform 0.2s ease;

package/src/components/list-view/use-block-selection.js

@@ -144,7 +144,7 @@ export default function useBlockSelection() {
 			}
 
 			if ( label ) {
-				speak( label );
+				speak( label, 'assertive' );
 			}
 		},
 		[

package/src/components/media-replace-flow/README.md

@@ -65,10 +65,11 @@ Callback called when an upload error happens and receives an error message as an
 
 ### name
 
-The label of the replace button.
+A `string` value will be used as the label of the replace button. It can also accept `Phrasing content` elements(ex. `span`).
 
--   Type: `string`
+-   Type: `string|Element`
 -   Required: No
+-   Default: `Replace`
 
 ### createNotice
 

package/src/components/media-replace-flow/index.js

@@ -59,6 +59,9 @@ const MediaReplaceFlow = ( {
 	multiple = false,
 	addToGallery,
 	handleUpload = true,
+	popoverProps = {
+		variant: 'toolbar',
+	},
 } ) => {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
@@ -136,13 +139,9 @@ const MediaReplaceFlow = ( {
 
 	const gallery = multiple && onlyAllowsImages();
 
-	const POPOVER_PROPS = {
-		variant: 'toolbar',
-	};
-
 	return (
 		<Dropdown
-			popoverProps={ POPOVER_PROPS }
+			popoverProps={ popoverProps }
 			contentClassName="block-editor-media-replace-flow__options"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<ToolbarButton

package/src/components/navigable-toolbar/index.js

@@ -93,7 +93,8 @@ function useToolbarFocus(
 	focusOnMount,
 	isAccessibleToolbar,
 	defaultIndex,
-	onIndexChange
+	onIndexChange,
+	shouldUseKeyboardFocusShortcut
 ) {
 	// Make sure we don't use modified versions of this prop.
 	const [ initialFocusOnMount ] = useState( focusOnMount );
@@ -103,8 +104,14 @@ function useToolbarFocus(
 		focusFirstTabbableIn( ref.current );
 	}, [] );
 
+	const focusToolbarViaShortcut = () => {
+		if ( shouldUseKeyboardFocusShortcut ) {
+			focusToolbar();
+		}
+	};
+
 	// Focus on toolbar when pressing alt+F10 when the toolbar is visible.
-	useShortcut( 'core/block-editor/focus-toolbar', focusToolbar );
+	useShortcut( 'core/block-editor/focus-toolbar', focusToolbarViaShortcut );
 
 	useEffect( () => {
 		if ( initialFocusOnMount ) {
@@ -147,6 +154,7 @@ function useToolbarFocus(
 function NavigableToolbar( {
 	children,
 	focusOnMount,
+	shouldUseKeyboardFocusShortcut = true,
 	__experimentalInitialIndex: initialIndex,
 	__experimentalOnIndexChange: onIndexChange,
 	...props
@@ -159,7 +167,8 @@ function NavigableToolbar( {
 		focusOnMount,
 		isAccessibleToolbar,
 		initialIndex,
-		onIndexChange
+		onIndexChange,
+		shouldUseKeyboardFocusShortcut
 	);
 
 	if ( isAccessibleToolbar ) {

package/src/components/off-canvas-editor/appender.js

@@ -17,9 +17,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
-
-import { unlock } from '../../lock-unlock';
-import { privateApis as blockEditorPrivateApis } from '../../private-apis';
+import { ComposedPrivateInserter as PrivateInserter } from '../inserter';
 
 const prioritizedInserterBlocks = [
 	'core/navigation-link/page',
@@ -86,7 +84,6 @@ export const Appender = forwardRef(
 		if ( hideInserter ) {
 			return null;
 		}
-		const { PrivateInserter } = unlock( blockEditorPrivateApis );
 		const descriptionId = `off-canvas-editor-appender__${ instanceId }`;
 		const description = sprintf(
 			/* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: none;"
+      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
       tabindex="-1"
     >
       <div
@@ -53,7 +53,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: none;"
+      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
       tabindex="-1"
     >
       <div
@@ -108,7 +108,7 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: none;"
+      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
       tabindex="-1"
     >
       <div

package/src/hooks/duotone.js

@@ -23,6 +23,7 @@ import { useSelect } from '@wordpress/data';
  */
 import {
 	BlockControls,
+	InspectorControls,
 	__experimentalDuotoneControl as DuotoneControl,
 	useSetting,
 } from '../components';
@@ -34,7 +35,9 @@ import {
 } from '../components/duotone';
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
+import { useBlockSettings } from './utils';
 import { store as blockEditorStore } from '../store';
+import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 
 const EMPTY_ARRAY = [];
 
@@ -106,9 +109,10 @@ export function getDuotonePresetFromColors( colors, duotonePalette ) {
 	return preset ? `var:preset|duotone|${ preset.slug }` : undefined;
 }
 
-function DuotonePanel( { attributes, setAttributes } ) {
+function DuotonePanel( { attributes, setAttributes, name } ) {
 	const style = attributes?.style;
 	const duotoneStyle = style?.color?.duotone;
+	const settings = useBlockSettings( name );
 
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -132,30 +136,47 @@ function DuotonePanel( { attributes, setAttributes } ) {
 		: duotoneStyle;
 
 	return (
-		<BlockControls group="block" __experimentalShareWithChildBlocks>
-			<DuotoneControl
-				duotonePalette={ duotonePalette }
-				colorPalette={ colorPalette }
-				disableCustomDuotone={ disableCustomDuotone }
-				disableCustomColors={ disableCustomColors }
-				value={ duotonePresetOrColors }
-				onChange={ ( newDuotone ) => {
-					const maybePreset = getDuotonePresetFromColors(
-						newDuotone,
-						duotonePalette
-					);
-
-					const newStyle = {
-						...style,
-						color: {
-							...style?.color,
-							duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
-						},
-					};
-					setAttributes( { style: newStyle } );
-				} }
-			/>
-		</BlockControls>
+		<>
+			<InspectorControls group="filter">
+				<StylesFiltersPanel
+					value={ { filter: { duotone: duotonePresetOrColors } } }
+					onChange={ ( newDuotone ) => {
+						const newStyle = {
+							color: {
+								...newDuotone?.filter,
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+					settings={ settings }
+				/>
+			</InspectorControls>
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
+				<DuotoneControl
+					duotonePalette={ duotonePalette }
+					colorPalette={ colorPalette }
+					disableCustomDuotone={ disableCustomDuotone }
+					disableCustomColors={ disableCustomColors }
+					value={ duotonePresetOrColors }
+					onChange={ ( newDuotone ) => {
+						const maybePreset = getDuotonePresetFromColors(
+							newDuotone,
+							duotonePalette
+						);
+
+						const newStyle = {
+							...style,
+							color: {
+								...style?.color,
+								duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+					settings={ settings }
+				/>
+			</BlockControls>
+		</>
 	);
 }