Experimenting with removing the default style picker select dropdown …

…with a button click, based on the active style Updating block supports readme to remove references to the select dropdown Refactoring DefaultStylePicker Replacing the transform menu style switcher with a menu
WordPress · Sep 16, 2021 · 976257f · 976257f
1 parent 50980b8
commit 976257f
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 57 deletions.
diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md
@@ -415,7 +415,7 @@ supports: {
 -   Type: `boolean`
 -   Default value: `true`
 
-When the style picker is shown, a dropdown is displayed so the user can select a default style for this block type. If you prefer not to show the dropdown, set this property to `false`.
+When the style picker is shown, the user can set a default style for a block type based on the block's currently active style. If you prefer not to make this option available, set this property to `false`.
 
 ```js
 supports: {

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -124,7 +124,7 @@ const BlockInspectorSingleBlock = ( {
 							blockName,
 							'defaultStylePicker',
 							true
-						) && <DefaultStylePicker blockName={ blockName } /> }
+						) && <DefaultStylePicker clientId={ clientId } /> }
 					</PanelBody>
 				</div>
 			) }

diff --git a/packages/block-editor/src/components/block-styles/block-styles-preview-panel.js b/packages/block-editor/src/components/block-styles/block-styles-preview-panel.js
@@ -7,7 +7,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import BlockPreview from '../block-preview';
-import { getActiveStyle, replaceActiveStyle } from './utils';
+import { replaceActiveStyle } from './utils';
 
 export default function BlockStylesPreviewPanel( {
 	genericPreviewBlock,
@@ -16,21 +16,20 @@ export default function BlockStylesPreviewPanel( {
 	className,
 	activeStyle,
 } ) {
-	const styleClassName = replaceActiveStyle(
-		className,
-		activeStyle,
-		style
-	);
+	const styleClassName = replaceActiveStyle( className, activeStyle, style );
 	const previewBlocks = useMemo( () => {
 		return {
 			...genericPreviewBlock,
 			attributes: {
 				...genericPreviewBlock.attributes,
-				className: styleClassName + ' block-editor-block-styles__block-preview-container',
+				className:
+					styleClassName +
+					' block-editor-block-styles__block-preview-container',
 			},
 		};
 	}, [ genericPreviewBlock, styleClassName ] );
 
+	// TODO: look at packages/block-editor/src/components/block-switcher/preview-block-popover.js
 	return (
 		<div className="block-editor-block-styles__preview-container">
 			<div className="block-editor-block-styles__preview-content">

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { _x } from '@wordpress/i18n';
@@ -17,7 +17,9 @@ import {
 	getBlockFromExample,
 	store as blocksStore,
 } from '@wordpress/blocks';
-import { Button, Popover } from '@wordpress/components';
+import { Button, MenuItem, Popover } from '@wordpress/components';
+import { check } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -61,6 +63,7 @@ function BlockStyles( {
 
 		const blockType = getBlockType( block.name );
 		const { getBlockStyles } = select( blocksStore );
+
 		return {
 			block,
 			type: blockType,
@@ -78,13 +81,14 @@ function BlockStyles( {
 	const [ hoveredStyle, setHoveredStyle ] = useState( null );
 	const onStyleHover = useCallback(
 		( item ) => {
+			if ( hoveredStyle === item ) {
+				return;
+			}
 			setHoveredStyle( item );
 		},
 		[ setHoveredStyle ]
 	);
 
-	const stylesContainerRef = useRef();
-
 	if ( ! styles || styles.length === 0 ) {
 		return null;
 	}
@@ -115,11 +119,29 @@ function BlockStyles( {
 		onSwitch();
 	};
 
-	// const getAnchorRect = () =>
-	// 	stylesContainerRef?.current?.getBoundingClientRect();
+	if ( itemRole === 'menuitem' ) {
+		return (
+			<div className="block-editor-block-styles__menu">
+				{ renderedStyles.map( ( style ) => {
+					const menuItemText = style.label || style.name;
+					return (
+						<MenuItem
+							key={ style.name }
+							icon={
+								activeStyle.name === style.name ? check : null
+							}
+							onClick={ () => onSelectStyle( style ) }
+						>
+							{ menuItemText }
+						</MenuItem>
+					);
+				} ) }
+			</div>
+		);
+	}
 
 	return (
-		<div className="block-editor-block-styles" ref={ stylesContainerRef }>
+		<div className="block-editor-block-styles">
 			<div className="block-editor-block-styles__variants">
 				{ renderedStyles.map( ( style ) => {
 					const buttonText = style.label || style.name;
@@ -129,14 +151,17 @@ function BlockStyles( {
 							className={ classnames(
 								'block-editor-block-styles__button',
 								{
-									'is-active': activeStyle === style,
+									'is-active':
+										activeStyle.name === style.name,
 								}
 							) }
 							key={ style.name }
 							variant="secondary"
 							label={ buttonText }
 							onMouseEnter={ () => onStyleHover( style ) }
+							onFocus={ () => onStyleHover( style ) }
 							onMouseLeave={ () => setHoveredStyle( null ) }
+							onBlur={ () => setHoveredStyle( null ) }
 							onKeyDown={ ( event ) => {
 								if (
 									ENTER === event.keyCode ||
@@ -147,7 +172,7 @@ function BlockStyles( {
 								}
 							} }
 							onClick={ () => onSelectStyle( style ) }
-							role={ itemRole || 'button' }
+							role="button"
 							tabIndex="0"
 						>
 							{ buttonText }
@@ -160,8 +185,6 @@ function BlockStyles( {
 					className="block-editor-block-styles__popover"
 					position="middle left"
 					focusOnMount={ false }
-					anchorRef={ stylesContainerRef?.current }
-					//getAnchorRect={ getAnchorRect }
 				>
 					<BlockStylesPreviewPanel
 						activeStyle={ activeStyle }

diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
@@ -41,11 +41,6 @@
 	width: 300px;
 }
 
-// Applied to block containers to make them stretch the width of the preview pane.
-.block-editor-block-styles__block-preview-container {
-
-}
-
 .block-editor-block-styles__preview-container {
 	display: none;
 	min-width: 300px;
@@ -85,12 +80,18 @@
 		display: inline-block;
 		min-width: calc(50% - #{$grid-unit-05});
 		margin-bottom: $grid-unit-10;
+		height: 42px;
 
-		&.is-active,
 		&:focus,
-		&:hover:not(:disabled) {
+		&:hover {
+			color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+		}
+
+		&.is-active,
+		&.is-active:hover {
 			color: $gray-900;
-			box-shadow: inset 0 0 0 1px $gray-900;
+			box-shadow: inset 0 0 0 2px $gray-900;
 		}
 	}
 }

diff --git a/packages/block-editor/src/components/default-style-picker/index.js b/packages/block-editor/src/components/default-style-picker/index.js
@@ -3,56 +3,88 @@
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { useMemo, useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { SelectControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { getActiveStyle } from '../block-styles/utils';
 
-export default function DefaultStylePicker( { blockName } ) {
+export default function DefaultStylePicker( { clientId } ) {
 	const {
-		preferredStyle,
+		activeStyle,
 		onUpdatePreferredStyleVariations,
+		preferredStyle,
 		styles,
 	} = useSelect(
 		( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
+			const { getBlock, getSettings } = select( blockEditorStore );
+			const block = getBlock( clientId );
+			const settings = getSettings();
 			const preferredStyleVariations =
 				settings.__experimentalPreferredStyleVariations;
+			const blockStyles = select( blocksStore ).getBlockStyles(
+				block.name
+			);
+			const onUpdate = preferredStyleVariations?.onChange
+				? ( blockStyle ) =>
+						preferredStyleVariations?.onChange(
+							block.name,
+							blockStyle
+						)
+				: null;
+
 			return {
-				preferredStyle: preferredStyleVariations?.value?.[ blockName ],
-				onUpdatePreferredStyleVariations:
-					preferredStyleVariations?.onChange ?? null,
-				styles: select( blocksStore ).getBlockStyles( blockName ),
+				preferredStyle: preferredStyleVariations?.value?.[ block.name ],
+				onUpdatePreferredStyleVariations: onUpdate,
+				styles: blockStyles,
+				blockName: block.name,
+				activeStyle: getActiveStyle(
+					blockStyles,
+					block.attributes.className || ''
+				),
 			};
 		},
-		[ blockName ]
-	);
-	const selectOptions = useMemo(
-		() => [
-			{ label: __( 'Not set' ), value: '' },
-			...styles.map( ( { label, name } ) => ( { label, value: name } ) ),
-		],
-		[ styles ]
-	);
-	const selectOnChange = useCallback(
-		( blockStyle ) => {
-			onUpdatePreferredStyleVariations( blockName, blockStyle );
-		},
-		[ blockName, onUpdatePreferredStyleVariations ]
+		[ clientId ]
 	);
+	const selectOnChange = useCallback( () => {
+		onUpdatePreferredStyleVariations( activeStyle.name );
+	}, [ activeStyle.name, onUpdatePreferredStyleVariations ] );
+
+	const preferredStyleLabel = useMemo( () => {
+		const preferredStyleObject = styles.find(
+			( style ) => style.name === preferredStyle
+		);
+		return preferredStyleObject?.label || preferredStyleObject?.name;
+	}, [ preferredStyle ] );
 
 	return (
 		onUpdatePreferredStyleVariations && (
-			<SelectControl
-				options={ selectOptions }
-				value={ preferredStyle || '' }
-				label={ __( 'Default Style' ) }
-				onChange={ selectOnChange }
-			/>
+			<div>
+				<div className="default-style-picker__current-default">
+					{ __( 'Default style:' ) }
+					<span className="default-style-picker__style-label">
+						{ preferredStyleLabel }
+					</span>
+				</div>
+				{ preferredStyle !== activeStyle.name && (
+					<Button
+						onClick={ selectOnChange }
+						variant="link"
+						label="Set default style"
+						className="default-style-picker__style-button"
+					>
+						{ sprintf(
+							// translators: %s: the name of a block style
+							__( 'Change to %s' ),
+							activeStyle?.label || activeStyle?.name
+						) }
+					</Button>
+				) }
+			</div>
 		)
 	);
 }
diff --git a/packages/block-editor/src/components/default-style-picker/style.scss b/packages/block-editor/src/components/default-style-picker/style.scss
@@ -0,0 +1,9 @@
+.default-style-picker__current-default {
+	margin-bottom: $grid-unit-05;
+}
+
+.default-style-picker__style-label {
+	font-weight: 600;
+	display: inline-block;
+	margin-left: $grid-unit-05;
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -29,6 +29,7 @@
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";
 @import "./components/default-block-appender/style.scss";
+@import "./components/default-style-picker/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
 @import "./components/justify-content-control/style.scss";