@wordpress/block-editor 12.2.0 → 12.3.0

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

@@ -1,105 +1,17 @@
-.tools-panel-item-spacing {
-	display: grid;
-	grid-template-columns: auto 1fr auto;
-	align-items: center;
-	grid-template-rows: $grid-unit-30 auto;
-}
-
-.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-base-control__label {
-		margin-bottom: $grid-unit-10;
-		height: $grid-unit-20;
-	}
-
-	.components-spacing-sizes-control__side-labels {
-		grid-column: 1 / 1;
-		justify-content: left;
-		height: $grid-unit-20;
-		margin-top: $grid-unit-20;
-	}
-
-	.components-spacing-sizes-control__side-label {
-		grid-column: 1 / 1;
-		justify-self: left;
+.spacing-sizes-control {
+	.spacing-sizes-control__custom-value-input,
+	.spacing-sizes-control__label {
 		margin-bottom: 0;
 	}
 
-	&.is-unlinked {
-		.components-range-control.components-spacing-sizes-control__range-control,
-		.components-spacing-sizes-control__custom-value-input {
-			margin-top: $grid-unit-10;
-		}
-	}
-
-	.components-spacing-sizes-control__hint-single,
-	.components-spacing-sizes-control__hint-all {
-		color: $gray-700;
-		margin-bottom: 0;
-	}
-
-	.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;
-		margin-bottom: $grid-unit-10;
-	}
-
-	.components-spacing-sizes-control__custom-toggle-all {
-		grid-column: 2 / 2;
-		grid-row: 1 / 1;
-		justify-self: end;
-		margin-top: -4px;
-	}
-
-	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
-		margin-right: $grid-unit-05;
-	}
-
-	.components-spacing-sizes-control__custom-toggle-single {
-		grid-column: 3 / 3;
-		justify-self: end;
-		margin-top: $grid-unit-15;
-	}
-
-	.component-spacing-sizes-control__linked-button {
-		grid-column: 3 / 3;
-		grid-row: 1 / 1;
-		justify-self: end;
-		line-height: 0;
-		margin-top: -4px;
-	}
-
-	.components-spacing-sizes-control__custom-value-range {
-		grid-column: span 2;
-		margin-left: $grid-unit-20;
-	}
-
-	.components-base-control.components-spacing-sizes-control__custom-value-input {
-		width: 124px;
-		grid-column: 1;
-		margin-bottom: 0;
-	}
-
-	.components-base-control.components-range-control {
+	.spacing-sizes-control__range-control,
+	.spacing-sizes-control__custom-value-range {
 		height: 40px;
 		/* Vertically center the RangeControl until it has true 40px height. */
 		display: flex;
 		align-items: center;
 		margin-bottom: 0;
+		flex: 1;
 
 		> .components-base-control__field {
 			/* Fixes RangeControl contents when the outer wrapper is flex */
@@ -107,10 +19,6 @@
 		}
 	}
 
-	.components-spacing-sizes-control__range-control {
-		grid-column: span 3;
-	}
-
 	.components-range-control__mark {
 		height: $grid-unit-05;
 		width: 3px;
@@ -129,9 +37,29 @@
 	.components-range-control__thumb-wrapper {
 		z-index: 3;
 	}
+}
 
-	.components-spacing-sizes-control__custom-select-control {
-		grid-column: span 3;
+.spacing-sizes-control__wrapper {
+	& + & {
 		margin-top: $grid-unit-10;
 	}
 }
+
+.spacing-sizes-control__header {
+	height: $grid-unit-20;
+	margin-bottom: $grid-unit-10;
+}
+
+.spacing-sizes-control__dropdown {
+	height: $grid-unit-30;
+}
+
+.spacing-sizes-control__custom-select-control,
+.spacing-sizes-control__custom-value-input {
+	flex: 1;
+}
+
+.spacing-sizes-control__icon,
+.spacing-sizes-control__custom-toggle {
+	flex: 0 0 auto;
+}

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/writing-flow/use-tab-nav.js

@@ -43,13 +43,24 @@ export default function useTabNav() {
 		} else {
 			setNavigationMode( true );
 
+			const canvasElement =
+				container.current.ownerDocument === event.target.ownerDocument
+					? container.current
+					: container.current.ownerDocument.defaultView.frameElement;
+
 			const isBefore =
 				// eslint-disable-next-line no-bitwise
-				event.target.compareDocumentPosition( container.current ) &
+				event.target.compareDocumentPosition( canvasElement ) &
 				event.target.DOCUMENT_POSITION_FOLLOWING;
-			const action = isBefore ? 'findNext' : 'findPrevious';
+			const tabbables = focus.tabbable.find( container.current );
+
+			if ( tabbables.length ) {
+				const next = isBefore
+					? tabbables[ 0 ]
+					: tabbables[ tabbables.length - 1 ];
 
-			focus.tabbable[ action ]( event.target ).focus();
+				next.focus();
+			}
 		}
 	}