@wordpress/block-editor 8.0.13 → 8.1.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

@@ -4,6 +4,7 @@
 import { Disabled } from '@wordpress/components';
 import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,6 +17,8 @@ import { store } from '../../store';
 // This is used to avoid rendering the block list if the sizes change.
 let MemoizedBlockList;
 
+const MAX_HEIGHT = 2000;
+
 function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 	const [
 		containerResizeListener,
@@ -25,10 +28,29 @@ 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.
+	const editorStyles = useMemo( () => {
+		if ( styles ) {
+			return [
+				...styles,
+				{
+					css: 'body{height:auto;overflow:hidden;}',
+					__unstableType: 'presets',
+				},
+			];
+		}
+
+		return styles;
+	}, [ styles ] );
+
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
@@ -42,10 +64,15 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 				style={ {
 					transform: `scale(${ scale })`,
 					height: contentHeight * scale,
+					maxHeight:
+						contentHeight > MAX_HEIGHT
+							? MAX_HEIGHT * scale
+							: undefined,
 				} }
 			>
 				<Iframe
-					head={ <EditorStyles styles={ styles } /> }
+					head={ <EditorStyles styles={ editorStyles } /> }
+					assets={ assets }
 					contentRef={ useRefEffect( ( bodyElement ) => {
 						const {
 							ownerDocument: { documentElement },
@@ -65,6 +92,9 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						width: viewportWidth,
 						height: contentHeight,
 						pointerEvents: 'none',
+						// This is a catch-all max-height for patterns.
+						// See: https://github.com/WordPress/gutenberg/pull/38175.
+						maxHeight: MAX_HEIGHT,
 					} }
 				>
 					{ contentResizeListener }

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();
 		};
 	}, [] );