@wordpress/block-editor 10.5.0 → 11.0.0

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -23,12 +23,14 @@ import {
 	isReusableBlock,
 } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { withDispatch, withSelect, useSelect } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { moreHorizontalMobile } from '@wordpress/icons';
 import { useRef, useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+// Disable Reason: Needs to be refactored.
+// eslint-disable-next-line no-restricted-imports
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -78,6 +80,12 @@ const BlockActionsMenu = ( {
 		clipboardBlock &&
 		canInsertBlockType( clipboardBlock.name, rootClientId );
 
+	const innerBlockCount = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockCount( selectedBlockClientId ),
+		[ selectedBlockClientId ]
+	);
+
 	const {
 		actionTitle: {
 			backward: backwardButtonTitle,
@@ -187,13 +195,21 @@ const BlockActionsMenu = ( {
 		},
 		convertToRegularBlocks: {
 			id: 'convertToRegularBlocksOption',
-			label: __( 'Convert to regular blocks' ),
+			label:
+				innerBlockCount > 1
+					? __( 'Convert to regular blocks' )
+					: __( 'Convert to regular block' ),
 			value: 'convertToRegularBlocksOption',
 			onSelect: () => {
+				const successNotice =
+					innerBlockCount > 1
+						? /* translators: %s: name of the reusable block */
+						  __( '%s converted to regular blocks' )
+						: /* translators: %s: name of the reusable block */
+						  __( '%s converted to regular block' );
 				createSuccessNotice(
 					sprintf(
-						/* translators: %s: name of the reusable block */
-						__( '%s converted to regular blocks' ),
+						successNotice,
 						reusableBlock?.title?.raw || blockTitle
 					)
 				);
@@ -293,6 +309,8 @@ const BlockActionsMenu = ( {
 	);
 };
 
+const EMPTY_BLOCK_LIST = [];
+
 export default compose(
 	withSelect( ( select, { clientIds } ) => {
 		const {
@@ -345,8 +363,8 @@ export default compose(
 			? getBlocksByClientId( selectedBlockClientId )[ 0 ]
 			: undefined;
 		const selectedBlockPossibleTransformations = selectedBlock
-			? getBlockTransformItems( [ selectedBlock ], rootClientId )
-			: [];
+			? getBlockTransformItems( selectedBlock, rootClientId )
+			: EMPTY_BLOCK_LIST;
 
 		const isReusableBlockType = block ? isReusableBlock( block ) : false;
 		const reusableBlock = isReusableBlockType

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -15,7 +15,6 @@ Array [
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -75,7 +74,6 @@ Array [
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}

package/src/components/block-pattern-setup/index.js

@@ -138,8 +138,9 @@ const BlockPatternSetup = ( {
 	blockName,
 	filterPatternsFn,
 	onBlockPatternSelect,
+	initialViewMode = VIEWMODES.carousel,
 } ) => {
-	const [ viewMode, setViewMode ] = useState( VIEWMODES.carousel );
+	const [ viewMode, setViewMode ] = useState( initialViewMode );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );

package/src/components/block-patterns-list/index.js

@@ -6,6 +6,7 @@ import {
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
+	Tooltip,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -16,7 +17,20 @@ import { __ } from '@wordpress/i18n';
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 
-function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
+const WithToolTip = ( { showTooltip, title, children } ) => {
+	if ( showTooltip ) {
+		return <Tooltip text={ title }>{ children }</Tooltip>;
+	}
+	return <>{ children }</>;
+};
+
+function BlockPattern( {
+	isDraggable,
+	pattern,
+	onClick,
+	composite,
+	showTooltip,
+} ) {
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
@@ -34,30 +48,37 @@ function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
 					onDragStart={ onDragStart }
 					onDragEnd={ onDragEnd }
 				>
-					<CompositeItem
-						role="option"
-						as="div"
-						{ ...composite }
-						className="block-editor-block-patterns-list__item"
-						onClick={ () => onClick( pattern, blocks ) }
-						aria-label={ pattern.title }
-						aria-describedby={
-							pattern.description ? descriptionId : undefined
-						}
+					<WithToolTip
+						showTooltip={ showTooltip }
+						title={ pattern.title }
 					>
-						<BlockPreview
-							blocks={ blocks }
-							viewportWidth={ viewportWidth }
-						/>
-						<div className="block-editor-block-patterns-list__item-title">
-							{ pattern.title }
-						</div>
-						{ !! pattern.description && (
-							<VisuallyHidden id={ descriptionId }>
-								{ pattern.description }
-							</VisuallyHidden>
-						) }
-					</CompositeItem>
+						<CompositeItem
+							role="option"
+							as="div"
+							{ ...composite }
+							className="block-editor-block-patterns-list__item"
+							onClick={ () => onClick( pattern, blocks ) }
+							aria-label={ pattern.title }
+							aria-describedby={
+								pattern.description ? descriptionId : undefined
+							}
+						>
+							<BlockPreview
+								blocks={ blocks }
+								viewportWidth={ viewportWidth }
+							/>
+							{ ! showTooltip && (
+								<div className="block-editor-block-patterns-list__item-title">
+									{ pattern.title }
+								</div>
+							) }
+							{ !! pattern.description && (
+								<VisuallyHidden id={ descriptionId }>
+									{ pattern.description }
+								</VisuallyHidden>
+							) }
+						</CompositeItem>
+					</WithToolTip>
 				</div>
 			) }
 		</InserterDraggableBlocks>
@@ -77,6 +98,7 @@ function BlockPatternList( {
 	onClickPattern,
 	orientation,
 	label = __( 'Block Patterns' ),
+	showTitlesAsTooltip,
 } ) {
 	const composite = useCompositeState( { orientation } );
 	return (
@@ -95,6 +117,7 @@ function BlockPatternList( {
 						onClick={ onClickPattern }
 						isDraggable={ isDraggable }
 						composite={ composite }
+						showTooltip={ showTitlesAsTooltip }
 					/>
 				) : (
 					<BlockPatternPlaceholder key={ pattern.name } />

package/src/components/block-preview/README.md

@@ -28,6 +28,8 @@ Width of the preview container in pixels. Controls at what size the blocks will
 
 `viewportWidth` can be used to simulate how blocks look on different device sizes or to make sure make sure multiple previews will be rendered with the same scale, regardless of their content.
 
+Set `viewportWidth` to `0` to make the viewport the same width as the container.
+
 ### `__experimentalPadding`
 
 -   **Type** `Int`
@@ -35,16 +37,19 @@ Width of the preview container in pixels. Controls at what size the blocks will
 
 Padding for the preview container body.
 
-### `__experimentalLive`
-
--   **Type** `Boolean`
--   **Default:** `false`
+### `__experimentalStyles`
 
-Enables displaying previews without an iframe container.
+List of additional editor styles to load into the preview iframe. Each object
+should contain a `css` attribute. See `EditorStyles` for more info.
 
-### `__experimentalOnClick`
-
--   **Type** `Function`
--   **Default:** `undefined`
+```jsx
+<BlockPreview
+    blocks={ blocks }
+	__experimentalStyles={ [
+		{ css: '.wp-block { margin: 16px; }' },
+	] }
+/>
+```
 
-Use this callback in combination with `__experimentalLive`. The callback is attached to the preview container element.
+-   **Type** `Int`
+-   **Default** `[]`

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

@@ -25,7 +25,12 @@ function ScaledBlockPreview( {
 	containerWidth,
 	__experimentalPadding,
 	__experimentalMinHeight,
+	__experimentalStyles,
 } ) {
+	if ( ! viewportWidth ) {
+		viewportWidth = containerWidth;
+	}
+
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
 	const { styles, assets, duotone } = useSelect( ( select ) => {
@@ -42,6 +47,7 @@ function ScaledBlockPreview( {
 		if ( styles ) {
 			return [
 				...styles,
+				...__experimentalStyles,
 				{
 					css: 'body{height:auto;overflow:hidden;}',
 					__unstableType: 'presets',
@@ -50,7 +56,7 @@ function ScaledBlockPreview( {
 		}
 
 		return styles;
-	}, [ styles ] );
+	}, [ styles, __experimentalStyles ] );
 
 	const svgFilters = useMemo( () => {
 		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];

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

@@ -0,0 +1,4 @@
+// Hide inserter from previews.
+.block-editor-block-preview__content-iframe .block-list-appender {
+	display: none;
+}

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

@@ -14,7 +14,6 @@ import { memo, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import BlockEditorProvider from '../provider';
-import LiveBlockPreview from './live';
 import AutoHeightBlockPreview from './auto';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
@@ -23,9 +22,8 @@ export function BlockPreview( {
 	blocks,
 	__experimentalPadding = 0,
 	viewportWidth = 1200,
-	__experimentalLive = false,
-	__experimentalOnClick,
 	__experimentalMinHeight,
+	__experimentalStyles = [],
 } ) {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
@@ -44,15 +42,12 @@ export function BlockPreview( {
 	}
 	return (
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
-			{ __experimentalLive ? (
-				<LiveBlockPreview onClick={ __experimentalOnClick } />
-			) : (
-				<AutoHeightBlockPreview
-					viewportWidth={ viewportWidth }
-					__experimentalPadding={ __experimentalPadding }
-					__experimentalMinHeight={ __experimentalMinHeight }
-				/>
-			) }
+			<AutoHeightBlockPreview
+				viewportWidth={ viewportWidth }
+				__experimentalPadding={ __experimentalPadding }
+				__experimentalMinHeight={ __experimentalMinHeight }
+				__experimentalStyles={ __experimentalStyles }
+			/>
 		</BlockEditorProvider>
 	);
 }

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

@@ -29,19 +29,12 @@
 		min-height: auto;
 
 		.block-editor-block-list__insertion-point,
-		.block-editor-block-drop-zone,
-		.reusable-block-indicator,
 		.block-list-appender {
 			display: none;
 		}
 	}
 }
 
-// Hide inserter from previews.
-.block-editor-block-preview__content-iframe .block-list-appender {
-	display: none;
-}
-
 .block-editor-block-preview__live-content {
 	* {
 		pointer-events: none;

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

@@ -17,36 +17,6 @@ import {
  */
 import { useBlockPreview } from '../';
 
-jest.mock( '@wordpress/dom', () => {
-	const focus = jest.requireActual( '../../../../../dom/src' ).focus;
-
-	return {
-		focus: {
-			...focus,
-			focusable: {
-				...focus.focusable,
-				find( context ) {
-					// In JSDOM, all elements have zero'd widths and height.
-					// This is a metric for focusable's `isVisible`, so find
-					// and apply an arbitrary non-zero width.
-					Array.from( context.querySelectorAll( '*' ) ).forEach(
-						( element ) => {
-							Object.defineProperties( element, {
-								offsetWidth: {
-									get: () => 1,
-									configurable: true,
-								},
-							} );
-						}
-					);
-
-					return focus.focusable.find( ...arguments );
-				},
-			},
-		},
-	};
-} );
-
 jest.useRealTimers();
 
 describe( 'useBlockPreview', () => {
@@ -78,14 +48,19 @@ describe( 'useBlockPreview', () => {
 			blocks,
 			props: { className },
 		} );
-		return <div { ...blockPreviewProps } />;
+		return (
+			<div
+				{ ...blockPreviewProps }
+				data-testid="block-preview-component"
+			/>
+		);
 	}
 
 	it( 'will render a block preview with minimal nesting', async () => {
 		const blocks = [];
 		blocks.push( createBlock( 'core/test-block' ) );
 
-		const { container } = render(
+		render(
 			<BlockPreviewComponent
 				className="test-container-classname"
 				blocks={ blocks }
@@ -99,12 +74,20 @@ describe( 'useBlockPreview', () => {
 		);
 		expect( previewedBlockContents ).toBeInTheDocument();
 
+		const blockPreviewComponent = screen.getByTestId(
+			'block-preview-component'
+		);
+
 		// Ensure the block preview class names are merged with the component's class name.
-		expect( container.firstChild.className ).toBe(
-			'test-container-classname block-editor-block-preview__live-content components-disabled'
+		expect( blockPreviewComponent ).toHaveClass(
+			'block-editor-block-preview__live-content'
+		);
+		expect( blockPreviewComponent ).toHaveClass(
+			'test-container-classname'
 		);
+		expect( blockPreviewComponent ).toHaveClass( 'components-disabled' );
 
 		// Ensure there is no nesting between the parent component and rendered blocks.
-		expect( container.firstChild.firstChild ).toBe( previewedBlock );
+		expect( blockPreviewComponent ).toContainElement( previewedBlock );
 	} );
 } );

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

@@ -43,12 +43,12 @@ describe( 'BlockSelectionClearer component', () => {
 		} ) );
 
 		render(
-			<BlockSelectionClearer>
+			<BlockSelectionClearer data-testid="selection-clearer">
 				<button>Not a block</button>
 			</BlockSelectionClearer>
 		);
-		const button = screen.getByRole( 'button' );
-		fireEvent.mouseDown( button.parentElement );
+
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
 		expect( mockClearSelectedBlock ).toBeCalled();
 	} );
@@ -64,12 +64,12 @@ describe( 'BlockSelectionClearer component', () => {
 		} ) );
 
 		render(
-			<BlockSelectionClearer>
+			<BlockSelectionClearer data-testid="selection-clearer">
 				<button>Not a block</button>
 			</BlockSelectionClearer>
 		);
-		const button = screen.getByRole( 'button' );
-		fireEvent.mouseDown( button.parentElement );
+
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
 		expect( mockClearSelectedBlock ).toBeCalled();
 	} );
@@ -82,12 +82,12 @@ describe( 'BlockSelectionClearer component', () => {
 		} ) );
 
 		render(
-			<BlockSelectionClearer>
+			<BlockSelectionClearer data-testid="selection-clearer">
 				<button>Not a block</button>
 			</BlockSelectionClearer>
 		);
-		const button = screen.getByRole( 'button' );
-		fireEvent.mouseDown( button.parentElement );
+
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
 		expect( mockClearSelectedBlock ).not.toBeCalled();
 	} );
@@ -106,12 +106,12 @@ describe( 'BlockSelectionClearer component', () => {
 		} ) );
 
 		render(
-			<BlockSelectionClearer>
+			<BlockSelectionClearer data-testid="selection-clearer">
 				<button>Not a block</button>
 			</BlockSelectionClearer>
 		);
-		const button = screen.getByRole( 'button' );
-		fireEvent.mouseDown( button.parentElement );
+
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
 		expect( mockClearSelectedBlock ).not.toBeCalled();
 	} );

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

@@ -189,6 +189,11 @@ export function BlockSettingsDropdown( {
 		},
 	} );
 
+	// This can occur when the selected block (the parent)
+	// displays child blocks within a List View.
+	const parentBlockIsSelected =
+		selectedBlockClientIds?.includes( firstParentClientId );
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -221,26 +226,33 @@ export function BlockSettingsDropdown( {
 								<__unstableBlockSettingsMenuFirstItem.Slot
 									fillProps={ { onClose } }
 								/>
-								{ !! firstParentClientId && (
-									<MenuItem
-										{ ...showParentOutlineGestures }
-										ref={ selectParentButtonRef }
-										icon={
-											<BlockIcon
-												icon={ parentBlockType.icon }
-											/>
-										}
-										onClick={ () =>
-											selectBlock( firstParentClientId )
-										}
-									>
-										{ sprintf(
-											/* translators: %s: Name of the block's parent. */
-											__( 'Select parent block (%s)' ),
-											parentBlockType.title
-										) }
-									</MenuItem>
-								) }
+								{ ! parentBlockIsSelected &&
+									!! firstParentClientId && (
+										<MenuItem
+											{ ...showParentOutlineGestures }
+											ref={ selectParentButtonRef }
+											icon={
+												<BlockIcon
+													icon={
+														parentBlockType.icon
+													}
+												/>
+											}
+											onClick={ () =>
+												selectBlock(
+													firstParentClientId
+												)
+											}
+										>
+											{ sprintf(
+												/* translators: %s: Name of the block's parent. */
+												__(
+													'Select parent block (%s)'
+												),
+												parentBlockType.title
+											) }
+										</MenuItem>
+									) }
 								{ count === 1 && (
 									<BlockHTMLConvertButton
 										clientId={ firstBlockClientId }

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

@@ -15,6 +15,7 @@ import { copy } from '@wordpress/icons';
  * Internal dependencies
  */
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
+import { act } from 'react-test-renderer';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../block-title/use-block-display-title', () =>
@@ -210,6 +211,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				} ),
 				'[ArrowDown]'
 			);
+			await act( () => Promise.resolve() );
 
 			expect(
 				screen.getByRole( 'button', {
@@ -252,6 +254,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 					expanded: false,
 				} )
 			);
+			await act( () => Promise.resolve() );
 
 			expect(
 				screen.getByRole( 'button', {
@@ -282,6 +285,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 					expanded: false,
 				} )
 			);
+			await act( () => Promise.resolve() );
 
 			expect(
 				within(

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

@@ -9,7 +9,12 @@ import classnames from 'classnames';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import {
+	getBlockType,
+	hasBlockSupport,
+	isReusableBlock,
+	isTemplatePart,
+} from '@wordpress/blocks';
 import { ToolbarGroup } from '@wordpress/components';
 
 /**
@@ -109,11 +114,13 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	const shouldShowVisualToolbar = isValid && isVisual;
 	const isMultiToolbar = blockClientIds.length > 1;
+	const isSynced =
+		isReusableBlock( blockType ) || isTemplatePart( blockType );
 
-	const classes = classnames(
-		'block-editor-block-toolbar',
-		shouldShowMovers && 'is-showing-movers'
-	);
+	const classes = classnames( 'block-editor-block-toolbar', {
+		'is-showing-movers': shouldShowMovers,
+		'is-synced': isSynced,
+	} );
 
 	return (
 		<div className={ classes }>

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

@@ -39,6 +39,16 @@
 		border-right: $border-width solid $gray-300;
 	}
 
+	&.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
+		color: var(--wp-block-synced-color);
+	}
+
+	&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
+		&:disabled .block-editor-block-icon.has-colors {
+			color: var(--wp-block-synced-color);
+		}
+	}
+
 	> :last-child,
 	> :last-child .components-toolbar-group,
 	> :last-child .components-toolbar {