@wordpress/block-editor 12.20.0 → 12.22.0

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-list/use-block-props/index.js

@@ -19,13 +19,17 @@ import useMovingAnimation from '../../use-moving-animation';
 import { PrivateBlockContext } from '../private-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
-import { useBlockEditContext } from '../../block-edit/context';
+import {
+	blockBindingsKey,
+	useBlockEditContext,
+} from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
 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';
+import { canBindBlock } from '../../../hooks/use-bindings-attributes';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -123,6 +127,12 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	] );
 
 	const blockEditContext = useBlockEditContext();
+	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
+	const bindingsStyle =
+		hasBlockBindings && canBindBlock( name )
+			? { '--wp-admin-theme-color': 'var(--wp-bound-block-color)' }
+			: {};
+
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
 		warning(
@@ -168,7 +178,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			wrapperProps.className,
 			defaultClassName
 		),
-		style: { ...wrapperProps.style, ...props.style },
+		style: { ...wrapperProps.style, ...props.style, ...bindingsStyle },
 	};
 }
 

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -22,7 +22,7 @@ import { store as blockEditorStore } from '../../../store';
 export function useEventHandlers( { clientId, isSelected } ) {
 	const { getBlockRootClientId, getBlockIndex } =
 		useSelect( blockEditorStore );
-	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );
+	const { insertAfterBlock, removeBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {
@@ -57,11 +57,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				event.preventDefault();
 
 				if ( keyCode === ENTER ) {
-					insertDefaultBlock(
-						{},
-						getBlockRootClientId( clientId ),
-						getBlockIndex( clientId ) + 1
-					);
+					insertAfterBlock( clientId );
 				} else {
 					removeBlock( clientId );
 				}
@@ -90,7 +86,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			isSelected,
 			getBlockRootClientId,
 			getBlockIndex,
-			insertDefaultBlock,
+			insertAfterBlock,
 			removeBlock,
 		]
 	);

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 }

package/src/components/block-settings/container.native.js

@@ -16,6 +16,7 @@ import styles from './container.native.scss';
 import InspectorControls from '../inspector-controls';
 import ImageLinkDestinationsScreen from '../image-link-destinations';
 import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients';
+import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 
 export const blockSettingsScreens = {
 	settings: 'Settings',
@@ -46,7 +47,10 @@ export default function BottomSheetSettings( props ) {
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.settings }
 				>
-					<InspectorControls.Slot />
+					<>
+						<InspectorControls.Slot />
+						<AdvancedControls />
+					</>
 				</BottomSheet.NavigationScreen>
 				<BottomSheet.NavigationScreen
 					name={ BottomSheet.SubSheet.screenName }