@wordpress/block-editor 9.6.0 → 9.8.0

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

@@ -0,0 +1,195 @@
+/**
+ * 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 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 ) {
+	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 )
+			)
+		)
+	);
+}

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { BaseControl, Button } from '@wordpress/components';
 import { formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -30,7 +30,9 @@ const TEXT_DECORATIONS = [
 export default function TextDecorationControl( { value, onChange } ) {
 	return (
 		<fieldset className="block-editor-text-decoration-control">
-			<legend>{ __( 'Decoration' ) }</legend>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Decoration' ) }
+			</BaseControl.VisualLabel>
 			<div className="block-editor-text-decoration-control__buttons">
 				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
 					return (

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	formatCapitalize,
@@ -39,7 +39,9 @@ const TEXT_TRANSFORMS = [
 export default function TextTransformControl( { value, onChange } ) {
 	return (
 		<fieldset className="block-editor-text-transform-control">
-			<legend>{ __( 'Letter case' ) }</legend>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Letter case' ) }
+			</BaseControl.VisualLabel>
 			<div className="block-editor-text-transform-control__buttons">
 				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
 					return (

package/src/components/url-input/index.js

@@ -462,7 +462,7 @@ class URLInput extends Component {
 			'aria-label': label ? undefined : __( 'URL' ), // Ensure input always has an accessible label
 			'aria-expanded': showSuggestions,
 			'aria-autocomplete': 'list',
-			'aria-owns': suggestionsListboxId,
+			'aria-controls': suggestionsListboxId,
 			'aria-activedescendant':
 				selectedSuggestion !== null
 					? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`

package/src/components/url-input/style.scss

@@ -45,9 +45,9 @@ $input-size: 300px;
 
 	.components-spinner {
 		position: absolute;
-		right: $input-padding;
-		bottom: $input-padding + $grid-unit-10 + 1;
 		margin: 0;
+		top: calc(50% - #{$spinner-size} / 2);
+		right: $grid-unit;
 	}
 }
 

package/src/components/url-popover/image-url-input-ui.js

@@ -51,6 +51,7 @@ const ImageURLInputUI = ( {
 	rel,
 } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
+	const buttonRef = useRef( null );
 	const openLinkUI = useCallback( () => {
 		setIsOpen( true );
 	} );
@@ -245,9 +246,11 @@ const ImageURLInputUI = ( {
 				label={ url ? __( 'Edit link' ) : __( 'Insert link' ) }
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
+				ref={ buttonRef }
 			/>
 			{ isOpen && (
 				<URLPopover
+					anchorRef={ buttonRef }
 					onFocusOutside={ onFocusOutside() }
 					onClose={ closeLinkUI }
 					renderSettings={ () => advancedOptions }

package/src/components/url-popover/style.scss

@@ -72,9 +72,6 @@
 	.block-editor-url-input .components-base-control__field {
 		margin-bottom: 0;
 	}
-	.block-editor-url-input .components-spinner {
-		bottom: $input-padding + 1;
-	}
 }
 
 .block-editor-url-popover__link-viewer-url {

package/src/components/writing-flow/use-arrow-nav.js

@@ -17,7 +17,7 @@ import { useRefEffect } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { isInSameBlock } from '../../utils/dom';
+import { getBlockClientId } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
 
 /**
@@ -130,11 +130,8 @@ export function getClosestTabbable(
 
 export default function useArrowNav() {
 	const {
-		getSelectedBlockClientId,
 		getMultiSelectedBlocksStartClientId,
 		getMultiSelectedBlocksEndClientId,
-		getPreviousBlockClientId,
-		getNextBlockClientId,
 		getSettings,
 		hasMultiSelection,
 		__unstableIsFullySelected,
@@ -150,26 +147,13 @@ export default function useArrowNav() {
 			verticalRect = null;
 		}
 
-		/**
-		 * Returns true if the given target field is the last in its block which
-		 * can be considered for tab transition. For example, in a block with
-		 * two text fields, this would return true when reversing from the first
-		 * of the two fields, but false when reversing from the second.
-		 *
-		 * @param {Element} target    Currently focused text field.
-		 * @param {boolean} isReverse True if considering as the first field.
-		 *
-		 * @return {boolean} Whether field is at edge for tab transition.
-		 */
-		function isTabbableEdge( target, isReverse ) {
+		function isClosestTabbableABlock( target, isReverse ) {
 			const closestTabbable = getClosestTabbable(
 				target,
 				isReverse,
 				node
 			);
-			return (
-				! closestTabbable || ! isInSameBlock( target, closestTabbable )
-			);
+			return closestTabbable && getBlockClientId( closestTabbable );
 		}
 
 		function onKeyDown( event ) {
@@ -254,23 +238,10 @@ export default function useArrowNav() {
 			// next, which is the exact reverse of LTR.
 			const isReverseDir = isRTL( target ) ? ! isReverse : isReverse;
 			const { keepCaretInsideBlock } = getSettings();
-			const selectedBlockClientId = getSelectedBlockClientId();
 
 			if ( isShift ) {
-				const selectionEndClientId =
-					getMultiSelectedBlocksEndClientId();
-				const selectionBeforeEndClientId = getPreviousBlockClientId(
-					selectionEndClientId || selectedBlockClientId
-				);
-				const selectionAfterEndClientId = getNextBlockClientId(
-					selectionEndClientId || selectedBlockClientId
-				);
-
 				if (
-					// Ensure that there is a target block.
-					( ( isReverse && selectionBeforeEndClientId ) ||
-						( ! isReverse && selectionAfterEndClientId ) ) &&
-					isTabbableEdge( target, isReverse ) &&
+					isClosestTabbableABlock( target, isReverse ) &&
 					isNavEdge( target, isReverse )
 				) {
 					node.contentEditable = true;

package/src/components/writing-flow/use-drag-selection.js

@@ -27,7 +27,7 @@ function setContentEditableWrapper( node, value ) {
 export default function useDragSelection() {
 	const { startMultiSelect, stopMultiSelect } =
 		useDispatch( blockEditorStore );
-	const { isSelectionEnabled, hasMultiSelection } =
+	const { isSelectionEnabled, hasMultiSelection, isDraggingBlocks } =
 		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
@@ -72,6 +72,12 @@ export default function useDragSelection() {
 			}
 
 			function onMouseLeave( { buttons, target } ) {
+				// Avoid triggering a multi-selection if the user is already
+				// dragging blocks.
+				if ( isDraggingBlocks() ) {
+					return;
+				}
+
 				// The primary button must be pressed to initiate selection.
 				// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
 				if ( buttons !== 1 ) {

package/src/components/writing-flow/use-multi-selection.js

@@ -75,8 +75,11 @@ export default function useMultiSelection() {
 			// able to select across instances immediately.
 			node.contentEditable = true;
 
-			defaultView.getSelection().removeAllRanges();
+			// For some browsers, like Safari, it is important that focus
+			// happens BEFORE selection removal.
 			node.focus();
+
+			defaultView.getSelection().removeAllRanges();
 		},
 		[
 			hasMultiSelection,

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

@@ -19,7 +19,7 @@ import { store as blockEditorStore } from '../../store';
 export default function useSelectAll() {
 	const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
-	const { multiSelect } = useDispatch( blockEditorStore );
+	const { multiSelect, selectBlock } = useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
 
 	return useRefEffect( ( node ) => {
@@ -53,6 +53,7 @@ export default function useSelectAll() {
 			const lastClientId = last( blockClientIds );
 
 			if ( firstClientId === lastClientId ) {
+				selectBlock( firstClientId );
 				return;
 			}
 

package/src/components/writing-flow/use-selection-observer.js

@@ -25,7 +25,11 @@ function extractSelectionStartNode( selection ) {
 		return anchorNode;
 	}
 
-	return anchorNode.childNodes[ anchorOffset ];
+	if ( anchorOffset === 0 ) {
+		return anchorNode;
+	}
+
+	return anchorNode.childNodes[ anchorOffset - 1 ];
 }
 
 /**
@@ -44,7 +48,11 @@ function extractSelectionEndNode( selection ) {
 		return focusNode;
 	}
 
-	return focusNode.childNodes[ focusOffset - 1 ];
+	if ( focusOffset === focusNode.childNodes.length ) {
+		return focusNode;
+	}
+
+	return focusNode.childNodes[ focusOffset ];
 }
 
 function findDepth( a, b ) {

package/src/hooks/border-radius.js

@@ -19,17 +19,13 @@ export function BorderRadiusEdit( props ) {
 	} = props;
 
 	const onChange = ( newRadius ) => {
-		let newStyle = {
+		const newStyle = cleanEmptyObject( {
 			...style,
 			border: {
 				...style?.border,
 				radius: newRadius,
 			},
-		};
-
-		if ( newRadius === undefined || newRadius === '' ) {
-			newStyle = cleanEmptyObject( newStyle );
-		}
+		} );
 
 		setAttributes( { style: newStyle } );
 	};

package/src/hooks/border.js

@@ -268,10 +268,10 @@ export function BorderPanel( props ) {
 					<BorderBoxControl
 						colors={ colors }
 						enableAlpha={ true }
+						enableStyle={ isStyleSupported }
 						onChange={ onBorderChange }
-						popoverPlacement="left-start"
 						popoverOffset={ 40 }
-						showStyle={ isStyleSupported }
+						popoverPlacement="left-start"
 						value={ hydratedBorder }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }

package/src/hooks/color.js

@@ -450,14 +450,24 @@ export function ColorEdit( props ) {
 		};
 	};
 
-	const enableContrastChecking =
-		Platform.OS === 'web' && ! gradient && ! style?.color?.gradient;
-
 	const defaultColorControls = getBlockSupport( props.name, [
 		COLOR_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
 
+	const enableContrastChecking =
+		Platform.OS === 'web' &&
+		! gradient &&
+		! style?.color?.gradient &&
+		// Contrast checking is enabled by default.
+		// Deactivating it requires `enableContrastChecker` to have
+		// an explicit value of `false`.
+		false !==
+			getBlockSupport( props.name, [
+				COLOR_SUPPORT_KEY,
+				'enableContrastChecker',
+			] );
+
 	return (
 		<ColorPanel
 			enableContrastChecking={ enableContrastChecking }

package/src/hooks/dimensions.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -33,6 +38,7 @@ import {
 	resetPadding,
 	useIsPaddingDisabled,
 } from './padding';
+import useSetting from '../components/use-setting';
 
 export const SPACING_SUPPORT_KEY = 'spacing';
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
@@ -51,6 +57,7 @@ export function DimensionsPanel( props ) {
 	const isMarginDisabled = useIsMarginDisabled( props );
 	const isDisabled = useIsDimensionsDisabled( props );
 	const isSupported = hasDimensionsSupport( props.name );
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
 
 	if ( isDisabled || ! isSupported ) {
 		return null;
@@ -77,6 +84,10 @@ export function DimensionsPanel( props ) {
 			<InspectorControls __experimentalGroup="dimensions">
 				{ ! isPaddingDisabled && (
 					<ToolsPanelItem
+						className={ classnames( {
+							'tools-panel-item-spacing':
+								spacingSizes && spacingSizes.length > 0,
+						} ) }
 						hasValue={ () => hasPaddingValue( props ) }
 						label={ __( 'Padding' ) }
 						onDeselect={ () => resetPadding( props ) }
@@ -89,6 +100,10 @@ export function DimensionsPanel( props ) {
 				) }
 				{ ! isMarginDisabled && (
 					<ToolsPanelItem
+						className={ classnames( {
+							'tools-panel-item-spacing':
+								spacingSizes && spacingSizes.length > 0,
+						} ) }
 						hasValue={ () => hasMarginValue( props ) }
 						label={ __( 'Margin' ) }
 						onDeselect={ () => resetMargin( props ) }

package/src/hooks/duotone.js

@@ -35,10 +35,10 @@ extend( [ namesPlugin ] );
 /**
  * SVG and stylesheet needed for rendering the duotone filter.
  *
- * @param {Object} props Duotone props.
- * @param {string} props.selector Selector to apply the filter to.
- * @param {string} props.id Unique id for this duotone filter.
- * @param {string[]|"unset"} props.colors Array of RGB color strings ordered from dark to light.
+ * @param {Object}           props          Duotone props.
+ * @param {string}           props.selector Selector to apply the filter to.
+ * @param {string}           props.id       Unique id for this duotone filter.
+ * @param {string[]|"unset"} props.colors   Array of RGB color strings ordered from dark to light.
  *
  * @return {WPElement} Duotone element.
  */

package/src/hooks/gap.js

@@ -14,6 +14,7 @@ import {
  * Internal dependencies
  */
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 import useSetting from '../components/use-setting';
 import { AXIAL_SIDES, SPACING_SUPPORT_KEY, useCustomSides } from './dimensions';
 import { cleanEmptyObject } from './utils';
@@ -54,8 +55,12 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
 
 	const isValueString = typeof blockGapValue === 'string';
 	return {
-		top: isValueString ? blockGapValue : blockGapValue?.top,
-		left: isValueString ? blockGapValue : blockGapValue?.left,
+		top: isValueString
+			? getSpacingPresetCssVar( blockGapValue )
+			: getSpacingPresetCssVar( blockGapValue?.top ),
+		left: isValueString
+			? getSpacingPresetCssVar( blockGapValue )
+			: getSpacingPresetCssVar( blockGapValue?.left ),
 	};
 }
 

package/src/hooks/generated-class-name.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { uniq } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -26,10 +21,12 @@ export function addGeneratedClassName( extraProps, blockType ) {
 			// We have some extra classes and want to add the default classname
 			// We use uniq to prevent duplicate classnames.
 
-			extraProps.className = uniq( [
-				getBlockDefaultClassName( blockType.name ),
-				...extraProps.className.split( ' ' ),
-			] )
+			extraProps.className = [
+				...new Set( [
+					getBlockDefaultClassName( blockType.name ),
+					...extraProps.className.split( ' ' ),
+				] ),
+			]
 				.join( ' ' )
 				.trim();
 		} else {