@wordpress/block-editor 12.0.0 → 12.1.0

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-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-tools/block-contextual-toolbar.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
@@ -26,53 +26,12 @@ import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 
-const CollapseFixedToolbarButton = forwardRef( ( { onClick }, ref ) => {
-	return (
-		<ToolbarItem
-			as={ ToolbarButton }
-			className="block-editor-block-toolbar__collapse-fixed-toolbar"
-			icon={ levelUp }
-			onClick={ onClick }
-			ref={ ref }
-			label={ __( 'Show document tools' ) }
-		/>
-	);
-} );
-
-const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => {
-	return (
-		<ToolbarItem
-			as={ ToolbarButton }
-			className="block-editor-block-toolbar__expand-fixed-toolbar"
-			icon={ <BlockIcon icon={ icon } /> }
-			onClick={ onClick }
-			ref={ ref }
-			label={ __( 'Show block tools' ) }
-		/>
-	);
-} );
-
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	// When the toolbar is fixed it can be collapsed
 	const [ isCollapsed, setIsCollapsed ] = useState( false );
-	const expandFixedToolbarButtonRef = useRef();
-	const collapseFixedToolbarButtonRef = useRef();
-
-	// Don't focus the block toolbar just because it mounts
-	const initialRender = useRef( true );
-	useEffect( () => {
-		if ( initialRender.current ) {
-			initialRender.current = false;
-			return;
-		}
-		if ( isCollapsed && expandFixedToolbarButtonRef.current ) {
-			expandFixedToolbarButtonRef.current.focus();
-		}
-		if ( ! isCollapsed && collapseFixedToolbarButtonRef.current ) {
-			collapseFixedToolbarButtonRef.current.focus();
-		}
-	}, [ isCollapsed ] );
+	const toolbarButtonRef = useRef();
 
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const { blockType, hasParents, showParentSelector, selectedBlockClientId } =
 		useSelect( ( select ) => {
 			const {
@@ -113,12 +72,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 		setIsCollapsed( false );
 	}, [ selectedBlockClientId ] );
 
-	const isLargeViewport = useViewportMatch( 'medium' );
-
-	if ( blockType ) {
-		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
-			return null;
-		}
+	if (
+		blockType &&
+		! hasBlockSupport( blockType, '__experimentalToolbar', true )
+	) {
+		return null;
 	}
 
 	// Shifts the toolbar to make room for the parent block selector.
@@ -144,18 +102,26 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 							: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
 					}
 				>
-					{ isCollapsed ? (
-						<ExpandFixedToolbarButton
-							onClick={ () => setIsCollapsed( false ) }
-							icon={ blockType.icon }
-							ref={ expandFixedToolbarButtonRef }
-						/>
-					) : (
-						<CollapseFixedToolbarButton
-							onClick={ () => setIsCollapsed( true ) }
-							ref={ collapseFixedToolbarButtonRef }
-						/>
-					) }
+					<ToolbarItem
+						as={ ToolbarButton }
+						ref={ toolbarButtonRef }
+						icon={
+							isCollapsed ? (
+								<BlockIcon icon={ blockType.icon } />
+							) : (
+								levelUp
+							)
+						}
+						onClick={ () => {
+							setIsCollapsed( ( collapsed ) => ! collapsed );
+							toolbarButtonRef.current.focus();
+						} }
+						label={
+							isCollapsed
+								? __( 'Show block tools' )
+								: __( 'Show document tools' )
+						}
+					/>
 				</ToolbarGroup>
 			) }
 			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }

package/src/components/block-tools/selected-block-popover.js

@@ -20,8 +20,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
-import { unlock } from '../../lock-unlock';
-import { privateApis } from '../../private-apis';
+import { useShouldContextualToolbarShow } from '../../utils/use-should-contextual-toolbar-show';
 
 function selector( select ) {
 	const {
@@ -29,7 +28,7 @@ function selector( select ) {
 		hasMultiSelection,
 		isTyping,
 		getLastMultiSelectedBlockClientId,
-	} = unlock( select( blockEditorStore ) );
+	} = select( blockEditorStore );
 
 	return {
 		editorMode: __unstableGetEditorMode(),
@@ -54,7 +53,6 @@ function SelectedBlockPopover( {
 		[]
 	);
 
-	const { useShouldContextualToolbarShow } = unlock( privateApis );
 	const isInsertionPointVisible = useSelect(
 		( select ) => {
 			const {
@@ -75,7 +73,7 @@ function SelectedBlockPopover( {
 	);
 	const isToolbarForced = useRef( false );
 	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
-		useShouldContextualToolbarShow( clientId );
+		useShouldContextualToolbarShow();
 
 	const { stopTyping } = useDispatch( blockEditorStore );
 

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

@@ -219,6 +219,14 @@
 					}
 				}
 			}
+
+			.blocks-widgets-container & {
+				margin-left: $grid-unit-80 * 2.4;
+
+				&.is-collapsed {
+					margin-left: $grid-unit-80 * 4.2;
+				}
+			}
 		}
 
 		&.is-fixed .block-editor-block-parent-selector {

package/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js

@@ -61,7 +61,12 @@ export default function useMultipleOriginColorsAndGradients() {
 			} );
 		}
 		return result;
-	}, [ defaultColors, themeColors, customColors ] );
+	}, [
+		defaultColors,
+		themeColors,
+		customColors,
+		shouldDisplayDefaultColors,
+	] );
 
 	const customGradients = useSetting( 'color.gradients.custom' );
 	const themeGradients = useSetting( 'color.gradients.theme' );
@@ -103,7 +108,16 @@ export default function useMultipleOriginColorsAndGradients() {
 			} );
 		}
 		return result;
-	}, [ customGradients, themeGradients, defaultGradients ] );
+	}, [
+		customGradients,
+		themeGradients,
+		defaultGradients,
+		shouldDisplayDefaultGradients,
+	] );
+
+	colorGradientSettings.hasColorsOrGradients =
+		!! colorGradientSettings.colors.length ||
+		!! colorGradientSettings.gradients.length;
 
 	return colorGradientSettings;
 }