@wordpress/block-editor 12.18.2 → 12.19.0

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

@@ -48,6 +48,7 @@ import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
 import useScrollUponInsertion from './use-scroll-upon-insertion';
 import { useSettings } from '../use-settings';
+import { unlock } from '../../lock-unlock';
 
 const EMPTY_ARRAY = [];
 
@@ -418,11 +419,13 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 		getBlockMode,
 		isSelectionEnabled,
 		getTemplateLock,
-		__unstableGetBlockWithoutInnerBlocks,
+		getBlockWithoutAttributes,
+		getBlockAttributes,
 		canRemoveBlock,
 		canMoveBlock,
-	} = select( blockEditorStore );
-	const block = __unstableGetBlockWithoutInnerBlocks( clientId );
+	} = unlock( select( blockEditorStore ) );
+	const block = getBlockWithoutAttributes( clientId );
+	const attributes = getBlockAttributes( clientId );
 	const isSelected = isBlockSelected( clientId );
 	const templateLock = getTemplateLock( rootClientId );
 	const canRemove = canRemoveBlock( clientId, rootClientId );
@@ -432,7 +435,7 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 	// This function should never be called when a block is not present in
 	// the state. It happens now because the order in withSelect rendering
 	// is not correct.
-	const { name, attributes, isValid } = block || {};
+	const { name, isValid } = block || {};
 
 	// Do not add new properties here, use `useSelect` instead to avoid
 	// leaking new props to the public API (editor.BlockListBlock filter).

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

@@ -300,35 +300,30 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-// Indicate which blocks are editable within a locked context.
-// 1. User must be hovering an editor with renderingMode = 'template-lock'; or...
-.is-template-locked:hover,
-// ...a container block.
-.block-editor-block-list__block:hover {
-	// 2. Look for locked blocks; or...
-	.block-editor-block-list__block.is-editing-disabled,
-	// ...container blocks that have locked children.
-	&:has(> .block-editor-block-list__block.is-editing-disabled) {
-		// 3. Highlight any unlocked children of that locked block.
-		& > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) {
-			&::after {
-				content: "";
-				border-style: dotted;
-				position: absolute;
-				pointer-events: none;
-				top: $border-width;
-				left: $border-width;
-				right: $border-width;
-				bottom: $border-width;
-				border: 1px dotted var(--wp-admin-theme-color);
-				border-radius: $radius-block-ui - $border-width;
-			}
+@keyframes block-editor-has-editable-outline__fade-out-animation {
+	from {
+		border-color: rgba(var(--wp-admin-theme-color--rgb), 1);
+	}
+	to {
+		border-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+	}
+}
 
-			&.is-hovered::after {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
-				border: none;
-			}
-		}
+.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");
 	}
 }
 

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

@@ -151,29 +151,51 @@ export default function BlockList( settings ) {
 function Items( {
 	placeholder,
 	rootClientId,
-	renderAppender,
+	renderAppender: CustomAppender,
 	__experimentalAppenderTagName,
 	layout = defaultLayout,
 } ) {
-	const { order, selectedBlocks, visibleBlocks, temporarilyEditingAsBlocks } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlockOrder,
-					getSelectedBlockClientIds,
-					__unstableGetVisibleBlocks,
-					__unstableGetTemporarilyEditingAsBlocks,
-				} = select( blockEditorStore );
-				return {
-					order: getBlockOrder( rootClientId ),
-					selectedBlocks: getSelectedBlockClientIds(),
-					visibleBlocks: __unstableGetVisibleBlocks(),
-					temporarilyEditingAsBlocks:
-						__unstableGetTemporarilyEditingAsBlocks(),
-				};
-			},
-			[ rootClientId ]
-		);
+	// Avoid passing CustomAppender to useSelect because it could be a new
+	// function on every render.
+	const hasAppender = CustomAppender !== false;
+	const hasCustomAppender = !! CustomAppender;
+	const {
+		order,
+		selectedBlocks,
+		visibleBlocks,
+		temporarilyEditingAsBlocks,
+		shouldRenderAppender,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockOrder,
+				getSelectedBlockClientId,
+				getSelectedBlockClientIds,
+				__unstableGetVisibleBlocks,
+				__unstableGetTemporarilyEditingAsBlocks,
+				getTemplateLock,
+				getBlockEditingMode,
+				__unstableGetEditorMode,
+			} = select( blockEditorStore );
+			const selectedBlockClientId = getSelectedBlockClientId();
+			return {
+				order: getBlockOrder( rootClientId ),
+				selectedBlocks: getSelectedBlockClientIds(),
+				visibleBlocks: __unstableGetVisibleBlocks(),
+				temporarilyEditingAsBlocks:
+					__unstableGetTemporarilyEditingAsBlocks(),
+				shouldRenderAppender:
+					hasAppender &&
+					( hasCustomAppender
+						? ! getTemplateLock( rootClientId ) &&
+						  getBlockEditingMode( rootClientId ) !== 'disabled' &&
+						  __unstableGetEditorMode() !== 'zoom-out'
+						: rootClientId === selectedBlockClientId ||
+						  ( ! rootClientId && ! selectedBlockClientId ) ),
+			};
+		},
+		[ rootClientId, hasAppender, hasCustomAppender ]
+	);
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -199,11 +221,13 @@ function Items( {
 					clientId={ temporarilyEditingAsBlocks }
 				/>
 			) }
-			<BlockListAppender
-				tagName={ __experimentalAppenderTagName }
-				rootClientId={ rootClientId }
-				renderAppender={ renderAppender }
-			/>
+			{ shouldRenderAppender && (
+				<BlockListAppender
+					tagName={ __experimentalAppenderTagName }
+					rootClientId={ rootClientId }
+					CustomAppender={ CustomAppender }
+				/>
+			) }
 		</LayoutProvider>
 	);
 }

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

@@ -25,6 +25,7 @@ import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
+import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -95,8 +96,10 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		isEditingDisabled,
+		hasEditableOutline,
 		isTemporarilyEditingAsBlocks,
 		defaultClassName,
+		templateLock,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -113,6 +116,10 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),
+		useFlashEditableBlocks( {
+			clientId,
+			isEnabled: name === 'core/block' || templateLock === 'contentOnly',
+		} ),
 	] );
 
 	const blockEditContext = useBlockEditContext();
@@ -152,6 +159,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-block-moving-mode': isBlockMovingMode,
 				'can-insert-moving-block': canInsertMovingBlock,
 				'is-editing-disabled': isEditingDisabled,
+				'has-editable-outline': hasEditableOutline,
 				'is-content-locked-temporarily-editing-as-blocks':
 					isTemporarilyEditingAsBlocks,
 			},

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

@@ -39,77 +39,12 @@ function DefaultAppender( { rootClientId } ) {
 	);
 }
 
-function useAppender( rootClientId, CustomAppender ) {
-	const isVisible = useSelect(
-		( select ) => {
-			const {
-				getTemplateLock,
-				getSelectedBlockClientId,
-				__unstableGetEditorMode,
-				getBlockEditingMode,
-			} = select( blockEditorStore );
-
-			if ( ! CustomAppender ) {
-				const selectedBlockClientId = getSelectedBlockClientId();
-				const isParentSelected =
-					rootClientId === selectedBlockClientId ||
-					( ! rootClientId && ! selectedBlockClientId );
-				if ( ! isParentSelected ) {
-					return false;
-				}
-			}
-
-			if (
-				getTemplateLock( rootClientId ) ||
-				getBlockEditingMode( rootClientId ) === 'disabled' ||
-				__unstableGetEditorMode() === 'zoom-out'
-			) {
-				return false;
-			}
-
-			return true;
-		},
-		[ rootClientId, CustomAppender ]
-	);
-
-	if ( ! isVisible ) {
-		return null;
-	}
-
-	return CustomAppender ? (
-		<CustomAppender />
-	) : (
-		<DefaultAppender rootClientId={ rootClientId } />
-	);
-}
-
-function BlockListAppender( {
+export default function BlockListAppender( {
 	rootClientId,
-	renderAppender,
+	CustomAppender,
 	className,
 	tagName: TagName = 'div',
 } ) {
-	if ( renderAppender === false ) {
-		return null;
-	}
-
-	return (
-		<BlockListAppenderInner
-			rootClientId={ rootClientId }
-			renderAppender={ renderAppender }
-			className={ className }
-			tagName={ TagName }
-		/>
-	);
-}
-
-function BlockListAppenderInner( {
-	rootClientId,
-	renderAppender,
-	className,
-	tagName: TagName,
-} ) {
-	const appender = useAppender( rootClientId, renderAppender );
 	const isDragOver = useSelect(
 		( select ) => {
 			const {
@@ -130,10 +65,6 @@ function BlockListAppenderInner( {
 		[ rootClientId ]
 	);
 
-	if ( ! appender ) {
-		return null;
-	}
-
 	return (
 		<TagName
 			// A `tabIndex` is used on the wrapping `div` element in order to
@@ -162,9 +93,11 @@ function BlockListAppenderInner( {
 			// have commonly targeted that attribute for margins.
 			data-block
 		>
-			{ appender }
+			{ CustomAppender ? (
+				<CustomAppender />
+			) : (
+				<DefaultAppender rootClientId={ rootClientId } />
+			) }
 		</TagName>
 	);
 }
-
-export default BlockListAppender;

package/src/components/block-mover/style.scss

@@ -2,13 +2,14 @@
 	display: flex;
 	padding: 0;
 	border: none;
+	justify-content: center;
 
 	@include break-small() {
 		.block-editor-block-mover:not(.is-horizontal) & {
 			flex-direction: column;
 
 			> * {
-				height: $block-toolbar-height * 0.5;
+				height: $block-toolbar-height * 0.5 - $grid-unit-05;
 				width: 100%;
 				min-width: 0 !important; // overrides default button width.
 
@@ -19,12 +20,12 @@
 			}
 
 			.block-editor-block-mover-button.is-up-button svg {
-				top: 5px;
+				top: 3px;
 				flex-shrink: 0;
 			}
 
 			.block-editor-block-mover-button.is-down-button svg {
-				bottom: 5px;
+				bottom: 3px;
 				flex-shrink: 0;
 			}
 		}

package/src/components/block-preview/auto.js

@@ -18,12 +18,13 @@ import { store } from '../../store';
 let MemoizedBlockList;
 
 const MAX_HEIGHT = 2000;
+const EMPTY_ADDITIONAL_STYLES = [];
 
 function ScaledBlockPreview( {
 	viewportWidth,
 	containerWidth,
 	minHeight,
-	additionalStyles = [],
+	additionalStyles = EMPTY_ADDITIONAL_STYLES,
 } ) {
 	if ( ! viewportWidth ) {
 		viewportWidth = containerWidth;

package/src/components/block-removal-warning-modal/index.js

@@ -17,10 +17,10 @@ import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 export function BlockRemovalWarningModal( { rules } ) {
-	const { clientIds, selectPrevious, blockNamesForPrompt } = useSelect(
-		( select ) =>
+	const { clientIds, selectPrevious, blockNamesForPrompt, messageType } =
+		useSelect( ( select ) =>
 			unlock( select( blockEditorStore ) ).getRemovalPromptData()
-	);
+		);
 
 	const {
 		clearBlockRemovalPrompt,
@@ -41,6 +41,19 @@ export function BlockRemovalWarningModal( { rules } ) {
 		return;
 	}
 
+	const message =
+		messageType === 'templates'
+			? _n(
+					'Deleting this block will stop your post or page content from displaying on this template. It is not recommended.',
+					'Deleting these blocks will stop your post or page content from displaying on this template. It is not recommended.',
+					blockNamesForPrompt.length
+			  )
+			: _n(
+					'Deleting this block could break patterns on your site that have content linked to it. Are you sure you want to delete it?',
+					'Deleting these blocks could break patterns on your site that have content linked to them. Are you sure you want to delete them?',
+					blockNamesForPrompt.length
+			  );
+
 	const onConfirmRemoval = () => {
 		privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
 		clearBlockRemovalPrompt();
@@ -52,13 +65,7 @@ export function BlockRemovalWarningModal( { rules } ) {
 			onRequestClose={ clearBlockRemovalPrompt }
 			size="medium"
 		>
-			<p>
-				{ _n(
-					'Deleting this block will stop your post or page content from displaying on this template. It is not recommended.',
-					'Deleting these blocks will stop your post or page content from displaying on this template. It is not recommended.',
-					blockNamesForPrompt.length
-				) }
-			</p>
+			<p>{ message }</p>
 			<HStack justify="right">
 				<Button variant="tertiary" onClick={ clearBlockRemovalPrompt }>
 					{ __( 'Cancel' ) }

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

@@ -21,7 +21,6 @@ import { copy } from '@wordpress/icons';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import BlockTransformationsMenu from './block-transformations-menu';
 import { useBlockVariationTransforms } from './block-variation-transformations';
@@ -162,7 +161,6 @@ function BlockSwitcherDropdownMenuContents( {
 }
 
 export const BlockSwitcher = ( { clientIds } ) => {
-	const blockInformation = useBlockDisplayInformation( clientIds?.[ 0 ] );
 	const {
 		canRemove,
 		hasBlockStyles,
@@ -175,9 +173,11 @@ export const BlockSwitcher = ( { clientIds } ) => {
 			const {
 				getBlockRootClientId,
 				getBlocksByClientId,
+				getBlockAttributes,
 				canRemoveBlocks,
 			} = select( blockEditorStore );
-			const { getBlockStyles, getBlockType } = select( blocksStore );
+			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
 			const _blocks = getBlocksByClientId( clientIds );
 			if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) {
 				return { invalidBlocks: true };
@@ -185,18 +185,24 @@ export const BlockSwitcher = ( { clientIds } ) => {
 			const rootClientId = getBlockRootClientId( clientIds );
 			const [ { name: firstBlockName } ] = _blocks;
 			const _isSingleBlockSelected = _blocks.length === 1;
+			const blockType = getBlockType( firstBlockName );
+
 			let _icon;
 			if ( _isSingleBlockSelected ) {
-				_icon = blockInformation?.icon; // Take into account active block variations.
+				const match = getActiveBlockVariation(
+					firstBlockName,
+					getBlockAttributes( clientIds[ 0 ] )
+				);
+				// Take into account active block variations.
+				_icon = match?.icon || blockType.icon;
 			} else {
 				const isSelectionOfSameType =
 					new Set( _blocks.map( ( { name } ) => name ) ).size === 1;
 				// When selection consists of blocks of multiple types, display an
 				// appropriate icon to communicate the non-uniformity.
-				_icon = isSelectionOfSameType
-					? getBlockType( firstBlockName )?.icon
-					: copy;
+				_icon = isSelectionOfSameType ? blockType.icon : copy;
 			}
+
 			return {
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				hasBlockStyles:
@@ -209,7 +215,7 @@ export const BlockSwitcher = ( { clientIds } ) => {
 					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
 			};
 		},
-		[ clientIds, blockInformation?.icon ]
+		[ clientIds ]
 	);
 	const blockTitle = useBlockDisplayTitle( {
 		clientId: clientIds?.[ 0 ],
@@ -218,14 +224,20 @@ export const BlockSwitcher = ( { clientIds } ) => {
 	if ( invalidBlocks ) {
 		return null;
 	}
+
+	const isSingleBlock = clientIds.length === 1;
+	const blockSwitcherLabel = isSingleBlock
+		? blockTitle
+		: __( 'Multiple blocks selected' );
 	const hideDropdown = ! hasBlockStyles && ! canRemove;
+
 	if ( hideDropdown ) {
 		return (
 			<ToolbarGroup>
 				<ToolbarButton
 					disabled
 					className="block-editor-block-switcher__no-switcher-icon"
-					title={ blockTitle }
+					title={ blockSwitcherLabel }
 					icon={
 						<>
 							<BlockIcon icon={ icon } showColors />
@@ -240,10 +252,7 @@ export const BlockSwitcher = ( { clientIds } ) => {
 			</ToolbarGroup>
 		);
 	}
-	const isSingleBlock = clientIds.length === 1;
-	const blockSwitcherLabel = isSingleBlock
-		? blockTitle
-		: __( 'Multiple blocks selected' );
+
 	const blockSwitcherDescription = isSingleBlock
 		? __( 'Change block type or style' )
 		: sprintf(