@wordpress/block-editor 12.2.0 → 12.3.1

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

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	RawHTML,
 	useRef,
 	useCallback,
 	forwardRef,
@@ -46,6 +45,7 @@ import { useInsertReplacementText } from './use-insert-replacement-text';
 import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
 import { getMultilineTag, getAllowedFormats } from './utils';
+import { Content } from './content';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -402,7 +402,7 @@ function RichTextWrapper(
 						disableLineBreaks,
 						onSplitAtEnd,
 					} ),
-					useFirefoxCompat(),
+					useFirefoxCompat( { value, onChange } ),
 					anchorRef,
 				] ) }
 				contentEditable={ true }
@@ -419,40 +419,7 @@ function RichTextWrapper(
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
 
-ForwardedRichTextContainer.Content = ( {
-	value,
-	tagName: Tag,
-	multiline,
-	...props
-} ) => {
-	// Handle deprecated `children` and `node` sources.
-	if ( Array.isArray( value ) ) {
-		deprecated( 'wp.blockEditor.RichText value prop as children type', {
-			since: '6.1',
-			version: '6.3',
-			alternative: 'value prop as string',
-			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
-		} );
-
-		value = childrenSource.toHTML( value );
-	}
-
-	const MultilineTag = getMultilineTag( multiline );
-
-	if ( ! value && MultilineTag ) {
-		value = `<${ MultilineTag }></${ MultilineTag }>`;
-	}
-
-	const content = <RawHTML>{ value }</RawHTML>;
-
-	if ( Tag ) {
-		const { format, ...restProps } = props;
-		return <Tag { ...restProps }>{ content }</Tag>;
-	}
-
-	return content;
-};
-
+ForwardedRichTextContainer.Content = Content;
 ForwardedRichTextContainer.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };

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

@@ -6,13 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	RawHTML,
-	Platform,
-	useRef,
-	useCallback,
-	forwardRef,
-} from '@wordpress/element';
+import { Platform, useRef, useCallback, forwardRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	pasteHandler,
@@ -55,6 +49,7 @@ import {
 	createLinkInParagraph,
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
+import { Content } from './content';
 
 const classes = 'block-editor-rich-text__editable';
 
@@ -707,32 +702,7 @@ function RichTextWrapper(
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
 
-ForwardedRichTextContainer.Content = ( {
-	value,
-	tagName: Tag,
-	multiline,
-	...props
-} ) => {
-	// Handle deprecated `children` and `node` sources.
-	if ( Array.isArray( value ) ) {
-		value = childrenSource.toHTML( value );
-	}
-
-	const MultilineTag = getMultilineTag( multiline );
-
-	if ( ! value && MultilineTag ) {
-		value = `<${ MultilineTag }></${ MultilineTag }>`;
-	}
-
-	const content = <RawHTML>{ value }</RawHTML>;
-
-	if ( Tag ) {
-		const { format, ...restProps } = props;
-		return <Tag { ...restProps }>{ content }</Tag>;
-	}
-
-	return content;
-};
+ForwardedRichTextContainer.Content = Content;
 
 ForwardedRichTextContainer.isEmpty = ( value ) => {
 	return ! value || value.length === 0;

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 }
+		/>
+	);
+}