@wordpress/block-editor 12.1.0 → 12.3.0

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

@@ -2,15 +2,22 @@
  * Internal dependencies
  */
 import {
-	isValueSpacingPreset,
+	ALL_SIDES,
+	getAllRawValue,
 	getCustomValueFromPreset,
+	getInitialView,
 	getPresetValueFromCustomValue,
+	getSliderValueFromPreset,
 	getSpacingPresetCssVar,
 	getSpacingPresetSlug,
-	getSliderValueFromPreset,
-	getAllRawValue,
-	isValuesMixed,
+	getSupportedMenuItems,
+	hasAxisSupport,
+	hasBalancedSidesSupport,
 	isValuesDefined,
+	isValuesMixed,
+	isValueSpacingPreset,
+	LABELS,
+	VIEWS,
 } from '../utils';
 
 describe( 'isValueSpacingPreset', () => {
@@ -180,3 +187,225 @@ describe( 'isValuesDefined', () => {
 		expect( isValuesDefined( definedValues ) ).toBe( true );
 	} );
 } );
+
+describe( 'hasAxisSupport', () => {
+	it( 'should return true for horizontal support if it is in sides', () => {
+		expect( hasAxisSupport( [ 'horizontal' ], 'horizontal' ) ).toBe( true );
+	} );
+	it( 'should return true for horizontal support if both left and right are in sides', () => {
+		expect( hasAxisSupport( [ 'left', 'right' ], 'horizontal' ) ).toBe(
+			true
+		);
+	} );
+	it( 'should return false for horizontal when not supported', () => {
+		expect( hasAxisSupport( [ 'left' ], 'horizontal' ) ).toBe( false );
+	} );
+	it( 'should return true for vertical support if it is in sides', () => {
+		expect( hasAxisSupport( [ 'vertical' ], 'vertical' ) ).toBe( true );
+	} );
+	it( 'should return true for vertical support if both top and bottom are in sides', () => {
+		expect( hasAxisSupport( [ 'top', 'bottom' ], 'vertical' ) ).toBe(
+			true
+		);
+	} );
+	it( 'should return false for vertical when not supported', () => {
+		expect( hasAxisSupport( [ 'top' ], 'vertical' ) ).toBe( false );
+	} );
+	it( 'should return true when either horizontal or vertical axes are supported and no axis supplied', () => {
+		expect( hasAxisSupport( [ 'horizontal' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'vertical' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'left', 'right' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'top', 'bottom' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'top', 'left' ] ) ).toBe( false );
+	} );
+} );
+
+describe( 'getSupportedMenuItems', () => {
+	it( 'returns no items when sides are not configured', () => {
+		expect( getSupportedMenuItems( [] ) ).toEqual( {} );
+		expect( getSupportedMenuItems() ).toEqual( {} );
+	} );
+
+	const sideConfigs = [
+		[ LABELS.axial, [ 'horizontal', 'vertical' ] ],
+		[ LABELS.axial, [ 'top', 'right', 'bottom', 'left' ] ],
+		[ LABELS.horizontal, [ 'horizontal' ] ],
+		[ LABELS.horizontal, [ 'left', 'right' ] ],
+		[ LABELS.vertical, [ 'vertical' ] ],
+		[ LABELS.vertical, [ 'top', 'bottom' ] ],
+		[ LABELS.horizontal, [ 'horizontal' ] ],
+	];
+
+	test.each( sideConfigs )(
+		'should include %s axial menu with %s sides',
+		( label, sides ) => {
+			expect( getSupportedMenuItems( sides ) ).toHaveProperty(
+				'axial.label',
+				label
+			);
+		}
+	);
+
+	it( 'returns no axial item when not not supported', () => {
+		expect( getSupportedMenuItems( [ 'left', 'top' ] ) ).not.toHaveProperty(
+			'axial'
+		);
+	} );
+
+	it( 'should include the correct individual side options', () => {
+		expect( getSupportedMenuItems( [ 'top' ] ) ).toHaveProperty(
+			'top.label',
+			LABELS.top
+		);
+		expect( getSupportedMenuItems( [ 'right' ] ) ).toHaveProperty(
+			'right.label',
+			LABELS.right
+		);
+		expect( getSupportedMenuItems( [ 'bottom' ] ) ).toHaveProperty(
+			'bottom.label',
+			LABELS.bottom
+		);
+		expect( getSupportedMenuItems( [ 'left' ] ) ).toHaveProperty(
+			'left.label',
+			LABELS.left
+		);
+	} );
+	it( 'should include the custom option only when applicable', () => {
+		expect( getSupportedMenuItems( [ 'top', 'left' ] ) ).toHaveProperty(
+			'custom.label',
+			LABELS.custom
+		);
+		expect( getSupportedMenuItems( [ 'top' ] ) ).not.toHaveProperty(
+			'custom'
+		);
+		expect(
+			getSupportedMenuItems( [ 'horizontal', 'vertical' ] )
+		).not.toHaveProperty( 'custom.label' );
+	} );
+} );
+
+describe( 'hasBalancedSidesSupport', () => {
+	it( 'should determine balanced sides', () => {
+		expect( hasBalancedSidesSupport( ALL_SIDES ) ).toBe( true );
+		expect( hasBalancedSidesSupport( [ 'top', 'bottom' ] ) ).toBe( true );
+		expect( hasBalancedSidesSupport( [ 'left', 'right' ] ) ).toBe( true );
+		expect( hasBalancedSidesSupport() ).toBe( true );
+	} );
+	it( 'should determine unbalanced sides', () => {
+		expect( hasBalancedSidesSupport( [ 'top' ] ) ).toBe( false );
+		expect( hasBalancedSidesSupport( [ 'left' ] ) ).toBe( false );
+		expect( hasBalancedSidesSupport( [ 'top', 'right' ] ) ).toBe( false );
+	} );
+} );
+
+describe( 'getInitialView', () => {
+	describe( 'Axial view (Horizontal & vertical, Horizontal, or Vertical)', () => {
+		it( 'should return axial view when no values defined with balanced sides config', () => {
+			expect( getInitialView( {}, ALL_SIDES ) ).toBe( VIEWS.axial );
+			expect( getInitialView( undefined, ALL_SIDES ) ).toBe(
+				VIEWS.axial
+			);
+		} );
+		it( 'should return axial view when horizontal & vertical axes are supported and have axial values', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', right: '2em', bottom: '1em', left: '2em' },
+					ALL_SIDES
+				)
+			).toBe( VIEWS.axial );
+		} );
+		it( 'should return axial view when horizontal axis is supported, horizontal values set and no vertical supported or values', () => {
+			expect(
+				getInitialView( { left: '1em', right: '1em' }, ALL_SIDES )
+			).toBe( VIEWS.axial );
+		} );
+		it( 'should return axial view when vertical axis is supported and vertical values are set without horizontal values', () => {
+			expect(
+				getInitialView( { top: '1em', bottom: '1em' }, ALL_SIDES )
+			).toBe( VIEWS.axial );
+		} );
+		it( 'should not return axial view when axial values do not match', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', bottom: '1.5em', left: '1em', right: '1em' },
+					ALL_SIDES
+				)
+			).not.toBe( VIEWS.axial );
+		} );
+	} );
+
+	describe( 'Custom sides view', () => {
+		it( 'should return custom view when no values and unbalanced sides config with > 1 side', () => {
+			expect( getInitialView( {}, [ 'top', 'left' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect(
+				getInitialView( undefined, [ 'right', 'bottom', 'left' ] )
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should return custom sides view when all values match and unbalanced sides config', () => {
+			expect(
+				getInitialView( { top: '1em', right: '1em', bottom: '1em' }, [
+					'top',
+					'right',
+					'bottom',
+				] )
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should return custom view if there is more than one side with differing values', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', bottom: '1.5em', left: '1em', right: '1em' },
+					ALL_SIDES
+				)
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should return custom view if mixed partial subset of values is provided', () => {
+			expect(
+				getInitialView( { top: '1em', right: '10px' }, ALL_SIDES )
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should not return custom view if there is only a single side value', () => {
+			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).not.toBe(
+				VIEWS.custom
+			);
+		} );
+	} );
+
+	describe( 'Single side view', () => {
+		it( 'should return single side when only single side supported', () => {
+			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
+				VIEWS.top
+			);
+		} );
+
+		it( 'should return the single side view if there is only a single side value set and supported sides > 1', () => {
+			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).toBe(
+				VIEWS.top
+			);
+			expect( getInitialView( { right: '1em' }, ALL_SIDES ) ).toBe(
+				VIEWS.right
+			);
+			expect( getInitialView( { bottom: '1em' }, ALL_SIDES ) ).toBe(
+				VIEWS.bottom
+			);
+			expect( getInitialView( { left: '1em' }, ALL_SIDES ) ).toBe(
+				VIEWS.left
+			);
+		} );
+		it( 'should return single side view when only one side is supported', () => {
+			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
+				VIEWS.top
+			);
+			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
+				VIEWS.right
+			);
+			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
+				VIEWS.bottom
+			);
+			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
+				VIEWS.left
+			);
+		} );
+	} );
+} );

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

@@ -2,6 +2,58 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	sidesAll,
+	sidesAxial,
+	sidesBottom,
+	sidesHorizontal,
+	sidesLeft,
+	sidesRight,
+	sidesTop,
+	sidesVertical,
+} from '@wordpress/icons';
+
+export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+
+export const DEFAULT_VALUES = {
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+
+export const ICONS = {
+	custom: sidesAll,
+	axial: sidesAxial,
+	horizontal: sidesHorizontal,
+	vertical: sidesVertical,
+	top: sidesTop,
+	right: sidesRight,
+	bottom: sidesBottom,
+	left: sidesLeft,
+};
+
+export const LABELS = {
+	default: __( 'Spacing control' ),
+	top: __( 'Top' ),
+	bottom: __( 'Bottom' ),
+	left: __( 'Left' ),
+	right: __( 'Right' ),
+	mixed: __( 'Mixed' ),
+	vertical: __( 'Vertical' ),
+	horizontal: __( 'Horizontal' ),
+	axial: __( 'Horizontal & vertical' ),
+	custom: __( 'Custom' ),
+};
+
+export const VIEWS = {
+	axial: 'axial',
+	top: 'top',
+	right: 'right',
+	bottom: 'bottom',
+	left: 'left',
+	custom: 'custom',
+};
 
 /**
  * Checks is given value is a spacing preset.
@@ -131,26 +183,6 @@ export function getSliderValueFromPreset( presetValue, spacingSizes ) {
 	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
@@ -208,3 +240,154 @@ export function isValuesDefined( values ) {
 	}
 	return Object.values( values ).filter( ( value ) => !! value ).length > 0;
 }
+
+/**
+ * Determines whether a particular axis has support. If no axis is
+ * specified, this function checks if either axis is supported.
+ *
+ * @param {Array}  sides Supported sides.
+ * @param {string} axis  Which axis to check.
+ *
+ * @return {boolean} Whether there is support for the specified axis or both axes.
+ */
+export function hasAxisSupport( sides, axis ) {
+	if ( ! sides || ! sides.length ) {
+		return false;
+	}
+
+	const hasHorizontalSupport =
+		sides.includes( 'horizontal' ) ||
+		( sides.includes( 'left' ) && sides.includes( 'right' ) );
+
+	const hasVerticalSupport =
+		sides.includes( 'vertical' ) ||
+		( sides.includes( 'top' ) && sides.includes( 'bottom' ) );
+
+	if ( axis === 'horizontal' ) {
+		return hasHorizontalSupport;
+	}
+
+	if ( axis === 'vertical' ) {
+		return hasVerticalSupport;
+	}
+
+	return hasHorizontalSupport || hasVerticalSupport;
+}
+
+/**
+ * Determines which menu options should be included in the SidePicker.
+ *
+ * @param {Array} sides Supported sides.
+ *
+ * @return {Object} Menu options with each option containing label & icon.
+ */
+export function getSupportedMenuItems( sides ) {
+	if ( ! sides || ! sides.length ) {
+		return {};
+	}
+
+	const menuItems = {};
+
+	// Determine the primary "side" menu options.
+	const hasHorizontalSupport = hasAxisSupport( sides, 'horizontal' );
+	const hasVerticalSupport = hasAxisSupport( sides, 'vertical' );
+
+	if ( hasHorizontalSupport && hasVerticalSupport ) {
+		menuItems.axial = { label: LABELS.axial, icon: ICONS.axial };
+	} else if ( hasHorizontalSupport ) {
+		menuItems.axial = { label: LABELS.horizontal, icon: ICONS.horizontal };
+	} else if ( hasVerticalSupport ) {
+		menuItems.axial = { label: LABELS.vertical, icon: ICONS.vertical };
+	}
+
+	// Track whether we have any individual sides so we can omit the custom
+	// option if required.
+	let numberOfIndividualSides = 0;
+
+	ALL_SIDES.forEach( ( side ) => {
+		if ( sides.includes( side ) ) {
+			numberOfIndividualSides += 1;
+			menuItems[ side ] = {
+				label: LABELS[ side ],
+				icon: ICONS[ side ],
+			};
+		}
+	} );
+
+	// Add custom item if there are enough sides to warrant a separated view.
+	if ( numberOfIndividualSides > 1 ) {
+		menuItems.custom = { label: LABELS.custom, icon: ICONS.custom };
+	}
+
+	return menuItems;
+}
+
+/**
+ * Checks if the supported sides are balanced for each axis.
+ * - Horizontal - both left and right sides are supported.
+ * - Vertical - both top and bottom are supported.
+ *
+ * @param {Array} sides The supported sides which may be axes as well.
+ *
+ * @return {boolean} Whether or not the supported sides are balanced.
+ */
+export function hasBalancedSidesSupport( sides = [] ) {
+	const counts = { top: 0, right: 0, bottom: 0, left: 0 };
+	sides.forEach( ( side ) => ( counts[ side ] += 1 ) );
+
+	return (
+		( counts.top + counts.bottom ) % 2 === 0 &&
+		( counts.left + counts.right ) % 2 === 0
+	);
+}
+
+/**
+ * Determines which view the SpacingSizesControl should default to on its
+ * first render; Axial, Custom, or Single side.
+ *
+ * @param {Object} values Current side values.
+ * @param {Array}  sides  Supported sides.
+ *
+ * @return {string} View to display.
+ */
+export function getInitialView( values = {}, sides ) {
+	const { top, right, bottom, left } = values;
+	const sideValues = [ top, right, bottom, left ].filter( Boolean );
+
+	// Axial ( Horizontal & vertical ).
+	// - Has axial side support
+	// - Has axial side values which match
+	// - Has no values and the supported sides are balanced
+	const hasMatchingAxialValues =
+		top === bottom && left === right && ( !! top || !! left );
+	const hasNoValuesAndBalancedSides =
+		! sideValues.length && hasBalancedSidesSupport( sides );
+
+	if (
+		hasAxisSupport( sides ) &&
+		( hasMatchingAxialValues || hasNoValuesAndBalancedSides )
+	) {
+		return VIEWS.axial;
+	}
+
+	// Single side.
+	// - Ensure the side returned is the first side that has a value.
+	if ( sideValues.length === 1 ) {
+		let side;
+
+		Object.entries( values ).some( ( [ key, value ] ) => {
+			side = key;
+			return value !== undefined;
+		} );
+
+		return side;
+	}
+
+	// Only single side supported and no value defined.
+	if ( sides?.length === 1 && ! sideValues.length ) {
+		return sides[ 0 ];
+	}
+
+	// Default to the Custom (separated sides) view.
+	return VIEWS.custom;
+}

package/src/components/ungroup-button/index.native.js

@@ -6,11 +6,11 @@ import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { ungroup } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import UngroupIcon from './icon';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
@@ -24,7 +24,7 @@ export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 		<ToolbarGroup>
 			<ToolbarButton
 				title={ __( 'Ungroup' ) }
-				icon={ UngroupIcon }
+				icon={ ungroup }
 				onClick={ onConvertFromGroup }
 			/>
 		</ToolbarGroup>

package/src/components/url-input/README.md

@@ -139,6 +139,12 @@ _Required._ Called when the value changes. The second parameter is `null` unless
 }
 ```
 
+### `onKeydown`: `( event: KeyboardEvent ) => void`
+
+A callback invoked on the keydown event.
+
+-   Required: No
+
 ### `label: String`
 
 _Optional._ If this property is added, a label will be generated using label property as the content.

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

@@ -267,6 +267,7 @@ class URLInput extends Component {
 	}
 
 	onKeyDown( event ) {
+		this.props.onKeyDown?.( event );
 		const { showSuggestions, selectedSuggestion, suggestions, loading } =
 			this.state;
 

package/src/components/use-block-drop-zone/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { useCallback, useState } from '@wordpress/element';
 import {
 	useThrottle,
@@ -19,6 +19,7 @@ import {
 	isPointContainedByRect,
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 /** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
@@ -142,6 +143,7 @@ export default function useBlockDropZone( {
 	// an empty string to represent top-level blocks.
 	rootClientId: targetRootClientId = '',
 } = {} ) {
+	const registry = useRegistry();
 	const [ dropTarget, setDropTarget ] = useState( {
 		index: null,
 		operation: 'insert',
@@ -150,15 +152,13 @@ export default function useBlockDropZone( {
 	const isDisabled = useSelect(
 		( select ) => {
 			const {
-				getTemplateLock,
 				__unstableIsWithinBlockOverlay,
 				__unstableHasActiveBlockOverlayActive,
-			} = select( blockEditorStore );
-			const templateLock = getTemplateLock( targetRootClientId );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
+			const blockEditingMode = getBlockEditingMode( targetRootClientId );
 			return (
-				[ 'all', 'contentOnly' ].some(
-					( lock ) => lock === templateLock
-				) ||
+				blockEditingMode !== 'default' ||
 				__unstableHasActiveBlockOverlayActive( targetRootClientId ) ||
 				__unstableIsWithinBlockOverlay( targetRootClientId )
 			);
@@ -181,9 +181,14 @@ export default function useBlockDropZone( {
 
 				// The block list is empty, don't show the insertion point but still allow dropping.
 				if ( blocks.length === 0 ) {
-					setDropTarget( {
-						index: 0,
-						operation: 'insert',
+					registry.batch( () => {
+						setDropTarget( {
+							index: 0,
+							operation: 'insert',
+						} );
+						showInsertionPoint( targetRootClientId, 0, {
+							operation: 'insert',
+						} );
 					} );
 					return;
 				}
@@ -208,15 +213,24 @@ export default function useBlockDropZone( {
 					getBlockListSettings( targetRootClientId )?.orientation
 				);
 
-				setDropTarget( {
-					index: targetIndex,
-					operation,
-				} );
-				showInsertionPoint( targetRootClientId, targetIndex, {
-					operation,
+				registry.batch( () => {
+					setDropTarget( {
+						index: targetIndex,
+						operation,
+					} );
+					showInsertionPoint( targetRootClientId, targetIndex, {
+						operation,
+					} );
 				} );
 			},
-			[ targetRootClientId ]
+			[
+				getBlocks,
+				targetRootClientId,
+				getBlockListSettings,
+				registry,
+				showInsertionPoint,
+				getBlockIndex,
+			]
 		),
 		200
 	);

package/src/components/use-resize-canvas/index.js

@@ -47,12 +47,20 @@ export default function useResizeCanvas( deviceType ) {
 
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';
+		const marginVertical = marginValue() + 'px';
+		const marginHorizontal = 'auto';
+
 		switch ( device ) {
 			case 'Tablet':
 			case 'Mobile':
 				return {
 					width: getCanvasWidth( device ),
-					margin: marginValue() + 'px auto',
+					// Keeping margin styles separate to avoid warnings
+					// when those props get overridden in the iframe component
+					marginTop: marginVertical,
+					marginBottom: marginVertical,
+					marginLeft: marginHorizontal,
+					marginRight: marginHorizontal,
 					height,
 					borderRadius: '2px 2px 2px 2px',
 					border: '1px solid #ddd',

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

@@ -19,6 +19,9 @@ describe( 'isNavigationCandidate', () => {
 		elements.inputCheckbox = document.createElement( 'input' );
 		elements.inputCheckbox.setAttribute( 'type', 'checkbox' );
 
+		elements.inputNumber = document.createElement( 'input' );
+		elements.inputNumber.setAttribute( 'type', 'number' );
+
 		elements.contentEditable = document.createElement( 'p' );
 		elements.contentEditable.contentEditable = true;
 	} );
@@ -47,6 +50,18 @@ describe( 'isNavigationCandidate', () => {
 		} );
 	} );
 
+	it( 'should return false if vertically navigating inputs with vertial support like number', () => {
+		[ UP, DOWN ].forEach( ( keyCode ) => {
+			const result = isNavigationCandidate(
+				elements.inputNumber,
+				keyCode,
+				false
+			);
+
+			expect( result ).toBe( false );
+		} );
+	} );
+
 	it( 'should return false if horizontally navigating input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(