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

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

@@ -43,6 +43,33 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
 	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.
  *
@@ -181,15 +208,15 @@ export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
  * @return {boolean} Whether values are defined.
  */
 export function isValuesDefined( values ) {
-	return (
-		values !== undefined &&
-		! 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 )
-			)
+	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( {} );

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

@@ -1,7 +1,13 @@
+/**
+ * External dependencies
+ */
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	formatCapitalize,
@@ -36,32 +42,26 @@ const TEXT_TRANSFORMS = [
  *
  * @return {WPElement} Text transform control.
  */
-export default function TextTransformControl( { value, onChange } ) {
+export default function TextTransformControl( { value, onChange, ...props } ) {
 	return (
-		<fieldset className="block-editor-text-transform-control">
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Letter case' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-transform-control__buttons">
-				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
-					return (
-						<Button
-							key={ textTransform.value }
-							icon={ textTransform.icon }
-							isSmall
-							isPressed={ value === textTransform.value }
-							aria-label={ textTransform.name }
-							onClick={ () =>
-								onChange(
-									value === textTransform.value
-										? undefined
-										: textTransform.value
-								)
-							}
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<ToggleGroupControl
+			{ ...props }
+			className="block-editor-text-transform-control"
+			__experimentalIsIconGroup
+			label={ __( 'Letter case' ) }
+			value={ value }
+			onChange={ onChange }
+		>
+			{ TEXT_TRANSFORMS.map( ( textTransform ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ textTransform.value }
+						value={ textTransform.value }
+						icon={ textTransform.icon }
+						label={ textTransform.name }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }

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

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

package/src/components/writing-flow/index.js

@@ -51,12 +51,14 @@ export function useWritingFlow() {
 						return;
 					}
 
+					node.classList.add( 'has-multi-selection' );
 					node.setAttribute(
 						'aria-label',
 						__( 'Multiple selected blocks' )
 					);
 
 					return () => {
+						node.classList.remove( 'has-multi-selection' );
 						node.removeAttribute( 'aria-label' );
 					};
 				},

package/src/components/writing-flow/use-select-all.js

@@ -37,28 +37,25 @@ export default function useSelectAll() {
 				return;
 			}
 
+			event.preventDefault();
+
 			const [ firstSelectedClientId ] = selectedClientIds;
 			const rootClientId = getBlockRootClientId( firstSelectedClientId );
-			let blockClientIds = getBlockOrder( rootClientId );
+			const blockClientIds = getBlockOrder( rootClientId );
 
 			// If we have selected all sibling nested blocks, try selecting up a
 			// level. See: https://github.com/WordPress/gutenberg/pull/31859/
 			if ( selectedClientIds.length === blockClientIds.length ) {
-				blockClientIds = getBlockOrder(
-					getBlockRootClientId( rootClientId )
-				);
-			}
-
-			const firstClientId = first( blockClientIds );
-			const lastClientId = last( blockClientIds );
-
-			if ( firstClientId === lastClientId ) {
-				selectBlock( firstClientId );
+				if ( rootClientId ) {
+					node.ownerDocument.defaultView
+						.getSelection()
+						.removeAllRanges();
+					selectBlock( rootClientId );
+				}
 				return;
 			}
 
-			multiSelect( firstClientId, lastClientId );
-			event.preventDefault();
+			multiSelect( first( blockClientIds ), last( blockClientIds ) );
 		}
 
 		node.addEventListener( 'keydown', onKeyDown );

package/src/hooks/align.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { has, without } from 'lodash';
+import { without } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -87,7 +87,7 @@ export function getValidAlignments(
  */
 export function addAttribute( settings ) {
 	// Allow blocks to specify their own attribute definition with default values if needed.
-	if ( has( settings.attributes, [ 'align', 'type' ] ) ) {
+	if ( 'type' in ( settings.attributes?.align ?? {} ) ) {
 		return settings;
 	}
 	if ( hasBlockSupport( settings, 'align' ) ) {

package/src/hooks/anchor.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { has } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -42,7 +37,7 @@ const ANCHOR_SCHEMA = {
  */
 export function addAttribute( settings ) {
 	// Allow blocks to specify their own attribute definition with default values if needed.
-	if ( has( settings.attributes, [ 'anchor', 'type' ] ) ) {
+	if ( 'type' in ( settings.attributes?.anchor ?? {} ) ) {
 		return settings;
 	}
 	if ( hasBlockSupport( settings, 'anchor' ) ) {

package/src/hooks/dimensions.js

@@ -79,15 +79,16 @@ export function DimensionsPanel( props ) {
 		},
 	} );
 
+	const spacingClassnames = classnames( {
+		'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0,
+	} );
+
 	return (
 		<>
 			<InspectorControls __experimentalGroup="dimensions">
 				{ ! isPaddingDisabled && (
 					<ToolsPanelItem
-						className={ classnames( {
-							'tools-panel-item-spacing':
-								spacingSizes && spacingSizes.length > 0,
-						} ) }
+						className={ spacingClassnames }
 						hasValue={ () => hasPaddingValue( props ) }
 						label={ __( 'Padding' ) }
 						onDeselect={ () => resetPadding( props ) }
@@ -100,10 +101,7 @@ export function DimensionsPanel( props ) {
 				) }
 				{ ! isMarginDisabled && (
 					<ToolsPanelItem
-						className={ classnames( {
-							'tools-panel-item-spacing':
-								spacingSizes && spacingSizes.length > 0,
-						} ) }
+						className={ spacingClassnames }
 						hasValue={ () => hasMarginValue( props ) }
 						label={ __( 'Margin' ) }
 						onDeselect={ () => resetMargin( props ) }
@@ -116,6 +114,7 @@ export function DimensionsPanel( props ) {
 				) }
 				{ ! isGapDisabled && (
 					<ToolsPanelItem
+						className={ spacingClassnames }
 						hasValue={ () => hasGapValue( props ) }
 						label={ __( 'Block spacing' ) }
 						onDeselect={ () => resetGap( props ) }

package/src/hooks/font-appearance.js

@@ -58,6 +58,7 @@ export function FontAppearanceEdit( props ) {
 			hasFontStyles={ hasFontStyles }
 			hasFontWeights={ hasFontWeights }
 			value={ { fontStyle, fontWeight } }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/font-family.js

@@ -132,6 +132,8 @@ export function FontFamilyEdit( {
 			fontFamilies={ fontFamilies }
 			value={ value }
 			onChange={ onChange }
+			size="__unstable-large"
+			__nextHasNoMarginBottom
 		/>
 	);
 }

package/src/hooks/font-size.js

@@ -147,6 +147,8 @@ export function FontSizeEdit( props ) {
 			onChange={ onChange }
 			value={ fontSizeValue }
 			withReset={ false }
+			size="__unstable-large"
+			__nextHasNoMarginBottom
 		/>
 	);
 }

package/src/hooks/gap.js

@@ -15,6 +15,7 @@ import {
  */
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
+import SpacingSizesControl from '../components/spacing-sizes-control';
 import useSetting from '../components/use-setting';
 import { AXIAL_SIDES, SPACING_SUPPORT_KEY, useCustomSides } from './dimensions';
 import { cleanEmptyObject } from './utils';
@@ -55,12 +56,8 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
 
 	const isValueString = typeof blockGapValue === 'string';
 	return {
-		top: isValueString
-			? getSpacingPresetCssVar( blockGapValue )
-			: getSpacingPresetCssVar( blockGapValue?.top ),
-		left: isValueString
-			? getSpacingPresetCssVar( blockGapValue )
-			: getSpacingPresetCssVar( blockGapValue?.left ),
+		top: isValueString ? blockGapValue : blockGapValue?.top,
+		left: isValueString ? blockGapValue : blockGapValue?.left,
 	};
 }
 
@@ -78,8 +75,10 @@ export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
 		return null;
 	}
 
-	const row = blockGapBoxControlValue?.top || defaultValue;
-	const column = blockGapBoxControlValue?.left || defaultValue;
+	const row =
+		getSpacingPresetCssVar( blockGapBoxControlValue?.top ) || defaultValue;
+	const column =
+		getSpacingPresetCssVar( blockGapBoxControlValue?.left ) || defaultValue;
 
 	return row === column ? row : `${ row } ${ column }`;
 }
@@ -132,6 +131,8 @@ export function GapEdit( props ) {
 		setAttributes,
 	} = props;
 
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
@@ -157,6 +158,9 @@ export function GapEdit( props ) {
 		// If splitOnAxis activated we need to return a BoxControl object to the BoxControl component.
 		if ( !! next && splitOnAxis ) {
 			blockGap = { ...getGapBoxControlValueFromStyle( next ) };
+		} else if ( next?.hasOwnProperty( 'top' ) ) {
+			// If splitOnAxis is not enabled, treat the 'top' value as the shorthand gap value.
+			blockGap = next.top;
 		}
 
 		const newStyle = {
@@ -195,32 +199,46 @@ export function GapEdit( props ) {
 				right: gapValue?.left,
 				bottom: gapValue?.top,
 		  }
-		: gapValue?.top;
+		: {
+				top: gapValue?.top,
+		  };
 
 	return Platform.select( {
 		web: (
 			<>
-				{ splitOnAxis ? (
-					<BoxControl
-						label={ __( 'Block spacing' ) }
-						min={ 0 }
+				{ ( ! spacingSizes || spacingSizes?.length === 0 ) &&
+					( splitOnAxis ? (
+						<BoxControl
+							label={ __( 'Block spacing' ) }
+							min={ 0 }
+							onChange={ onChange }
+							units={ units }
+							sides={ sides }
+							values={ boxControlGapValue }
+							allowReset={ false }
+							splitOnAxis={ splitOnAxis }
+						/>
+					) : (
+						<UnitControl
+							label={ __( 'Block spacing' ) }
+							__unstableInputWidth="80px"
+							min={ 0 }
+							onChange={ onChange }
+							units={ units }
+							// Default to `row` for combined values.
+							value={ boxControlGapValue }
+						/>
+					) ) }
+				{ spacingSizes?.length > 0 && (
+					<SpacingSizesControl
+						values={ boxControlGapValue }
 						onChange={ onChange }
+						label={ __( 'Block spacing' ) }
+						sides={ splitOnAxis ? sides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
 						units={ units }
-						sides={ sides }
-						values={ boxControlGapValue }
 						allowReset={ false }
 						splitOnAxis={ splitOnAxis }
 					/>
-				) : (
-					<UnitControl
-						label={ __( 'Block spacing' ) }
-						__unstableInputWidth="80px"
-						min={ 0 }
-						onChange={ onChange }
-						units={ units }
-						// Default to `row` for combined values.
-						value={ boxControlGapValue }
-					/>
 				) }
 			</>
 		),

package/src/hooks/layout.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { has, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -246,7 +246,7 @@ function LayoutTypeSwitcher( { type, onChange } ) {
  * @return {Object} Filtered block settings.
  */
 export function addAttribute( settings ) {
-	if ( has( settings.attributes, [ 'layout', 'type' ] ) ) {
+	if ( 'type' in ( settings.attributes?.layout ?? {} ) ) {
 		return settings;
 	}
 	if ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {

package/src/hooks/letter-spacing.js

@@ -46,6 +46,7 @@ export function LetterSpacingEdit( props ) {
 			value={ style?.typography?.letterSpacing }
 			onChange={ onChange }
 			__unstableInputWidth={ '100%' }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/line-height.js

@@ -42,6 +42,7 @@ export function LineHeightEdit( props ) {
 			__nextHasNoMarginBottom={ true }
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/lock.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { has } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,7 +12,7 @@ import { addFilter } from '@wordpress/hooks';
  */
 export function addAttribute( settings ) {
 	// Allow blocks to specify their own attribute definition with default values if needed.
-	if ( has( settings.attributes, [ 'lock', 'type' ] ) ) {
+	if ( 'type' in ( settings.attributes?.lock ?? {} ) ) {
 		return settings;
 	}
 	// Gracefully handle if settings.attributes is undefined.

package/src/hooks/test/gap.js

@@ -27,28 +27,6 @@ describe( 'gap', () => {
 				...blockGapValue,
 			} );
 		} );
-		it( 'should unwrap var: values from a string into a CSS var() function', () => {
-			const expectedValue = {
-				top: 'var(--wp--preset--spacing--60)',
-				left: 'var(--wp--preset--spacing--60)',
-			};
-			expect(
-				getGapBoxControlValueFromStyle( 'var:preset|spacing|60' )
-			).toEqual( expectedValue );
-		} );
-		it( 'should unwrap var: values from an object into a CSS var() function', () => {
-			const expectedValue = {
-				top: 'var(--wp--preset--spacing--20)',
-				left: 'var(--wp--preset--spacing--60)',
-			};
-			const blockGapValue = {
-				top: 'var:preset|spacing|20',
-				left: 'var:preset|spacing|60',
-			};
-			expect( getGapBoxControlValueFromStyle( blockGapValue ) ).toEqual(
-				expectedValue
-			);
-		} );
 	} );
 	describe( 'getGapCSSValue()', () => {
 		it( 'should return `null` if argument is falsey', () => {
@@ -84,5 +62,21 @@ describe( 'gap', () => {
 				'88px 1px'
 			);
 		} );
+
+		it( 'should unwrap var: values from a string into a CSS var() function', () => {
+			expect( getGapCSSValue( 'var:preset|spacing|60' ) ).toEqual(
+				'var(--wp--preset--spacing--60)'
+			);
+		} );
+
+		it( 'should unwrap var: values from an object into a CSS var() function and return shorthand values', () => {
+			const blockGapValue = {
+				top: 'var:preset|spacing|20',
+				left: 'var:preset|spacing|60',
+			};
+			expect( getGapCSSValue( blockGapValue ) ).toEqual(
+				'var(--wp--preset--spacing--20) var(--wp--preset--spacing--60)'
+			);
+		} );
 	} );
 } );