@wordpress/block-editor 12.19.5 → 12.21.0

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

@@ -93,7 +93,6 @@ function BlockWrapper( {
 	draggingEnabled,
 	hasInnerBlocks,
 	isDescendentBlockSelected,
-	isRootList,
 	isSelected,
 	isTouchable,
 	marginHorizontal,
@@ -137,7 +136,6 @@ function BlockWrapper( {
 			<BlockOutline
 				blockCategory={ blockCategory }
 				hasInnerBlocks={ hasInnerBlocks }
-				isRootList={ isRootList }
 				isSelected={ isSelected }
 				name={ name }
 			/>
@@ -361,7 +359,6 @@ function BlockListBlock( {
 			hasInnerBlocks={ hasInnerBlocks }
 			isDescendentBlockSelected={ isDescendentBlockSelected }
 			isFocused={ isFocused }
-			isRootList={ ! rootClientId }
 			isSelected={ isSelected }
 			isStackedHorizontally={ isStackedHorizontally }
 			isTouchable={ isTouchable }

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

@@ -453,7 +453,11 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.block-editor-iframe__body {
+.block-editor-iframe__html {
 	transition: all 0.3s;
 	transform-origin: top center;
 }
+
+.block-editor-iframe__html[style*="scale"] {
+	background-color: $gray-300;
+}

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

@@ -46,19 +46,26 @@ const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { isOutlineMode, isFocusMode, editorMode } = useSelect(
-		( select ) => {
-			const { getSettings, __unstableGetEditorMode } =
-				select( blockEditorStore );
-			const { outlineMode, focusMode } = getSettings();
-			return {
-				isOutlineMode: outlineMode,
-				isFocusMode: focusMode,
-				editorMode: __unstableGetEditorMode(),
-			};
-		},
-		[]
-	);
+	const {
+		isOutlineMode,
+		isFocusMode,
+		editorMode,
+		temporarilyEditingAsBlocks,
+	} = useSelect( ( select ) => {
+		const {
+			getSettings,
+			__unstableGetEditorMode,
+			__unstableGetTemporarilyEditingAsBlocks,
+		} = select( blockEditorStore );
+		const { outlineMode, focusMode } = getSettings();
+		return {
+			isOutlineMode: outlineMode,
+			isFocusMode: focusMode,
+			editorMode: __unstableGetEditorMode(),
+			temporarilyEditingAsBlocks:
+				__unstableGetTemporarilyEditingAsBlocks(),
+		};
+	}, [] );
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -115,6 +122,11 @@ function Root( { className, ...settings } ) {
 	return (
 		<IntersectionObserver.Provider value={ intersectionObserver }>
 			<div { ...innerBlocksProps } />
+			{ !! temporarilyEditingAsBlocks && (
+				<StopEditingAsBlocksOnOutsideSelect
+					clientId={ temporarilyEditingAsBlocks }
+				/>
+			) }
 		</IntersectionObserver.Provider>
 	);
 }
@@ -159,43 +171,36 @@ function Items( {
 	// 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 ]
-	);
+	const { order, selectedBlocks, visibleBlocks, shouldRenderAppender } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockOrder,
+					getSelectedBlockClientId,
+					getSelectedBlockClientIds,
+					__unstableGetVisibleBlocks,
+					getTemplateLock,
+					getBlockEditingMode,
+					__unstableGetEditorMode,
+				} = select( blockEditorStore );
+				const selectedBlockClientId = getSelectedBlockClientId();
+				return {
+					order: getBlockOrder( rootClientId ),
+					selectedBlocks: getSelectedBlockClientIds(),
+					visibleBlocks: __unstableGetVisibleBlocks(),
+					shouldRenderAppender:
+						hasAppender &&
+						( hasCustomAppender
+							? ! getTemplateLock( rootClientId ) &&
+							  getBlockEditingMode( rootClientId ) !==
+									'disabled' &&
+							  __unstableGetEditorMode() !== 'zoom-out'
+							: rootClientId === selectedBlockClientId ||
+							  ( ! rootClientId && ! selectedBlockClientId ) ),
+				};
+			},
+			[ rootClientId, hasAppender, hasCustomAppender ]
+		);
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -216,11 +221,6 @@ function Items( {
 				</AsyncModeProvider>
 			) ) }
 			{ order.length < 1 && placeholder }
-			{ !! temporarilyEditingAsBlocks && (
-				<StopEditingAsBlocksOnOutsideSelect
-					clientId={ temporarilyEditingAsBlocks }
-				/>
-			) }
 			{ shouldRenderAppender && (
 				<BlockListAppender
 					tagName={ __experimentalAppenderTagName }

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

@@ -0,0 +1,255 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import BlockOutline from '../block-outline';
+
+describe( 'BlockOutline', () => {
+	describe( 'containing an unselected block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected={ false }
+					blockCategory="design"
+					name="core/group"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+	} );
+
+	describe( 'containing a block with inner blocks', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/group"
+					hasInnerBlocks
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a design category block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/group"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a text category block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="text"
+					name="core/paragraph"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+
+		describe( 'with inner blocks', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="text"
+						name="core/list"
+						hasInnerBlocks
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+	} );
+
+	describe( 'containing a widget category block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="widgets"
+					name="core/latest-posts"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a spacer block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/spacer"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+	} );
+
+	describe( 'containing a button block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/button"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+	} );
+
+	describe( 'containing a social link block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="embed"
+					name="core/social-link"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+
+		describe( 'when platform specific', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="embed"
+						name="core/social-link-amazon"
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+	} );
+
+	describe( 'containing a media block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="media"
+					name="core/image"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+
+		describe( 'with inner blocks', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="media"
+						name="core/gallery"
+						hasInnerBlocks
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+
+			describe( 'when cover block', () => {
+				it( 'should not render an outline', async () => {
+					render(
+						<BlockOutline
+							isSelected
+							blockCategory="media"
+							name="core/cover"
+							hasInnerBlocks
+						/>
+					);
+
+					expect(
+						screen.queryByTestId( 'block-outline' )
+					).toBeNull();
+				} );
+			} );
+		} );
+
+		describe( 'when a file block', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="media"
+						name="core/file"
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+
+		describe( 'when an audio block', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="media"
+						name="core/audio"
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+	} );
+
+	describe( 'containing a freeform block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="text"
+					name="core/freeform"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a missing block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="text"
+					name="core/missing"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+} );

package/src/components/block-mover/index.native.js

@@ -133,7 +133,7 @@ export const BlockMover = ( {
 				options={ blockPageMoverOptions }
 				onChange={ onPickerSelect }
 				title={ __( 'Change block position' ) }
-				leftAlign={ true }
+				leftAlign
 				hideCancelButton={ Platform.OS !== 'ios' }
 			/>
 		</ToolbarGroup>

package/src/components/block-popover/cover.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopover from '.';
+
+function BlockPopoverCover(
+	{ clientId, bottomClientId, children, shift = false, ...props },
+	ref
+) {
+	bottomClientId ??= clientId;
+
+	const selectedElement = useBlockElement( clientId );
+
+	return (
+		<BlockPopover
+			ref={ ref }
+			clientId={ clientId }
+			bottomClientId={ bottomClientId }
+			shift={ shift }
+			{ ...props }
+		>
+			{ selectedElement && clientId === bottomClientId ? (
+				<CoverContainer selectedElement={ selectedElement }>
+					{ children }
+				</CoverContainer>
+			) : (
+				children
+			) }
+		</BlockPopover>
+	);
+}
+
+function CoverContainer( { selectedElement, children } ) {
+	const [ width, setWidth ] = useState( selectedElement.offsetWidth );
+	const [ height, setHeight ] = useState( selectedElement.offsetHeight );
+
+	useEffect( () => {
+		const observer = new window.ResizeObserver( () => {
+			setWidth( selectedElement.offsetWidth );
+			setHeight( selectedElement.offsetHeight );
+		} );
+		observer.observe( selectedElement, { box: 'border-box' } );
+		return () => observer.disconnect();
+	}, [ selectedElement ] );
+
+	const style = useMemo( () => {
+		return {
+			position: 'absolute',
+			width,
+			height,
+		};
+	}, [ width, height ] );
+
+	return <div style={ style }>{ children }</div>;
+}
+
+export default forwardRef( BlockPopoverCover );

package/src/components/block-popover/drop-zone.js

@@ -9,7 +9,7 @@ import { __unstableMotion as motion } from '@wordpress/components';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import BlockPopover from './index';
+import BlockPopoverCover from './cover';
 
 const animateVariants = {
 	hide: { opacity: 0, scaleY: 0.75 },
@@ -38,9 +38,8 @@ function BlockDropZonePopover( {
 	const reducedMotion = useReducedMotion();
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
 			className="block-editor-block-popover__drop-zone"
@@ -56,7 +55,7 @@ function BlockDropZonePopover( {
 				}
 				className="block-editor-block-popover__drop-zone-foreground"
 			/>
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }
 

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

@@ -28,8 +28,6 @@ function BlockPopover(
 		clientId,
 		bottomClientId,
 		children,
-		__unstableRefreshSize,
-		__unstableCoverTarget = false,
 		__unstablePopoverSlot,
 		__unstableContentRef,
 		shift = true,
@@ -75,30 +73,6 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
-	const style = useMemo( () => {
-		if (
-			// popoverDimensionsRecomputeCounter is by definition always equal or greater
-			// than 0. This check is only there to satisfy the correctness of the
-			// exhaustive-deps rule for the `useMemo` hook.
-			popoverDimensionsRecomputeCounter < 0 ||
-			! selectedElement ||
-			lastSelectedElement !== selectedElement
-		) {
-			return {};
-		}
-
-		return {
-			position: 'absolute',
-			width: selectedElement.offsetWidth,
-			height: selectedElement.offsetHeight,
-		};
-	}, [
-		selectedElement,
-		lastSelectedElement,
-		__unstableRefreshSize,
-		popoverDimensionsRecomputeCounter,
-	] );
-
 	const popoverAnchor = useMemo( () => {
 		if (
 			// popoverDimensionsRecomputeCounter is by definition always equal or greater
@@ -176,8 +150,7 @@ function BlockPopover(
 			) }
 			variant="unstyled"
 		>
-			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
-			{ ! __unstableCoverTarget && children }
+			{ children }
 		</Popover>
 	);
 }

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

@@ -20,11 +20,13 @@ import EditorStyles from '../editor-styles';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
 
+const EMPTY_ADDITIONAL_STYLES = [];
+
 export function BlockPreview( {
 	blocks,
 	viewportWidth = 1200,
 	minHeight,
-	additionalStyles = [],
+	additionalStyles = EMPTY_ADDITIONAL_STYLES,
 	// Deprecated props:
 	__experimentalMinHeight,
 	__experimentalPadding,

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

@@ -8,7 +8,7 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __, _n } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -17,10 +17,9 @@ import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 export function BlockRemovalWarningModal( { rules } ) {
-	const { clientIds, selectPrevious, blockNamesForPrompt, messageType } =
-		useSelect( ( select ) =>
-			unlock( select( blockEditorStore ) ).getRemovalPromptData()
-		);
+	const { clientIds, selectPrevious, message } = useSelect( ( select ) =>
+		unlock( select( blockEditorStore ) ).getRemovalPromptData()
+	);
 
 	const {
 		clearBlockRemovalPrompt,
@@ -37,23 +36,10 @@ export function BlockRemovalWarningModal( { rules } ) {
 		};
 	}, [ rules, setBlockRemovalRules ] );
 
-	if ( ! blockNamesForPrompt ) {
+	if ( ! message ) {
 		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();

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

@@ -91,7 +91,7 @@ export default function BlockRenameModal( {
 						__next40pxDefaultSize
 						value={ editedBlockName }
 						label={ __( 'Block name' ) }
-						hideLabelFromVision={ true }
+						hideLabelFromVision
 						placeholder={ originalBlockName }
 						onChange={ setEditedBlockName }
 						onFocus={ autoSelectInputText }