@wordpress/block-editor 11.1.0 → 11.3.0

package/src/components/inserter/stories/index.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import BlockLibrary from '../library';
-import BlockEditorProvider from '../../provider';
+import { ExperimentalBlockEditorProvider } from '../../provider';
 import { patternCategories, patterns, reusableBlocks } from './utils/fixtures';
 import Inserter from '../';
 
@@ -16,11 +16,11 @@ export const libraryWithoutPatterns = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider>
+		<ExperimentalBlockEditorProvider>
 			<div style={ wrapperStyle }>
 				<BlockLibrary showInserterHelpPanel />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };
 
@@ -32,7 +32,7 @@ export const libraryWithPatterns = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ {
 				__experimentalBlockPatternCategories: patternCategories,
 				__experimentalBlockPatterns: patterns,
@@ -41,7 +41,7 @@ export const libraryWithPatterns = () => {
 			<div style={ wrapperStyle }>
 				<BlockLibrary showInserterHelpPanel />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };
 
@@ -53,7 +53,7 @@ export const libraryWithPatternsAndReusableBlocks = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ {
 				__experimentalBlockPatternCategories: patternCategories,
 				__experimentalBlockPatterns: patterns,
@@ -63,7 +63,7 @@ export const libraryWithPatternsAndReusableBlocks = () => {
 			<div style={ wrapperStyle }>
 				<BlockLibrary showInserterHelpPanel />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };
 
@@ -75,7 +75,7 @@ export const quickInserter = () => {
 		display: 'inline-block',
 	};
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ {
 				__experimentalBlockPatternCategories: patternCategories,
 				__experimentalBlockPatterns: patterns,
@@ -85,6 +85,6 @@ export const quickInserter = () => {
 			<div style={ wrapperStyle }>
 				<Inserter __experimentalIsQuick />
 			</div>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 };

package/src/components/inserter/style.scss

@@ -564,8 +564,10 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__media-panel {
-	height: 100%;
+	min-height: 100%;
 	padding: 0 $grid-unit-20;
+	display: flex;
+	flex-direction: column;
 
 	@include break-medium {
 		padding: 0;
@@ -576,6 +578,7 @@ $block-inserter-tabs-height: 44px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		flex: 1;
 	}
 
 	.block-editor-inserter__media-panel-search {
@@ -583,13 +586,19 @@ $block-inserter-tabs-height: 44px;
 			input[type="search"].components-search-control__input {
 				background: $white;
 			}
+			button.components-button {
+				min-width: auto;
+				padding-left: $grid-unit-05 * 0.5;
+				padding-right: $grid-unit-05 * 0.5;
+			}
 		}
 	}
 }
 
 .block-editor-inserter__media-list {
 	margin-top: $grid-unit-20;
-	&__list-item {
+	.block-editor-inserter__media-list__list-item {
+		position: relative;
 		cursor: pointer;
 		margin-bottom: $grid-unit-30;
 
@@ -600,16 +609,52 @@ $block-inserter-tabs-height: 44px;
 		&[draggable="true"] .block-editor-block-preview__container {
 			cursor: grab;
 		}
+
+		&.is-hovered {
+			.block-editor-inserter__media-list__item-preview {
+				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+			}
+
+			.block-editor-inserter__media-list__item-preview-options > button {
+				display: block;
+			}
+		}
+
+		.block-editor-inserter__media-list__item-preview-options {
+			position: absolute;
+			right: $grid-unit-10;
+			top: $grid-unit-10;
+
+			> button {
+				background: $white;
+				border-radius: $radius-block-ui;
+				display: none;
+
+				// These styles are important so as focus isn't lost
+				// when the button is focused and we hover away.
+				&.is-opened,
+				&:focus {
+					display: block;
+				}
+
+				&:hover {
+					box-shadow: inset 0 0 0 2px $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;
+				}
+			}
+		}
 	}
 
-	&__item {
+	.block-editor-inserter__media-list__item {
 		height: 100%;
 
-		&-preview {
+		.block-editor-inserter__media-list__item-preview {
 			display: flex;
 			align-items: center;
 			overflow: hidden;
-			border-radius: 4px;
+			border-radius: 2px;
 
 			> * {
 				margin: 0 auto;
@@ -617,12 +662,8 @@ $block-inserter-tabs-height: 44px;
 			}
 		}
 
-		&:hover &-preview {
-			box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
-		}
-
-		&:focus &-preview {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		&:focus .block-editor-inserter__media-list__item-preview {
+			box-shadow: inset 0 0 0 2px $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;
@@ -630,6 +671,12 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__media-list__item-preview-options__popover {
+	.components-menu-item__button .components-menu-item__item {
+		min-width: auto;
+	}
+}
+
 
 .block-editor-inserter__mobile-tab-navigation {
 	padding: $grid-unit-20;

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/inserter-list-item/index.js

@@ -107,12 +107,6 @@ function InserterListItem( {
 								onHover( null );
 							}
 						} }
-						onFocus={ () => {
-							if ( isDragging.current ) {
-								return;
-							}
-							onHover( item );
-						} }
 						onMouseEnter={ () => {
 							if ( isDragging.current ) {
 								return;
@@ -120,7 +114,6 @@ function InserterListItem( {
 							onHover( item );
 						} }
 						onMouseLeave={ () => onHover( null ) }
-						onBlur={ () => onHover( null ) }
 						{ ...props }
 					>
 						<span

package/src/components/inspector-controls/README.md

@@ -188,9 +188,7 @@ Inspector Advanced Controls appear under the _Advanced_ panel of a block's [Insp
 ### Usage
 
 ```js
-import {
-	TextControl,
-} from '@wordpress/components';
+import { TextControl } from '@wordpress/components';
 import {
 	InspectorControls,
 	InspectorAdvancedControls,
@@ -199,11 +197,9 @@ import {
 function MyBlockEdit( { attributes, setAttributes } ) {
 	return (
 		<>
-			<div>
-				{ /* Block markup goes here */ }
-			</div
+			<div>{ /* Block markup goes here */ }</div>
 			<InspectorControls>
-				{ /* Regular control goes here */
+				{ /* Regular control goes here */ }
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl

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

@@ -11,6 +11,7 @@ import {
 	__experimentalToolsPanelContext as ToolsPanelContext,
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -19,9 +20,22 @@ import useDisplayBlockControls from '../use-display-block-controls';
 import groups from './groups';
 
 export default function InspectorControlsFill( {
-	__experimentalGroup: group = 'default',
 	children,
+	group = 'default',
+	__experimentalGroup,
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsFill`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
+
 	const isDisplayed = useDisplayBlockControls();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {

package/src/components/inspector-controls/fill.native.js

@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { Children } from '@wordpress/element';
 import { BottomSheetConsumer } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -19,9 +20,21 @@ import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
 	children,
-	__experimentalGroup: group = 'default',
+	group = 'default',
+	__experimentalGroup,
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsFill`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const isDisplayed = useDisplayBlockControls();
 
 	const Fill = groups[ group ]?.Fill;