@wordpress/block-editor 11.2.0 → 11.3.1

package/src/components/block-preview/index.js

@@ -9,22 +9,45 @@ import classnames from 'classnames';
 import { useDisabled, useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { memo, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import BlockEditorProvider from '../provider';
+import { ExperimentalBlockEditorProvider } from '../provider';
 import AutoHeightBlockPreview from './auto';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
 
 export function BlockPreview( {
 	blocks,
-	__experimentalPadding = 0,
 	viewportWidth = 1200,
+	minHeight,
+	additionalStyles = [],
+	// Deprecated props:
 	__experimentalMinHeight,
-	__experimentalStyles = [],
+	__experimentalPadding,
 } ) {
+	if ( __experimentalMinHeight ) {
+		minHeight = __experimentalMinHeight;
+		deprecated( 'The __experimentalMinHeight prop', {
+			since: '6.2',
+			version: '6.4',
+			alternative: 'minHeight',
+		} );
+	}
+	if ( __experimentalPadding ) {
+		additionalStyles = [
+			...additionalStyles,
+			{ css: `body { padding: ${ __experimentalPadding }px; }` },
+		];
+		deprecated( 'The __experimentalPadding prop of BlockPreview', {
+			since: '6.2',
+			version: '6.4',
+			alternative: 'additionalStyles',
+		} );
+	}
+
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
@@ -37,18 +60,22 @@ export function BlockPreview( {
 		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
 		[ blocks ]
 	);
+
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
 	}
+
 	return (
-		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
+		<ExperimentalBlockEditorProvider
+			value={ renderedBlocks }
+			settings={ settings }
+		>
 			<AutoHeightBlockPreview
 				viewportWidth={ viewportWidth }
-				__experimentalPadding={ __experimentalPadding }
-				__experimentalMinHeight={ __experimentalMinHeight }
-				__experimentalStyles={ __experimentalStyles }
+				minHeight={ minHeight }
+				additionalStyles={ additionalStyles }
 			/>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 }
 
@@ -102,12 +129,15 @@ export function useBlockPreview( {
 	);
 
 	const children = (
-		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
+		<ExperimentalBlockEditorProvider
+			value={ renderedBlocks }
+			settings={ settings }
+		>
 			<BlockListItems
 				renderAppender={ false }
 				__experimentalLayout={ __experimentalLayout }
 			/>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 
 	return {

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

@@ -35,29 +35,6 @@
 	}
 }
 
-.block-editor-block-preview__live-content {
-	* {
-		pointer-events: none;
-	}
-
-	// Hide the block appender, as the block is not editable in this context.
-	.block-list-appender {
-		display: none;
-	}
-
-	// Revert button disable styles to ensure that button styles render as they will on the
-	// front end of the site. For example, this ensures that Social Links icons display correctly.
-	.components-button:disabled {
-		opacity: initial;
-	}
-
-	// Hide placeholders.
-	.components-placeholder,
-	.block-editor-block-list__block[data-empty="true"] {
-		display: none;
-	}
-}
-
 // The goal of this pseudo-element is to cover the iframe
 // otherwise it won't be able to drag elements containing
 // the preview iframe in Safari.

package/src/components/block-selection-clearer/index.js

@@ -20,7 +20,7 @@ export function useBlockSelectionClearer() {
 	const { getSettings, hasSelectedBlock, hasMultiSelection } =
 		useSelect( blockEditorStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { __experimentalClearBlockSelection: isEnabled } = getSettings();
+	const { clearBlockSelection: isEnabled } = getSettings();
 
 	return useRefEffect(
 		( node ) => {

package/src/components/block-selection-clearer/test/index.js

@@ -17,7 +17,7 @@ const defaultUseSelectValues = {
 	hasSelectedBlock: jest.fn().mockReturnValue( false ),
 	hasMultiSelection: jest.fn().mockReturnValue( false ),
 	getSettings: jest.fn().mockReturnValue( {
-		__experimentalClearBlockSelection: true,
+		clearBlockSelection: true,
 	} ),
 };
 
@@ -50,7 +50,7 @@ describe( 'BlockSelectionClearer component', () => {
 
 		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
-		expect( mockClearSelectedBlock ).toBeCalled();
+		expect( mockClearSelectedBlock ).toHaveBeenCalled();
 	} );
 
 	it( 'should clear the selected block when multiple blocks are selected', () => {
@@ -71,7 +71,7 @@ describe( 'BlockSelectionClearer component', () => {
 
 		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
-		expect( mockClearSelectedBlock ).toBeCalled();
+		expect( mockClearSelectedBlock ).toHaveBeenCalled();
 	} );
 
 	it( 'should not clear the block selection when no blocks are selected', () => {
@@ -89,7 +89,7 @@ describe( 'BlockSelectionClearer component', () => {
 
 		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
-		expect( mockClearSelectedBlock ).not.toBeCalled();
+		expect( mockClearSelectedBlock ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should not clear the block selection when the feature is disabled', () => {
@@ -98,7 +98,7 @@ describe( 'BlockSelectionClearer component', () => {
 			...defaultUseSelectValues,
 			hasSelectedBlock: jest.fn().mockReturnValue( true ),
 			getSettings: jest.fn().mockReturnValue( {
-				__experimentalClearBlockSelection: false,
+				clearBlockSelection: false,
 			} ),
 		} ) );
 		useDispatch.mockImplementation( () => ( {
@@ -113,6 +113,6 @@ describe( 'BlockSelectionClearer component', () => {
 
 		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
-		expect( mockClearSelectedBlock ).not.toBeCalled();
+		expect( mockClearSelectedBlock ).not.toHaveBeenCalled();
 	} );
 } );

package/src/components/block-settings/container.native.js

@@ -12,13 +12,12 @@ import {
 	ImageLinkDestinationsScreen,
 	LinkPickerScreen,
 } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import styles from './container.native.scss';
-import { store as blockEditorStore } from '../../store';
 
 export const blockSettingsScreens = {
 	settings: 'Settings',
@@ -28,12 +27,12 @@ export const blockSettingsScreens = {
 	imageLinkDestinations: 'imageLinkDestinations',
 };
 
-function BottomSheetSettings( {
-	editorSidebarOpened,
-	closeGeneralSidebar,
-	...props
-} ) {
+export default function BottomSheetSettings( props ) {
 	const colorSettings = useMultipleOriginColorsAndGradients();
+	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
+	const editorSidebarOpened = useSelect( ( select ) =>
+		select( 'core/edit-post' ).isEditorSidebarOpened()
+	);
 
 	return (
 		<BottomSheet
@@ -86,21 +85,3 @@ function BottomSheetSettings( {
 		</BottomSheet>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { isEditorSidebarOpened } = select( 'core/edit-post' );
-		const { getSettings } = select( blockEditorStore );
-		return {
-			settings: getSettings(),
-			editorSidebarOpened: isEditorSidebarOpened(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { closeGeneralSidebar } = dispatch( 'core/edit-post' );
-
-		return {
-			closeGeneralSidebar,
-		};
-	} ),
-] )( BottomSheetSettings );

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -39,10 +39,11 @@ const POPOVER_PROPS = {
 	variant: 'toolbar',
 };
 
-function CopyMenuItem( { blocks, onCopy } ) {
+function CopyMenuItem( { blocks, onCopy, label } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
-	const copyMenuItemLabel =
+	const copyMenuItemBlocksLabel =
 		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
+	const copyMenuItemLabel = label ? label : copyMenuItemBlocksLabel;
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
@@ -263,9 +264,6 @@ export function BlockSettingsDropdown( {
 									blocks={ blocks }
 									onCopy={ onCopy }
 								/>
-								<MenuItem onClick={ onPasteStyles }>
-									{ __( 'Paste styles' ) }
-								</MenuItem>
 								{ canDuplicate && (
 									<MenuItem
 										onClick={ pipe(
@@ -314,6 +312,16 @@ export function BlockSettingsDropdown( {
 									/>
 								) }
 							</MenuGroup>
+							<MenuGroup>
+								<CopyMenuItem
+									blocks={ blocks }
+									onCopy={ onCopy }
+									label={ __( 'Copy styles' ) }
+								/>
+								<MenuItem onClick={ onPasteStyles }>
+									{ __( 'Paste styles' ) }
+								</MenuItem>
+							</MenuGroup>
 							<BlockSettingsMenuControls.Slot
 								fillProps={ { onClose } }
 								clientIds={ clientIds }

package/src/components/block-settings-menu-controls/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -33,17 +28,14 @@ const BlockSettingsMenuControlsSlot = ( {
 	const { selectedBlocks, selectedClientIds, canRemove } = useSelect(
 		( select ) => {
 			const {
-				getBlocksByClientId,
+				getBlockNamesByClientId,
 				getSelectedBlockClientIds,
 				canRemoveBlocks,
 			} = select( blockEditorStore );
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
-				selectedBlocks: map(
-					getBlocksByClientId( ids ).filter( Boolean ),
-					( block ) => block.name
-				),
+				selectedBlocks: getBlockNamesByClientId( ids ),
 				selectedClientIds: ids,
 				canRemove: canRemoveBlocks( ids ),
 			};

package/src/components/block-switcher/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, render, screen, within } from '@testing-library/react';
+import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -16,8 +16,6 @@ import { copy } from '@wordpress/icons';
  */
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
 
-jest.useFakeTimers();
-
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../block-title/use-block-display-title', () =>
 	jest.fn().mockReturnValue( 'Block Name' )
@@ -185,9 +183,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 		} );
 
 		test( 'should simulate a keydown event, which should open transform toggle.', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
@@ -212,26 +208,27 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				} ),
 				'[ArrowDown]'
 			);
-			await act( () => Promise.resolve() );
 
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: true,
-				} )
-			).toBeVisible();
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Block Name',
+						expanded: true,
+					} )
+				).toBeVisible()
+			);
 
-			const menu = screen.getByRole( 'menu', {
-				name: 'Block Name',
-			} );
-			expect( menu ).toBeInTheDocument();
-			expect( menu ).not.toBeVisible();
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'menu', {
+						name: 'Block Name',
+					} )
+				).toBeVisible()
+			);
 		} );
 
 		test( 'should simulate a click event, which should call onToggle.', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
@@ -255,26 +252,27 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 					expanded: false,
 				} )
 			);
-			await act( () => Promise.resolve() );
 
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: true,
-				} )
-			).toBeVisible();
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Block Name',
+						expanded: true,
+					} )
+				).toBeVisible()
+			);
 
-			const menu = screen.getByRole( 'menu', {
-				name: 'Block Name',
-			} );
-			expect( menu ).toBeInTheDocument();
-			expect( menu ).not.toBeVisible();
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'menu', {
+						name: 'Block Name',
+					} )
+				).toBeVisible()
+			);
 		} );
 
 		test( 'should create the transform items for the chosen block.', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
@@ -286,15 +284,16 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 					expanded: false,
 				} )
 			);
-			await act( () => Promise.resolve() );
 
-			expect(
-				within(
-					screen.getByRole( 'menu', {
-						name: 'Block Name',
-					} )
-				).getByRole( 'menuitem' )
-			).toBeInTheDocument();
+			await waitFor( () =>
+				expect(
+					within(
+						screen.getByRole( 'menu', {
+							name: 'Block Name',
+						} )
+					).getByRole( 'menuitem' )
+				).toBeInTheDocument()
+			);
 		} );
 	} );
 } );

package/src/components/block-switcher/utils.js

@@ -13,7 +13,7 @@ import { __experimentalGetBlockAttributesNamesByRole as getBlockAttributesNamesB
  * @param {string}  selectedBlockName The block's name to use for matching condition.
  * @param {Set}     consumedBlocks    A set holding the previously matched/consumed blocks.
  *
- * @return {WPBlock?} The matched block if found or nothing(`undefined`).
+ * @return {WPBlock | undefined} The matched block if found or nothing(`undefined`).
  */
 export const getMatchingBlockByName = (
 	block,

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

@@ -21,6 +21,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 '../../experiments';
 
 function selector( select ) {
 	const {
@@ -28,13 +29,14 @@ function selector( select ) {
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
-		__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
+		isBlockInterfaceHidden,
 		getSettings,
 		getLastMultiSelectedBlockClientId,
-	} = select( blockEditorStore );
+	} = unlock( select( blockEditorStore ) );
 
 	return {
 		editorMode: __unstableGetEditorMode(),
+		hasMultiSelection: hasMultiSelection(),
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
 		isBlockInterfaceHidden: isBlockInterfaceHidden(),
@@ -57,6 +59,7 @@ function SelectedBlockPopover( {
 } ) {
 	const {
 		editorMode,
+		hasMultiSelection,
 		isMultiSelecting,
 		isTyping,
 		isBlockInterfaceHidden,
@@ -89,7 +92,8 @@ function SelectedBlockPopover( {
 	const showEmptyBlockSideInserter =
 		! isTyping && editorMode === 'edit' && isEmptyDefaultBlock;
 	const shouldShowBreadcrumb =
-		editorMode === 'navigation' || editorMode === 'zoom-out';
+		! hasMultiSelection &&
+		( editorMode === 'navigation' || editorMode === 'zoom-out' );
 	const shouldShowContextualToolbar =
 		editorMode === 'edit' &&
 		! hasFixedToolbar &&
@@ -129,86 +133,79 @@ function SelectedBlockPopover( {
 		clientId,
 	} );
 
-	if (
-		! shouldShowBreadcrumb &&
-		! shouldShowContextualToolbar &&
-		! showEmptyBlockSideInserter
-	) {
-		return null;
+	if ( showEmptyBlockSideInserter ) {
+		return (
+			<BlockPopover
+				clientId={ capturingClientId || clientId }
+				__unstableCoverTarget
+				bottomClientId={ lastClientId }
+				className={ classnames(
+					'block-editor-block-list__block-side-inserter-popover',
+					{
+						'is-insertion-point-visible': isInsertionPointVisible,
+					}
+				) }
+				__unstablePopoverSlot={ __unstablePopoverSlot }
+				__unstableContentRef={ __unstableContentRef }
+				resize={ false }
+				shift={ false }
+				{ ...popoverProps }
+			>
+				<div className="block-editor-block-list__empty-block-inserter">
+					<Inserter
+						position="bottom right"
+						rootClientId={ rootClientId }
+						clientId={ clientId }
+						__experimentalIsQuick
+					/>
+				</div>
+			</BlockPopover>
+		);
 	}
 
-	return (
-		<>
-			{ showEmptyBlockSideInserter && (
-				<BlockPopover
-					clientId={ capturingClientId || clientId }
-					__unstableCoverTarget
-					bottomClientId={ lastClientId }
-					className={ classnames(
-						'block-editor-block-list__block-side-inserter-popover',
-						{
-							'is-insertion-point-visible':
-								isInsertionPointVisible,
-						}
-					) }
-					__unstablePopoverSlot={ __unstablePopoverSlot }
-					__unstableContentRef={ __unstableContentRef }
-					resize={ false }
-					shift={ false }
-					{ ...popoverProps }
-				>
-					<div className="block-editor-block-list__empty-block-inserter">
-						<Inserter
-							position="bottom right"
-							rootClientId={ rootClientId }
-							clientId={ clientId }
-							__experimentalIsQuick
-						/>
-					</div>
-				</BlockPopover>
-			) }
-			{ ( shouldShowBreadcrumb || shouldShowContextualToolbar ) && (
-				<BlockPopover
-					clientId={ capturingClientId || clientId }
-					bottomClientId={ lastClientId }
-					className={ classnames(
-						'block-editor-block-list__block-popover',
-						{
-							'is-insertion-point-visible':
-								isInsertionPointVisible,
+	if ( shouldShowBreadcrumb || shouldShowContextualToolbar ) {
+		return (
+			<BlockPopover
+				clientId={ capturingClientId || clientId }
+				bottomClientId={ lastClientId }
+				className={ classnames(
+					'block-editor-block-list__block-popover',
+					{
+						'is-insertion-point-visible': isInsertionPointVisible,
+					}
+				) }
+				__unstablePopoverSlot={ __unstablePopoverSlot }
+				__unstableContentRef={ __unstableContentRef }
+				resize={ false }
+				{ ...popoverProps }
+			>
+				{ shouldShowContextualToolbar && showContents && (
+					<BlockContextualToolbar
+						// If the toolbar is being shown because of being forced
+						// it should focus the toolbar right after the mount.
+						focusOnMount={ isToolbarForced.current }
+						__experimentalInitialIndex={
+							initialToolbarItemIndexRef.current
 						}
-					) }
-					__unstablePopoverSlot={ __unstablePopoverSlot }
-					__unstableContentRef={ __unstableContentRef }
-					resize={ false }
-					{ ...popoverProps }
-				>
-					{ shouldShowContextualToolbar && showContents && (
-						<BlockContextualToolbar
-							// If the toolbar is being shown because of being forced
-							// it should focus the toolbar right after the mount.
-							focusOnMount={ isToolbarForced.current }
-							__experimentalInitialIndex={
-								initialToolbarItemIndexRef.current
-							}
-							__experimentalOnIndexChange={ ( index ) => {
-								initialToolbarItemIndexRef.current = index;
-							} }
-							// Resets the index whenever the active block changes so
-							// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-							key={ clientId }
-						/>
-					) }
-					{ shouldShowBreadcrumb && (
-						<BlockSelectionButton
-							clientId={ clientId }
-							rootClientId={ rootClientId }
-						/>
-					) }
-				</BlockPopover>
-			) }
-		</>
-	);
+						__experimentalOnIndexChange={ ( index ) => {
+							initialToolbarItemIndexRef.current = index;
+						} }
+						// Resets the index whenever the active block changes so
+						// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+						key={ clientId }
+					/>
+				) }
+				{ shouldShowBreadcrumb && (
+					<BlockSelectionButton
+						clientId={ clientId }
+						rootClientId={ rootClientId }
+					/>
+				) }
+			</BlockPopover>
+		);
+	}
+
+	return null;
 }
 
 function wrapperSelector( select ) {

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

@@ -59,7 +59,6 @@
 
 // Sibling inserter / "inbetweenserter".
 .block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look