@wordpress/block-editor 10.4.0 → 11.0.0

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-popover/style.scss

@@ -17,7 +17,7 @@
 	}
 
 	// Enable pointer events for the toolbar's content.
-	&:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content {
+	&:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content {
 		* {
 			pointer-events: all;
 		}

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-styles/utils.js

@@ -11,7 +11,7 @@ import { _x } from '@wordpress/i18n';
 /**
  * Returns the active style from the given className.
  *
- * @param {Array}  styles    Block style variations.
+ * @param {Array}  styles    Block styles.
  * @param {string} className Class name
  *
  * @return {Object?} The active style.
@@ -59,7 +59,7 @@ export function replaceActiveStyle( className, activeStyle, newStyle ) {
  * act as a fallback for when there is no active style applied to a block. The default item also serves
  * as a switch on the frontend to deactivate non-default styles.
  *
- * @param {Array} styles Block style variations.
+ * @param {Array} styles Block styles.
  *
  * @return {Array<Object?>}        The style collection.
  */
@@ -83,7 +83,7 @@ export function getRenderedStyles( styles ) {
 /**
  * Returns a style object from a collection of styles where that style object is the default block style.
  *
- * @param {Array} styles Block style variations.
+ * @param {Array} styles Block styles.
  *
  * @return {Object?}        The default style object, if found.
  */

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

@@ -29,7 +29,7 @@ import PatternTransformationsMenu from './pattern-transformations-menu';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
 export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
-	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );
 	const {
 		possibleBlockTransformations,
@@ -89,12 +89,27 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
 
+	function selectForMultipleBlocks( insertedBlocks ) {
+		if ( insertedBlocks.length > 1 ) {
+			multiSelect(
+				insertedBlocks[ 0 ].clientId,
+				insertedBlocks[ insertedBlocks.length - 1 ].clientId
+			);
+		}
+	}
+
 	// Simple block tranformation based on the `Block Transforms` API.
-	const onBlockTransform = ( name ) =>
-		replaceBlocks( clientIds, switchToBlockType( blocks, name ) );
+	function onBlockTransform( name ) {
+		const newBlocks = switchToBlockType( blocks, name );
+		replaceBlocks( clientIds, newBlocks );
+		selectForMultipleBlocks( newBlocks );
+	}
+
 	// Pattern transformation through the `Patterns` API.
-	const onPatternTransform = ( transformedBlocks ) =>
+	function onPatternTransform( transformedBlocks ) {
 		replaceBlocks( clientIds, transformedBlocks );
+		selectForMultipleBlocks( transformedBlocks );
+	}
 
 	/**
 	 * The `isTemplate` check is a stopgap solution here.

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 {