@wordpress/block-editor 16.0.0 → 16.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "16.0.0",
+	"version": "16.1.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -60,50 +60,49 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.51.0",
-		"@wordpress/base-styles": "^11.0.0",
-		"@wordpress/blob": "^4.51.0",
-		"@wordpress/block-serialization-default-parser": "^5.51.0",
-		"@wordpress/blocks": "^15.24.0",
-		"@wordpress/commands": "^1.51.0",
-		"@wordpress/components": "^37.0.0",
-		"@wordpress/compose": "^8.4.0",
-		"@wordpress/data": "^10.51.0",
-		"@wordpress/dataviews": "^17.2.0",
-		"@wordpress/date": "^5.51.0",
-		"@wordpress/deprecated": "^4.51.0",
-		"@wordpress/dom": "^4.51.0",
-		"@wordpress/element": "^8.3.0",
-		"@wordpress/escape-html": "^3.51.0",
-		"@wordpress/global-styles-engine": "^1.18.0",
-		"@wordpress/hooks": "^4.51.0",
-		"@wordpress/html-entities": "^4.51.0",
-		"@wordpress/i18n": "^6.24.0",
-		"@wordpress/icons": "^15.2.0",
-		"@wordpress/image-cropper": "^1.15.0",
-		"@wordpress/interactivity": "^6.51.0",
-		"@wordpress/is-shallow-equal": "^5.51.0",
-		"@wordpress/keyboard-shortcuts": "^5.51.0",
-		"@wordpress/keycodes": "^4.51.0",
-		"@wordpress/notices": "^5.51.0",
-		"@wordpress/preferences": "^4.51.0",
-		"@wordpress/priority-queue": "^3.51.0",
-		"@wordpress/private-apis": "^1.51.0",
-		"@wordpress/rich-text": "^7.51.0",
-		"@wordpress/style-engine": "^2.51.0",
-		"@wordpress/token-list": "^3.51.0",
-		"@wordpress/ui": "^0.18.0",
-		"@wordpress/upload-media": "^0.36.0",
-		"@wordpress/url": "^4.51.0",
-		"@wordpress/warning": "^3.51.0",
-		"@wordpress/wordcount": "^4.51.0",
+		"@wordpress/a11y": "^4.52.0",
+		"@wordpress/base-styles": "^12.0.0",
+		"@wordpress/blob": "^4.52.0",
+		"@wordpress/block-serialization-default-parser": "^5.52.0",
+		"@wordpress/blocks": "^15.25.0",
+		"@wordpress/commands": "^1.52.0",
+		"@wordpress/components": "^38.0.0",
+		"@wordpress/compose": "^8.5.0",
+		"@wordpress/data": "^10.52.0",
+		"@wordpress/dataviews": "^17.3.0",
+		"@wordpress/date": "^5.52.0",
+		"@wordpress/deprecated": "^4.52.0",
+		"@wordpress/dom": "^4.52.0",
+		"@wordpress/element": "^8.4.0",
+		"@wordpress/escape-html": "^3.52.0",
+		"@wordpress/global-styles-engine": "^1.19.0",
+		"@wordpress/hooks": "^4.52.0",
+		"@wordpress/html-entities": "^4.52.0",
+		"@wordpress/i18n": "^6.25.0",
+		"@wordpress/icons": "^15.3.0",
+		"@wordpress/image-cropper": "^1.16.0",
+		"@wordpress/interactivity": "^6.52.0",
+		"@wordpress/is-shallow-equal": "^5.52.0",
+		"@wordpress/keyboard-shortcuts": "^5.52.0",
+		"@wordpress/keycodes": "^4.52.0",
+		"@wordpress/notices": "^5.52.0",
+		"@wordpress/preferences": "^4.52.0",
+		"@wordpress/priority-queue": "^3.52.0",
+		"@wordpress/private-apis": "^1.52.0",
+		"@wordpress/rich-text": "^7.52.0",
+		"@wordpress/style-engine": "^2.52.0",
+		"@wordpress/token-list": "^3.52.0",
+		"@wordpress/ui": "^0.19.0",
+		"@wordpress/upload-media": "^0.37.0",
+		"@wordpress/url": "^4.52.0",
+		"@wordpress/warning": "^3.52.0",
+		"@wordpress/wordcount": "^4.52.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
 		"deepmerge": "^4.3.1",
 		"diff": "^8.0.3",
 		"fast-deep-equal": "^3.1.3",
-		"memize": "^2.1.0",
 		"parsel-js": "^1.1.2",
 		"postcss": "^8.4.38",
 		"postcss-prefix-selector": "^1.16.0",
@@ -118,7 +117,7 @@
 		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/postcss-prefix-selector": "^1.16.3",
-		"@wordpress/block-library": "^10.2.0",
+		"@wordpress/block-library": "^10.3.0",
 		"deep-freeze": "^0.0.1",
 		"storybook": "^10.4.3"
 	},
@@ -135,5 +134,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
+	"gitHead": "7e8b17a983f9391d3ebc7717af2a1c9ed7efc7ab"
 }

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlignmentUI should allow custom alignment controls to be specified 1`] = `
 <div>

package/src/components/alignment-control/ui.js

@@ -32,7 +32,7 @@ function AlignmentUI( {
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
 	label = __( 'Align text' ),
-	description = __( 'Change text alignment' ),
+	description,
 	isCollapsed = true,
 	isToolbar,
 } ) {
@@ -55,9 +55,7 @@ function AlignmentUI( {
 	const extraProps = isToolbar
 		? { isCollapsed }
 		: {
-				toggleProps: {
-					description,
-				},
+				toggleProps: description ? { description } : {},
 				popoverProps: POPOVER_PROPS,
 		  };
 

package/src/components/background-image-control/index.js

@@ -39,6 +39,10 @@ import { getResolvedValue } from '@wordpress/global-styles-engine';
  * Internal dependencies
  */
 import { hasBackgroundImageValue } from '../global-styles/background-panel';
+import {
+	InheritanceResetButton,
+	isGlobalStylesInheritanceEnabled,
+} from '../global-styles/inheritance';
 import { setImmutably } from '../../utils/object';
 import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
@@ -193,6 +197,7 @@ function BackgroundControlsPanel( {
 	onToggle: onToggleCallback = noop,
 	hasImageValue,
 	onReset,
+	hasLocalOverride,
 	containerRef,
 } ) {
 	if ( ! hasImageValue ) {
@@ -225,24 +230,38 @@ function BackgroundControlsPanel( {
 							as="button"
 							onToggleCallback={ onToggleCallback }
 						/>
-						{ onReset && (
-							<Button
-								__next40pxDefaultSize
-								label={ __( 'Reset' ) }
-								className="block-editor-global-styles-background-panel__reset"
-								size="small"
-								icon={ resetIcon }
-								onClick={ () => {
-									onReset();
-									// Close the dropdown if open.
-									if ( isOpen ) {
-										onToggle();
-									}
-									// Focus the toggle button.
-									focusToggleButton( containerRef );
-								} }
-							/>
-						) }
+						{ onReset &&
+							( hasLocalOverride ? (
+								<InheritanceResetButton
+									className="block-editor-global-styles-background-panel__reset"
+									onResetToInherited={ () => {
+										onReset();
+										// Close the dropdown if open.
+										if ( isOpen ) {
+											onToggle();
+										}
+										// Focus the toggle button.
+										focusToggleButton( containerRef );
+									} }
+								/>
+							) : (
+								<Button
+									__next40pxDefaultSize
+									label={ __( 'Reset' ) }
+									className="block-editor-global-styles-background-panel__reset"
+									size="small"
+									icon={ resetIcon }
+									onClick={ () => {
+										onReset();
+										// Close the dropdown if open.
+										if ( isOpen ) {
+											onToggle();
+										}
+										// Focus the toggle button.
+										focusToggleButton( containerRef );
+									} }
+								/>
+							) ) }
 					</>
 				);
 			} }
@@ -434,22 +453,29 @@ function BackgroundSizeControls( {
 	inheritedValue,
 	defaultValues,
 } ) {
-	const sizeValue =
-		style?.background?.backgroundSize ||
-		inheritedValue?.background?.backgroundSize;
-	const repeatValue =
-		style?.background?.backgroundRepeat ||
-		inheritedValue?.background?.backgroundRepeat;
+	/*
+	 * Read local and inherited values separately so each sub-control can
+	 * show the inherited value while marking the control as inherited.
+	 */
+	const localSizeValue = style?.background?.backgroundSize;
+	const localRepeatValue = style?.background?.backgroundRepeat;
+	const localPositionValue = style?.background?.backgroundPosition;
+	const localAttachmentValue = style?.background?.backgroundAttachment;
+	const inheritedSizeValue = inheritedValue?.background?.backgroundSize;
+	const inheritedRepeatValue = inheritedValue?.background?.backgroundRepeat;
+	const inheritedPositionValue =
+		inheritedValue?.background?.backgroundPosition;
+	const inheritedAttachmentValue =
+		inheritedValue?.background?.backgroundAttachment;
+
+	const sizeValue = localSizeValue || inheritedSizeValue;
+	const repeatValue = localRepeatValue || inheritedRepeatValue;
 	const imageValue =
 		style?.background?.backgroundImage?.url ||
 		inheritedValue?.background?.backgroundImage?.url;
 	const isUploadedImage = style?.background?.backgroundImage?.id;
-	const positionValue =
-		style?.background?.backgroundPosition ||
-		inheritedValue?.background?.backgroundPosition;
-	const attachmentValue =
-		style?.background?.backgroundAttachment ||
-		inheritedValue?.background?.backgroundAttachment;
+	const positionValue = localPositionValue || inheritedPositionValue;
+	const attachmentValue = localAttachmentValue || inheritedAttachmentValue;
 
 	/*
 	 * Set default values for uploaded images.
@@ -642,12 +668,10 @@ export default function BackgroundImagePanel( {
 	inheritedValue = value,
 	settings,
 	defaultValues = {},
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	/*
-	 * Resolve any inherited "ref" pointers.
-	 * Should the block editor need resolved, inherited values
-	 * across all controls, this could be abstracted into a hook,
-	 * e.g., useResolveGlobalStyle
+	 * Resolve inherited `ref` pointers for background controls.
 	 */
 	const { globalStyles, _links } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -681,13 +705,25 @@ export default function BackgroundImagePanel( {
 	}, [ globalStyles, _links, inheritedValue ] );
 
 	const resetBackground = () =>
-		onChange( setImmutably( value, [ 'background' ], {} ) );
+		onChange(
+			setImmutably( value, [ 'background' ], {
+				gradient: value?.background?.gradient,
+			} )
+		);
 
 	const { title, url } = value?.background?.backgroundImage || {
 		...resolvedInheritedValue?.background?.backgroundImage,
 	};
+	const localHasImageValue = hasBackgroundImageValue( value );
 	const hasImageValue =
-		hasBackgroundImageValue( value ) ||
+		localHasImageValue || hasBackgroundImageValue( resolvedInheritedValue );
+	// The blue-dot local-override affordance is part of the inherited-value
+	// treatment. When that treatment is disabled (e.g. in the Global Styles
+	// panel, where the edited value *is* the global style rather than a local
+	// override of it), fall back to the plain reset control.
+	const hasLocalOverride =
+		showInheritanceLabelIndicators &&
+		localHasImageValue &&
 		hasBackgroundImageValue( resolvedInheritedValue );
 
 	const imageValue =
@@ -721,7 +757,8 @@ export default function BackgroundImagePanel( {
 					url={ url }
 					onToggle={ setIsDropDownOpen }
 					hasImageValue={ hasImageValue }
-					onReset={ resetBackground }
+					hasLocalOverride={ hasLocalOverride }
+					onReset={ localHasImageValue ? resetBackground : undefined }
 					containerRef={ containerRef }
 				>
 					<VStack spacing={ 3 } className="single-column">

package/src/components/background-image-control/style.scss

@@ -58,10 +58,6 @@
 		&:hover {
 			color: var(--wp-admin-theme-color);
 		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
 	}
 
 	.block-editor-global-styles-background-panel__loading {
@@ -97,12 +93,25 @@
 		transition: opacity 0.1s ease-in-out;
 	}
 
+	&.has-local-override-from-global-styles__reset {
+		position: absolute;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-block: 0;
+		margin-inline: 0 $grid-unit;
+		opacity: 1;
+	}
+
 	&.block-editor-global-styles-background-panel__reset {
 		border-radius: $radius-small;
 	}
 
 	.block-editor-global-styles-background-panel__dropdown-toggle:hover + &,
 	&:focus,
+	&:focus-within,
 	&:hover {
 		opacity: 1;
 	}

package/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
 <div>
@@ -9,7 +9,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Align"
+      aria-label="Align block"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -37,7 +37,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align"
+    label="Align block"
   >
     <div>
       <button

package/src/components/block-alignment-control/test/index.js

@@ -61,7 +61,7 @@ describe( 'BlockAlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Align',
+				name: 'Align block',
 			} )
 		);
 

package/src/components/block-alignment-control/ui.js

@@ -26,6 +26,8 @@ function BlockAlignmentUI( {
 	controls,
 	isToolbar,
 	isCollapsed = true,
+	label = __( 'Align block' ),
+	description,
 } ) {
 	const enabledControls = useAvailableAlignments( controls );
 	const hasEnabledControls = !! enabledControls.length;
@@ -47,7 +49,7 @@ function BlockAlignmentUI( {
 		icon: activeAlignmentControl
 			? activeAlignmentControl.icon
 			: defaultAlignmentControl.icon,
-		label: __( 'Align' ),
+		label,
 	};
 	const extraProps = isToolbar
 		? {
@@ -64,7 +66,7 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { description: __( 'Change alignment' ) },
+				toggleProps: description ? { description } : {},
 				children: ( { onClose } ) => {
 					return (
 						<>

package/src/components/block-breadcrumb/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BlockBreadcrumb should render correctly 1`] = `
 <div>

package/src/components/block-compare/test/__snapshots__/block-view.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BlockView should match snapshot 1`] = `
 <div>

package/src/components/block-icon/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BlockIcon renders a Icon 1`] = `
 <div>

package/src/components/block-inspector/index.js

@@ -30,6 +30,7 @@ import { ListViewContentPopover } from '../inspector-controls/list-view-content-
 import InspectorControls from '../inspector-controls';
 import { BlockInspectorPreTabsSlot } from './inspector-pre-tabs-slot-fill';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
+import { SectionStyleControls } from '../inspector-controls-tabs/styles-tab';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import InspectorControlsLastItem from '../inspector-controls/last-item';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
@@ -41,6 +42,7 @@ import ContentTab from '../inspector-controls-tabs/content-tab';
 import ViewportVisibilityInfo from '../block-visibility/viewport-visibility-info';
 import { unlock } from '../../lock-unlock';
 import {
+	BlockStyleStateProvider,
 	hasPseudoBlockStyleState,
 	hasViewportBlockStyleState,
 	isDefaultBlockStyleState,
@@ -95,43 +97,67 @@ function StyleInspectorSlots( {
 	);
 }
 
-function StyleStateInspectorSlots( { blockName, selectedBlockStyleState } ) {
+function StyleStateInspectorSlots( {
+	blockName,
+	clientId,
+	contentClientIds,
+	isSectionBlock,
+	selectedBlockStyleState,
+} ) {
 	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 	const showLayoutControls =
 		hasViewportBlockStyleState( selectedBlockStyleState ) &&
 		! hasPseudoBlockStyleState( selectedBlockStyleState );
+	const showSectionStyleControls =
+		isSectionBlock && blockName !== 'core/template-part';
 	return (
 		<>
-			<InspectorControls.Slot
-				group="typography"
-				label={ __( 'Typography' ) }
-			/>
-			<InspectorControls.Slot
-				group="color"
-				label={ __( 'Color' ) }
-				className="color-block-support-panel__inner-wrapper"
-			/>
-			<InspectorControls.Slot
-				group="background"
-				label={ __( 'Background' ) }
-				className="background-block-support-panel__inner-wrapper"
-			/>
-			{ showLayoutControls && (
-				<InspectorControls.Slot
-					group="layout"
-					label={ __( 'Layout' ) }
-				/>
+			{ showSectionStyleControls && (
+				<BlockStyleStateProvider value={ selectedBlockStyleState }>
+					<SectionStyleControls
+						blockName={ blockName }
+						clientId={ clientId }
+						contentClientIds={ contentClientIds }
+					/>
+				</BlockStyleStateProvider>
+			) }
+			{ ! showSectionStyleControls && (
+				<>
+					<InspectorControls.Slot
+						group="typography"
+						label={ __( 'Typography' ) }
+					/>
+					<InspectorControls.Slot
+						group="color"
+						label={ __( 'Color' ) }
+						className="color-block-support-panel__inner-wrapper"
+					/>
+					<InspectorControls.Slot
+						group="background"
+						label={ __( 'Background' ) }
+						className="background-block-support-panel__inner-wrapper"
+					/>
+					{ showLayoutControls && (
+						<InspectorControls.Slot
+							group="layout"
+							label={ __( 'Layout' ) }
+						/>
+					) }
+					<InspectorControls.Slot
+						group="dimensions"
+						label={ __( 'Dimensions' ) }
+					/>
+					<InspectorControls.Slot
+						group="border"
+						label={ borderPanelLabel }
+					/>
+					<InspectorControls.Slot
+						group="elements"
+						label={ __( 'Elements' ) }
+						className="elements-block-support-panel__inner-wrapper"
+					/>
+				</>
 			) }
-			<InspectorControls.Slot
-				group="dimensions"
-				label={ __( 'Dimensions' ) }
-			/>
-			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
-			<InspectorControls.Slot
-				group="elements"
-				label={ __( 'Elements' ) }
-				className="elements-block-support-panel__inner-wrapper"
-			/>
 		</>
 	);
 }
@@ -474,9 +500,12 @@ const BlockInspectorSingleBlock = ( {
 				/>
 			) }
 			<BlockInspectorPreTabsSlot />
-			{ isEditingStyleState && ! isSectionBlock && (
+			{ isEditingStyleState && (
 				<StyleStateInspectorSlots
 					blockName={ blockName }
+					clientId={ renderedBlockClientId }
+					contentClientIds={ contentClientIds }
+					isSectionBlock={ isSectionBlock }
 					selectedBlockStyleState={ selectedBlockStyleState }
 				/>
 			) }

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

@@ -20,9 +20,11 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { useNativeUndo } from '../../utils/native-undo';
 
 function BlockHTML( { clientId } ) {
 	const [ html, setHtml ] = useState( '' );
+	const nativeUndoRef = useNativeUndo();
 	const block = useSelect(
 		( select ) => select( blockEditorStore ).getBlock( clientId ),
 		[ clientId ]
@@ -83,6 +85,9 @@ function BlockHTML( { clientId } ) {
 			value={ html }
 			onBlur={ onChange }
 			onChange={ ( event ) => setHtml( event.target.value ) }
+			// The edits are local state until committed on blur, so undo
+			// and redo must remain the browser's own within the field.
+			ref={ nativeUndoRef }
 		/>
 	);
 }

package/src/components/block-list/content.scss

@@ -347,8 +347,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	}
 }
 
-// Hide the appender that sits at the end of block lists, when inside a nested block,
-// unless the block itself, or a parent, is selected.
+// Fade in the appender that sits at the end of block lists.
 .wp-block .block-list-appender .block-editor-inserter__toggle {
 	@media not ( prefers-reduced-motion ) {
 		animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
@@ -356,15 +355,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	}
 }
 
-.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
-	display: none;
-
-	.block-editor-inserter__toggle {
-		opacity: 0;
-		transform: scale(0);
-	}
-}
-
 .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
 	display: block;
 	margin: 0;

package/src/components/block-list/use-block-props/index.js

@@ -24,6 +24,7 @@ import {
 	useBlockEditContext,
 } from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
+import { useRegisterBlockEventHandlers } from './use-register-block-event-handlers';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
@@ -106,8 +107,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		blockVisibility,
 		deviceType,
 		viewportSettings,
+		ariaLabel,
 	} = useContext( PrivateBlockContext );
 
+	useRegisterBlockEventHandlers( clientId, wrapperProps );
+
 	const defaultViewRef = useRefEffect( ( element ) => {
 		if ( element ) {
 			const { ownerDocument } = element;
@@ -183,7 +187,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		ref: mergedRefs,
 		id: `block-${ clientId }${ htmlSuffix }`,
 		role: 'document',
-		'aria-label': blockLabel,
+		'aria-label': ariaLabel ?? blockLabel,
 		'data-block': clientId,
 		'data-type': name,
 		'data-title': blockTitle,