@wordpress/block-editor 8.0.8 → 8.0.12-next.33ec3857e2.0

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/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;
 }

package/src/components/block-styles/test/{index.js → utils.js}

@@ -1,7 +1,12 @@
 /**
  * Internal dependencies
  */
-import { getActiveStyle, replaceActiveStyle } from '../utils';
+import {
+	getActiveStyle,
+	getDefaultStyle,
+	getRenderedStyles,
+	replaceActiveStyle,
+} from '../utils';
 
 describe( 'getActiveStyle', () => {
 	it( 'Should return the undefined if no active style', () => {
@@ -74,3 +79,57 @@ describe( 'replaceActiveStyle', () => {
 		);
 	} );
 } );
+
+describe( 'getRenderedStyles', () => {
+	it( 'Should return an empty array if styles is falsy', () => {
+		expect( getRenderedStyles( null ) ).toEqual( [] );
+	} );
+
+	it( 'Should return an empty array if styles array is empty', () => {
+		expect( getRenderedStyles( [] ) ).toEqual( [] );
+	} );
+
+	it( 'Should return styles collection if there is a default', () => {
+		const styles = [
+			{ name: 'hazlenut' },
+			{ name: 'cashew', isDefault: true },
+		];
+
+		expect( getRenderedStyles( styles ) ).toEqual( styles );
+	} );
+
+	it( 'Should add a default item to the styles collection if there is no default', () => {
+		const styles = [ { name: 'pistachio' }, { name: 'peanut' } ];
+		const defaultStyle = {
+			name: 'default',
+			label: 'Default',
+			isDefault: true,
+		};
+
+		expect( getRenderedStyles( styles ) ).toEqual( [
+			defaultStyle,
+			...styles,
+		] );
+	} );
+} );
+
+describe( 'getDefaultStyle', () => {
+	it( 'Should return default style object', () => {
+		const styles = [
+			{ name: 'trout' },
+			{ name: 'bream', isDefault: true },
+		];
+
+		expect( getDefaultStyle( styles ) ).toEqual( styles[ 1 ] );
+	} );
+
+	it( 'Should return `undefined` if there is no default', () => {
+		const styles = [ { name: 'snapper' }, { name: 'perch' } ];
+
+		expect( getDefaultStyle( styles ) ).toBeUndefined();
+	} );
+
+	it( 'Should return `undefined` if `styles` argument is no passed', () => {
+		expect( getDefaultStyle() ).toBeUndefined();
+	} );
+} );

package/src/components/block-styles/use-styles-for-block.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	cloneBlock,
+	getBlockType,
+	getBlockFromExample,
+	store as blocksStore,
+} from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getActiveStyle, getRenderedStyles, replaceActiveStyle } from './utils';
+import { store as blockEditorStore } from '../../store';
+
+/**
+ *
+ * @param {WPBlock}     block Block object.
+ * @param {WPBlockType} type  Block type settings.
+ * @return {WPBlock}          A generic block ready for styles preview.
+ */
+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,
+			} );
+		}
+
+		if ( block ) {
+			return cloneBlock( block );
+		}
+	}, [ type?.example ? block?.name : block, type ] );
+}
+
+/**
+ * @typedef useStylesForBlocksArguments
+ * @property {string}     clientId Block client ID.
+ * @property {() => void} onSwitch Block style switch callback function.
+ */
+
+/**
+ *
+ * @param  {useStylesForBlocksArguments} useStylesForBlocks arguments.
+ * @return {Object}                                         Results of the select methods.
+ */
+export default function useStylesForBlocks( { clientId, onSwitch } ) {
+	const selector = ( select ) => {
+		const { getBlock } = select( blockEditorStore );
+		const block = getBlock( clientId );
+
+		if ( ! block ) {
+			return {};
+		}
+		const blockType = getBlockType( block.name );
+		const { getBlockStyles } = select( blocksStore );
+
+		return {
+			block,
+			blockType,
+			styles: getBlockStyles( block.name ),
+			className: block.attributes.className || '',
+		};
+	};
+	const { styles, block, blockType, className } = useSelect( selector, [
+		clientId,
+	] );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const stylesToRender = getRenderedStyles( styles );
+	const activeStyle = getActiveStyle( stylesToRender, className );
+	const genericPreviewBlock = useGenericPreviewBlock( block, blockType );
+
+	const onSelect = ( style ) => {
+		const styleClassName = replaceActiveStyle(
+			className,
+			activeStyle,
+			style
+		);
+		updateBlockAttributes( clientId, {
+			className: styleClassName,
+		} );
+		onSwitch();
+	};
+
+	return {
+		onSelect,
+		stylesToRender,
+		activeStyle,
+		genericPreviewBlock,
+		className,
+	};
+}