@wordpress/block-editor 12.1.0 → 12.3.0

package/src/components/media-replace-flow/test/index.js

@@ -137,7 +137,7 @@ describe( 'General media replace flow', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Apply',
+				name: 'Save',
 			} )
 		);
 

package/src/components/navigable-toolbar/index.js

@@ -120,16 +120,18 @@ function useToolbarFocus(
 	}, [ isAccessibleToolbar, initialFocusOnMount, focusToolbar ] );
 
 	useEffect( () => {
+		// Store ref so we have access on useEffect cleanup: https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
+		const navigableToolbarRef = ref.current;
 		// If initialIndex is passed, we focus on that toolbar item when the
 		// toolbar gets mounted and initial focus is not forced.
 		// We have to wait for the next browser paint because block controls aren't
 		// rendered right away when the toolbar gets mounted.
 		let raf = 0;
-		if ( initialIndex && ! initialFocusOnMount ) {
+		if ( ! initialFocusOnMount ) {
 			raf = window.requestAnimationFrame( () => {
-				const items = getAllToolbarItemsIn( ref.current );
+				const items = getAllToolbarItemsIn( navigableToolbarRef );
 				const index = initialIndex || 0;
-				if ( items[ index ] && hasFocusWithin( ref.current ) ) {
+				if ( items[ index ] && hasFocusWithin( navigableToolbarRef ) ) {
 					items[ index ].focus( {
 						// When focusing newly mounted toolbars,
 						// the position of the popover is often not right on the first render
@@ -141,10 +143,10 @@ function useToolbarFocus(
 		}
 		return () => {
 			window.cancelAnimationFrame( raf );
-			if ( ! onIndexChange || ! ref.current ) return;
+			if ( ! onIndexChange || ! navigableToolbarRef ) return;
 			// When the toolbar element is unmounted and onIndexChange is passed, we
 			// pass the focused toolbar item index so it can be hydrated later.
-			const items = getAllToolbarItemsIn( ref.current );
+			const items = getAllToolbarItemsIn( navigableToolbarRef );
 			const index = items.findIndex( ( item ) => item.tabIndex === 0 );
 			onIndexChange( index );
 		};

package/src/components/publish-date-time-picker/index.js

@@ -29,8 +29,6 @@ function PublishDateTimePicker(
 			/>
 			<DateTimePicker
 				startOfWeek={ getSettings().l10n.startOfWeek }
-				__nextRemoveHelpButton
-				__nextRemoveResetButton
 				onChange={ onChange }
 				{ ...additionalProps }
 			/>

package/src/components/rich-text/index.js

@@ -402,7 +402,7 @@ function RichTextWrapper(
 						disableLineBreaks,
 						onSplitAtEnd,
 					} ),
-					useFirefoxCompat(),
+					useFirefoxCompat( { value, onChange } ),
 					anchorRef,
 				] ) }
 				contentEditable={ true }

package/src/components/rich-text/use-firefox-compat.js

@@ -1,15 +1,21 @@
 /**
  * WordPress dependencies
  */
+import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { SPACE } from '@wordpress/keycodes';
+import { insert } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 
-export function useFirefoxCompat() {
+export function useFirefoxCompat( props ) {
+	const propsRef = useRef( props );
+	propsRef.current = props;
+
 	const { isMultiSelecting } = useSelect( blockEditorStore );
 	return useRefEffect( ( element ) => {
 		function onFocus() {
@@ -31,9 +37,29 @@ export function useFirefoxCompat() {
 			}
 		}
 
+		// If a contenteditable element is inside a button/summary element,
+		// it is not possible to type a space in Firefox. Therefore, cancel
+		// the default event and insert a space explicitly.
+		// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1822860
+		function onKeyDown( event ) {
+			if ( event.keyCode !== SPACE ) {
+				return;
+			}
+
+			if ( element.closest( 'button, summary' ) === null ) {
+				return;
+			}
+
+			const { value, onChange } = propsRef.current;
+			onChange( insert( value, ' ' ) );
+			event.preventDefault();
+		}
+
 		element.addEventListener( 'focus', onFocus );
+		element.addEventListener( 'keydown', onKeyDown );
 		return () => {
 			element.removeEventListener( 'focus', onFocus );
+			element.removeEventListener( 'keydown', onKeyDown );
 		};
 	}, [] );
 }

package/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../../use-setting';
+
+export default function useSpacingSizes() {
+	const spacingSizes = [
+		{ name: 0, slug: '0', side: 0 },
+		...( useSetting( 'spacing.spacingSizes' ) || [] ),
+	];
+
+	if ( spacingSizes.length > 8 ) {
+		spacingSizes.unshift( {
+			name: __( 'Default' ),
+			slug: 'default',
+			size: undefined,
+		} );
+	}
+
+	return spacingSizes;
+}

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

@@ -1,61 +1,50 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
+import {
+	BaseControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { BaseControl } from '@wordpress/components';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import AllInputControl from './all-input-control';
-import InputControls from './input-controls';
-import AxialInputControls from './axial-input-controls';
-import LinkedButton from './linked-button';
-import { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils';
-import useSetting from '../use-setting';
+import AxialInputControls from './input-controls/axial';
+import SeparatedInputControls from './input-controls/separated';
+import SingleInputControl from './input-controls/single';
+import SidesDropdown from './sides-dropdown';
+import useSpacingSizes from './hooks/use-spacing-sizes';
+import {
+	ALL_SIDES,
+	DEFAULT_VALUES,
+	LABELS,
+	VIEWS,
+	getInitialView,
+} from './utils';
 
 export default function SpacingSizesControl( {
 	inputProps,
-	onChange,
-	label = __( 'Spacing Control' ),
-	values,
-	sides,
-	splitOnAxis = false,
-	useSelect,
+	label: labelProp,
 	minimumCustomValue = 0,
-	onMouseOver,
+	onChange,
 	onMouseOut,
+	onMouseOver,
+	showSideInLabel = true,
+	sides = ALL_SIDES,
+	useSelect,
+	values,
 } ) {
-	const spacingSizes = [
-		{ name: 0, slug: '0', size: 0 },
-		...( useSetting( 'spacing.spacingSizes' ) || [] ),
-	];
-
-	if ( spacingSizes.length > 8 ) {
-		spacingSizes.unshift( {
-			name: __( 'Default' ),
-			slug: 'default',
-			size: undefined,
-		} );
-	}
-
+	const spacingSizes = useSpacingSizes();
 	const inputValues = values || DEFAULT_VALUES;
-	const hasInitialValue = isValuesDefined( values );
 	const hasOneSide = sides?.length === 1;
+	const hasOnlyAxialSides =
+		sides?.includes( 'horizontal' ) &&
+		sides?.includes( 'vertical' ) &&
+		sides?.length === 2;
 
-	const [ isLinked, setIsLinked ] = useState(
-		! hasInitialValue || ! isValuesMixed( inputValues, sides ) || hasOneSide
-	);
-
-	const toggleLinked = () => {
-		setIsLinked( ! isLinked );
-	};
+	const [ view, setView ] = useState( getInitialView( inputValues, sides ) );
 
 	const handleOnChange = ( nextValue ) => {
 		const newValues = { ...values, ...nextValue };
@@ -64,43 +53,68 @@ export default function SpacingSizesControl( {
 
 	const inputControlProps = {
 		...inputProps,
+		minimumCustomValue,
 		onChange: handleOnChange,
-		isLinked,
+		onMouseOut,
+		onMouseOver,
 		sides,
-		values: inputValues,
 		spacingSizes,
+		type: labelProp,
 		useSelect,
-		type: label,
-		minimumCustomValue,
-		onMouseOver,
-		onMouseOut,
+		values: inputValues,
 	};
 
-	return (
-		<fieldset
-			className={ classnames( 'component-spacing-sizes-control', {
-				'is-unlinked': ! isLinked,
-			} ) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ label }
-			</BaseControl.VisualLabel>
-			{ ! hasOneSide && (
-				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
-			) }
-			{ isLinked && (
-				<AllInputControl
-					aria-label={ label }
-					{ ...inputControlProps }
-				/>
-			) }
+	const renderControls = () => {
+		if ( view === VIEWS.axial ) {
+			return <AxialInputControls { ...inputControlProps } />;
+		}
+		if ( view === VIEWS.custom ) {
+			return <SeparatedInputControls { ...inputControlProps } />;
+		}
+		return (
+			<SingleInputControl
+				side={ view }
+				{ ...inputControlProps }
+				showSideInLabel={ showSideInLabel }
+			/>
+		);
+	};
+
+	const sideLabel =
+		ALL_SIDES.includes( view ) && showSideInLabel ? LABELS[ view ] : '';
+
+	const label = sprintf(
+		// translators: 2. Type of spacing being modified (Padding, margin, etc). 1: The side of the block being modified (top, bottom, left etc.).
+		__( '%1$s %2$s' ),
+		labelProp,
+		sideLabel
+	).trim();
 
-			{ ! isLinked && splitOnAxis && (
-				<AxialInputControls { ...inputControlProps } />
-			) }
-			{ ! isLinked && ! splitOnAxis && (
-				<InputControls { ...inputControlProps } />
-			) }
+	const dropdownLabelText = sprintf(
+		// translators: %s: The current spacing property e.g. "Padding", "Margin".
+		_x( '%s options', 'Button label to reveal side configuration options' ),
+		labelProp
+	);
+
+	return (
+		<fieldset className="spacing-sizes-control">
+			<HStack className="spacing-sizes-control__header">
+				<BaseControl.VisualLabel
+					as="legend"
+					className="spacing-sizes-control__label"
+				>
+					{ label }
+				</BaseControl.VisualLabel>
+				{ ! hasOneSide && ! hasOnlyAxialSides && (
+					<SidesDropdown
+						label={ dropdownLabelText }
+						onChange={ setView }
+						sides={ sides }
+						value={ view }
+					/>
+				) }
+			</HStack>
+			{ renderControls() }
 		</fieldset>
 	);
 }

package/src/components/spacing-sizes-control/{axial-input-controls.js → input-controls/axial.js}

@@ -2,19 +2,19 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS } from './utils';
+import { LABELS, ICONS, hasAxisSupport } from '../utils';
 
 const groupedSides = [ 'vertical', 'horizontal' ];
 
 export default function AxialInputControls( {
+	minimumCustomValue,
 	onChange,
-	values,
+	onMouseOut,
+	onMouseOver,
 	sides,
 	spacingSizes,
 	type,
-	minimumCustomValue,
-	onMouseOver,
-	onMouseOut,
+	values,
 } ) {
 	const createHandleOnChange = ( side ) => ( next ) => {
 		if ( ! onChange ) {
@@ -37,7 +37,7 @@ export default function AxialInputControls( {
 
 	// Filter sides if custom configuration provided, maintaining default order.
 	const filteredSides = sides?.length
-		? groupedSides.filter( ( side ) => sides.includes( side ) )
+		? groupedSides.filter( ( side ) => hasAxisSupport( sides, side ) )
 		: groupedSides;
 
 	return (
@@ -47,17 +47,18 @@ export default function AxialInputControls( {
 					side === 'vertical' ? values.top : values.left;
 				return (
 					<SpacingInputControl
-						value={ axisValue }
-						onChange={ createHandleOnChange( side ) }
-						label={ LABELS[ side ] }
 						key={ `spacing-sizes-control-${ side }` }
-						withInputField={ false }
+						icon={ ICONS[ side ] }
+						label={ LABELS[ side ] }
+						minimumCustomValue={ minimumCustomValue }
+						onChange={ createHandleOnChange( side ) }
+						onMouseOut={ onMouseOut }
+						onMouseOver={ onMouseOver }
 						side={ side }
 						spacingSizes={ spacingSizes }
 						type={ type }
-						minimumCustomValue={ minimumCustomValue }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
+						value={ axisValue }
+						withInputField={ false }
 					/>
 				);
 			} ) }

package/src/components/spacing-sizes-control/{input-controls.js → input-controls/separated.js}

@@ -2,17 +2,17 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { ALL_SIDES, LABELS } from './utils';
+import { ALL_SIDES, LABELS, ICONS } from '../utils';
 
-export default function BoxInputControls( {
-	values,
-	sides,
+export default function SeparatedInputControls( {
+	minimumCustomValue,
 	onChange,
+	onMouseOut,
+	onMouseOver,
+	sides,
 	spacingSizes,
 	type,
-	minimumCustomValue,
-	onMouseOver,
-	onMouseOut,
+	values,
 } ) {
 	// Filter sides if custom configuration provided, maintaining default order.
 	const filteredSides = sides?.length
@@ -31,17 +31,18 @@ export default function BoxInputControls( {
 			{ filteredSides.map( ( side ) => {
 				return (
 					<SpacingInputControl
-						value={ values[ side ] }
-						label={ LABELS[ side ] }
 						key={ `spacing-sizes-control-${ side }` }
-						withInputField={ false }
-						side={ side }
+						icon={ ICONS[ side ] }
+						label={ LABELS[ side ] }
+						minimumCustomValue={ minimumCustomValue }
 						onChange={ createHandleOnChange( side ) }
+						onMouseOut={ onMouseOut }
+						onMouseOver={ onMouseOver }
+						side={ side }
 						spacingSizes={ spacingSizes }
 						type={ type }
-						minimumCustomValue={ minimumCustomValue }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
+						value={ values[ side ] }
+						withInputField={ false }
 					/>
 				);
 			} ) }

package/src/components/spacing-sizes-control/input-controls/single.js

@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { LABELS } from '../utils';
+
+export default function SingleInputControl( {
+	minimumCustomValue,
+	onChange,
+	onMouseOut,
+	onMouseOver,
+	showSideInLabel,
+	side,
+	spacingSizes,
+	type,
+	values,
+} ) {
+	const createHandleOnChange = ( currentSide ) => ( next ) => {
+		const nextValues = { ...values };
+		nextValues[ currentSide ] = next;
+
+		onChange( nextValues );
+	};
+
+	return (
+		<SpacingInputControl
+			label={ LABELS[ side ] }
+			minimumCustomValue={ minimumCustomValue }
+			onChange={ createHandleOnChange( side ) }
+			onMouseOut={ onMouseOut }
+			onMouseOver={ onMouseOver }
+			showSideInLabel={ showSideInLabel }
+			side={ side }
+			spacingSizes={ spacingSizes }
+			type={ type }
+			value={ values[ side ] }
+			withInputField={ false }
+		/>
+	);
+}