@wordpress/block-editor 12.0.0 → 12.2.0

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

@@ -14,7 +14,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  */
 import styles from './style.scss';
 
-const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
+const BlockInsertionPoint = ( { getStylesFromColorScheme, testID } ) => {
 	const lineStyle = getStylesFromColorScheme(
 		styles.lineStyleAddHere,
 		styles.lineStyleAddHereDark
@@ -25,7 +25,7 @@ const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
 	);
 
 	return (
-		<View style={ styles.containerStyleAddHere }>
+		<View style={ styles.containerStyleAddHere } testID={ testID }>
 			<View style={ lineStyle }></View>
 			<Text style={ labelStyle }>{ __( 'ADD BLOCK HERE' ) }</Text>
 			<View style={ lineStyle }></View>

package/src/components/block-list/test/block-invalid-warning.native.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getBlock,
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+describe( 'Block invalid warning', () => {
+	it( 'shows invalid placeholder', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:spacer -->
+            <div styless="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+            <!-- /wp:spacer -->`,
+		} );
+
+		// Assert
+		const warningElement = screen.getByText( /Problem displaying block./ );
+		expect( warningElement ).toBeVisible();
+	} );
+
+	it( 'recovers a block successfully', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:spacer -->
+            <div styless="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+            <!-- /wp:spacer -->`,
+		} );
+
+		// Act
+		fireEvent.press( screen.getByText( /Problem displaying block./ ) );
+		const spacerBlock = getBlock( screen, 'Spacer' );
+		fireEvent.press( spacerBlock );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+        "<!-- wp:spacer -->
+        <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+        <!-- /wp:spacer -->"
+        ` );
+	} );
+} );

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

@@ -0,0 +1,205 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getBlock,
+	fireEvent,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+	triggerBlockListLayout,
+	within,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+describe( 'BlockList', () => {
+	describe( 'when empty', () => {
+		beforeEach( async () => {
+			// Arrange
+			await initializeEditor();
+		} );
+
+		it( 'renders a post title', async () => {
+			// Assert
+			expect( screen.getByPlaceholderText( 'Add title' ) ).toBeTruthy();
+		} );
+
+		it( 'renders a block appender as a content placeholder', async () => {
+			// Act
+			const appender = screen.getByPlaceholderText( /Start writing/ );
+			fireEvent.press( appender );
+
+			// Assert
+			expect( await getBlock( screen, 'Paragraph' ) ).toBeVisible();
+		} );
+
+		it( 'renders an end-of-list paragraph appender', async () => {
+			// Act
+			const appender = screen.getByLabelText( 'Add paragraph block' );
+			fireEvent.press( appender );
+
+			// Assert
+			expect( await getBlock( screen, 'Paragraph' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'when not empty', () => {
+		it( 'renders a footer appender', async () => {
+			// Arrange
+			await initializeEditor();
+			await addBlock( screen, 'Social Icons' );
+			const socialLinksBlock = await getBlock( screen, 'Social Icons' );
+			fireEvent.press( socialLinksBlock );
+			await triggerBlockListLayout( socialLinksBlock );
+
+			// Act
+			fireEvent.press(
+				within( socialLinksBlock ).getByTestId( 'appender-button' )
+			);
+			const blockList = screen.getByTestId( 'InserterUI-Blocks' );
+			fireEvent.scroll( blockList, {
+				nativeEvent: {
+					contentOffset: { y: 0, x: 0 },
+					contentSize: { width: 100, height: 100 },
+					layoutMeasurement: { width: 100, height: 100 },
+				},
+			} );
+			fireEvent.press( await screen.findByText( 'Amazon' ) );
+
+			// Assert
+			const amazonSettings = await screen.findByTestId(
+				'navigation-screen-LinkSettingsScreen'
+			);
+			expect( amazonSettings ).toBeVisible();
+		} );
+	} );
+
+	describe( 'for inner blocks', () => {
+		it( 'renders an inner block appender', async () => {
+			// Arrange
+			await initializeEditor();
+			await addBlock( screen, 'Group' );
+			const groupBlock = await getBlock( screen, 'Group' );
+			await triggerBlockListLayout( groupBlock );
+
+			// Assert
+			expect(
+				within( groupBlock ).getByTestId( 'appender-button' )
+			).toBeTruthy();
+		} );
+
+		describe( 'when a non-last block is selected', () => {
+			beforeEach( async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+			} );
+
+			it( 'renders an insertion point before the block', async () => {
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 1,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block Before' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-1' )
+				).toBeTruthy();
+			} );
+
+			it( 'renders an insertion point after the block', async () => {
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 1,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block After' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-2' )
+				).toBeTruthy();
+			} );
+		} );
+
+		describe( 'when the last block is selected', () => {
+			it( 'renders an insertion point before the block', async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 2,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block Before' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-2' )
+				).toBeTruthy();
+			} );
+
+			it( 'renders an insertion point after the block', async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 2,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block After' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-after-row-2' )
+				).toBeTruthy();
+			} );
+		} );
+	} );
+} );

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

@@ -21,7 +21,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import useMovingAnimation from '../../use-moving-animation';
-import { BlockListBlockContext } from '../block';
+import { BlockListBlockContext } from '../block-list-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
 import { useBlockEditContext } from '../../block-edit/context';

package/src/components/block-list/use-in-between-inserter.js

@@ -11,6 +11,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import { InsertionPointOpenRef } from '../block-tools/insertion-point';
+import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
@@ -29,7 +30,8 @@ export function useInBetweenInserter() {
 		getSelectedBlockClientIds,
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
-	} = useSelect( blockEditorStore );
+		getBlockEditingMode,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
@@ -74,8 +76,10 @@ export function useInBetweenInserter() {
 					rootClientId = blockElement.getAttribute( 'data-block' );
 				}
 
-				// Don't set the insertion point if the template is locked.
-				if ( getTemplateLock( rootClientId ) ) {
+				if (
+					getTemplateLock( rootClientId ) ||
+					getBlockEditingMode( rootClientId ) === 'disabled'
+				) {
 					return;
 				}
 

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

@@ -85,6 +85,25 @@ function BlockListAppender( {
 	tagName: TagName = 'div',
 } ) {
 	const appender = useAppender( rootClientId, renderAppender );
+	const isDragOver = useSelect(
+		( select ) => {
+			const {
+				getBlockInsertionPoint,
+				isBlockInsertionPointVisible,
+				getBlockCount,
+			} = select( blockEditorStore );
+			const insertionPoint = getBlockInsertionPoint();
+			// Ideally we should also check for `isDragging` but currently it
+			// requires a lot more setup. We can revisit this once we refactor
+			// the DnD utility hooks.
+			return (
+				isBlockInsertionPointVisible() &&
+				rootClientId === insertionPoint?.rootClientId &&
+				getBlockCount( rootClientId ) === 0
+			);
+		},
+		[ rootClientId ]
+	);
 
 	if ( ! appender ) {
 		return null;
@@ -101,10 +120,9 @@ function BlockListAppender( {
 			//
 			// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 			tabIndex={ -1 }
-			className={ classnames(
-				'block-list-appender wp-block',
-				className
-			) }
+			className={ classnames( 'block-list-appender wp-block', className, {
+				'is-drag-over': isDragOver,
+			} ) }
 			// Needed in case the whole editor is content editable (for multi
 			// selection). It fixes an edge case where ArrowDown and ArrowRight
 			// should collapse the selection to the end of that selection and

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -39,6 +39,10 @@ import { store as coreStore } from '@wordpress/core-data';
 import { getMoversSetup } from '../block-mover/mover-description';
 import { store as blockEditorStore } from '../../store';
 import BlockTransformationsMenu from '../block-switcher/block-transformations-menu';
+import {
+	useConvertToGroupButtons,
+	useConvertToGroupButtonProps,
+} from '../convert-to-group-buttons';
 
 const BlockActionsMenu = ( {
 	// Select.
@@ -55,6 +59,7 @@ const BlockActionsMenu = ( {
 	rootClientId,
 	selectedBlockClientId,
 	selectedBlockPossibleTransformations,
+	canRemove,
 	// Dispatch.
 	createSuccessNotice,
 	convertToRegularBlocks,
@@ -93,6 +98,17 @@ const BlockActionsMenu = ( {
 		},
 	} = getMoversSetup( isStackedHorizontally, moversOptions );
 
+	// Check if selected block is Groupable and/or Ungroupable.
+	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
+		selectedBlockClientId,
+	] );
+	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
+	const showConvertToGroupButton =
+		( isGroupable || isUngroupable ) && canRemove;
+	const convertToGroupButtons = useConvertToGroupButtons( {
+		...convertToGroupButtonProps,
+	} );
+
 	const allOptions = {
 		settings: {
 			id: 'settingsOption',
@@ -229,7 +245,13 @@ const BlockActionsMenu = ( {
 		canDuplicate && allOptions.cutButton,
 		canDuplicate && isPasteEnabled && allOptions.pasteButton,
 		canDuplicate && allOptions.duplicateButton,
-		isReusableBlockType && allOptions.convertToRegularBlocks,
+		showConvertToGroupButton && isGroupable && convertToGroupButtons.group,
+		showConvertToGroupButton &&
+			isUngroupable &&
+			convertToGroupButtons.ungroup,
+		isReusableBlockType &&
+			innerBlockCount > 0 &&
+			allOptions.convertToRegularBlocks,
 		! isLocked && allOptions.delete,
 	].filter( Boolean );
 
@@ -325,6 +347,7 @@ export default compose(
 			getSelectedBlockClientIds,
 			canInsertBlockType,
 			getTemplateLock,
+			canRemoveBlock,
 		} = select( blockEditorStore );
 		const block = getBlock( clientId );
 		const blockName = getBlockName( clientId );
@@ -361,6 +384,7 @@ export default compose(
 		const selectedBlockPossibleTransformations = selectedBlock
 			? getBlockTransformItems( selectedBlock, rootClientId )
 			: EMPTY_BLOCK_LIST;
+		const canRemove = canRemoveBlock( selectedBlockClientId );
 
 		const isReusableBlockType = block ? isReusableBlock( block ) : false;
 		const reusableBlock = isReusableBlockType
@@ -386,6 +410,7 @@ export default compose(
 			rootClientId,
 			selectedBlockClientId,
 			selectedBlockPossibleTransformations,
+			canRemove,
 		};
 	} ),
 	withDispatch(

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

@@ -55,6 +55,7 @@
 }
 
 .block-editor-block-mover__drag-handle {
+	cursor: grab;
 	@include break-small() {
 		width: $block-toolbar-height * 0.5;
 		min-width: 0 !important; // overrides default button width.

package/src/components/block-pattern-setup/style.scss

@@ -37,10 +37,7 @@
 				}
 
 				&:focus .block-editor-block-preview__container {
-					box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-					// Windows High Contrast mode will show this outline, but not the box-shadow.
-					outline: 2px solid transparent;
+					@include button-style-outset__focus(var(--wp-admin-theme-color));
 				}
 				&:hover .block-editor-block-pattern-setup-list__item-title,
 				&:focus .block-editor-block-pattern-setup-list__item-title {

package/src/components/block-patterns-list/style.scss

@@ -37,10 +37,7 @@
 	}
 
 	&:focus .block-editor-block-preview__container {
-		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
+		@include button-style-outset__focus(var(--wp-admin-theme-color));
 	}
 
 

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -24,7 +24,6 @@ import { pipe, useCopyToClipboard } from '@wordpress/compose';
  */
 import BlockActions from '../block-actions';
 import BlockIcon from '../block-icon';
-import BlockModeToggle from './block-mode-toggle';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
@@ -278,7 +277,7 @@ export function BlockSettingsDropdown( {
 											) }
 											shortcut={ shortcuts.insertBefore }
 										>
-											{ __( 'Insert before' ) }
+											{ __( 'Add before' ) }
 										</MenuItem>
 										<MenuItem
 											onClick={ pipe(
@@ -287,23 +286,10 @@ export function BlockSettingsDropdown( {
 											) }
 											shortcut={ shortcuts.insertAfter }
 										>
-											{ __( 'Insert after' ) }
+											{ __( 'Add after' ) }
 										</MenuItem>
 									</>
 								) }
-								{ canMove && ! onlyBlock && (
-									<MenuItem
-										onClick={ pipe( onClose, onMoveTo ) }
-									>
-										{ __( 'Move to' ) }
-									</MenuItem>
-								) }
-								{ count === 1 && (
-									<BlockModeToggle
-										clientId={ firstBlockClientId }
-										onToggle={ onClose }
-									/>
-								) }
 							</MenuGroup>
 							<MenuGroup>
 								<CopyMenuItem
@@ -316,7 +302,14 @@ export function BlockSettingsDropdown( {
 								</MenuItem>
 							</MenuGroup>
 							<BlockSettingsMenuControls.Slot
-								fillProps={ { onClose } }
+								fillProps={ {
+									onClose,
+									canMove,
+									onMoveTo,
+									onlyBlock,
+									count,
+									firstBlockClientId,
+								} }
 								clientIds={ clientIds }
 								__unstableDisplayLocation={
 									__unstableDisplayLocation

package/src/components/block-settings-menu-controls/index.js

@@ -4,9 +4,12 @@
 import {
 	createSlotFill,
 	MenuGroup,
+	MenuItem,
 	__experimentalStyleProvider as StyleProvider,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { pipe } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -17,6 +20,7 @@ import {
 } from '../convert-to-group-buttons';
 import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
+import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
@@ -74,16 +78,32 @@ const BlockSettingsMenuControlsSlot = ( {
 
 				return (
 					<MenuGroup>
+						{ showConvertToGroupButton && (
+							<ConvertToGroupButton
+								{ ...convertToGroupButtonProps }
+								onClose={ fillProps?.onClose }
+							/>
+						) }
 						{ showLockButton && (
 							<BlockLockMenuItem
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
 						{ fills }
-						{ showConvertToGroupButton && (
-							<ConvertToGroupButton
-								{ ...convertToGroupButtonProps }
-								onClose={ fillProps?.onClose }
+						{ fillProps?.canMove && ! fillProps?.onlyBlock && (
+							<MenuItem
+								onClick={ pipe(
+									fillProps?.onClose,
+									fillProps?.onMoveTo
+								) }
+							>
+								{ __( 'Move to' ) }
+							</MenuItem>
+						) }
+						{ fillProps?.count === 1 && (
+							<BlockModeToggle
+								clientId={ fillProps?.firstBlockClientId }
+								onToggle={ fillProps?.onClose }
 							/>
 						) }
 					</MenuGroup>

package/src/components/block-styles/preview-panel.js

@@ -33,7 +33,5 @@ export default function BlockStylesPreviewPanel( {
 		};
 	}, [ genericPreviewBlock, styleClassName ] );
 
-	return (
-		<InserterPreviewPanel item={ previewBlocks } isStylePreview={ true } />
-	);
+	return <InserterPreviewPanel item={ previewBlocks } />;
 }

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

@@ -37,16 +37,15 @@
 	justify-content: space-between;
 	gap: $grid-unit-10;
 
-	.block-editor-block-styles__item {
+	button.components-button.block-editor-block-styles__item {
 		color: $gray-900;
 		box-shadow: inset 0 0 0 1px $gray-400;
 		display: inline-block;
 		width: calc(50% - #{$grid-unit-05});
 
-		&:focus,
 		&:hover {
 			color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px $gray-400;
 		}
 
 		&.is-active,
@@ -60,8 +59,9 @@
 			color: $white;
 		}
 
+		&:focus,
 		&.is-active:focus {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 2px var(--wp-admin-theme-color);
+			@include button-style__focus();
 		}
 	}
 

package/src/components/block-switcher/block-transformations-menu.js

@@ -14,6 +14,7 @@ import { useState, useMemo } from '@wordpress/element';
  */
 import BlockIcon from '../block-icon';
 import PreviewBlockPopover from './preview-block-popover';
+import BlockVariationTransformations from './block-variation-transformations';
 
 /**
  * Helper hook to group transformations to display them in a specific order in the UI.
@@ -65,7 +66,9 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 const BlockTransformationsMenu = ( {
 	className,
 	possibleBlockTransformations,
+	possibleBlockVariationTransformations,
 	onSelect,
+	onSelectVariation,
 	blocks,
 } ) => {
 	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
@@ -95,6 +98,15 @@ const BlockTransformationsMenu = ( {
 						) }
 					/>
 				) }
+				{ !! possibleBlockVariationTransformations?.length && (
+					<BlockVariationTransformations
+						transformations={
+							possibleBlockVariationTransformations
+						}
+						blocks={ blocks }
+						onSelect={ onSelectVariation }
+					/>
+				) }
 				{ priorityTextTransformations.map( ( item ) => (
 					<BlockTranformationItem
 						key={ item.name }