@wordpress/block-editor 12.23.0 → 12.24.0

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

@@ -143,6 +143,7 @@ function BlockListBlock( {
 			mayDisplayControls={ mayDisplayControls }
 			mayDisplayParentControls={ mayDisplayParentControls }
 			blockEditingMode={ context.blockEditingMode }
+			isPreviewMode={ context.isPreviewMode }
 		/>
 	);
 
@@ -525,7 +526,7 @@ function BlockListBlockProvider( props ) {
 				canMoveBlock,
 
 				getSettings,
-				__unstableGetTemporarilyEditingAsBlocks,
+				getTemporarilyEditingAsBlocks,
 				getBlockEditingMode,
 				getBlockName,
 				isFirstMultiSelectedBlock,
@@ -562,14 +563,43 @@ function BlockListBlockProvider( props ) {
 				hasBlockSupport: _hasBlockSupport,
 				getActiveBlockVariation,
 			} = select( blocksStore );
-			const _isSelected = isBlockSelected( clientId );
-			const canRemove = canRemoveBlock( clientId, rootClientId );
-			const canMove = canMoveBlock( clientId, rootClientId );
 			const attributes = getBlockAttributes( clientId );
 			const { name: blockName, isValid } = blockWithoutAttributes;
 			const blockType = getBlockType( blockName );
+			const {
+				outlineMode,
+				supportsLayout,
+				__unstableIsPreviewMode: isPreviewMode,
+			} = getSettings();
+			const hasLightBlockWrapper = blockType?.apiVersion > 1;
+			const previewContext = {
+				isPreviewMode,
+				blockWithoutAttributes,
+				name: blockName,
+				attributes,
+				isValid,
+				themeSupportsLayout: supportsLayout,
+				index: getBlockIndex( clientId ),
+				isReusable: isReusableBlock( blockType ),
+				className: hasLightBlockWrapper
+					? attributes.className
+					: undefined,
+				defaultClassName: hasLightBlockWrapper
+					? getBlockDefaultClassName( blockName )
+					: undefined,
+				blockTitle: blockType?.title,
+			};
+
+			// When in preview mode, we can avoid a lot of selection and
+			// editing related selectors.
+			if ( isPreviewMode ) {
+				return previewContext;
+			}
+
+			const _isSelected = isBlockSelected( clientId );
+			const canRemove = canRemoveBlock( clientId, rootClientId );
+			const canMove = canMoveBlock( clientId, rootClientId );
 			const match = getActiveBlockVariation( blockName, attributes );
-			const { outlineMode, supportsLayout } = getSettings();
 			const isMultiSelected = isBlockMultiSelected( clientId );
 			const checkDeep = true;
 			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
@@ -577,25 +607,20 @@ function BlockListBlockProvider( props ) {
 				checkDeep
 			);
 			const typing = isTyping();
-			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 			const movingClientId = hasBlockMovingClientId();
 			const blockEditingMode = getBlockEditingMode( clientId );
 
 			return {
+				...previewContext,
 				mode: getBlockMode( clientId ),
 				isSelectionEnabled: isSelectionEnabled(),
 				isLocked: !! getTemplateLock( rootClientId ),
 				templateLock: getTemplateLock( clientId ),
 				canRemove,
 				canMove,
-				blockWithoutAttributes,
-				name: blockName,
-				attributes,
-				isValid,
 				isSelected: _isSelected,
-				themeSupportsLayout: supportsLayout,
 				isTemporarilyEditingAsBlocks:
-					__unstableGetTemporarilyEditingAsBlocks() === clientId,
+					getTemporarilyEditingAsBlocks() === clientId,
 				blockEditingMode,
 				mayDisplayControls:
 					_isSelected ||
@@ -609,7 +634,6 @@ function BlockListBlockProvider( props ) {
 						'__experimentalExposeControlsToChildren',
 						false
 					) && hasSelectedInnerBlock( clientId ),
-				index: getBlockIndex( clientId ),
 				blockApiVersion: blockType?.apiVersion || 1,
 				blockTitle: match?.title || blockType?.title,
 				isSubtreeDisabled:
@@ -620,7 +644,9 @@ function BlockListBlockProvider( props ) {
 					__unstableHasActiveBlockOverlayActive( clientId ) &&
 					! isDragging(),
 				initialPosition:
-					_isSelected && __unstableGetEditorMode() === 'edit'
+					_isSelected &&
+					( __unstableGetEditorMode() === 'edit' ||
+						__unstableGetEditorMode() === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
 						? getSelectedBlocksInitialCaretPosition()
 						: undefined,
 				isHighlighted: isBlockHighlighted( clientId ),
@@ -629,7 +655,6 @@ function BlockListBlockProvider( props ) {
 					isMultiSelected &&
 					! __unstableIsFullySelected() &&
 					! __unstableSelectionHasUnmergeableBlock(),
-				isReusable: isReusableBlock( blockType ),
 				isDragging: isBlockBeingDragged( clientId ),
 				hasChildSelected: isAncestorOfSelectedBlock,
 				removeOutline: _isSelected && outlineMode && typing,
@@ -644,28 +669,25 @@ function BlockListBlockProvider( props ) {
 				hasEditableOutline:
 					blockEditingMode !== 'disabled' &&
 					getBlockEditingMode( rootClientId ) === 'disabled',
-				className: hasLightBlockWrapper
-					? attributes.className
-					: undefined,
-				defaultClassName: hasLightBlockWrapper
-					? getBlockDefaultClassName( blockName )
-					: undefined,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
 
 	const {
-		mode,
-		isSelectionEnabled,
-		isLocked,
-		canRemove,
-		canMove,
+		isPreviewMode,
+		// Fill values that end up as a public API and may not be defined in
+		// preview mode.
+		mode = 'visual',
+		isSelectionEnabled = false,
+		isLocked = false,
+		canRemove = false,
+		canMove = false,
 		blockWithoutAttributes,
 		name,
 		attributes,
 		isValid,
-		isSelected,
+		isSelected = false,
 		themeSupportsLayout,
 		isTemporarilyEditingAsBlocks,
 		blockEditingMode,
@@ -711,6 +733,7 @@ function BlockListBlockProvider( props ) {
 	}
 
 	const privateContext = {
+		isPreviewMode,
 		clientId,
 		className,
 		index,

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

@@ -674,7 +674,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				}
 			}
 		},
-		onReplace( blocks, indexToSelect, initialPosition ) {
+		onReplace( blocks, indexToSelect, initialPosition, meta ) {
 			if (
 				blocks.length &&
 				! isUnmodifiedDefaultBlock( blocks[ blocks.length - 1 ] )
@@ -685,7 +685,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				[ ownProps.clientId ],
 				blocks,
 				indexToSelect,
-				initialPosition
+				initialPosition,
+				meta
 			);
 		},
 		toggleSelection( selectionEnabled ) {

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

@@ -300,30 +300,47 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-@keyframes block-editor-has-editable-outline__fade-out-animation {
+// Add fade in/out background for editable blocks in synced patterns.
+@keyframes block-editor-is-editable__animation {
 	from {
-		border-color: rgba(var(--wp-admin-theme-color--rgb), 1);
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
 	}
 	to {
-		border-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
 	}
 }
 
-.is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline {
-	&::after {
-		content: "";
-		position: absolute;
-		pointer-events: none;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		border: 1px dotted rgba(var(--wp-admin-theme-color--rgb), 1);
-		border-radius: $radius-block-ui;
-		animation: block-editor-has-editable-outline__fade-out-animation 0.3s ease-out;
-		animation-delay: 1s;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
+@keyframes block-editor-is-editable__animation_reduce-motion {
+	0% {
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+	}
+	99% {
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+	}
+	100% {
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+	}
+}
+
+.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
+	animation-name: block-editor-is-editable__animation;
+	animation-duration: 0.8s;
+	animation-timing-function: ease-out;
+	animation-delay: 0.1s;
+	animation-fill-mode: backwards;
+	border-radius: $radius-block-ui;
+	bottom: 0;
+	content: "";
+	left: 0;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	top: 0;
+
+	// Unique reduced-motion affordance to ensure the effect is still visible when reduce motion is enabled.
+	@media (prefers-reduced-motion: reduce) {
+		animation-name: block-editor-is-editable__animation_reduce-motion;
+		animation-delay: 0s;
 	}
 }
 
@@ -470,8 +487,9 @@ body.is-zoomed-out {
 }
 
 .block-editor-iframe__html {
-	transition: all 0.3s;
 	transform-origin: top center;
+	transition: all 0.3s;
+	@include reduce-motion("transition");
 }
 
 .block-editor-iframe__html[style*="scale"] {

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

@@ -55,15 +55,14 @@ function Root( { className, ...settings } ) {
 		const {
 			getSettings,
 			__unstableGetEditorMode,
-			__unstableGetTemporarilyEditingAsBlocks,
-		} = select( blockEditorStore );
+			getTemporarilyEditingAsBlocks,
+		} = unlock( select( blockEditorStore ) );
 		const { outlineMode, focusMode } = getSettings();
 		return {
 			isOutlineMode: outlineMode,
 			isFocusMode: focusMode,
 			editorMode: __unstableGetEditorMode(),
-			temporarilyEditingAsBlocks:
-				__unstableGetTemporarilyEditingAsBlocks(),
+			temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
 		};
 	}, [] );
 	const registry = useRegistry();
@@ -160,6 +159,9 @@ export default function BlockList( settings ) {
 	);
 }
 
+const EMPTY_ARRAY = [];
+const EMPTY_SET = new Set();
+
 function Items( {
 	placeholder,
 	rootClientId,
@@ -175,6 +177,7 @@ function Items( {
 		useSelect(
 			( select ) => {
 				const {
+					getSettings,
 					getBlockOrder,
 					getSelectedBlockClientId,
 					getSelectedBlockClientIds,
@@ -183,9 +186,20 @@ function Items( {
 					getBlockEditingMode,
 					__unstableGetEditorMode,
 				} = select( blockEditorStore );
+
+				const _order = getBlockOrder( rootClientId );
+
+				if ( getSettings().__unstableIsPreviewMode ) {
+					return {
+						order: _order,
+						selectedBlocks: EMPTY_ARRAY,
+						visibleBlocks: EMPTY_SET,
+					};
+				}
+
 				const selectedBlockClientId = getSelectedBlockClientId();
 				return {
-					order: getBlockOrder( rootClientId ),
+					order: _order,
 					selectedBlocks: getSelectedBlockClientIds(),
 					visibleBlocks: __unstableGetVisibleBlocks(),
 					shouldRenderAppender:
@@ -196,7 +210,9 @@ function Items( {
 									'disabled' &&
 							  __unstableGetEditorMode() !== 'zoom-out'
 							: rootClientId === selectedBlockClientId ||
-							  ( ! rootClientId && ! selectedBlockClientId ) ),
+							  ( ! rootClientId &&
+									! selectedBlockClientId &&
+									! _order.length ) ),
 				};
 			},
 			[ rootClientId, hasAppender, hasCustomAppender ]

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

@@ -130,7 +130,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
 	const bindingsStyle =
 		hasBlockBindings && canBindBlock( name )
-			? { '--wp-admin-theme-color': 'var(--wp-bound-block-color)' }
+			? {
+					'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
+					'--wp-admin-theme-color--rgb':
+						'var(--wp-block-synced-color--rgb)',
+			  }
 			: {};
 
 	// Ensures it warns only inside the `edit` implementation for the block.

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -28,11 +28,16 @@ import { store as blockEditorStore } from '../../../store';
  */
 export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );
+	const { isBlockSelected, isMultiSelecting, __unstableGetEditorMode } =
+		useSelect( blockEditorStore );
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
-		if ( ! isBlockSelected( clientId ) || isMultiSelecting() ) {
+		if (
+			! isBlockSelected( clientId ) ||
+			isMultiSelecting() ||
+			__unstableGetEditorMode() === 'zoom-out'
+		) {
 			return;
 		}
 
@@ -80,7 +85,6 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 				return;
 			}
 		}
-
 		placeCaretAtHorizontalEdge( target, isReverse );
 	}, [ initialPosition, clientId ] );
 

package/src/components/block-patterns-paging/index.js

@@ -45,6 +45,7 @@ export default function Pagination( {
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'First page' ) }
+							__experimentalIsFocusable
 						>
 							<span>«</span>
 						</Button>
@@ -53,6 +54,7 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'Previous page' ) }
+							__experimentalIsFocusable
 						>
 							<span>‹</span>
 						</Button>
@@ -75,6 +77,7 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Next page' ) }
+							__experimentalIsFocusable
 						>
 							<span>›</span>
 						</Button>
@@ -84,6 +87,7 @@ export default function Pagination( {
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Last page' ) }
 							size="default"
+							__experimentalIsFocusable
 						>
 							<span>»</span>
 						</Button>

package/src/components/block-rename/modal.js

@@ -8,9 +8,8 @@ import {
 	TextControl,
 	Modal,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useId } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -23,8 +22,12 @@ export default function BlockRenameModal( {
 	originalBlockName,
 	onClose,
 	onSave,
+	// Pattern Overrides is a WordPress-only feature but it also uses the Block Binding API.
+	// Ideally this should not be inside the block editor package, but we keep it here for simplicity.
+	hasOverridesWarning,
 } ) {
 	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
+	const descriptionId = useId();
 
 	const nameHasChanged = editedBlockName !== blockName;
 	const nameIsOriginal = editedBlockName === originalBlockName;
@@ -34,11 +37,6 @@ export default function BlockRenameModal( {
 
 	const autoSelectInputText = ( event ) => event.target.select();
 
-	const dialogDescription = useInstanceId(
-		BlockRenameModal,
-		`block-editor-rename-modal__description`
-	);
-
 	const handleSubmit = () => {
 		const message =
 			nameIsOriginal || nameIsEmpty
@@ -66,14 +64,10 @@ export default function BlockRenameModal( {
 			title={ __( 'Rename' ) }
 			onRequestClose={ onClose }
 			overlayClassName="block-editor-block-rename-modal"
-			aria={ {
-				describedby: dialogDescription,
-			} }
 			focusOnMount="firstContentElement"
+			aria={ { describedby: descriptionId } }
+			size="small"
 		>
-			<p id={ dialogDescription }>
-				{ __( 'Enter a custom name for this block.' ) }
-			</p>
 			<form
 				onSubmit={ ( e ) => {
 					e.preventDefault();
@@ -85,6 +79,9 @@ export default function BlockRenameModal( {
 					handleSubmit();
 				} }
 			>
+				<p id={ descriptionId }>
+					{ __( 'Enter a custom name for this block.' ) }
+				</p>
 				<VStack spacing="3">
 					<TextControl
 						__nextHasNoMarginBottom
@@ -92,6 +89,13 @@ export default function BlockRenameModal( {
 						value={ editedBlockName }
 						label={ __( 'Block name' ) }
 						hideLabelFromVision
+						help={
+							hasOverridesWarning
+								? __(
+										'This block allows overrides. Changing the name can cause problems with content entered into instances of this pattern.'
+								  )
+								: undefined
+						}
 						placeholder={ originalBlockName }
 						onChange={ setEditedBlockName }
 						onFocus={ autoSelectInputText }

package/src/components/block-rename/rename-control.js

@@ -32,11 +32,17 @@ export default function BlockRenameControl( { clientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const customName = metadata?.name;
+	const hasPatternOverrides =
+		!! customName &&
+		!! metadata?.bindings &&
+		Object.values( metadata.bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
+		);
 
 	function onChange( newName ) {
 		updateBlockAttributes( [ clientId ], {
 			metadata: {
-				...( metadata && metadata ),
+				...metadata,
 				name: newName,
 			},
 		} );
@@ -59,6 +65,7 @@ export default function BlockRenameControl( { clientId } ) {
 				<BlockRenameModal
 					blockName={ customName || '' }
 					originalBlockName={ blockInformation?.title }
+					hasOverridesWarning={ hasPatternOverrides }
 					onClose={ () => setRenamingBlock( false ) }
 					onSave={ ( newName ) => {
 						// If the new value is the block's original name (e.g. `Group`)

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

@@ -170,29 +170,33 @@ export function PrivateBlockToolbar( {
 				{ isUsingBindings && canBindBlock( blockName ) && (
 					<BlockBindingsIndicator />
 				) }
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-					<div ref={ nodeRef } { ...showHoveredOrFocusedGestures }>
-						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-							<BlockSwitcher
-								clientIds={ blockClientIds }
-								disabled={ ! isDefaultEditingMode }
-							/>
-							{ isDefaultEditingMode && (
-								<>
-									{ ! isMultiToolbar && (
-										<BlockLockToolbar
-											clientId={ blockClientId }
+				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+					( isDefaultEditingMode || isSynced ) && (
+						<div
+							ref={ nodeRef }
+							{ ...showHoveredOrFocusedGestures }
+						>
+							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
+								<BlockSwitcher
+									clientIds={ blockClientIds }
+									disabled={ ! isDefaultEditingMode }
+								/>
+								{ isDefaultEditingMode && (
+									<>
+										{ ! isMultiToolbar && (
+											<BlockLockToolbar
+												clientId={ blockClientId }
+											/>
+										) }
+										<BlockMover
+											clientIds={ blockClientIds }
+											hideDragHandle={ hideDragHandle }
 										/>
-									) }
-									<BlockMover
-										clientIds={ blockClientIds }
-										hideDragHandle={ hideDragHandle }
-									/>
-								</>
-							) }
-						</ToolbarGroup>
-					</div>
-				) }
+									</>
+								) }
+							</ToolbarGroup>
+						</div>
+					) }
 				<Shuffle clientId={ blockClientId } />
 				{ shouldShowVisualToolbar && isMultiToolbar && (
 					<BlockGroupToolbar />

package/src/components/block-toolbar/use-has-block-toolbar.js

@@ -21,11 +21,13 @@ export function useHasBlockToolbar() {
 			const {
 				getBlockEditingMode,
 				getBlockName,
-				getSelectedBlockClientIds,
+				getBlockSelectionStart,
 			} = select( blockEditorStore );
 
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+			// we only care about the 1st selected block
+			// for the toolbar, so we use getBlockSelectionStart
+			// instead of getSelectedBlockClientIds
+			const selectedBlockClientId = getBlockSelectionStart();
 			const isDefaultEditingMode =
 				getBlockEditingMode( selectedBlockClientId ) === 'default';
 			const blockType =