@wordpress/block-editor 12.2.0 → 12.3.1

package/src/components/spacing-sizes-control/{spacing-input-control.js → input-controls/spacing-input-control.js}

@@ -1,39 +1,35 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 import {
-	BaseControl,
 	Button,
-	RangeControl,
 	CustomSelectControl,
-	__experimentalUnitControl as UnitControl,
+	Icon,
+	RangeControl,
 	__experimentalHStack as HStack,
+	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
-import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
-import { store as blockEditorStore } from '../../store';
+import useSetting from '../../use-setting';
+import { store as blockEditorStore } from '../../../store';
 import {
+	ALL_SIDES,
 	LABELS,
 	getSliderValueFromPreset,
 	getCustomValueFromPreset,
 	getPresetValueFromCustomValue,
 	isValueSpacingPreset,
-} from './utils';
+} from '../utils';
 
 const CUSTOM_VALUE_SETTINGS = {
 	px: { max: 300, steps: 1 },
@@ -45,15 +41,17 @@ const CUSTOM_VALUE_SETTINGS = {
 };
 
 export default function SpacingInputControl( {
-	spacingSizes,
-	value,
-	side,
-	onChange,
+	icon,
 	isMixed = false,
-	type,
 	minimumCustomValue,
-	onMouseOver,
+	onChange,
 	onMouseOut,
+	onMouseOver,
+	showSideInLabel = true,
+	side,
+	spacingSizes,
+	type,
+	value,
 } ) {
 	// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
 	value = getPresetValueFromCustomValue( value, spacingSizes );
@@ -159,73 +157,34 @@ export default function SpacingInputControl( {
 
 	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
 
-	const currentValueHint = ! isMixed
-		? customTooltipContent( currentValue )
-		: __( 'Mixed' );
-
 	const options = selectListSizes.map( ( size, index ) => ( {
 		key: index,
 		name: size.name,
 	} ) );
 
-	const marks = spacingSizes.map( ( newValue, index ) => ( {
+	const marks = spacingSizes.map( ( _newValue, index ) => ( {
 		value: index,
 		label: undefined,
 	} ) );
 
+	const sideLabel =
+		ALL_SIDES.includes( side ) && showSideInLabel ? LABELS[ side ] : '';
+	const typeLabel = showSideInLabel ? type?.toLowerCase() : type;
+
 	const ariaLabel = sprintf(
-		// translators: 1: The side of the block being modified (top, bottom, left, etc.). 2. Type of spacing being modified (Padding, margin, etc)
+		// translators: 1: The side of the block being modified (top, bottom, left, All sides etc.). 2. Type of spacing being modified (Padding, margin, etc)
 		__( '%1$s %2$s' ),
-		LABELS[ side ],
-		type?.toLowerCase()
-	);
-
-	const showHint =
-		showRangeControl &&
-		! showCustomValueControl &&
-		currentValueHint !== undefined;
+		sideLabel,
+		typeLabel
+	).trim();
 
 	return (
-		<>
-			{ side !== 'all' && (
-				<HStack className="components-spacing-sizes-control__side-labels">
-					<BaseControl.VisualLabel className="components-spacing-sizes-control__side-label">
-						{ LABELS[ side ] }
-					</BaseControl.VisualLabel>
-
-					{ showHint && (
-						<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-single">
-							{ currentValueHint }
-						</BaseControl.VisualLabel>
-					) }
-				</HStack>
-			) }
-			{ side === 'all' && showHint && (
-				<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-all">
-					{ currentValueHint }
-				</BaseControl.VisualLabel>
-			) }
-
-			{ ! disableCustomSpacingSizes && (
-				<Button
-					label={
-						showCustomValueControl
-							? __( 'Use size preset' )
-							: __( 'Set custom size' )
-					}
-					icon={ settings }
-					onClick={ () => {
-						setShowCustomValueControl( ! showCustomValueControl );
-					} }
-					isPressed={ showCustomValueControl }
-					isSmall
-					className={ classnames( {
-						'components-spacing-sizes-control__custom-toggle-all':
-							side === 'all',
-						'components-spacing-sizes-control__custom-toggle-single':
-							side !== 'all',
-					} ) }
-					iconSize={ 24 }
+		<HStack className="spacing-sizes-control__wrapper">
+			{ icon && (
+				<Icon
+					className="spacing-sizes-control__icon"
+					icon={ icon }
+					size={ 24 }
 				/>
 			) }
 			{ showCustomValueControl && (
@@ -245,10 +204,9 @@ export default function SpacingInputControl( {
 						disableUnits={ isMixed }
 						label={ ariaLabel }
 						hideLabelFromVision={ true }
-						className="components-spacing-sizes-control__custom-value-input"
+						className="spacing-sizes-control__custom-value-input"
 						size={ '__unstable-large' }
 					/>
-
 					<RangeControl
 						onMouseOver={ onMouseOver }
 						onMouseOut={ onMouseOut }
@@ -262,7 +220,7 @@ export default function SpacingInputControl( {
 						}
 						withInputField={ false }
 						onChange={ handleCustomValueSliderChange }
-						className="components-spacing-sizes-control__custom-value-range"
+						className="spacing-sizes-control__custom-value-range"
 						__nextHasNoMarginBottom
 					/>
 				</>
@@ -271,7 +229,7 @@ export default function SpacingInputControl( {
 				<RangeControl
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
-					className="components-spacing-sizes-control__range-control"
+					className="spacing-sizes-control__range-control"
 					value={ currentValue }
 					onChange={ ( newSize ) =>
 						onChange( getNewPresetValue( newSize ) )
@@ -299,7 +257,7 @@ export default function SpacingInputControl( {
 			) }
 			{ ! showRangeControl && ! showCustomValueControl && (
 				<CustomSelectControl
-					className="components-spacing-sizes-control__custom-select-control"
+					className="spacing-sizes-control__custom-select-control"
 					value={
 						options.find(
 							( option ) => option.key === currentValue
@@ -324,6 +282,23 @@ export default function SpacingInputControl( {
 					onBlur={ onMouseOut }
 				/>
 			) }
-		</>
+			{ ! disableCustomSpacingSizes && (
+				<Button
+					label={
+						showCustomValueControl
+							? __( 'Use size preset' )
+							: __( 'Set custom size' )
+					}
+					icon={ settings }
+					onClick={ () => {
+						setShowCustomValueControl( ! showCustomValueControl );
+					} }
+					isPressed={ showCustomValueControl }
+					isSmall
+					className="spacing-sizes-control__custom-toggle"
+					iconSize={ 24 }
+				/>
+			) }
+		</HStack>
 	);
 }

package/src/components/spacing-sizes-control/sides-dropdown/index.js

@@ -0,0 +1,91 @@
+/**
+ * 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={ { isSmall: true } }
+		>
+			{ ( { 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>
+	);
+}

package/src/components/spacing-sizes-control/style.scss

@@ -1,105 +1,17 @@
-.tools-panel-item-spacing {
-	display: grid;
-	grid-template-columns: auto 1fr auto;
-	align-items: center;
-	grid-template-rows: $grid-unit-30 auto;
-}
-
-.component-spacing-sizes-control {
-	box-sizing: border-box;
-	padding-bottom: 12px;
-	width: 100%;
-	display: contents;
-
-	legend {
-		padding: 0;
-		grid-column: 1 / 1;
-		grid-row: 1 / 1;
-		align-self: center;
-	}
-
-	.components-base-control__label {
-		margin-bottom: $grid-unit-10;
-		height: $grid-unit-20;
-	}
-
-	.components-spacing-sizes-control__side-labels {
-		grid-column: 1 / 1;
-		justify-content: left;
-		height: $grid-unit-20;
-		margin-top: $grid-unit-20;
-	}
-
-	.components-spacing-sizes-control__side-label {
-		grid-column: 1 / 1;
-		justify-self: left;
+.spacing-sizes-control {
+	.spacing-sizes-control__custom-value-input,
+	.spacing-sizes-control__label {
 		margin-bottom: 0;
 	}
 
-	&.is-unlinked {
-		.components-range-control.components-spacing-sizes-control__range-control,
-		.components-spacing-sizes-control__custom-value-input {
-			margin-top: $grid-unit-10;
-		}
-	}
-
-	.components-spacing-sizes-control__hint-single,
-	.components-spacing-sizes-control__hint-all {
-		color: $gray-700;
-		margin-bottom: 0;
-	}
-
-	.components-spacing-sizes-control__hint-all {
-		grid-column: 2 / 2;
-		justify-self: left;
-		grid-row: 1 / 1;
-		align-self: center;
-		margin-left: $grid-unit-05;
-		margin-bottom: $grid-unit-10;
-	}
-
-	.components-spacing-sizes-control__custom-toggle-all {
-		grid-column: 2 / 2;
-		grid-row: 1 / 1;
-		justify-self: end;
-		margin-top: -4px;
-	}
-
-	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
-		margin-right: $grid-unit-05;
-	}
-
-	.components-spacing-sizes-control__custom-toggle-single {
-		grid-column: 3 / 3;
-		justify-self: end;
-		margin-top: $grid-unit-15;
-	}
-
-	.component-spacing-sizes-control__linked-button {
-		grid-column: 3 / 3;
-		grid-row: 1 / 1;
-		justify-self: end;
-		line-height: 0;
-		margin-top: -4px;
-	}
-
-	.components-spacing-sizes-control__custom-value-range {
-		grid-column: span 2;
-		margin-left: $grid-unit-20;
-	}
-
-	.components-base-control.components-spacing-sizes-control__custom-value-input {
-		width: 124px;
-		grid-column: 1;
-		margin-bottom: 0;
-	}
-
-	.components-base-control.components-range-control {
+	.spacing-sizes-control__range-control,
+	.spacing-sizes-control__custom-value-range {
 		height: 40px;
 		/* Vertically center the RangeControl until it has true 40px height. */
 		display: flex;
 		align-items: center;
 		margin-bottom: 0;
+		flex: 1;
 
 		> .components-base-control__field {
 			/* Fixes RangeControl contents when the outer wrapper is flex */
@@ -107,10 +19,6 @@
 		}
 	}
 
-	.components-spacing-sizes-control__range-control {
-		grid-column: span 3;
-	}
-
 	.components-range-control__mark {
 		height: $grid-unit-05;
 		width: 3px;
@@ -129,9 +37,29 @@
 	.components-range-control__thumb-wrapper {
 		z-index: 3;
 	}
+}
 
-	.components-spacing-sizes-control__custom-select-control {
-		grid-column: span 3;
+.spacing-sizes-control__wrapper {
+	& + & {
 		margin-top: $grid-unit-10;
 	}
 }
+
+.spacing-sizes-control__header {
+	height: $grid-unit-20;
+	margin-bottom: $grid-unit-10;
+}
+
+.spacing-sizes-control__dropdown {
+	height: $grid-unit-30;
+}
+
+.spacing-sizes-control__custom-select-control,
+.spacing-sizes-control__custom-value-input {
+	flex: 1;
+}
+
+.spacing-sizes-control__icon,
+.spacing-sizes-control__custom-toggle {
+	flex: 0 0 auto;
+}