@wordpress/block-editor 11.8.0 → 12.1.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 );
+			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' );
+			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-mobile-toolbar/block-actions-menu.native.js

@@ -229,7 +229,9 @@ const BlockActionsMenu = ( {
 		canDuplicate && allOptions.cutButton,
 		canDuplicate && isPasteEnabled && allOptions.pasteButton,
 		canDuplicate && allOptions.duplicateButton,
-		isReusableBlockType && allOptions.convertToRegularBlocks,
+		isReusableBlockType &&
+			innerBlockCount > 0 &&
+			allOptions.convertToRegularBlocks,
 		! isLocked && allOptions.delete,
 	].filter( Boolean );
 

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

@@ -8,7 +8,7 @@ import {
 	getBlock,
 	within,
 	getEditorHtml,
-	changeTextOfRichText,
+	typeInRichText,
 } from 'test/helpers';
 
 /**
@@ -71,7 +71,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -132,7 +132,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -179,7 +179,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -228,7 +228,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -275,7 +275,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -322,7 +322,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -368,7 +368,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -405,7 +405,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );

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

@@ -35,11 +35,14 @@
 			> * {
 				width: $block-toolbar-height * 0.5;
 				min-width: 0 !important; // overrides default button width.
-				padding-left: 0 !important;
-				padding-right: 0 !important;
 				overflow: hidden;
 			}
 
+			.block-editor-block-mover-button {
+				padding-left: 0;
+				padding-right: 0;
+			}
+
 			.block-editor-block-mover-button.is-up-button svg {
 				left: 5px;
 			}
@@ -55,9 +58,12 @@
 	@include break-small() {
 		width: $block-toolbar-height * 0.5;
 		min-width: 0 !important; // overrides default button width.
-		padding-left: 0 !important;
-		padding-right: 0 !important;
 		overflow: hidden;
+
+		.block-editor-block-mover &.has-icon.has-icon {
+			padding-left: 0;
+			padding-right: 0;
+		}
 	}
 }
 

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

@@ -9,7 +9,7 @@ import {
 	within,
 	getEditorHtml,
 	render,
-	changeTextOfRichText,
+	typeInRichText,
 } from 'test/helpers';
 
 /**
@@ -89,7 +89,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -138,7 +138,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -176,7 +176,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );

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/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-toolbar/index.js

@@ -99,6 +99,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	// header area and not contextually to the block.
 	const displayHeaderToolbar =
 		useViewportMatch( 'medium', '<' ) || hasFixedToolbar;
+	const isLargeViewport = ! useViewportMatch( 'medium', '<' );
 
 	if ( blockType ) {
 		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
@@ -124,9 +125,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	return (
 		<div className={ classes }>
-			{ ! isMultiToolbar &&
-				! displayHeaderToolbar &&
-				! isContentLocked && <BlockParentSelector /> }
+			{ ! isMultiToolbar && isLargeViewport && ! isContentLocked && (
+				<BlockParentSelector />
+			) }
 			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					! isContentLocked && (