@wordpress/block-editor 11.1.0 → 11.2.0

package/src/components/inserter/test/index.native.js

@@ -1,7 +1,20 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	getBlock,
+	getEditorHtml,
+	render,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -20,4 +33,245 @@ describe( 'Inserter', () => {
 
 		expect( screen.getByTestId( 'add-block-button' ) ).toBeTruthy();
 	} );
+
+	describe( 'can add blocks', () => {
+		beforeAll( () => {
+			// Register all core blocks
+			registerCoreBlocks();
+		} );
+
+		afterAll( () => {
+			// Clean up registered blocks
+			getBlockTypes().forEach( ( block ) => {
+				unregisterBlockType( block.name );
+			} );
+		} );
+
+		it( 'to the beginning', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add To Beginning option
+			const addBlockToBeginningButton = await getByLabelText(
+				'Add To Beginning'
+			);
+			expect( addBlockToBeginningButton ).toBeVisible();
+			fireEvent.press( addBlockToBeginningButton );
+
+			// Add another block at the beginning
+			await addBlock( screen, 'More', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'before another block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add Block Before option
+			const addBlockBeforeButton = await getByLabelText(
+				'Add Block Before'
+			);
+			expect( addBlockBeforeButton ).toBeVisible();
+			fireEvent.press( addBlockBeforeButton );
+
+			// Add another block before the first one
+			await addBlock( screen, 'Heading', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'after another block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add Block After option
+			const addBlockAfterButton = await getByLabelText(
+				'Add Block After'
+			);
+			expect( addBlockAfterButton ).toBeVisible();
+			fireEvent.press( addBlockAfterButton );
+
+			// Add another block after the Heading block
+			await addBlock( screen, 'More', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'to the end', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer' );
+			fireEvent.press( spacerBlock );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add To End option
+			const addBlockToEndButton = await getByLabelText( 'Add To End' );
+			expect( addBlockToEndButton ).toBeVisible();
+			fireEvent.press( addBlockToEndButton );
+
+			// Add another block to the end after the Paragraph Block
+			await addBlock( screen, 'More', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'adds new block at the end of post', async () => {
+			const screen = await initializeEditor();
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			expect( headingBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'inserts between 2 existing blocks', async () => {
+			const screen = await initializeEditor();
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer' );
+			fireEvent.press( spacerBlock );
+
+			// Add More block
+			await addBlock( screen, 'More' );
+
+			// Get More block
+			const moreBlock = await getBlock( screen, 'More', { rowIndex: 2 } );
+			expect( moreBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'inserts block at the end of post when no block is selected', async () => {
+			const screen = await initializeEditor();
+			const { getAllByLabelText } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Select the title
+			const titleInputElement = await getAllByLabelText(
+				'Post title. test'
+			)[ 0 ];
+			expect( titleInputElement ).toBeVisible();
+			fireEvent.press( titleInputElement );
+
+			// Add More block
+			await addBlock( screen, 'More' );
+
+			// Get More block
+			const moreBlock = await getBlock( screen, 'More', { rowIndex: 3 } );
+			expect( moreBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get the empty paragraph placeholder
+			const paragraphPlaceholder = await getByLabelText(
+				'Add paragraph block'
+			);
+			fireEvent.press( paragraphPlaceholder );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph', {
+				rowIndex: 3,
+			} );
+			expect( paragraphBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
 } );

package/src/components/inspector-controls/groups.js

@@ -10,6 +10,7 @@ const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
+const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
@@ -23,6 +24,7 @@ const groups = {
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
 	typography: InspectorControlsTypography,
+	position: InspectorControlsPosition,
 };
 
 export default groups;

package/src/components/inspector-controls-tabs/position-controls-panel.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControlsGroups from '../inspector-controls/groups';
+import { default as InspectorControls } from '../inspector-controls';
+
+const PositionControls = () => {
+	const fills = useSlotFills(
+		InspectorControlsGroups.position.Slot.__unstableName
+	);
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			className="block-editor-block-inspector__position"
+			title={ __( 'Position' ) }
+			initialOpen={ false }
+		>
+			<InspectorControls.Slot __experimentalGroup="position" />
+		</PanelBody>
+	);
+};
+
+export default PositionControls;

package/src/components/inspector-controls-tabs/settings-tab.js

@@ -2,11 +2,13 @@
  * Internal dependencies
  */
 import AdvancedControls from './advanced-controls-panel';
+import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
 		<InspectorControls.Slot />
+		<PositionControls />
 		{ showAdvancedControls && (
 			<div>
 				<AdvancedControls />

package/src/components/inspector-controls-tabs/style.scss

@@ -0,0 +1,15 @@
+.show-icon-labels {
+	.block-editor-block-inspector__tabs .components-tab-panel__tabs {
+		.components-button.has-icon {
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			// Uses ::before as ::after is already used for active tab styling.
+			&::before {
+				content: attr(aria-label);
+			}
+		}
+	}
+}

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -16,12 +16,6 @@ import { store as blockEditorStore } from '../../store';
 const EMPTY_ARRAY = [];
 
 function getShowTabs( blockName, tabSettings = {} ) {
-	// Don't allow settings to force the display of tabs if the block inspector
-	// tabs experiment hasn't been opted into.
-	if ( ! window?.__experimentalEnableBlockInspectorTabs ) {
-		return false;
-	}
-
 	// Block specific setting takes precedence over generic default.
 	if ( tabSettings[ blockName ] !== undefined ) {
 		return tabSettings[ blockName ];
@@ -43,6 +37,7 @@ export default function useInspectorControlsTabs( blockName ) {
 		default: defaultGroup,
 		dimensions: dimensionsGroup,
 		list: listGroup,
+		position: positionGroup,
 		typography: typographyGroup,
 	} = InspectorControlsGroups;
 
@@ -71,6 +66,7 @@ export default function useInspectorControlsTabs( blockName ) {
 	// or Advanced Controls slot, then add this tab.
 	const settingsFills = [
 		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
 	];
 
@@ -79,8 +75,7 @@ export default function useInspectorControlsTabs( blockName ) {
 	}
 
 	const tabSettings = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings()
-			.__experimentalBlockInspectorTabs;
+		return select( blockEditorStore ).getSettings().blockInspectorTabs;
 	}, [] );
 
 	const showTabs = getShowTabs( blockName, tabSettings );

package/src/components/link-control/search-input.js

@@ -126,6 +126,7 @@ const LinkControlSearchInput = forwardRef(
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
+					__nextHasNoMarginBottom
 					label={ useLabel ? 'URL' : undefined }
 					className={ inputClasses }
 					value={ value }

package/src/components/link-control/style.scss

@@ -55,6 +55,7 @@ $preview-image-height: 140px;
 	.components-base-control__label {
 		margin-right: $grid-unit-20;
 		margin-bottom: 0;
+		min-width: 29px; // align with search results.
 	}
 
 	input[type="text"],

package/src/components/list-view/style.scss

@@ -22,8 +22,18 @@
 	&.is-selected.is-synced td {
 		background: var(--wp-block-synced-color);
 	}
-	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
-		color: var(--wp-block-synced-color);
+	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents {
+		&:hover,
+		&:focus,
+		.block-editor-block-icon {
+			color: var(--wp-block-synced-color);
+		}
+
+		&:focus::after {
+			box-shadow:
+				inset 0 0 0 1px $white,
+				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+		}
 	}
 	&.is-selected .block-editor-list-view-block-contents,
 	&.is-selected .components-button.has-icon {
@@ -74,7 +84,7 @@
 	&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
-	&.is-synced-branch:not(.is-selected) {
+	&.is-synced-branch.is-branch-selected {
 		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 	}
 	&.is-branch-selected.is-first-selected td:first-child {

package/src/components/off-canvas-editor/appender.js

@@ -2,24 +2,14 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { forwardRef, useState } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import Inserter from '../inserter';
-import { LinkUI } from './link-ui';
-import { updateAttributes } from './update-attributes';
-import { useInsertedBlock } from './use-inserted-block';
-
-const BLOCKS_WITH_LINK_UI_SUPPORT = [
-	'core/navigation-link',
-	'core/navigation-submenu',
-];
 
 export const Appender = forwardRef( ( props, ref ) => {
-	const [ insertedBlockClientId, setInsertedBlockClientId ] = useState();
-
 	const { hideInserter, clientId } = useSelect( ( select ) => {
 		const {
 			getTemplateLock,
@@ -37,59 +27,19 @@ export const Appender = forwardRef( ( props, ref ) => {
 		};
 	}, [] );
 
-	const {
-		insertedBlockAttributes,
-		insertedBlockName,
-		setInsertedBlockAttributes,
-	} = useInsertedBlock( insertedBlockClientId );
-
-	const maybeSetInsertedBlockOnInsertion = ( _insertedBlock ) => {
-		if ( ! _insertedBlock?.clientId ) {
-			return;
-		}
-
-		setInsertedBlockClientId( _insertedBlock?.clientId );
-	};
-
-	let maybeLinkUI;
-
-	if (
-		insertedBlockClientId &&
-		BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName )
-	) {
-		maybeLinkUI = (
-			<LinkUI
-				clientId={ insertedBlockClientId }
-				link={ insertedBlockAttributes }
-				onClose={ () => setInsertedBlockClientId( null ) }
-				hasCreateSuggestion={ false }
-				onChange={ ( updatedValue ) => {
-					updateAttributes(
-						updatedValue,
-						setInsertedBlockAttributes,
-						insertedBlockAttributes
-					);
-					setInsertedBlockClientId( null );
-				} }
-			/>
-		);
-	}
-
 	if ( hideInserter ) {
 		return null;
 	}
 
 	return (
 		<div className="offcanvas-editor__appender">
-			{ maybeLinkUI }
-
 			<Inserter
 				ref={ ref }
 				rootClientId={ clientId }
 				position="bottom right"
 				isAppender={ true }
 				selectBlockOnInsert={ false }
-				onSelectOrClose={ maybeSetInsertedBlockOnInsertion }
+				shouldDirectInsert={ false }
 				__experimentalIsQuick
 				{ ...props }
 			/>

package/src/components/off-canvas-editor/block-contents.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,6 +15,14 @@ import { forwardRef } from '@wordpress/element';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
+import { updateAttributes } from './update-attributes';
+import { LinkUI } from './link-ui';
+import { useInsertedBlock } from './use-inserted-block';
+
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
 
 const ListViewBlockContents = forwardRef(
 	(
@@ -33,19 +41,54 @@ const ListViewBlockContents = forwardRef(
 		ref
 	) => {
 		const { clientId } = block;
-
-		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
+		const [ isLinkUIOpen, setIsLinkUIOpen ] = useState();
+		const {
+			blockMovingClientId,
+			selectedBlockInBlockEditor,
+			lastInsertedBlockClientId,
+		} = useSelect(
 			( select ) => {
-				const { hasBlockMovingClientId, getSelectedBlockClientId } =
-					select( blockEditorStore );
+				const {
+					hasBlockMovingClientId,
+					getSelectedBlockClientId,
+					getLastInsertedBlocksClientIds,
+				} = select( blockEditorStore );
+				const lastInsertedBlocksClientIds =
+					getLastInsertedBlocksClientIds();
 				return {
 					blockMovingClientId: hasBlockMovingClientId(),
 					selectedBlockInBlockEditor: getSelectedBlockClientId(),
+					lastInsertedBlockClientId:
+						lastInsertedBlocksClientIds &&
+						lastInsertedBlocksClientIds[ 0 ],
 				};
 			},
 			[ clientId ]
 		);
 
+		const {
+			insertedBlockAttributes,
+			insertedBlockName,
+			setInsertedBlockAttributes,
+		} = useInsertedBlock( lastInsertedBlockClientId );
+
+		const hasExistingLinkValue = insertedBlockAttributes?.id;
+
+		useEffect( () => {
+			if (
+				clientId === lastInsertedBlockClientId &&
+				BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName ) &&
+				! hasExistingLinkValue // don't re-show the Link UI if the block already has a link value.
+			) {
+				setIsLinkUIOpen( true );
+			}
+		}, [
+			lastInsertedBlockClientId,
+			clientId,
+			insertedBlockName,
+			hasExistingLinkValue,
+		] );
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -62,26 +105,44 @@ const ListViewBlockContents = forwardRef(
 			: [ clientId ];
 
 		return (
-			<BlockDraggable clientIds={ draggableClientIds }>
-				{ ( { draggable, onDragStart, onDragEnd } ) => (
-					<ListViewBlockSelectButton
-						ref={ ref }
-						className={ className }
-						block={ block }
-						onClick={ onClick }
-						onToggleExpanded={ onToggleExpanded }
-						isSelected={ isSelected }
-						position={ position }
-						siblingBlockCount={ siblingBlockCount }
-						level={ level }
-						draggable={ draggable }
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						isExpanded={ isExpanded }
-						{ ...props }
+			<>
+				{ isLinkUIOpen && (
+					<LinkUI
+						clientId={ lastInsertedBlockClientId }
+						link={ insertedBlockAttributes }
+						onClose={ () => setIsLinkUIOpen( false ) }
+						hasCreateSuggestion={ false }
+						onChange={ ( updatedValue ) => {
+							updateAttributes(
+								updatedValue,
+								setInsertedBlockAttributes,
+								insertedBlockAttributes
+							);
+							setIsLinkUIOpen( false );
+						} }
 					/>
 				) }
-			</BlockDraggable>
+				<BlockDraggable clientIds={ draggableClientIds }>
+					{ ( { draggable, onDragStart, onDragEnd } ) => (
+						<ListViewBlockSelectButton
+							ref={ ref }
+							className={ className }
+							block={ block }
+							onClick={ onClick }
+							onToggleExpanded={ onToggleExpanded }
+							isSelected={ isSelected }
+							position={ position }
+							siblingBlockCount={ siblingBlockCount }
+							level={ level }
+							draggable={ draggable }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
+							isExpanded={ isExpanded }
+							{ ...props }
+						/>
+					) }
+				</BlockDraggable>
+			</>
 		);
 	}
 );