Reduce the switcher to a Make default button where the preferred defa…

…ult is not selected.

Added tests for getRenderedStyles

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

@@ -53,13 +53,15 @@ function BlockStyles( {
 	itemRole,
 } ) {
 	const selector = ( select ) => {
-		const { getBlock } = select( blockEditorStore );
+		const { getBlock, getSettings } = select( blockEditorStore );
 		const block = getBlock( clientId );
 
 		if ( ! block ) {
 			return EMPTY_OBJECT;
 		}
-
+		const settings = getSettings();
+		const preferredStyleVariations =
+			settings.__experimentalPreferredStyleVariations;
 		const blockType = getBlockType( block.name );
 		const { getBlockStyles } = select( blocksStore );
 
@@ -68,12 +70,17 @@ function BlockStyles( {
 			type: blockType,
 			styles: getBlockStyles( block.name ),
 			className: block.attributes.className || '',
+			preferredStyleName: preferredStyleVariations?.value?.[ block.name ],
 		};
 	};
 
-	const { styles, block, type, className } = useSelect( selector, [
-		clientId,
-	] );
+	const {
+		styles,
+		block,
+		type,
+		className,
+		preferredStyleName,
+	} = useSelect( selector, [ clientId ] );
 
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const genericPreviewBlock = useGenericPreviewBlock( block, type );
@@ -92,8 +99,7 @@ function BlockStyles( {
 		return null;
 	}
 
-	const renderedStyles = getRenderedStyles( styles );
-
+	const renderedStyles = getRenderedStyles( styles, preferredStyleName );
 	const activeStyle = getActiveStyle( renderedStyles, className );
 
 	const onSelectStyle = ( style ) => {

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

@@ -72,7 +72,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: $grid-unit-05;
 
 	.block-editor-block-styles__button {
 		color: $gray-800;

packages/block-editor/src/components/block-styles/test/index.js → packages/block-editor/src/components/block-styles/test/utils.js

@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { getActiveStyle, replaceActiveStyle } from '../utils';
+import {
+	getActiveStyle,
+	getRenderedStyles,
+	replaceActiveStyle,
+} from '../utils';
 
 describe( 'getActiveStyle', () => {
 	it( 'Should return the undefined if no active style', () => {
@@ -74,3 +78,42 @@ describe( 'replaceActiveStyle', () => {
 		);
 	} );
 } );
+
+describe( 'getRenderedStyles', () => {
+	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,
+		] );
+	} );
+
+	it( 'Should sort by `defaultStyleId` where passed', () => {
+		const styles = [
+			{ name: 'macadamia' },
+			{ name: 'brazil' },
+			{ name: 'almond', isDefault: true },
+		];
+
+		expect( getRenderedStyles( styles, 'brazil' ) ).toEqual( [
+			{ name: 'brazil' },
+			{ name: 'macadamia' },
+			{ name: 'almond', isDefault: true },
+		] );
+	} );
+} );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
+import { find, sortBy } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -54,21 +54,24 @@ export function replaceActiveStyle( className, activeStyle, newStyle ) {
 }
 
 /**
- * Returns a collection of styles that can be represented on the frontend.
+ * Returns a sorted collection of styles that can be represented on the frontend.
  * The function checks a style collection for a default style. If none is found, it adds one to
  * act as a fallback for when there is no active style applied to a block. The default item also serves
  * as a switch on the frontend to deactivate non-default styles.
  *
- * @param {Array}          styles Block style variations.
+ * If there is a default selected, we move that to the start of the array.
  *
- * @return {Array<Object?>}       The style collection.
+ * @param {Array}           styles            Block style variations.
+ * @param {string}          defaultStyleId    The currently-selected default style.
+ *
+ * @return {Array<Object?>}                   The style collection.
  */
-export function getRenderedStyles( styles ) {
+export function getRenderedStyles( styles, defaultStyleId ) {
 	if ( ! styles ) {
 		return [];
 	}
 
-	return find( styles, 'isDefault' )
+	const renderedStyles = find( styles, 'isDefault' )
 		? styles
 		: [
 				{
@@ -78,4 +81,13 @@ export function getRenderedStyles( styles ) {
 				},
 				...styles,
 		  ];
+
+	if ( defaultStyleId ) {
+		return sortBy(
+			renderedStyles,
+			( style ) => style.name !== defaultStyleId
+		);
+	}
+
+	return renderedStyles;
 }

packages/block-editor/src/components/default-style-picker/index.js

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
-import { useMemo, useCallback } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
@@ -18,7 +18,6 @@ export default function DefaultStylePicker( { clientId } ) {
 		activeStyle,
 		onUpdatePreferredStyleVariations,
 		preferredStyle,
-		styles,
 	} = useSelect(
 		( select ) => {
 			const { getBlock, getSettings } = select( blockEditorStore );
@@ -43,7 +42,6 @@ export default function DefaultStylePicker( { clientId } ) {
 			return {
 				preferredStyle: preferredStyleVariations?.value?.[ block.name ],
 				onUpdatePreferredStyleVariations: onUpdate,
-				styles: renderedStyles,
 				blockName: block.name,
 				activeStyle: getActiveStyle(
 					renderedStyles,
@@ -57,36 +55,17 @@ export default function DefaultStylePicker( { clientId } ) {
 		onUpdatePreferredStyleVariations( activeStyle.name );
 	}, [ activeStyle?.name, onUpdatePreferredStyleVariations ] );
 
-	const preferredStyleLabel = useMemo( () => {
-		const preferredStyleObject = styles.find(
-			( style ) => style.name === preferredStyle
-		);
-		return preferredStyleObject
-			? preferredStyleObject?.label || preferredStyleObject?.name
-			: __( 'Not set' );
-	}, [ preferredStyle ] );
-
 	return (
 		onUpdatePreferredStyleVariations && (
-			<div>
-				<div className="default-style-picker__current-default">
-					{ __( 'Default style:' ) }
-					<span className="default-style-picker__style-label">
-						{ preferredStyleLabel }
-					</span>
-				</div>
+			<div className="default-style-picker__default-switcher">
 				{ 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
-						) }
+						{ __( 'Make default' ) }
 					</Button>
 				) }
 			</div>

packages/block-editor/src/components/default-style-picker/style.scss

@@ -1,9 +1,3 @@
-.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;
+.default-style-picker__default-switcher {
+	text-align: center;
 }