@wordpress/block-editor 11.0.0 → 11.2.0

package/src/components/inserter/search-items.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
-import { find } from 'lodash';
 import { noCase } from 'change-case';
 
 // Default search helpers.
@@ -88,7 +87,7 @@ export const searchBlockItems = (
 
 	const config = {
 		getCategory: ( item ) =>
-			find( categories, { slug: item.category } )?.title,
+			categories.find( ( { slug } ) => slug === item.category )?.title,
 		getCollection: ( item ) =>
 			collections[ item.name.split( '/' )[ 0 ] ]?.title,
 	};

package/src/components/inserter/search-results.js

@@ -50,6 +50,7 @@ function InserterSearchResults( {
 	isDraggable = true,
 	shouldFocusBlock = true,
 	prioritizePatterns,
+	selectBlockOnInsert,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -60,6 +61,7 @@ function InserterSearchResults( {
 		isAppender,
 		insertionIndex: __experimentalInsertionIndex,
 		shouldFocusBlock,
+		selectBlockOnInsert,
 	} );
 	const [
 		blockTypes,

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

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Inserter can add blocks adds new block at the end of post 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Inserter can add blocks after another block 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks before another block 1`] = `
+"<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks creates a new Paragraph block tapping on the empty area below the last block 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Inserter can add blocks inserts block at the end of post when no block is selected 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;
+
+exports[`Inserter can add blocks to the beginning 1`] = `
+"<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks to the end 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;

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/link-control/test/index.js

@@ -376,9 +376,15 @@ describe( 'Searching for a link', () => {
 		const searchResults = await screen.findByRole( 'listbox', {
 			name: /Search results for.*/,
 		} );
-		const searchResultTextHighlightElements = Array.from(
-			searchResults.querySelectorAll( 'button[role="option"] mark' )
-		);
+
+		const searchResultTextHighlightElements = within( searchResults )
+			.getAllByRole( 'option' )
+			// TODO: Change to `getByRole( 'mark' )` when officially supported by
+			// WAI-ARIA 1.3 - see https://w3c.github.io/aria/#mark
+			// eslint-disable-next-line testing-library/no-node-access
+			.map( ( searchResult ) => searchResult.querySelector( 'mark' ) )
+			.flat()
+			.filter( Boolean );
 
 		// Given we're mocking out the results we should always have 4 mark elements.
 		expect( searchResultTextHighlightElements ).toHaveLength( 4 );
@@ -1092,6 +1098,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Check human readable error notice is perceivable.
 			expect( errorNotice ).toBeVisible();
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( errorNotice.parentElement ).toHaveClass(
 				'block-editor-link-control__search-error'
 			);
@@ -1324,7 +1331,8 @@ describe( 'Selecting links', () => {
 				} );
 
 				// Make sure focus is retained after submission.
-				expect( container ).toContainElement( document.activeElement );
+				// eslint-disable-next-line testing-library/no-node-access
+				expect( container.firstChild ).toHaveFocus();
 
 				expect( currentLink ).toBeVisible();
 				expect(
@@ -1594,11 +1602,13 @@ describe( 'Rich link previews', () => {
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
 		// Todo: refactor to use user-facing queries.
+		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichImagePreview = linkPreview.querySelector(
 			'.block-editor-link-control__search-item-image'
 		);
 
 		// Todo: refactor to use user-facing queries.
+		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichDescriptionPreview = linkPreview.querySelector(
 			'.block-editor-link-control__search-item-description'
 		);
@@ -1646,11 +1656,14 @@ describe( 'Rich link previews', () => {
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
+		// eslint-disable-next-line testing-library/no-node-access
 		const iconPreview = linkPreview.querySelector(
 			`.block-editor-link-control__search-item-icon`
 		);
 
+		// eslint-disable-next-line testing-library/no-node-access
 		const fallBackIcon = iconPreview.querySelector( 'svg' );
+		// eslint-disable-next-line testing-library/no-node-access
 		const richIcon = iconPreview.querySelector( 'img' );
 
 		expect( fallBackIcon ).toBeVisible();
@@ -1680,6 +1693,7 @@ describe( 'Rich link previews', () => {
 				expect( linkPreview ).toHaveClass( 'is-rich' )
 			);
 
+			// eslint-disable-next-line testing-library/no-node-access
 			const missingDataItem = linkPreview.querySelector(
 				`.block-editor-link-control__search-item-${ dataItem }`
 			);

package/src/components/list-view/block-select-button.js

@@ -12,7 +12,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**

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 {
@@ -176,9 +186,8 @@
 	}
 
 	.block-editor-block-icon {
-		align-self: flex-start;
 		margin-right: $grid-unit-10;
-		width: $icon-size;
+		flex: 0 0 $icon-size;
 	}
 
 	.block-editor-list-view-block__menu-cell,
@@ -319,11 +328,6 @@
 
 	.block-editor-list-view-block-select-button__lock {
 		line-height: 0;
-		width: 24px;
-		min-width: 24px;
-		margin-left: auto;
-		padding: 0;
-		vertical-align: middle;
 	}
 }