@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from 'test/helpers';
 
 /**
  * Internal dependencies
@@ -24,8 +24,8 @@ describe( 'Block Mover Picker', () => {
 			rootClientId: '',
 			isStackedHorizontally: true,
 		};
-		const wrapper = shallow( <BlockMover { ...props } /> );
-		expect( wrapper ).toBeTruthy();
+		const screen = render( <BlockMover { ...props } /> );
+		expect( screen.container ).toBeTruthy();
 	} );
 
 	it( 'should match snapshot', () => {
@@ -43,7 +43,7 @@ describe( 'Block Mover Picker', () => {
 			rootClientId: '',
 			isStackedHorizontally: true,
 		};
-		const wrapper = shallow( <BlockMover { ...props } /> );
-		expect( wrapper ).toMatchSnapshot();
+		const screen = render( <BlockMover { ...props } /> );
+		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 } );

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

@@ -28,35 +28,23 @@ 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.
 
-### \_\_experimentalScalingDelay
+### `__experimentalPadding`
 
 -   **Type** `Int`
--   **Default** `100ms`
+-   **Default** `undefined`
 
-Defines a delay to be applied before calculating the scale factor and position of the preview block.
+Padding for the preview container body.
 
-### `__experimentalOnReady`
+### `__experimentalLive`
+
+-   **Type** `Boolean`
+-   **Default:** `false`
+
+Enables displaying previews without an iframe container.
+
+### `__experimentalOnClick`
 
 -   **Type** `Function`
--   **Default:** `noop`
-
-Use this callback as an opportunity to know when the preview is ready. The callback will pass, if available:
-
--   `scale`: the scale factor
--   `position`: offsets position (x, y)
--   `previewContainerRef`: DOM element reference
--   `inlineStyles`: Inline styles applied to the preview container
-
-Eg:
-
-```es6
-<BlockPreview
-	blocks={ blocks }
-	__experimentalOnReady={ ( { scale, previewContainerRef, position } ) => {
-		console.log(
-			`scale ${ scale } applied to the <${ previewContainerRef.current.tagName }> element.`
-		);
-		console.log( `at x: ${ position.x }, y: ${ position.y } position.` );
-	} }
-/>
-```
+-   **Default:** `undefined`
+
+Use this callback in combination with `__experimentalLive`. The callback is attached to the preview container element.

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

@@ -28,8 +28,12 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 		contentResizeListener,
 		{ height: contentHeight },
 	] = useResizeObserver();
-	const styles = useSelect( ( select ) => {
-		return select( store ).getSettings().styles;
+	const { styles, assets } = useSelect( ( select ) => {
+		const settings = select( store ).getSettings();
+		return {
+			styles: settings.styles,
+			assets: settings.__unstableResolvedAssets,
+		};
 	}, [] );
 
 	// Avoid scrollbars for pattern previews.
@@ -68,6 +72,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 			>
 				<Iframe
 					head={ <EditorStyles styles={ editorStyles } /> }
+					assets={ assets }
 					contentRef={ useRefEffect( ( bodyElement ) => {
 						const {
 							ownerDocument: { documentElement },

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

@@ -47,6 +47,8 @@ jest.mock( '@wordpress/dom', () => {
 	};
 } );
 
+jest.useRealTimers();
+
 describe( 'useBlockPreview', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block', {

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

@@ -43,6 +43,7 @@ function BottomSheetSettings( {
 			hideHeader
 			contentStyle={ styles.content }
 			hasNavigation
+			testID="block-settings-modal"
 			{ ...props }
 		>
 			<BottomSheet.NavigationContainer animate main>

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

@@ -1,182 +1,162 @@
 /**
  * External dependencies
  */
-import { find, noop } from 'lodash';
+import { noop, debounce } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useState, useLayoutEffect } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
 import { ENTER, SPACE } from '@wordpress/keycodes';
-import { _x } from '@wordpress/i18n';
 import {
-	getBlockType,
-	cloneBlock,
-	getBlockFromExample,
-	store as blocksStore,
-} from '@wordpress/blocks';
+	Button,
+	__experimentalText as Text,
+	Slot,
+	Fill,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { getActiveStyle, replaceActiveStyle } from './utils';
-import BlockPreview from '../block-preview';
-import { store as blockEditorStore } from '../../store';
+import BlockStylesPreviewPanel from './preview-panel';
+import useStylesForBlocks from './use-styles-for-block';
 
-const EMPTY_OBJECT = {};
-
-function useGenericPreviewBlock( block, type ) {
-	return useMemo( () => {
-		const example = type?.example;
-		const blockName = type?.name;
-
-		if ( example && blockName ) {
-			return getBlockFromExample( blockName, {
-				attributes: example.attributes,
-				innerBlocks: example.innerBlocks,
-			} );
-		}
+function BlockStylesPreviewPanelSlot( { scope } ) {
+	return <Slot name={ `BlockStylesPreviewPanel/${ scope }` } />;
+}
 
-		if ( block ) {
-			return cloneBlock( block );
-		}
-	}, [ type?.example ? block?.name : block, type ] );
+function BlockStylesPreviewPanelFill( { children, scope, ...props } ) {
+	return (
+		<Fill name={ `BlockStylesPreviewPanel/${ scope }` }>
+			<div { ...props }>{ children }</div>
+		</Fill>
+	);
 }
 
+// Top position (in px) of the Block Styles container
+// relative to the editor pane.
+// The value is the equivalent of the container's right position.
+const DEFAULT_POSITION_TOP = 16;
+
+// Block Styles component for the Settings Sidebar.
 function BlockStyles( {
 	clientId,
 	onSwitch = noop,
 	onHoverClassName = noop,
-	itemRole,
+	scope,
 } ) {
-	const selector = ( select ) => {
-		const { getBlock } = select( blockEditorStore );
-		const block = getBlock( clientId );
-
-		if ( ! block ) {
-			return EMPTY_OBJECT;
-		}
-
-		const blockType = getBlockType( block.name );
-		const { getBlockStyles } = select( blocksStore );
-		return {
-			block,
-			type: blockType,
-			styles: getBlockStyles( block.name ),
-			className: block.attributes.className || '',
-		};
-	};
-
-	const { styles, block, type, className } = useSelect( selector, [
+	const {
+		onSelect,
+		stylesToRender,
+		activeStyle,
+		genericPreviewBlock,
+		className: previewClassName,
+	} = useStylesForBlocks( {
 		clientId,
-	] );
-
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const genericPreviewBlock = useGenericPreviewBlock( block, type );
-
-	if ( ! styles || styles.length === 0 ) {
+		onSwitch,
+	} );
+	const [ hoveredStyle, setHoveredStyle ] = useState( null );
+	const [ containerScrollTop, setContainerScrollTop ] = useState( 0 );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
+	useLayoutEffect( () => {
+		const scrollContainer = document.querySelector(
+			'.interface-interface-skeleton__content'
+		);
+		const scrollTop = scrollContainer?.scrollTop || 0;
+		setContainerScrollTop( scrollTop + DEFAULT_POSITION_TOP );
+	}, [ hoveredStyle ] );
+
+	if ( ! stylesToRender || stylesToRender.length === 0 ) {
 		return null;
 	}
 
-	const renderedStyles = find( styles, 'isDefault' )
-		? styles
-		: [
-				{
-					name: 'default',
-					label: _x( 'Default', 'block style' ),
-					isDefault: true,
-				},
-				...styles,
-		  ];
+	const debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );
 
-	const activeStyle = getActiveStyle( renderedStyles, className );
-	return (
-		<div className="block-editor-block-styles">
-			{ renderedStyles.map( ( style ) => {
-				const styleClassName = replaceActiveStyle(
-					className,
-					activeStyle,
-					style
-				);
-				return (
-					<BlockStyleItem
-						genericPreviewBlock={ genericPreviewBlock }
-						viewportWidth={ type.example?.viewportWidth ?? 500 }
-						className={ className }
-						isActive={ activeStyle === style }
-						key={ style.name }
-						onSelect={ () => {
-							updateBlockAttributes( clientId, {
-								className: styleClassName,
-							} );
-							onHoverClassName( null );
-							onSwitch();
-						} }
-						onBlur={ () => onHoverClassName( null ) }
-						onHover={ () => onHoverClassName( styleClassName ) }
-						style={ style }
-						styleClassName={ styleClassName }
-						itemRole={ itemRole }
-					/>
-				);
-			} ) }
-		</div>
-	);
-}
+	const onSelectStylePreview = ( style ) => {
+		onSelect( style );
+		onHoverClassName( null );
+		setHoveredStyle( null );
+		debouncedSetHoveredStyle.cancel();
+	};
 
-function BlockStyleItem( {
-	genericPreviewBlock,
-	viewportWidth,
-	style,
-	isActive,
-	onBlur,
-	onHover,
-	onSelect,
-	styleClassName,
-	itemRole,
-} ) {
-	const previewBlocks = useMemo( () => {
-		return {
-			...genericPreviewBlock,
-			attributes: {
-				...genericPreviewBlock.attributes,
-				className: styleClassName,
-			},
-		};
-	}, [ genericPreviewBlock, styleClassName ] );
+	const styleItemHandler = ( item ) => {
+		if ( hoveredStyle === item ) {
+			debouncedSetHoveredStyle.cancel();
+			return;
+		}
+		debouncedSetHoveredStyle( item );
+		onHoverClassName( item?.name ?? null );
+	};
 
 	return (
-		<div
-			key={ style.name }
-			className={ classnames( 'block-editor-block-styles__item', {
-				'is-active': isActive,
-			} ) }
-			onClick={ () => onSelect() }
-			onKeyDown={ ( event ) => {
-				if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
-					event.preventDefault();
-					onSelect();
-				}
-			} }
-			onMouseEnter={ onHover }
-			onMouseLeave={ onBlur }
-			role={ itemRole || 'button' }
-			tabIndex="0"
-			aria-label={ style.label || style.name }
-		>
-			<div className="block-editor-block-styles__item-preview">
-				<BlockPreview
-					viewportWidth={ viewportWidth }
-					blocks={ previewBlocks }
-				/>
-			</div>
-			<div className="block-editor-block-styles__item-label">
-				{ style.label || style.name }
+		<div className="block-editor-block-styles">
+			<div className="block-editor-block-styles__variants">
+				{ stylesToRender.map( ( style ) => {
+					const buttonText = style.label || style.name;
+
+					return (
+						<Button
+							className={ classnames(
+								'block-editor-block-styles__item',
+								{
+									'is-active':
+										activeStyle.name === style.name,
+								}
+							) }
+							key={ style.name }
+							variant="secondary"
+							label={ buttonText }
+							onMouseEnter={ () => styleItemHandler( style ) }
+							onFocus={ () => styleItemHandler( style ) }
+							onMouseLeave={ () => styleItemHandler( null ) }
+							onBlur={ () => styleItemHandler( null ) }
+							onKeyDown={ ( event ) => {
+								if (
+									ENTER === event.keyCode ||
+									SPACE === event.keyCode
+								) {
+									event.preventDefault();
+									onSelectStylePreview( style );
+								}
+							} }
+							onClick={ () => onSelectStylePreview( style ) }
+							role="button"
+							tabIndex="0"
+						>
+							<Text
+								as="span"
+								limit={ 12 }
+								ellipsizeMode="tail"
+								className="block-editor-block-styles__item-text"
+								truncate
+							>
+								{ buttonText }
+							</Text>
+						</Button>
+					);
+				} ) }
 			</div>
+			{ hoveredStyle && ! isMobileViewport && (
+				<BlockStylesPreviewPanelFill
+					scope={ scope }
+					className="block-editor-block-styles__preview-panel"
+					style={ { top: containerScrollTop } }
+					onMouseLeave={ () => styleItemHandler( null ) }
+				>
+					<BlockStylesPreviewPanel
+						activeStyle={ activeStyle }
+						className={ previewClassName }
+						genericPreviewBlock={ genericPreviewBlock }
+						style={ hoveredStyle }
+					/>
+				</BlockStylesPreviewPanelFill>
+			) }
 		</div>
 	);
 }
 
+BlockStyles.Slot = BlockStylesPreviewPanelSlot;
 export default BlockStyles;

package/src/components/block-styles/menu-items.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { MenuItem, __experimentalText as Text } from '@wordpress/components';
+import { check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import useStylesForBlocks from './use-styles-for-block';
+
+export default function BlockStylesMenuItems( { clientId, onSwitch = noop } ) {
+	const { onSelect, stylesToRender, activeStyle } = useStylesForBlocks( {
+		clientId,
+		onSwitch,
+	} );
+
+	if ( ! stylesToRender || stylesToRender.length === 0 ) {
+		return null;
+	}
+	return (
+		<>
+			{ stylesToRender.map( ( style ) => {
+				const menuItemText = style.label || style.name;
+				return (
+					<MenuItem
+						key={ style.name }
+						icon={ activeStyle.name === style.name ? check : null }
+						onClick={ () => onSelect( style ) }
+					>
+						<Text
+							as="span"
+							limit={ 18 }
+							ellipsizeMode="tail"
+							truncate
+						>
+							{ menuItemText }
+						</Text>
+					</MenuItem>
+				);
+			} ) }
+		</>
+	);
+}

package/src/components/block-styles/preview-panel.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InserterPreviewPanel from '../inserter/preview-panel';
+import { replaceActiveStyle } from './utils';
+
+export default function BlockStylesPreviewPanel( {
+	genericPreviewBlock,
+	style,
+	className,
+	activeStyle,
+} ) {
+	const styleClassName = replaceActiveStyle( className, activeStyle, style );
+	const previewBlocks = useMemo( () => {
+		return {
+			...genericPreviewBlock,
+			title: style.label || style.name,
+			description: style.description,
+			initialAttributes: {
+				...genericPreviewBlock.attributes,
+				className:
+					styleClassName +
+					' block-editor-block-styles__block-preview-container',
+			},
+		};
+	}, [ genericPreviewBlock, styleClassName ] );
+
+	return (
+		<InserterPreviewPanel item={ previewBlocks } isStylePreview={ true } />
+	);
+}

package/src/components/block-styles/preview.native.js

@@ -39,10 +39,13 @@ function StylePreview( { onPress, isActive, style, url } ) {
 
 	useEffect( () => {
 		onLayout();
-		Dimensions.addEventListener( 'change', onLayout );
+		const dimensionsChangeSubscription = Dimensions.addEventListener(
+			'change',
+			onLayout
+		);
 
 		return () => {
-			Dimensions.removeEventListener( 'change', onLayout );
+			dimensionsChangeSubscription.remove();
 		};
 	}, [] );
 

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

@@ -1,67 +1,75 @@
-.block-editor-block-styles {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
+.block-editor-block-styles + .default-style-picker__default-switcher {
+	margin-top: $grid-unit-20;
 }
 
-.block-editor-block-styles__item {
-	width: calc(50% - #{ $grid-unit-05 });
-	margin: $grid-unit-05 0;
-	flex-shrink: 0;
-	cursor: pointer;
-	overflow: hidden;
-	border-radius: $radius-block-ui;
-	padding: $grid-unit-05 * 1.5;
-	display: flex;
-	flex-direction: column;
-
-	&:focus {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.block-editor-block-styles__preview-panel {
+	display: none;
+	position: absolute;
+	right: $grid-unit-20;
+	left: auto;
+	// Same layer as the sidebar from which it's triggered.
+	z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
 
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
+	// Only show in narrow widths.
+	@include break-medium() {
+		display: block;
 	}
 
-	&:hover .block-editor-block-styles__item-preview {
-		border-color: var(--wp-admin-theme-color);
+	// Overrides for InserterPreviewPanel.
+	.block-editor-inserter__preview-container {
+		left: auto;
+		right: auto;
+		top: auto;
+		position: static;
 	}
 
-	&.is-active {
-		.block-editor-block-styles__item-label {
-			font-weight: bold;
-		}
-
-		.block-editor-block-styles__item-preview {
-			margin: 0;
-			border: 2px solid $gray-900;
-		}
+	.block-editor-block-card__title.block-editor-block-card__title {
+		margin: 0;
 	}
-
-	.block-editor-block-preview__container {
-		cursor: inherit;
+	.block-editor-block-icon {
+		display: none;
 	}
 }
 
-// Show a little preview thumbnail for style variations.
-.block-editor-block-styles__item-preview {
-	outline: $border-width solid transparent; // Shown in Windows High Contrast mode.
-	padding: 0;
-	margin: 2px;
-	border-radius: $radius-block-ui;
+.block-editor-block-styles__variants {
 	display: flex;
-	overflow: hidden;
-	background: $white;
-	align-items: center;
-	flex-grow: 1;
-	min-height: 80px;
-	max-height: 160px;
-}
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: $grid-unit-10;
+
+	.block-editor-block-styles__item {
+		color: $gray-800;
+		box-shadow: inset 0 0 0 1px $gray-400;
+		display: inline-block;
+		width: calc(50% - #{$grid-unit-05});
+
+		&:focus,
+		&:hover {
+			color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+		}
+
+		&.is-active,
+		&.is-active:hover {
+			background-color: $gray-800;
+			box-shadow: none;
+		}
+
+		&.is-active .block-editor-block-styles__item-text,
+		&.is-active:hover .block-editor-block-styles__item-text {
+			color: $white;
+		}
 
-.block-editor-block-switcher__styles__menugroup {
-	position: relative;
+		&.is-active:focus {
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 2px var(--wp-admin-theme-color);
+		}
+	}
 }
 
-.block-editor-block-styles__item-label {
-	text-align: center;
-	padding: 4px 0;
+// To prevent overflow in the preview container,
+// ensure that block contents' margin and padding
+// do not add to the block container's width.
+.block-editor-block-styles__block-preview-container,
+.block-editor-block-styles__block-preview-container * {
+	box-sizing: border-box !important;
 }