Block Styles: Make block style variations control scale for increased number of variations

packages/block-editor/src/components/block-styles/block-styles-dropdown.js

@@ -0,0 +1,158 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ColorIndicator,
+	Dropdown,
+	Flex,
+	FlexItem,
+	Icon,
+	MenuGroup,
+	MenuItem,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { check } from '@wordpress/icons';
+
+const checkIcon = <Icon icon={ check } size={ 24 } />;
+const noop = () => undefined;
+
+function BlockStyleColorCard( { blockStyle } ) {
+	const { background, gradient, text } = blockStyle.styles?.color || {};
+	const linkColor = blockStyle?.styles?.elements?.link?.color?.text;
+	const styles = {
+		background: gradient,
+		backgroundColor: gradient ? undefined : background,
+	};
+
+	return (
+		<HStack
+			className={ classnames( 'block-editor-block-styles__color-card', {
+				'no-background': ! background && ! gradient,
+			} ) }
+			justify="space-around"
+			style={ styles }
+			spacing={ 1 }
+		>
+			<Flex expanded={ false }>
+				<ColorIndicator
+					className="block-editor-block-styles__color-indicator"
+					colorValue={ text }
+				/>
+			</Flex>
+			<Flex expanded={ false }>
+				<ColorIndicator
+					className="block-editor-block-styles__color-indicator"
+					colorValue={ linkColor }
+				/>
+			</Flex>
+		</HStack>
+	);
+}
+
+function BlockStyleItem( { blockStyle } ) {
+	const label = blockStyle?.label || blockStyle?.name;
+
+	return (
+		<HStack justify="flex-start">
+			<BlockStyleColorCard blockStyle={ blockStyle } />
+			<FlexItem title={ label }>{ label }</FlexItem>
+		</HStack>
+	);
+}
+
+function BlockStylesDropdownToggle( { onToggle, isOpen, blockStyle } ) {
+	const toggleProps = {
+		onClick: onToggle,
+		className: classnames( 'block-editor-block-styles__dropdown-toggle', {
+			'is-open': isOpen,
+		} ),
+		'aria-expanded': isOpen,
+		'aria-label': __( 'Block style options' ),
+	};
+
+	return (
+		<Button __next40pxDefaultSize { ...toggleProps }>
+			<BlockStyleItem blockStyle={ blockStyle } />
+		</Button>
+	);
+}
+
+function BlockStylesDropdownContent( {
+	activeStyle,
+	handlePreview,
+	onSelect,
+	styles,
+} ) {
+	return (
+		<MenuGroup className="block-editor-block-styles__dropdown-group">
+			{ styles.map( ( style ) => {
+				const isSelected = activeStyle?.name === style.name;
+
+				return (
+					<MenuItem
+						isSelected={ isSelected }
+						key={ style.name }
+						onBlur={ () => handlePreview( null ) }
+						onClick={ () => onSelect( style ) }
+						onFocus={ () => handlePreview( style ) }
+						onMouseEnter={ () => handlePreview( style ) }
+						onMouseLeave={ () => handlePreview( null ) }
+						role="menuitemradio"
+						suffix={ isSelected ? checkIcon : undefined }
+						__next40pxDefaultSize
+					>
+						<BlockStyleItem blockStyle={ style } />
+					</MenuItem>
+				);
+			} ) }
+		</MenuGroup>
+	);
+}
+
+export default function BlockStylesDropdown( {
+	className,
+	handlePreview = noop,
+	onSelect = noop,
+	styles,
+	value,
+	...props
+} ) {
+	if ( ! styles?.length ) {
+		return null;
+	}
+
+	const classes = classnames(
+		className,
+		'block-editor-block-styles__dropdown'
+	);
+
+	return (
+		<Dropdown
+			{ ...props }
+			label={ __( 'Block styles' ) }
+			className={ classes }
+			renderToggle={ ( toggleProps ) => (
+				<BlockStylesDropdownToggle
+					{ ...toggleProps }
+					blockStyle={ value }
+				/>
+			) }
+			renderContent={ ( contentProps ) => (
+				<BlockStylesDropdownContent
+					{ ...contentProps }
+					activeStyle={ value }
+					handlePreview={ handlePreview }
+					onSelect={ onSelect }
+					styles={ styles }
+				/>
+			) }
+		/>
+	);
+}

packages/block-editor/src/components/block-styles/index.js

@@ -1,22 +1,14 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { debounce, useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	__experimentalTruncate as Truncate,
-	Popover,
-} from '@wordpress/components';
+import { Popover } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import BlockStylesDropdown from './block-styles-dropdown';
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
@@ -61,40 +53,12 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 
 	return (
 		<div className="block-editor-block-styles">
-			<div className="block-editor-block-styles__variants">
-				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.label || style.name;
-
-					return (
-						<Button
-							__next40pxDefaultSize
-							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 ) }
-							onClick={ () => onSelectStylePreview( style ) }
-							aria-current={ activeStyle.name === style.name }
-						>
-							<Truncate
-								numberOfLines={ 1 }
-								className="block-editor-block-styles__item-text"
-							>
-								{ buttonText }
-							</Truncate>
-						</Button>
-					);
-				} ) }
-			</div>
+			<BlockStylesDropdown
+				handlePreview={ styleItemHandler }
+				onSelect={ onSelectStylePreview }
+				styles={ stylesToRender }
+				value={ activeStyle }
+			/>
 			{ hoveredStyle && ! isMobileViewport && (
 				<Popover
 					placement="left-start"

packages/block-editor/src/components/block-styles/style.scss

@@ -13,48 +13,29 @@
 	}
 }
 
-.block-editor-block-styles__variants {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	gap: $grid-unit-10;
-
-	button.components-button.block-editor-block-styles__item {
-		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-300;
-		display: inline-block;
-		width: calc(50% - #{$grid-unit-05});
-
-		&:hover {
-			color: var(--wp-admin-theme-color);
+.block-editor-block-styles__dropdown {
+	width: 100%;
+}
+.block-editor-block-styles__dropdown-toggle {
+	box-shadow: inset 0 0 0 $border-width $gray-300;
+	width: 100%;
+}
+.block-editor-block-styles__color-indicator {
+	width: $grid-unit-10;
+	height: $grid-unit-10;
+}
+.block-editor-block-styles__dropdown-group,
+.block-editor-block-styles__dropdown-toggle {
+	.block-editor-block-styles__color-card {
+		// Width is 2 x 8px indicators, 2 x 8px padding, 4px gap.
+		width: $grid-unit-40 + $grid-unit-05;
+		padding: $grid-unit-10;
+		box-sizing: border-box;
+		border-radius: $radius-block-ui;
+
+		&.no-background {
 			box-shadow: inset 0 0 0 $border-width $gray-300;
 		}
-
-		&.is-active,
-		&.is-active:hover {
-			background-color: $gray-900;
-			box-shadow: none;
-		}
-
-		&.is-active .block-editor-block-styles__item-text,
-		&.is-active:hover .block-editor-block-styles__item-text {
-			color: $white;
-		}
-
-		&:focus,
-		&.is-active:focus {
-			@include block-toolbar-button-style__focus();
-		}
-	}
-
-	.block-editor-block-styles__item-text {
-		word-break: break-all;
-		// The Button component is white-space: nowrap, and that won't work with line-clamp.
-		white-space: normal;
-
-		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
-		text-align: start;
-		text-align-last: center;
 	}
 }
 

packages/block-editor/src/components/block-styles/use-styles-for-block.js

@@ -54,19 +54,35 @@ function useGenericPreviewBlock( block, type ) {
  */
 export default function useStylesForBlocks( { clientId, onSwitch } ) {
 	const selector = ( select ) => {
-		const { getBlock } = select( blockEditorStore );
+		const { getBlock, getSettings } = select( blockEditorStore );
 		const block = getBlock( clientId );
 
 		if ( ! block ) {
 			return {};
 		}
 		const blockType = getBlockType( block.name );
 		const { getBlockStyles } = select( blocksStore );
+		const styles = getBlockStyles( block.name );
+
+		// Add theme.json styles for each block style if available.
+		// These will be used to customize the block style control
+		// For example, by displaying color swatches.
+		const variations =
+			getSettings().__experimentalStyles?.blocks?.[ block.name ]
+				?.variations ?? {};
+
+		if ( variations ) {
+			styles?.forEach( ( style, index ) => {
+				if ( variations[ style.name ] ) {
+					styles[ index ].styles = variations[ style.name ];
+				}
+			} );
+		}
 
 		return {
 			block,
 			blockType,
-			styles: getBlockStyles( block.name ),
+			styles,
 			className: block.attributes.className || '',
 			attributes: block.attributes,
 		};