@wordpress/block-editor 9.7.0 → 9.8.1-next.957ca95e4c.0

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

@@ -0,0 +1,122 @@
+.tools-panel-item-spacing {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-row-gap: $grid-unit-05;
+}
+
+.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-spacing-sizes-control__side-labels {
+		grid-column: 1 / 1;
+		min-height: 30px;
+		justify-content: left;
+	}
+
+	.components-spacing-sizes-control__hint-single {
+		margin-top: 0;
+		margin-left: 0;
+	}
+
+	.components-spacing-sizes-control__hint-single,
+	.components-spacing-sizes-control__hint-all {
+		color: $gray-700;
+		font-size: 12px;
+	}
+
+	.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;
+	}
+
+	.components-spacing-sizes-control__custom-toggle-all {
+		grid-column: 2 / 2;
+		grid-row: 1 / 1;
+		justify-self: end;
+		margin-right: $grid-unit-05;
+		padding: 0;
+	}
+
+	.components-spacing-sizes-control__custom-toggle-single {
+		grid-column: 3 / 3;
+		justify-self: end;
+	}
+
+	.components-spacing-sizes-control__custom-toggle-all,
+	.components-spacing-sizes-control__custom-toggle-single {
+		&.is-small.has-icon {
+			padding: 0;
+			min-width: $icon-size;
+		}
+	}
+
+	.component-spacing-sizes-control__linked-button {
+		grid-column: 3 / 3;
+		grid-row: 1 / 1;
+		justify-self: end;
+	}
+
+	.components-spacing-sizes-control__custom-value-range {
+		grid-column: span 2;
+		margin-left: $grid-unit-10;
+		padding-right: $grid-unit-10;
+		height: 30px;
+	}
+
+	.components-spacing-sizes-control__custom-value-input {
+		width: 124px;
+	}
+
+	.components-spacing-sizes-control__range-control {
+		grid-column: span 3;
+		padding-right: $grid-unit-10;
+		height: 30px;
+	}
+
+	.components-range-control__wrapper {
+		margin-bottom: 0;
+	}
+
+	.components-range-control__mark {
+		height: $grid-unit-05;
+		width: 3px;
+		background-color: #fff;
+		z-index: 1;
+	}
+
+	.components-range-control__marks {
+		margin-top: 17px;
+
+		:first-child {
+			display: none;
+		}
+	}
+
+	[class*="ThumbWrapper-thumbColor"] {
+		z-index: 3;
+	}
+
+	.components-spacing-sizes-control__side-label {
+		margin-right: $grid-unit-05;
+		grid-column: 1 / 1;
+		justify-self: left;
+		font-size: 12px;
+	}
+
+	.components-spacing-sizes-control__custom-select-control {
+		grid-column: span 3;
+	}
+}

package/src/components/spacing-sizes-control/test/utils.js

@@ -0,0 +1,182 @@
+/**
+ * Internal dependencies
+ */
+import {
+	isValueSpacingPreset,
+	getCustomValueFromPreset,
+	getPresetValueFromCustomValue,
+	getSpacingPresetCssVar,
+	getSpacingPresetSlug,
+	getSliderValueFromPreset,
+	getAllRawValue,
+	isValuesMixed,
+	isValuesDefined,
+} from '../utils';
+
+describe( 'isValueSpacingPreset', () => {
+	it( 'should return true if value is string in spacing presets var format', () => {
+		expect( isValueSpacingPreset( 'var:preset|spacing|20' ) ).toBe( true );
+	} );
+	it( 'should return false if value is not a string in spacing presets var format', () => {
+		expect( isValueSpacingPreset( '30px' ) ).toBe( false );
+	} );
+} );
+
+describe( 'getCustomValueFromPreset', () => {
+	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	it( 'should return original value if not a string in spacing presets var format', () => {
+		expect( getCustomValueFromPreset( '20px', spacingSizes ) ).toBe(
+			'20px'
+		);
+	} );
+	it( 'should return value from matching spacingSizes array entry if string in spacing presets var format', () => {
+		expect(
+			getCustomValueFromPreset( 'var:preset|spacing|20', spacingSizes )
+		).toBe( '8px' );
+	} );
+	it( 'should return undefined if no matching preset in spacingSizes array', () => {
+		expect(
+			getCustomValueFromPreset( 'var:preset|spacing|30', spacingSizes )
+		).toBe( undefined );
+	} );
+} );
+
+describe( 'getPresetValueFromCustomValue', () => {
+	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	it( 'should return original value if a string in spacing presets var format', () => {
+		expect(
+			getPresetValueFromCustomValue(
+				'var:preset|spacing|80',
+				spacingSizes
+			)
+		).toBe( 'var:preset|spacing|80' );
+	} );
+	it( 'should return value constructed from matching spacingSizes array entry if value matches sizes', () => {
+		expect( getPresetValueFromCustomValue( '8px', spacingSizes ) ).toBe(
+			'var:preset|spacing|20'
+		);
+	} );
+	it( 'should return values as-is if no matching preset in spacingSizes array', () => {
+		expect(
+			getPresetValueFromCustomValue( '1.125rem', spacingSizes )
+		).toBe( '1.125rem' );
+	} );
+} );
+
+describe( 'getSpacingPresetCssVar', () => {
+	it( 'should return original value if not a string in spacing presets var format', () => {
+		expect( getSpacingPresetCssVar( '20px' ) ).toBe( '20px' );
+	} );
+	it( 'should return a string in spacing presets css var format with slug from provided value', () => {
+		expect( getSpacingPresetCssVar( 'var:preset|spacing|20' ) ).toBe(
+			'var(--wp--preset--spacing--20)'
+		);
+	} );
+} );
+
+describe( 'getSpacingPresetSlug', () => {
+	it( 'should return original value if 0 or default', () => {
+		expect( getSpacingPresetSlug( '0' ) ).toBe( '0' );
+		expect( getSpacingPresetSlug( 'default' ) ).toBe( 'default' );
+	} );
+	it( 'should return the int value of the slug portion of a valid preset var', () => {
+		expect( getSpacingPresetSlug( 'var:preset|spacing|20' ) ).toBe( '20' );
+	} );
+} );
+
+describe( 'getSliderValueFromPreset', () => {
+	const spacingSizes = [
+		{ name: 'Small', slug: 20, size: '8px' },
+		{ name: 'Large', slug: 30, size: '24px' },
+	];
+	it( 'should return NaN if no matching preset found - NaN makes range control go to start', () => {
+		expect( getSliderValueFromPreset( '10px', spacingSizes ) ).toBe( NaN );
+	} );
+	it( 'should return the int value of the slug portion of a valid preset var', () => {
+		expect(
+			getSliderValueFromPreset( 'var:preset|spacing|30', spacingSizes )
+		).toBe( 1 );
+	} );
+} );
+
+describe( 'getAllRawValue', () => {
+	const customValues = {
+		top: '5px',
+		bottom: '5px',
+		left: '6px',
+		right: '2px',
+	};
+	it( 'should return the most common custom value from the values object', () => {
+		expect( getAllRawValue( customValues ) ).toBe( '5px' );
+	} );
+	const presetValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|20',
+		left: 'var:preset|spacing|10',
+		right: 'var:preset|spacing|30',
+	};
+	it( 'should return the most common preset value from the values object', () => {
+		expect( getAllRawValue( presetValues ) ).toBe(
+			'var:preset|spacing|30'
+		);
+	} );
+} );
+
+describe( 'isValuesMixed', () => {
+	const unmixedValues = {
+		top: '5px',
+		bottom: '5px',
+		left: '5px',
+		right: '5px',
+	};
+	it( 'should return false if all values are the same', () => {
+		expect( isValuesMixed( unmixedValues ) ).toBe( false );
+	} );
+	const mixedValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|20',
+		left: 'var:preset|spacing|10',
+		right: 'var:preset|spacing|30',
+	};
+	it( 'should return true if all the values are not the same', () => {
+		expect( isValuesMixed( mixedValues ) ).toBe( true );
+	} );
+	const singleValue = {
+		top: 'var:preset|spacing|30',
+	};
+	it( 'should return true if only one side set', () => {
+		expect( isValuesMixed( singleValue ) ).toBe( true );
+	} );
+	const incompleteValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|30',
+		left: 'var:preset|spacing|30',
+	};
+	it( 'should return true if all sides not set', () => {
+		expect( isValuesMixed( incompleteValues ) ).toBe( true );
+	} );
+} );
+
+describe( 'isValuesDefined', () => {
+	const undefinedValues = {
+		top: undefined,
+		bottom: undefined,
+		left: undefined,
+		right: undefined,
+	};
+	it( 'should return false if values are not defined', () => {
+		expect( isValuesDefined( undefinedValues ) ).toBe( false );
+	} );
+	it( 'should return false if values is passed in as null', () => {
+		expect( isValuesDefined( null ) ).toBe( false );
+	} );
+	const definedValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|20',
+		left: 'var:preset|spacing|10',
+		right: 'var:preset|spacing|30',
+	};
+	it( 'should return true if all the values are not the same', () => {
+		expect( isValuesDefined( definedValues ) ).toBe( true );
+	} );
+} );

package/src/components/spacing-sizes-control/utils.js

@@ -0,0 +1,222 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Checks is given value is a spacing preset.
+ *
+ * @param {string} value Value to check
+ *
+ * @return {boolean} Return true if value is string in format var:preset|spacing|.
+ */
+export function isValueSpacingPreset( value ) {
+	if ( ! value?.includes ) {
+		return false;
+	}
+	return value === '0' || value.includes( 'var:preset|spacing|' );
+}
+
+/**
+ * Converts a spacing preset into a custom value.
+ *
+ * @param {string} value        Value to convert
+ * @param {Array}  spacingSizes Array of the current spacing preset objects
+ *
+ * @return {string} Mapping of the spacing preset to its equivalent custom value.
+ */
+export function getCustomValueFromPreset( value, spacingSizes ) {
+	if ( ! isValueSpacingPreset( value ) ) {
+		return value;
+	}
+
+	const slug = getSpacingPresetSlug( value );
+	const spacingSize = spacingSizes.find(
+		( size ) => String( size.slug ) === slug
+	);
+
+	return spacingSize?.size;
+}
+
+/**
+ * Converts a custom value to preset value if one can be found.
+ *
+ * Returns value as-is if no match is found.
+ *
+ * @param {string} value        Value to convert
+ * @param {Array}  spacingSizes Array of the current spacing preset objects
+ *
+ * @return {string} The preset value if it can be found.
+ */
+export function getPresetValueFromCustomValue( value, spacingSizes ) {
+	// Return value as-is if it is already a preset;
+	if ( isValueSpacingPreset( value ) ) {
+		return value;
+	}
+
+	const spacingMatch = spacingSizes.find(
+		( size ) => String( size.size ) === String( value )
+	);
+
+	if ( spacingMatch?.slug ) {
+		return `var:preset|spacing|${ spacingMatch.slug }`;
+	}
+
+	return value;
+}
+
+/**
+ * Converts a spacing preset into a custom value.
+ *
+ * @param {string} value Value to convert.
+ *
+ * @return {string} CSS var string for given spacing preset value.
+ */
+export function getSpacingPresetCssVar( value ) {
+	if ( ! value ) {
+		return;
+	}
+
+	const slug = value.match( /var:preset\|spacing\|(.+)/ );
+
+	if ( ! slug ) {
+		return value;
+	}
+
+	return `var(--wp--preset--spacing--${ slug[ 1 ] })`;
+}
+
+/**
+ * Returns the slug section of the given spacing preset string.
+ *
+ * @param {string} value Value to extract slug from.
+ *
+ * @return {number} The int value of the slug from given spacing preset.
+ */
+export function getSpacingPresetSlug( value ) {
+	if ( ! value ) {
+		return;
+	}
+
+	if ( value === '0' || value === 'default' ) {
+		return value;
+	}
+
+	const slug = value.match( /var:preset\|spacing\|(.+)/ );
+
+	return slug ? slug[ 1 ] : undefined;
+}
+
+/**
+ * Converts spacing preset value into a Range component value .
+ *
+ * @param {string} presetValue  Value to convert to Range value.
+ * @param {Array}  spacingSizes Array of current spacing preset value objects.
+ *
+ * @return {number} The int value for use in Range control.
+ */
+export function getSliderValueFromPreset( presetValue, spacingSizes ) {
+	if ( presetValue === undefined ) {
+		return 0;
+	}
+	const slug =
+		parseFloat( presetValue, 10 ) === 0
+			? '0'
+			: getSpacingPresetSlug( presetValue );
+	const sliderValue = spacingSizes.findIndex( ( spacingSize ) => {
+		return String( spacingSize.slug ) === slug;
+	} );
+
+	// Returning NaN rather than undefined as undefined makes range control thumb sit in center
+	return sliderValue !== -1 ? sliderValue : NaN;
+}
+
+export const LABELS = {
+	all: __( 'All sides' ),
+	top: __( 'Top' ),
+	bottom: __( 'Bottom' ),
+	left: __( 'Left' ),
+	right: __( 'Right' ),
+	mixed: __( 'Mixed' ),
+	vertical: __( 'Vertical' ),
+	horizontal: __( 'Horizontal' ),
+};
+
+export const DEFAULT_VALUES = {
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+
+export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+
+/**
+ * Gets an items with the most occurrence within an array
+ * https://stackoverflow.com/a/20762713
+ *
+ * @param {Array<any>} arr Array of items to check.
+ * @return {any} The item with the most occurrences.
+ */
+function mode( arr ) {
+	return arr
+		.sort(
+			( a, b ) =>
+				arr.filter( ( v ) => v === a ).length -
+				arr.filter( ( v ) => v === b ).length
+		)
+		.pop();
+}
+
+/**
+ * Gets the 'all' input value from values data.
+ *
+ * @param {Object} values Box spacing values
+ *
+ * @return {string} The most common value from all sides of box.
+ */
+export function getAllRawValue( values = {} ) {
+	return mode( Object.values( values ) );
+}
+
+/**
+ * Checks to determine if values are mixed.
+ *
+ * @param {Object} values Box values.
+ * @param {Array}  sides  Sides that values relate to.
+ *
+ * @return {boolean} Whether values are mixed.
+ */
+export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
+	return (
+		( Object.values( values ).length >= 1 &&
+			Object.values( values ).length < sides.length ) ||
+		new Set( Object.values( values ) ).size > 1
+	);
+}
+
+/**
+ * Checks to determine if values are defined.
+ *
+ * @param {Object} values Box values.
+ *
+ * @return {boolean} Whether values are defined.
+ */
+export function isValuesDefined( values ) {
+	if ( values === undefined || values === null ) {
+		return false;
+	}
+	return ! isEmpty(
+		Object.values( values ).filter(
+			// Switching units when input is empty causes values only
+			// containing units. This gives false positive on mixed values
+			// unless filtered.
+			( value ) => !! value && /\d/.test( value )
+		)
+	);
+}

package/src/components/text-decoration-control/index.js

@@ -1,7 +1,15 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 import { formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -21,38 +29,41 @@ const TEXT_DECORATIONS = [
 /**
  * Control to facilitate text decoration selections.
  *
- * @param {Object}   props          Component props.
- * @param {string}   props.value    Currently selected text decoration.
- * @param {Function} props.onChange Handles change in text decoration selection.
+ * @param {Object}   props             Component props.
+ * @param {string}   props.value       Currently selected text decoration.
+ * @param {Function} props.onChange    Handles change in text decoration selection.
+ * @param {string}   [props.className] Additional class name to apply.
  *
  * @return {WPElement} Text decoration control.
  */
-export default function TextDecorationControl( { value, onChange } ) {
+export default function TextDecorationControl( {
+	value,
+	onChange,
+	className,
+	...props
+} ) {
 	return (
-		<fieldset className="block-editor-text-decoration-control">
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Decoration' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-decoration-control__buttons">
-				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
-					return (
-						<Button
-							key={ textDecoration.value }
-							icon={ textDecoration.icon }
-							isSmall
-							isPressed={ textDecoration.value === value }
-							onClick={ () =>
-								onChange(
-									textDecoration.value === value
-										? undefined
-										: textDecoration.value
-								)
-							}
-							aria-label={ textDecoration.name }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<ToggleGroupControl
+			{ ...props }
+			className={ classnames(
+				'block-editor-text-decoration-control',
+				className
+			) }
+			__experimentalIsIconGroup
+			label={ __( 'Decoration' ) }
+			value={ value }
+			onChange={ onChange }
+		>
+			{ TEXT_DECORATIONS.map( ( textDecoration ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ textDecoration.value }
+						value={ textDecoration.value }
+						icon={ textDecoration.icon }
+						label={ textDecoration.name }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }

package/src/components/text-decoration-control/stories/index.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextDecorationControl from '../';
+
+export default {
+	title: 'BlockEditor/TextDecorationControl',
+	component: TextDecorationControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		size: {
+			options: [ 'default', '__unstable-large' ],
+			control: { type: 'radio' },
+		},
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextDecorationControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );