@wordpress/block-editor 10.5.0 → 11.1.0

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

@@ -28,6 +28,7 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
+	showTitles,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -67,6 +68,7 @@ const SetupContent = ( {
 						pattern={ pattern }
 						onSelect={ onBlockPatternSelect }
 						composite={ composite }
+						showTitles={ showTitles }
 					/>
 				) ) }
 			</Composite>
@@ -74,7 +76,7 @@ const SetupContent = ( {
 	);
 };
 
-function BlockPattern( { pattern, onSelect, composite } ) {
+function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
 	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
@@ -98,12 +100,17 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 				/>
+				{ showTitles && (
+					<div className={ `${ baseClassName }__item-title` }>
+						{ pattern.title }
+					</div>
+				) }
+				{ !! description && (
+					<VisuallyHidden id={ descriptionId }>
+						{ description }
+					</VisuallyHidden>
+				) }
 			</CompositeItem>
-			{ !! description && (
-				<VisuallyHidden id={ descriptionId }>
-					{ description }
-				</VisuallyHidden>
-			) }
 		</div>
 	);
 }
@@ -138,8 +145,10 @@ const BlockPatternSetup = ( {
 	blockName,
 	filterPatternsFn,
 	onBlockPatternSelect,
+	initialViewMode = VIEWMODES.carousel,
+	showTitles = false,
 } ) => {
-	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 );
@@ -164,6 +173,7 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
+					showTitles={ showTitles }
 				/>
 				<SetupToolbar
 					viewMode={ viewMode }

package/src/components/block-pattern-setup/style.scss

@@ -6,8 +6,9 @@
 	width: 100%;
 	border-radius: $radius-block-ui;
 
-	// TODO change to check parent.
 	&.view-mode-grid {
+		padding-top: $grid-unit-05;
+
 		.block-editor-block-pattern-setup__toolbar {
 			justify-content: center;
 		}
@@ -30,10 +31,33 @@
 				cursor: pointer;
 			}
 
+			.block-editor-block-pattern-setup-list__item {
+				&:hover .block-editor-block-preview__container {
+					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+				}
+
+				&:focus .block-editor-block-preview__container {
+					box-shadow: inset 0 0 0 1px $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;
+				}
+				&:hover .block-editor-block-pattern-setup-list__item-title,
+				&:focus .block-editor-block-pattern-setup-list__item-title {
+					color: var(--wp-admin-theme-color);
+				}
+			}
 			.block-editor-block-pattern-setup-list__list-item {
 				break-inside: avoid-column;
 				margin-bottom: $grid-unit-30;
 
+				.block-editor-block-pattern-setup-list__item-title {
+					padding-top: $grid-unit-10;
+					font-size: 12px;
+					text-align: center;
+					cursor: pointer;
+				}
+
 				.block-editor-block-preview__container {
 					min-height: 100px;
 					border-radius: $radius-block-ui;
@@ -84,6 +108,7 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
+		height: 100%;
 		box-sizing: border-box;
 
 		.carousel-container {
@@ -91,6 +116,7 @@
 			position: relative;
 			padding: 0;
 			margin: 0;
+			height: 100%;
 			list-style: none;
 			transform-style: preserve-3d;
 			* {
@@ -100,6 +126,8 @@
 				position: absolute;
 				top: 0;
 				width: 100%;
+				height: 100%;
+				background-color: $white;
 				margin: auto;
 				padding: 0;
 				transition: transform 0.5s, z-index 0.5s;

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { ScrollView } from 'react-native';
-import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,7 +34,7 @@ function BlockStyles( { clientId, url } ) {
 
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const renderedStyles = find( styles, 'isDefault' )
+	const renderedStyles = styles?.find( ( style ) => style.isDefault )
 		? styles
 		: [
 				{

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

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -23,13 +19,15 @@ export function getActiveStyle( styles, className ) {
 		}
 
 		const potentialStyleName = style.substring( 9 );
-		const activeStyle = find( styles, { name: potentialStyleName } );
+		const activeStyle = styles?.find(
+			( { name } ) => name === potentialStyleName
+		);
 		if ( activeStyle ) {
 			return activeStyle;
 		}
 	}
 
-	return find( styles, 'isDefault' );
+	return getDefaultStyle( styles );
 }
 
 /**
@@ -88,5 +86,5 @@ export function getRenderedStyles( styles ) {
  * @return {Object?}        The default style object, if found.
  */
 export function getDefaultStyle( styles ) {
-	return find( styles, 'isDefault' );
+	return styles?.find( ( style ) => style.isDefault );
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -16,6 +16,8 @@ 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' )
@@ -210,6 +212,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				} ),
 				'[ArrowDown]'
 			);
+			await act( () => Promise.resolve() );
 
 			expect(
 				screen.getByRole( 'button', {
@@ -252,6 +255,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 					expanded: false,
 				} )
 			);
+			await act( () => Promise.resolve() );
 
 			expect(
 				screen.getByRole( 'button', {
@@ -282,6 +286,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 					expanded: false,
 				} )
 			);
+			await act( () => Promise.resolve() );
 
 			expect(
 				within(