@wordpress/block-editor 9.5.0 → 9.7.1-next.d6164808d3.0

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

@@ -75,7 +75,7 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
+			if ( event.keyCode === ESCAPE ) {
 				event.preventDefault();
 				setNavigationMode( true );
 				return;

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 {

package/src/hooks/layout.js

@@ -49,7 +49,12 @@ const layoutBlockSupportKey = '__experimentalLayout';
  *
  * @return { Array } Array of CSS classname strings.
  */
-function getLayoutClasses( layout, layoutDefinitions ) {
+function useLayoutClasses( layout, layoutDefinitions ) {
+	const rootPaddingAlignment = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().__experimentalFeatures
+			?.useRootPaddingAwareAlignments;
+	}, [] );
 	const layoutClassnames = [];
 
 	if ( layoutDefinitions?.[ layout?.type || 'default' ]?.className ) {
@@ -58,6 +63,10 @@ function getLayoutClasses( layout, layoutDefinitions ) {
 		);
 	}
 
+	if ( ( layout?.inherit || layout?.contentSize ) && rootPaddingAlignment ) {
+		layoutClassnames.push( 'has-global-padding' );
+	}
+
 	if ( layout?.orientation ) {
 		layoutClassnames.push( `is-${ kebabCase( layout.orientation ) }` );
 	}
@@ -101,25 +110,37 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 
 	// Only show the inherit toggle if it's supported,
 	// a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values),
-	// and that the default / flow layout type is in use, as this is the only one that supports inheritance.
+	// and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other.
 	const showInheritToggle = !! (
 		allowInheriting &&
 		!! defaultThemeLayout &&
-		( ! layout?.type || layout?.type === 'default' || layout?.inherit )
+		( ! layout?.type ||
+			layout?.type === 'default' ||
+			layout?.type === 'constrained' ||
+			layout?.inherit )
 	);
 
 	const usedLayout = layout || defaultBlockLayout || {};
-	const { inherit = false, type = 'default' } = usedLayout;
+	const {
+		inherit = false,
+		type = 'default',
+		contentSize = null,
+	} = usedLayout;
 	/**
-	 * `themeSupportsLayout` is only relevant to the `default/flow`
-	 * layout and it should not be taken into account when other
+	 * `themeSupportsLayout` is only relevant to the `default/flow` or
+	 * `constrained` layouts and it should not be taken into account when other
 	 * `layout` types are used.
 	 */
-	if ( type === 'default' && ! themeSupportsLayout ) {
+	if (
+		( type === 'default' || type === 'constrained' ) &&
+		! themeSupportsLayout
+	) {
 		return null;
 	}
 	const layoutType = getLayoutType( type );
 
+	const constrainedType = getLayoutType( 'constrained' );
+
 	const onChangeType = ( newType ) =>
 		setAttributes( { layout: { type: newType } } );
 	const onChangeLayout = ( newLayout ) =>
@@ -132,16 +153,29 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					{ showInheritToggle && (
 						<>
 							<ToggleControl
-								label={ __( 'Inner blocks use full width' ) }
-								checked={ ! inherit }
+								label={ __(
+									'Inner blocks respect content width'
+								) }
+								checked={
+									layoutType?.name === 'constrained' ||
+									!! inherit ||
+									!! contentSize
+								}
 								onChange={ () =>
 									setAttributes( {
-										layout: { inherit: ! inherit },
+										layout: {
+											type:
+												layoutType?.name ===
+												'constrained'
+													? 'default'
+													: 'constrained',
+										},
 									} )
 								}
 							/>
 							<p className="block-editor-hooks__layout-controls-helptext">
-								{ !! inherit
+								{ !! inherit ||
+								layoutType?.name === 'constrained'
 									? __(
 											'Nested blocks use theme content width with options for full and wide widths.'
 									  )
@@ -159,13 +193,20 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 						/>
 					) }
 
-					{ ! inherit && layoutType && (
+					{ layoutType && layoutType.name !== 'default' && (
 						<layoutType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
 							layoutBlockSupport={ layoutBlockSupport }
 						/>
 					) }
+					{ constrainedType && !! contentSize && (
+						<constrainedType.inspectorControls
+							layout={ usedLayout }
+							onChange={ onChangeLayout }
+							layoutBlockSupport={ layoutBlockSupport }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			{ ! inherit && layoutType && (
@@ -253,21 +294,28 @@ export const withInspectorControls = createHigherOrderComponent(
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
-		const shouldRenderLayoutStyles = hasBlockSupport(
+		const hasLayoutBlockSupport = hasBlockSupport(
 			name,
 			layoutBlockSupportKey
 		);
+		const disableLayoutStyles = useSelect( ( select ) => {
+			const { getSettings } = select( blockEditorStore );
+			return !! getSettings().disableLayoutStyles;
+		} );
+		const shouldRenderLayoutStyles =
+			hasLayoutBlockSupport && ! disableLayoutStyles;
 		const id = useInstanceId( BlockListBlock );
 		const defaultThemeLayout = useSetting( 'layout' ) || {};
 		const element = useContext( BlockList.__unstableElementContext );
 		const { layout } = attributes;
 		const { default: defaultBlockLayout } =
 			getBlockSupport( name, layoutBlockSupportKey ) || {};
-		const usedLayout = layout?.inherit
-			? defaultThemeLayout
-			: layout || defaultBlockLayout || {};
-		const layoutClasses = shouldRenderLayoutStyles
-			? getLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
+		const usedLayout =
+			layout?.inherit || layout?.contentSize || layout?.wideSize
+				? { ...layout, type: 'constrained' }
+				: layout || defaultBlockLayout || {};
+		const layoutClasses = hasLayoutBlockSupport
+			? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
 			: null;
 		const selector = `.${ getBlockDefaultClassName(
 			name

package/src/hooks/margin.js

@@ -28,6 +28,8 @@ import {
 } from './dimensions';
 import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
+import SpacingSizesControl from '../components/spacing-sizes-control';
+import { getCustomValueFromPreset } from '../components/spacing-sizes-control/utils';
 
 /**
  * Determines if there is margin support.
@@ -101,6 +103,8 @@ export function MarginEdit( props ) {
 		setAttributes,
 	} = props;
 
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
@@ -135,15 +139,28 @@ export function MarginEdit( props ) {
 	return Platform.select( {
 		web: (
 			<>
-				<BoxControl
-					values={ style?.spacing?.margin }
-					onChange={ onChange }
-					label={ __( 'Margin' ) }
-					sides={ sides }
-					units={ units }
-					allowReset={ false }
-					splitOnAxis={ splitOnAxis }
-				/>
+				{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
+					<BoxControl
+						values={ style?.spacing?.margin }
+						onChange={ onChange }
+						label={ __( 'Margin' ) }
+						sides={ sides }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ splitOnAxis }
+					/>
+				) }
+				{ spacingSizes?.length > 0 && (
+					<SpacingSizesControl
+						values={ style?.spacing?.margin }
+						onChange={ onChange }
+						label={ __( 'Margin' ) }
+						sides={ sides }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ false }
+					/>
+				) }
 			</>
 		),
 		native: null,
@@ -152,16 +169,31 @@ export function MarginEdit( props ) {
 
 export function MarginVisualizer( { clientId, attributes } ) {
 	const margin = attributes?.style?.spacing?.margin;
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+
 	const style = useMemo( () => {
+		const marginTop = margin?.top
+			? getCustomValueFromPreset( margin?.top, spacingSizes )
+			: 0;
+		const marginRight = margin?.right
+			? getCustomValueFromPreset( margin?.right, spacingSizes )
+			: 0;
+		const marginBottom = margin?.bottom
+			? getCustomValueFromPreset( margin?.bottom, spacingSizes )
+			: 0;
+		const marginLeft = margin?.left
+			? getCustomValueFromPreset( margin?.left, spacingSizes )
+			: 0;
+
 		return {
-			borderTopWidth: margin?.top ?? 0,
-			borderRightWidth: margin?.right ?? 0,
-			borderBottomWidth: margin?.bottom ?? 0,
-			borderLeftWidth: margin?.left ?? 0,
-			top: margin?.top ? `-${ margin.top }` : 0,
-			right: margin?.right ? `-${ margin.right }` : 0,
-			bottom: margin?.bottom ? `-${ margin.bottom }` : 0,
-			left: margin?.left ? `-${ margin.left }` : 0,
+			borderTopWidth: marginTop,
+			borderRightWidth: marginRight,
+			borderBottomWidth: marginBottom,
+			borderLeftWidth: marginLeft,
+			top: marginTop !== 0 ? `-${ marginTop }` : 0,
+			right: marginRight !== 0 ? `-${ marginRight }` : 0,
+			bottom: marginBottom !== 0 ? `-${ marginBottom }` : 0,
+			left: marginLeft !== 0 ? `-${ marginLeft }` : 0,
 		};
 	}, [ margin ] );
 

package/src/hooks/padding.js

@@ -28,7 +28,11 @@ import {
 } from './dimensions';
 import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
-
+import SpacingSizesControl from '../components/spacing-sizes-control';
+import {
+	getSpacingPresetCssVar,
+	isValueSpacingPreset,
+} from '../components/spacing-sizes-control/utils';
 /**
  * Determines if there is padding support.
  *
@@ -101,6 +105,8 @@ export function PaddingEdit( props ) {
 		setAttributes,
 	} = props;
 
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
@@ -135,15 +141,28 @@ export function PaddingEdit( props ) {
 	return Platform.select( {
 		web: (
 			<>
-				<BoxControl
-					values={ style?.spacing?.padding }
-					onChange={ onChange }
-					label={ __( 'Padding' ) }
-					sides={ sides }
-					units={ units }
-					allowReset={ false }
-					splitOnAxis={ splitOnAxis }
-				/>
+				{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
+					<BoxControl
+						values={ style?.spacing?.padding }
+						onChange={ onChange }
+						label={ __( 'Padding' ) }
+						sides={ sides }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ splitOnAxis }
+					/>
+				) }
+				{ spacingSizes?.length > 0 && (
+					<SpacingSizesControl
+						values={ style?.spacing?.padding }
+						onChange={ onChange }
+						label={ __( 'Padding' ) }
+						sides={ sides }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ splitOnAxis }
+					/>
+				) }
 			</>
 		),
 		native: null,
@@ -154,10 +173,18 @@ export function PaddingVisualizer( { clientId, attributes } ) {
 	const padding = attributes?.style?.spacing?.padding;
 	const style = useMemo( () => {
 		return {
-			borderTopWidth: padding?.top ?? 0,
-			borderRightWidth: padding?.right ?? 0,
-			borderBottomWidth: padding?.bottom ?? 0,
-			borderLeftWidth: padding?.left ?? 0,
+			borderTopWidth: isValueSpacingPreset( padding?.top )
+				? getSpacingPresetCssVar( padding?.top )
+				: padding?.top,
+			borderRightWidth: isValueSpacingPreset( padding?.right )
+				? getSpacingPresetCssVar( padding?.right )
+				: padding?.right,
+			borderBottomWidth: isValueSpacingPreset( padding?.bottom )
+				? getSpacingPresetCssVar( padding?.bottom )
+				: padding?.bottom,
+			borderLeftWidth: isValueSpacingPreset( padding?.left )
+				? getSpacingPresetCssVar( padding?.left )
+				: padding?.left,
 		};
 	}, [ padding ] );