@wordpress/block-editor 9.6.0 → 9.8.0

package/src/components/border-radius-control/all-input-control.js

@@ -7,14 +7,50 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getAllValue, hasMixedValues, hasDefinedValues } from './utils';
+import {
+	getAllValue,
+	getAllUnit,
+	hasMixedValues,
+	hasDefinedValues,
+} from './utils';
+
+export default function AllInputControl( {
+	onChange,
+	selectedUnits,
+	setSelectedUnits,
+	values,
+	...props
+} ) {
+	let allValue = getAllValue( values );
+
+	if ( allValue === undefined ) {
+		// If we don't have any value set the unit to any current selection
+		// or the most common unit from the individual radii values.
+		allValue = getAllUnit( selectedUnits );
+	}
 
-export default function AllInputControl( { onChange, values, ...props } ) {
-	const allValue = getAllValue( values );
 	const hasValues = hasDefinedValues( values );
 	const isMixed = hasValues && hasMixedValues( values );
 	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
 
+	// Filter out CSS-unit-only values to prevent invalid styles.
+	const handleOnChange = ( next ) => {
+		const isNumeric = ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+		onChange( nextValue );
+	};
+
+	// Store current unit selection for use as fallback for individual
+	// radii controls.
+	const handleOnUnitChange = ( unit ) => {
+		setSelectedUnits( {
+			topLeft: unit,
+			topRight: unit,
+			bottomLeft: unit,
+			bottomRight: unit,
+		} );
+	};
+
 	return (
 		<UnitControl
 			{ ...props }
@@ -22,7 +58,8 @@ export default function AllInputControl( { onChange, values, ...props } ) {
 			disableUnits={ isMixed }
 			isOnly
 			value={ allValue }
-			onChange={ onChange }
+			onChange={ handleOnChange }
+			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
 		/>
 	);

package/src/components/border-radius-control/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	BaseControl,
 	RangeControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -24,10 +25,10 @@ import {
 } from './utils';
 
 const DEFAULT_VALUES = {
-	topLeft: null,
-	topRight: null,
-	bottomLeft: null,
-	bottomRight: null,
+	topLeft: undefined,
+	topRight: undefined,
+	bottomLeft: undefined,
+	bottomRight: undefined,
 };
 const MIN_BORDER_RADIUS_VALUE = 0;
 const MAX_BORDER_RADIUS_VALUES = {
@@ -50,11 +51,27 @@ export default function BorderRadiusControl( { onChange, values } ) {
 		! hasDefinedValues( values ) || ! hasMixedValues( values )
 	);
 
+	// Tracking selected units via internal state allows filtering of CSS unit
+	// only values from being saved while maintaining preexisting unit selection
+	// behaviour. Filtering CSS unit only values prevents invalid style values.
+	const [ selectedUnits, setSelectedUnits ] = useState( {
+		flat:
+			typeof values === 'string'
+				? parseQuantityAndUnitFromRawValue( values )[ 1 ]
+				: undefined,
+		topLeft: parseQuantityAndUnitFromRawValue( values?.topLeft )[ 1 ],
+		topRight: parseQuantityAndUnitFromRawValue( values?.topRight )[ 1 ],
+		bottomLeft: parseQuantityAndUnitFromRawValue( values?.bottomLeft )[ 1 ],
+		bottomRight: parseQuantityAndUnitFromRawValue(
+			values?.bottomRight
+		)[ 1 ],
+	} );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 	} );
 
-	const unit = getAllUnit( values );
+	const unit = getAllUnit( selectedUnits );
 	const unitConfig = units && units.find( ( item ) => item.value === unit );
 	const step = unitConfig?.step || 1;
 
@@ -70,7 +87,9 @@ export default function BorderRadiusControl( { onChange, values } ) {
 
 	return (
 		<fieldset className="components-border-radius-control">
-			<legend>{ __( 'Radius' ) }</legend>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Radius' ) }
+			</BaseControl.VisualLabel>
 			<div className="components-border-radius-control__wrapper">
 				{ isLinked ? (
 					<>
@@ -79,6 +98,8 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							values={ values }
 							min={ MIN_BORDER_RADIUS_VALUE }
 							onChange={ onChange }
+							selectedUnits={ selectedUnits }
+							setSelectedUnits={ setSelectedUnits }
 							units={ units }
 						/>
 						<RangeControl
@@ -98,6 +119,8 @@ export default function BorderRadiusControl( { onChange, values } ) {
 					<InputControls
 						min={ MIN_BORDER_RADIUS_VALUE }
 						onChange={ onChange }
+						selectedUnits={ selectedUnits }
+						setSelectedUnits={ setSelectedUnits }
 						values={ values || DEFAULT_VALUES }
 						units={ units }
 					/>

package/src/components/border-radius-control/input-controls.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUnitControl as UnitControl,
 	Tooltip,
 } from '@wordpress/components';
@@ -16,6 +17,8 @@ const CORNERS = {
 
 export default function BoxInputControls( {
 	onChange,
+	selectedUnits,
+	setSelectedUnits,
 	values: valuesProp,
 	...props
 } ) {
@@ -24,12 +27,22 @@ export default function BoxInputControls( {
 			return;
 		}
 
+		// Filter out CSS-unit-only values to prevent invalid styles.
+		const isNumeric = ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+
 		onChange( {
 			...values,
-			[ corner ]: next ? next : undefined,
+			[ corner ]: nextValue,
 		} );
 	};
 
+	const createHandleOnUnitChange = ( side ) => ( next ) => {
+		const newUnits = { ...selectedUnits };
+		newUnits[ side ] = next;
+		setSelectedUnits( newUnits );
+	};
+
 	// For shorthand style & backwards compatibility, handle flat string value.
 	const values =
 		typeof valuesProp !== 'string'
@@ -46,18 +59,32 @@ export default function BoxInputControls( {
 	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
 	return (
 		<div className="components-border-radius-control__input-controls-wrapper">
-			{ Object.entries( CORNERS ).map( ( [ key, label ] ) => (
-				<Tooltip text={ label } position="top" key={ key }>
-					<div className="components-border-radius-control__tooltip-wrapper">
-						<UnitControl
-							{ ...props }
-							aria-label={ label }
-							value={ values[ key ] }
-							onChange={ createHandleOnChange( key ) }
-						/>
-					</div>
-				</Tooltip>
-			) ) }
+			{ Object.entries( CORNERS ).map( ( [ corner, label ] ) => {
+				const [ parsedQuantity, parsedUnit ] =
+					parseQuantityAndUnitFromRawValue( values[ corner ] );
+
+				const computedUnit = values[ corner ]
+					? parsedUnit
+					: selectedUnits[ corner ] || selectedUnits.flat;
+
+				return (
+					<Tooltip text={ label } position="top" key={ corner }>
+						<div className="components-border-radius-control__tooltip-wrapper">
+							<UnitControl
+								{ ...props }
+								aria-label={ label }
+								value={ [ parsedQuantity, computedUnit ].join(
+									''
+								) }
+								onChange={ createHandleOnChange( corner ) }
+								onUnitChange={ createHandleOnUnitChange(
+									corner
+								) }
+							/>
+						</div>
+					</Tooltip>
+				);
+			} ) }
 		</div>
 	);
 }

package/src/components/border-radius-control/test/utils.js

@@ -9,73 +9,35 @@ import {
 	mode,
 } from '../utils';
 
-describe( 'getAllUnit', () => {
-	describe( 'when provided string based values', () => {
-		it( 'should return valid unit when passed a valid unit', () => {
-			expect( getAllUnit( '32em' ) ).toBe( 'em' );
-		} );
-
-		it( 'should fall back to px when passed an invalid unit', () => {
-			expect( getAllUnit( '32apples' ) ).toBe( 'px' );
-		} );
+const defaultUnitSelections = {
+	flat: undefined,
+	topLeft: '%',
+	topRight: 'rem',
+	bottomLeft: 'rem',
+	bottomRight: 'vw',
+};
 
-		it( 'should fall back to px when passed a value without a unit', () => {
-			expect( getAllUnit( '32' ) ).toBe( 'px' );
-		} );
+describe( 'getAllUnit', () => {
+	it( 'should return flat radius unit when selected', () => {
+		const selectedUnits = { ...defaultUnitSelections, flat: 'em' };
+		expect( getAllUnit( selectedUnits ) ).toBe( 'em' );
 	} );
 
-	describe( 'when provided object based values', () => {
-		it( 'should return the most common value', () => {
-			const values = {
-				bottomLeft: '2em',
-				bottomRight: '2em',
-				topLeft: '0',
-				topRight: '2px',
-			};
-			expect( getAllUnit( values ) ).toBe( 'em' );
-		} );
-
-		it( 'should return the real value when the most common value is undefined', () => {
-			const values = {
-				bottomLeft: '0',
-				bottomRight: '0',
-				topLeft: '0',
-				topRight: '2em',
-			};
-			expect( getAllUnit( values ) ).toBe( 'em' );
-		} );
+	it( 'should return most common corner unit', () => {
+		expect( getAllUnit( defaultUnitSelections ) ).toBe( 'rem' );
+	} );
 
-		it( 'should return the most common value there are no undefined values', () => {
-			const values = {
-				bottomLeft: '1em',
-				bottomRight: '1em',
-				topLeft: '2px',
-				topRight: '2em',
-			};
-			expect( getAllUnit( values ) ).toBe( 'em' );
-		} );
+	it( 'should return a real unit when the most common is undefined', () => {
+		expect( getAllUnit( { bottomRight: '%' } ) ).toBe( '%' );
+	} );
 
-		it( 'should fall back to px when all values are undefined or equivalent', () => {
-			const values = {
-				bottomLeft: '0',
-				bottomRight: undefined,
-				topLeft: undefined,
-				topRight: '0',
-			};
-			expect( getAllUnit( values ) ).toBe( 'px' );
-		} );
+	it( 'should return most common corner unit when some are unselected', () => {
+		const selectedUnits = { ...defaultUnitSelections, topLeft: undefined };
+		expect( getAllUnit( selectedUnits ) ).toBe( 'rem' );
 	} );
 
-	describe( 'when provided invalid values', () => {
-		it( 'should return px when passed an array', () => {
-			expect( getAllUnit( [] ) ).toBe( 'px' );
-		} );
-		it( 'should return px when passed a boolean', () => {
-			expect( getAllUnit( false ) ).toBe( 'px' );
-		} );
-		it( 'should return px when passed undefined', () => {
-			expect( getAllUnit( false ) ).toBe( 'px' );
-		} );
+	it( 'should fallback to px when all values are undefined', () => {
+		expect( getAllUnit( {} ) ).toBe( 'px' );
 	} );
 } );
 

package/src/components/border-radius-control/utils.js

@@ -28,24 +28,20 @@ export function mode( inputArray ) {
 }
 
 /**
- * Returns the most common CSS unit in the radius values.
- * Falls back to `px` as a default unit.
+ * Returns the most common CSS unit from the current CSS unit selections.
  *
- * @param {Object|string} values Radius values.
- * @return {string}              Most common CSS unit in values. Default: `px`.
+ * - If a single flat border radius is set, its unit will be used
+ * - If individual corner selections, the most common of those will be used
+ * - Failing any unit selections a default of 'px' is returned.
+ *
+ * @param {Object} selectedUnits Unit selections for flat radius & each corner.
+ * @return {string} Most common CSS unit from current selections. Default: `px`.
  */
-export function getAllUnit( values = {} ) {
-	if ( typeof values === 'string' ) {
-		const [ , unit ] = parseQuantityAndUnitFromRawValue( values );
-		return unit || 'px';
-	}
-
-	const allUnits = Object.values( values ).map( ( value ) => {
-		const [ , unit ] = parseQuantityAndUnitFromRawValue( value );
-		return unit;
-	} );
-
-	return mode( allUnits ) || 'px';
+export function getAllUnit( selectedUnits = {} ) {
+	const { flat, ...cornerUnits } = selectedUnits;
+	return (
+		flat || mode( Object.values( cornerUnits ).filter( Boolean ) ) || 'px'
+	);
 }
 
 /**

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -4,6 +4,13 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .components-panel__row .emotion-2 {
@@ -36,8 +43,13 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-6 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
   display: inline-block;
   margin-bottom: calc(4px * 2);
+  padding: 0;
 }
 
 .emotion-8 {
@@ -140,100 +152,104 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
           </div>
         </legend>
         <div
-          className="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
-          data-wp-c16t={true}
-          data-wp-component="VStack"
+          className="block-editor-color-gradient-control__panel"
         >
           <div
-            className="components-dropdown"
-            tabIndex="-1"
+            className="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
+            data-wp-c16t={true}
+            data-wp-component="VStack"
           >
-            <button
-              aria-expanded={false}
-              aria-haspopup="true"
-              aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-              className="components-flex components-color-palette__custom-color emotion-10 emotion-5"
-              data-wp-c16t={true}
-              data-wp-component="Flex"
-              onClick={[Function]}
-              style={
-                Object {
-                  "background": "#f00",
-                  "color": "#000",
-                }
-              }
+            <div
+              className="components-dropdown"
+              tabIndex="-1"
             >
-              <span
-                className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
-                data-wp-c16t={true}
-                data-wp-component="FlexItem"
-              >
-                red
-              </span>
-              <span
-                className="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+              <button
+                aria-expanded={false}
+                aria-haspopup="true"
+                aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
+                className="components-flex components-color-palette__custom-color emotion-10 emotion-5"
                 data-wp-c16t={true}
-                data-wp-component="FlexItem"
+                data-wp-component="Flex"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "background": "#f00",
+                    "color": "#000",
+                  }
+                }
               >
-                f00
-              </span>
-            </button>
-          </div>
-          <div
-            className="components-circular-option-picker"
-          >
+                <span
+                  className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
+                  data-wp-c16t={true}
+                  data-wp-component="FlexItem"
+                >
+                  red
+                </span>
+                <span
+                  className="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                  data-wp-c16t={true}
+                  data-wp-component="FlexItem"
+                >
+                  f00
+                </span>
+              </button>
+            </div>
             <div
-              className="components-circular-option-picker__swatches"
+              className="components-circular-option-picker"
             >
               <div
-                className="components-circular-option-picker__option-wrapper"
+                className="components-circular-option-picker__swatches"
+              >
+                <div
+                  className="components-circular-option-picker__option-wrapper"
+                >
+                  <button
+                    aria-describedby={null}
+                    aria-label="Color: red"
+                    aria-pressed={true}
+                    className="components-button components-circular-option-picker__option is-pressed"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseEnter={[Function]}
+                    onMouseLeave={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#f00",
+                        "color": "#f00",
+                      }
+                    }
+                    type="button"
+                  />
+                  <svg
+                    aria-hidden={true}
+                    fill="#000"
+                    focusable={false}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                className="components-circular-option-picker__custom-clear-wrapper"
               >
                 <button
                   aria-describedby={null}
-                  aria-label="Color: red"
-                  aria-pressed={true}
-                  className="components-button components-circular-option-picker__option is-pressed"
-                  onBlur={[Function]}
+                  className="components-button components-circular-option-picker__clear is-tertiary"
                   onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  style={
-                    Object {
-                      "backgroundColor": "#f00",
-                      "color": "#f00",
-                    }
-                  }
                   type="button"
-                />
-                <svg
-                  aria-hidden={true}
-                  fill="#000"
-                  focusable={false}
-                  height={24}
-                  viewBox="0 0 24 24"
-                  width={24}
-                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
-                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                  />
-                </svg>
+                  Clear
+                </button>
               </div>
             </div>
-            <div
-              className="components-circular-option-picker__custom-clear-wrapper"
-            >
-              <button
-                aria-describedby={null}
-                className="components-button components-circular-option-picker__clear is-tertiary"
-                onClick={[Function]}
-                type="button"
-              >
-                Clear
-              </button>
-            </div>
           </div>
         </div>
       </div>

package/src/components/colors/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase, maxBy } from 'lodash';
+import { find, kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -77,6 +77,9 @@ export function getColorClassName( colorContextName, colorSlug ) {
  */
 export function getMostReadableColor( colors, colorValue ) {
 	const colordColor = colord( colorValue );
-	return maxBy( colors, ( { color } ) => colordColor.contrast( color ) )
+	const getColorContrast = ( { color } ) => colordColor.contrast( color );
+
+	const maxContrast = Math.max( ...colors.map( getColorContrast ) );
+	return colors.find( ( color ) => getColorContrast( color ) === maxContrast )
 		.color;
 }

package/src/components/colors/with-colors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase, reduce, upperFirst } from 'lodash';
+import { kebabCase, reduce } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,6 +20,16 @@ import {
 } from './utils';
 import useSetting from '../use-setting';
 
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return {string} Capitalized string.
+ */
+const upperFirst = ( [ firstLetter, ...rest ] ) =>
+	firstLetter.toUpperCase() + rest.join( '' );
+
 /**
  * Higher order component factory for injecting the `colorsArray` argument as
  * the colors prop in the `withCustomColors` HOC.

package/src/components/colors-gradients/control.js

@@ -29,7 +29,7 @@ const colorsAndGradientKeys = [
 
 const TAB_COLOR = {
 	name: 'color',
-	title: 'Solid color',
+	title: 'Solid',
 	value: 'color',
 };
 const TAB_GRADIENT = {
@@ -113,6 +113,12 @@ function ColorGradientControlInner( {
 		),
 	};
 
+	const renderPanelType = ( type ) => (
+		<div className="block-editor-color-gradient-control__panel">
+			{ tabPanels[ type ] }
+		</div>
+	);
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
@@ -142,15 +148,13 @@ function ColorGradientControlInner( {
 									: !! canChooseAColor && TAB_COLOR.value
 							}
 						>
-							{ ( tab ) => (
-								<div className="block-editor-color-gradient-control__tab-panel">
-									{ tabPanels[ tab.value ] }
-								</div>
-							) }
+							{ ( tab ) => renderPanelType( tab.value ) }
 						</TabPanel>
 					) }
-					{ ! canChooseAGradient && tabPanels[ TAB_COLOR.value ] }
-					{ ! canChooseAColor && tabPanels[ TAB_GRADIENT.value ] }
+					{ ! canChooseAGradient &&
+						renderPanelType( TAB_COLOR.value ) }
+					{ ! canChooseAColor &&
+						renderPanelType( TAB_GRADIENT.value ) }
 				</VStack>
 			</fieldset>
 		</BaseControl>