From 632d8d62e8f8621c2771b266c1d2a68477bb3ca1 Mon Sep 17 00:00:00 2001
From: Madhu Dollu <madhusudhan.dollu@gmail.com>
Date: Fri, 13 Sep 2024 12:09:33 +0530
Subject: [PATCH] Spacing control: Replace sides dropdwon with link button
 (#65193)

* replace sides dropdown with link button for spacing control

* remove sides dropdown

* lowercase the link button tooltip

* fix unit tests
---
 .../components/spacing-sizes-control/index.js | 23 ++---
 .../spacing-sizes-control/linked-button.js    | 32 +++++++
 .../sides-dropdown/index.js                   | 91 -------------------
 .../spacing-sizes-control/test/utils.js       | 29 +++---
 .../components/spacing-sizes-control/utils.js | 23 +----
 5 files changed, 61 insertions(+), 137 deletions(-)
 create mode 100644 packages/block-editor/src/components/spacing-sizes-control/linked-button.js
 delete mode 100644 packages/block-editor/src/components/spacing-sizes-control/sides-dropdown/index.js

diff --git a/packages/block-editor/src/components/spacing-sizes-control/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js
index 6886670f54115..6ca143d14706a 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/index.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/index.js
@@ -7,7 +7,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { __, _x, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import AxialInputControls from './input-controls/axial';
 import SeparatedInputControls from './input-controls/separated';
 import SingleInputControl from './input-controls/single';
-import SidesDropdown from './sides-dropdown';
+import LinkedButton from './linked-button';
 import useSpacingSizes from './hooks/use-spacing-sizes';
 import {
 	ALL_SIDES,
@@ -47,6 +47,10 @@ export default function SpacingSizesControl( {
 
 	const [ view, setView ] = useState( getInitialView( inputValues, sides ) );
 
+	const toggleLinked = () => {
+		setView( view === VIEWS.axial ? VIEWS.custom : VIEWS.axial );
+	};
+
 	const handleOnChange = ( nextValue ) => {
 		const newValues = { ...values, ...nextValue };
 		onChange( newValues );
@@ -91,12 +95,6 @@ export default function SpacingSizesControl( {
 		sideLabel
 	).trim();
 
-	const dropdownLabelText = sprintf(
-		// translators: %s: The current spacing property e.g. "Padding", "Margin".
-		_x( '%s options', 'Button label to reveal side configuration options' ),
-		labelProp
-	);
-
 	return (
 		<fieldset className="spacing-sizes-control">
 			<HStack className="spacing-sizes-control__header">
@@ -107,11 +105,10 @@ export default function SpacingSizesControl( {
 					{ label }
 				</BaseControl.VisualLabel>
 				{ ! hasOneSide && ! hasOnlyAxialSides && (
-					<SidesDropdown
-						label={ dropdownLabelText }
-						onChange={ setView }
-						sides={ sides }
-						value={ view }
+					<LinkedButton
+						label={ labelProp }
+						onClick={ toggleLinked }
+						isLinked={ view === VIEWS.axial }
 					/>
 				) }
 			</HStack>
diff --git a/packages/block-editor/src/components/spacing-sizes-control/linked-button.js b/packages/block-editor/src/components/spacing-sizes-control/linked-button.js
new file mode 100644
index 0000000000000..e9ca68aaa2b31
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/linked-button.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Tooltip } from '@wordpress/components';
+import { link, linkOff } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+
+export default function LinkedButton( { isLinked, ...props } ) {
+	const label = isLinked
+		? sprintf(
+				// translators: 1. Type of spacing being modified (padding, margin, etc).
+				__( 'Unlink %1$s' ),
+				props.label.toLowerCase()
+		  ).trim()
+		: sprintf(
+				// translators: 1. Type of spacing being modified (padding, margin, etc).
+				__( 'Link %1$s' ),
+				props.label.toLowerCase()
+		  ).trim();
+
+	return (
+		<Tooltip text={ label }>
+			<Button
+				{ ...props }
+				size="small"
+				icon={ isLinked ? link : linkOff }
+				iconSize={ 24 }
+				aria-label={ label }
+			/>
+		</Tooltip>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/sides-dropdown/index.js b/packages/block-editor/src/components/spacing-sizes-control/sides-dropdown/index.js
deleted file mode 100644
index e399efa5b4467..0000000000000
--- a/packages/block-editor/src/components/spacing-sizes-control/sides-dropdown/index.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { DropdownMenu, Icon, MenuGroup, MenuItem } from '@wordpress/components';
-import { check } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { getSupportedMenuItems, VIEWS } from '../utils';
-
-const checkIcon = <Icon icon={ check } size={ 24 } />;
-
-export default function SidesDropdown( {
-	label: labelProp,
-	onChange,
-	sides,
-	value,
-} ) {
-	if ( ! sides || ! sides.length ) {
-		return;
-	}
-
-	const supportedItems = getSupportedMenuItems( sides );
-	const sideIcon = supportedItems[ value ].icon;
-	const { custom: customItem, ...menuItems } = supportedItems;
-
-	return (
-		<DropdownMenu
-			icon={ sideIcon }
-			label={ labelProp }
-			className="spacing-sizes-control__dropdown"
-			toggleProps={ { size: 'small' } }
-		>
-			{ ( { onClose } ) => {
-				return (
-					<>
-						<MenuGroup>
-							{ Object.entries( menuItems ).map(
-								( [ slug, { label, icon } ] ) => {
-									const isSelected = value === slug;
-									return (
-										<MenuItem
-											key={ slug }
-											icon={ icon }
-											iconPosition="left"
-											isSelected={ isSelected }
-											role="menuitemradio"
-											onClick={ () => {
-												onChange( slug );
-												onClose();
-											} }
-											suffix={
-												isSelected
-													? checkIcon
-													: undefined
-											}
-										>
-											{ label }
-										</MenuItem>
-									);
-								}
-							) }
-						</MenuGroup>
-						{ !! customItem && (
-							<MenuGroup>
-								<MenuItem
-									icon={ customItem.icon }
-									iconPosition="left"
-									isSelected={ value === VIEWS.custom }
-									role="menuitemradio"
-									onClick={ () => {
-										onChange( VIEWS.custom );
-										onClose();
-									} }
-									suffix={
-										value === VIEWS.custom
-											? checkIcon
-											: undefined
-									}
-								>
-									{ customItem.label }
-								</MenuItem>
-							</MenuGroup>
-						) }
-					</>
-				);
-			} }
-		</DropdownMenu>
-	);
-}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
index a631cbfcff3ef..22191b4e1a8de 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
@@ -373,8 +373,8 @@ describe( 'getInitialView', () => {
 				getInitialView( { top: '1em', right: '10px' }, ALL_SIDES )
 			).toBe( VIEWS.custom );
 		} );
-		it( 'should not return custom view if there is only a single side value', () => {
-			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).not.toBe(
+		it( 'should return custom view if there is only a single side value', () => {
+			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).toBe(
 				VIEWS.custom
 			);
 		} );
@@ -387,20 +387,19 @@ describe( 'getInitialView', () => {
 			);
 		} );
 
-		it( 'should return the single side view if there is only a single side value set and supported sides > 1', () => {
-			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.top
-			);
-			expect( getInitialView( { right: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.right
-			);
-			expect( getInitialView( { bottom: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.bottom
-			);
-			expect( getInitialView( { left: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.left
-			);
+		it( 'should return single side when only single side supported and no value defined', () => {
+			expect( getInitialView( {}, [ 'top' ] ) ).toBe( VIEWS.top );
+		} );
+
+		it( 'should return single side when only single side supported and all values defined', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', right: '2em', bottom: '1em', left: '2em' },
+					[ 'top' ]
+				)
+			).toBe( VIEWS.top );
 		} );
+
 		it( 'should return single side view when only one side is supported', () => {
 			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
 				VIEWS.top
diff --git a/packages/block-editor/src/components/spacing-sizes-control/utils.js b/packages/block-editor/src/components/spacing-sizes-control/utils.js
index 91c5a91934f6e..df2da0d93d060 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/utils.js
@@ -364,6 +364,11 @@ export function getInitialView( values = {}, sides ) {
 	const hasNoValuesAndBalancedSides =
 		! sideValues.length && hasBalancedSidesSupport( sides );
 
+	// Only single side supported and no value defined.
+	if ( sides?.length === 1 ) {
+		return sides[ 0 ];
+	}
+
 	if (
 		hasAxisSupport( sides ) &&
 		( hasMatchingAxialValues || hasNoValuesAndBalancedSides )
@@ -371,24 +376,6 @@ export function getInitialView( values = {}, sides ) {
 		return VIEWS.axial;
 	}
 
-	// Single side.
-	// - Ensure the side returned is the first side that has a value.
-	if ( sideValues.length === 1 ) {
-		let side;
-
-		Object.entries( values ).some( ( [ key, value ] ) => {
-			side = key;
-			return value !== undefined;
-		} );
-
-		return side;
-	}
-
-	// Only single side supported and no value defined.
-	if ( sides?.length === 1 && ! sideValues.length ) {
-		return sides[ 0 ];
-	}
-
 	// Default to the Custom (separated sides) view.
 	return VIEWS.custom;
 }