@wordpress/block-editor 16.2.0 → 17.0.0

package/src/components/writing-flow/use-input.js

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/blocks';
 import { store as blockEditorStore } from '../../store';
 import { setContentEditableWrapper } from './utils';
-import { getSelectionEditableElement } from '../../utils/dom';
+import { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';
 
 /**
  * Handles input for selections across blocks.
@@ -28,6 +28,10 @@ export default function useInput() {
 		getSelectionStart,
 		getSelectionEnd,
 		getBlockAttributes,
+		getNextBlockClientId,
+		getBlockOrder,
+		getBlockEditingMode,
+		getBlockListSettings,
 	} = useSelect( blockEditorStore );
 	const {
 		replaceBlocks,
@@ -36,6 +40,9 @@ export default function useInput() {
 		__unstableDeleteSelection,
 		__unstableExpandSelection,
 		__unstableMarkAutomaticChange,
+		insertAfterBlock,
+		insertBlock,
+		selectBlock,
 	} = useDispatch( blockEditorStore );
 
 	return useRefEffect( ( node ) => {
@@ -70,7 +77,7 @@ export default function useInput() {
 
 			if ( ! hasMultiSelection() ) {
 				if ( event.keyCode === ENTER ) {
-					if ( event.shiftKey || __unstableIsFullySelected() ) {
+					if ( event.shiftKey ) {
 						return;
 					}
 
@@ -111,26 +118,109 @@ export default function useInput() {
 						}
 					}
 
-					if (
-						! hasBlockSupport( blockName, 'splitting', false ) &&
-						! event.__deprecatedOnSplit
-					) {
-						return;
-					}
+					const rootClientId = getBlockRootClientId( clientId );
+					const { activeElement } = event.target.ownerDocument;
 
 					// Ensure template is not locked.
 					if (
-						canInsertBlockType(
+						! __unstableIsFullySelected() &&
+						( canInsertBlockType(
 							getDefaultBlockName(),
-							getBlockRootClientId( clientId )
+							rootClientId
 						) ||
-						canInsertBlockType(
-							blockName,
-							getBlockRootClientId( clientId )
-						)
+							canInsertBlockType( blockName, rootClientId ) ) &&
+						( hasBlockSupport( blockName, 'splitting', false ) ||
+							event.__deprecatedOnSplit )
 					) {
-						__unstableSplitSelection();
 						event.preventDefault();
+						__unstableSplitSelection();
+					} else if (
+						// Handle Enter only on the block wrapper itself or
+						// an editable element within the block, which may be
+						// nested within the wrapper (e.g. Site Title). Other
+						// focusable elements (an embed's URL field, an
+						// appender button) keep their native Enter behavior.
+						( activeElement.getAttribute( 'data-block' ) ===
+							clientId ||
+							activeElement.isContentEditable ) &&
+						getBlockClientId( activeElement ) === clientId
+					) {
+						// The default block depends on context: containers
+						// such as the gallery define their own default
+						// block, which is what insertAfterBlock inserts.
+						const { defaultBlock: directInsertBlock } =
+							( rootClientId &&
+								getBlockListSettings( rootClientId ) ) ||
+							{};
+
+						if (
+							canInsertBlockType(
+								directInsertBlock?.name ??
+									getDefaultBlockName(),
+								rootClientId
+							)
+						) {
+							event.preventDefault();
+							insertAfterBlock( clientId );
+						} else {
+							// Descend into an empty container by inserting
+							// its default block, the same block an appender
+							// or ghost would insert.
+							if ( ! getBlockOrder( clientId ).length ) {
+								const { defaultBlock } =
+									getBlockListSettings( clientId ) ?? {};
+								const name =
+									defaultBlock?.name ?? getDefaultBlockName();
+
+								if ( canInsertBlockType( name, clientId ) ) {
+									event.preventDefault();
+									insertBlock(
+										createBlock(
+											name,
+											defaultBlock?.attributes
+										),
+										0,
+										clientId
+									);
+									return;
+								}
+							}
+
+							function getNextClientId( id ) {
+								let nextClientId = null;
+
+								while (
+									typeof id === 'string' &&
+									! ( nextClientId =
+										getNextBlockClientId( id ) )
+								) {
+									id = getBlockRootClientId( id );
+								}
+
+								return nextClientId;
+							}
+
+							let nextClientId =
+								getBlockOrder( clientId )[ 0 ] ??
+								getNextClientId( clientId );
+
+							while (
+								nextClientId &&
+								getBlockEditingMode( nextClientId ) ===
+									'disabled'
+							) {
+								nextClientId = getNextClientId( nextClientId );
+							}
+
+							if ( nextClientId ) {
+								event.preventDefault();
+								// An initial position of `true` is an
+								// internal sentinel: it focuses the block
+								// wrapper instead of a text field within
+								// it. See useFocusFirstElement.
+								selectBlock( nextClientId, true );
+							}
+						}
 					}
 				}
 				return;

package/src/hooks/border.js

@@ -8,11 +8,7 @@ import { __ } from '@wordpress/i18n';
 import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
-import {
-	cleanEmptyObject,
-	shouldSkipSerialization,
-	useBlockSettings,
-} from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 import {
 	useHasBorderPanel,
 	useHasBorderPanelControls,
@@ -26,10 +22,13 @@ import {
 	setStyleForState,
 	useBlockStyleState,
 } from './block-style-state';
+import { unlock } from '../lock-unlock';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 export const SHADOW_SUPPORT_KEY = 'shadow';
 
+const EMPTY_ARRAY = [];
+
 const getColorByProperty = ( colors, property, value ) => {
 	let matchedColor;
 
@@ -251,14 +250,34 @@ export function hasShadowSupport( blockName ) {
 }
 
 export function useBorderPanelLabel( {
-	blockName,
+	clientId,
 	hasBorderControl,
 	hasShadowControl,
 } = {} ) {
-	const settings = useBlockSettings( blockName );
+	const [ color, radius, style, width, shadow ] = useSelect(
+		( select ) => {
+			if ( ! clientId ) {
+				return EMPTY_ARRAY;
+			}
+			const { getBlockSettings } = unlock( select( blockEditorStore ) );
+			return getBlockSettings(
+				clientId,
+				'border.color',
+				'border.radius',
+				'border.style',
+				'border.width',
+				'shadow'
+			);
+		},
+		[ clientId ]
+	);
+	const settings = useMemo(
+		() => ( { border: { color, radius, style, width }, shadow } ),
+		[ color, radius, style, width, shadow ]
+	);
 	const controls = useHasBorderPanelControls( settings );
 
-	if ( ! hasBorderControl && ! hasShadowControl && blockName ) {
+	if ( ! hasBorderControl && ! hasShadowControl && clientId ) {
 		hasBorderControl =
 			controls?.hasBorderColor ||
 			controls?.hasBorderStyle ||

package/src/hooks/dimensions.js

@@ -19,6 +19,7 @@ import {
 	setStyleForState,
 	useBlockStyleState,
 } from './block-style-state';
+import { isAxialBlockGapAllowed } from './gap';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
@@ -68,7 +69,7 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 	const selectedState = useBlockStyleState();
 	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
 	const isEnabled = useHasDimensionsPanel( settings, selectedState );
-	const { style, className } = useSelect(
+	const { style, className, layout } = useSelect(
 		( select ) => {
 			// Early return to avoid subscription when disabled
 			if ( ! isEnabled ) {
@@ -79,6 +80,7 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 			return {
 				style: attributes.style,
 				className: attributes.className,
+				layout: attributes.layout,
 			};
 		},
 		[ clientId, isEnabled ]
@@ -118,6 +120,7 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 		SPACING_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
+	const { default: defaultLayout } = getBlockSupport( name, 'layout' ) || {};
 	const defaultControls = {
 		// In the block inspector, minHeight and minWidth should not
 		// be shown by default unless the block explicitly opts in.
@@ -133,6 +136,10 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 				as={ DimensionsInspectorControl }
 				panelId={ clientId }
 				settings={ settings }
+				allowAxialBlockGap={ isAxialBlockGapAllowed(
+					layout,
+					defaultLayout
+				) }
 				value={ value }
 				onChange={ onChange }
 				defaultControls={ defaultControls }

package/src/hooks/duotone.js

@@ -19,7 +19,10 @@ import {
 	__experimentalDuotoneControl as DuotoneControl,
 	useSettings,
 } from '../components';
-import { scopeSelector } from '../components/global-styles/utils';
+import {
+	scopeSelector,
+	getDuotoneSlugFromPreset,
+} from '../components/global-styles/utils';
 import {
 	cleanEmptyObject,
 	useBlockSettings,
@@ -141,8 +144,13 @@ function DuotonePanelPure( { style, setAttributes, name, clientId } ) {
 		<>
 			<InspectorControls group="filter">
 				<StylesFiltersPanel
+					// The raw value, not the resolved colors. The panel
+					// decodes it for display, but needs the preset reference
+					// to know which preset is applied: two presets can hold
+					// the same pair of colors, and resolving first throws the
+					// slug away.
 					value={ {
-						filter: { duotone: duotonePresetOrColors },
+						filter: { duotone: duotoneStyle },
 					} }
 					onChange={ ( newDuotone ) => {
 						const newStyle = {
@@ -166,11 +174,19 @@ function DuotonePanelPure( { style, setAttributes, name, clientId } ) {
 					disableCustomDuotone={ disableCustomDuotone }
 					disableCustomColors={ disableCustomColors }
 					value={ duotonePresetOrColors }
-					onChange={ ( newDuotone ) => {
-						const maybePreset = getDuotonePresetFromColors(
-							newDuotone,
-							duotonePalette
-						);
+					selectedSlug={ getDuotoneSlugFromPreset( duotoneStyle ) }
+					onChange={ ( newDuotone, index, slug ) => {
+						// A slug means a preset was picked out of the palette,
+						// so it identifies the choice exactly. Matching back by
+						// color would resolve to whichever preset holding those
+						// colors comes first, which is the wrong one whenever
+						// two presets share a pair.
+						const maybePreset = slug
+							? `var:preset|duotone|${ slug }`
+							: getDuotonePresetFromColors(
+									newDuotone,
+									duotonePalette
+							  );
 
 						const newStyle = {
 							...style,

package/src/hooks/gap.js

@@ -1,5 +1,21 @@
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 
+/**
+ * Returns whether the current layout can use separate row and column gaps.
+ *
+ * @param {?Object} layout        The block instance's layout attribute.
+ * @param {?Object} defaultLayout The block's default supported layout.
+ * @return {boolean} Whether axial block gap controls should be available.
+ */
+export function isAxialBlockGapAllowed( layout, defaultLayout ) {
+	const usedLayout =
+		layout?.inherit || layout?.contentSize || layout?.wideSize
+			? { ...layout, type: 'constrained' }
+			: layout || defaultLayout || {};
+
+	return [ 'flex', 'grid' ].includes( usedLayout?.type );
+}
+
 /**
  * Returns a BoxControl object value from a given blockGap style value.
  * The string check is for backwards compatibility before Gutenberg supported

package/src/hooks/layout-child.js

@@ -18,6 +18,8 @@ import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/const
 import {
 	DEFAULT_BLOCK_STYLE_STATE,
 	getStyleForState,
+	hasViewportBlockStyleState,
+	setStyleForState,
 } from './block-style-state';
 
 const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
@@ -273,6 +275,40 @@ export function getResponsiveChildLayoutStyles( {
 		.join( '' );
 }
 
+/**
+ * Merges child layout changes into the active layout style state.
+ *
+ * @param {Object|undefined} style         Block style attributes.
+ * @param {Object}           layout        Child layout changes.
+ * @param {Object}           selectedState Selected block style state.
+ * @return {Object|undefined} Updated block style attributes.
+ */
+export function getUpdatedChildLayoutStyle( style, layout, selectedState ) {
+	if ( ! hasViewportBlockStyleState( selectedState ) ) {
+		return {
+			...style,
+			layout: {
+				...style?.layout,
+				...layout,
+			},
+		};
+	}
+
+	const layoutState = {
+		viewport: selectedState.viewport,
+		pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+	};
+	const stateStyle = getStyleForState( style, layoutState );
+
+	return setStyleForState( style, layoutState, {
+		...stateStyle,
+		layout: {
+			...stateStyle?.layout,
+			...layout,
+		},
+	} );
+}
+
 function useBlockPropsChildLayoutStyles( { style } ) {
 	const { shouldRenderChildLayoutStyles, viewportSettings } = useSelect(
 		( select ) => {
@@ -374,6 +410,7 @@ function GridTools( {
 		deviceType,
 		viewportSettings,
 		isChildBlockAGrid,
+		selectedState,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -382,8 +419,8 @@ function GridTools( {
 				getTemplateLock,
 				getBlockAttributes,
 				getSettings,
-			} = select( blockEditorStore );
-
+				getSelectedBlockStyleState,
+			} = unlock( select( blockEditorStore ) );
 			const _rootClientId = getBlockRootClientId( clientId );
 
 			if (
@@ -414,6 +451,7 @@ function GridTools( {
 				viewportSettings: settings?.__experimentalFeatures?.viewport,
 				// Check if the selected child block is itself a grid.
 				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
+				selectedState: getSelectedBlockStyleState( clientId ),
 			};
 		},
 		[ clientId ]
@@ -475,13 +513,7 @@ function GridTools( {
 
 	function updateLayout( layout ) {
 		setAttributes( {
-			style: {
-				...style,
-				layout: {
-					...style?.layout,
-					...layout,
-				},
-			},
+			style: getUpdatedChildLayoutStyle( style, layout, selectedState ),
 		} );
 	}
 

package/src/hooks/layout.js

@@ -98,6 +98,42 @@ export function getLayoutStateOverrides(
 	} );
 }
 
+/**
+ * Checks whether the layout panel has any controls to display.
+ *
+ * @param {Object}  options                                 Options.
+ * @param {Object}  options.layoutType                      Active layout type.
+ * @param {Object}  options.constrainedType                 Constrained layout type.
+ * @param {Object}  options.layoutBlockSupport              Layout support settings.
+ * @param {boolean} options.showInheritToggle               Whether to show the inherit toggle.
+ * @param {boolean} options.showLayoutTypeSwitcher          Whether to show the layout type switcher.
+ * @param {boolean} options.displayControlsForLegacyLayouts Whether to show legacy layout controls.
+ *
+ * @return {boolean} Whether the layout panel has controls.
+ */
+export function hasLayoutPanelControls( {
+	layoutType,
+	constrainedType,
+	layoutBlockSupport,
+	showInheritToggle,
+	showLayoutTypeSwitcher,
+	displayControlsForLegacyLayouts,
+} ) {
+	const hasActiveLayoutControls =
+		layoutType?.name !== 'default' &&
+		layoutType?.hasInspectorControls( layoutBlockSupport );
+	const hasLegacyLayoutControls =
+		displayControlsForLegacyLayouts &&
+		constrainedType?.hasInspectorControls( layoutBlockSupport );
+
+	return !! (
+		showInheritToggle ||
+		showLayoutTypeSwitcher ||
+		hasActiveLayoutControls ||
+		hasLegacyLayoutControls
+	);
+}
+
 function getLayoutContainerValues( layout = {} ) {
 	return Object.fromEntries(
 		Object.entries( layout || {} ).filter(
@@ -453,6 +489,14 @@ function LayoutPanelPure( {
 		isDefaultBlockStyleState( selectedState ) &&
 		! inherit &&
 		allowSwitching;
+	const showLayoutPanel = hasLayoutPanelControls( {
+		layoutType,
+		constrainedType,
+		layoutBlockSupport: blockSupportAndThemeSettings,
+		showInheritToggle,
+		showLayoutTypeSwitcher,
+		displayControlsForLegacyLayouts,
+	} );
 
 	const onChangeLayout = ( newLayout ) => {
 		if ( isViewportLayoutState ) {
@@ -488,79 +532,81 @@ function LayoutPanelPure( {
 
 	return (
 		<>
-			<InspectorControls
-				group="layout"
-				resetAllFilter={ resetLayoutFilter }
-			>
-				{ showInheritToggle && (
-					<ToolsPanelItem
-						label={ __( 'Use content width' ) }
-						hasValue={ hasInheritToggleValue }
-						onDeselect={ resetInheritToggle }
-						isShownByDefault
-						panelId={ clientId }
-					>
-						<ToggleControl
-							label={ __( 'Inner blocks use content width' ) }
-							checked={ isUsingContentWidth() }
-							onChange={ () =>
-								onChangeLayout( {
-									type: isUsingContentWidth()
-										? 'default'
-										: 'constrained',
-								} )
-							}
-							help={
-								isUsingContentWidth()
-									? __(
-											'Nested blocks use content width with options for full and wide widths.'
-									  )
-									: __(
-											'Nested blocks will fill the width of this container.'
-									  )
-							}
+			{ showLayoutPanel && (
+				<InspectorControls
+					group="layout"
+					resetAllFilter={ resetLayoutFilter }
+				>
+					{ showInheritToggle && (
+						<ToolsPanelItem
+							label={ __( 'Use content width' ) }
+							hasValue={ hasInheritToggleValue }
+							onDeselect={ resetInheritToggle }
+							isShownByDefault
+							panelId={ clientId }
+						>
+							<ToggleControl
+								label={ __( 'Inner blocks use content width' ) }
+								checked={ isUsingContentWidth() }
+								onChange={ () =>
+									onChangeLayout( {
+										type: isUsingContentWidth()
+											? 'default'
+											: 'constrained',
+									} )
+								}
+								help={
+									isUsingContentWidth()
+										? __(
+												'Nested blocks use content width with options for full and wide widths.'
+										  )
+										: __(
+												'Nested blocks will fill the width of this container.'
+										  )
+								}
+							/>
+						</ToolsPanelItem>
+					) }
+
+					{ showLayoutTypeSwitcher && (
+						<ToolsPanelItem
+							label={ __( 'Layout type' ) }
+							hasValue={ hasLayoutTypeValue }
+							onDeselect={ resetLayout }
+							isShownByDefault
+							panelId={ clientId }
+						>
+							<LayoutTypeSwitcher
+								type={ blockLayoutType }
+								onChange={ onChangeType }
+							/>
+						</ToolsPanelItem>
+					) }
+
+					{ layoutType && layoutType.name !== 'default' && (
+						<layoutType.inspectorControls
+							layout={ usedLayout }
+							value={ layout }
+							onChange={ onChangeLayout }
+							layoutBlockSupport={ blockSupportAndThemeSettings }
+							resetLayout={ resetLayoutDefaults }
+							name={ blockName }
+							clientId={ clientId }
 						/>
-					</ToolsPanelItem>
-				) }
-
-				{ showLayoutTypeSwitcher && (
-					<ToolsPanelItem
-						label={ __( 'Layout type' ) }
-						hasValue={ hasLayoutTypeValue }
-						onDeselect={ resetLayout }
-						isShownByDefault
-						panelId={ clientId }
-					>
-						<LayoutTypeSwitcher
-							type={ blockLayoutType }
-							onChange={ onChangeType }
+					) }
+					{ constrainedType && displayControlsForLegacyLayouts && (
+						<constrainedType.inspectorControls
+							layout={ usedLayout }
+							value={ layout }
+							onChange={ onChangeLayout }
+							layoutBlockSupport={ blockSupportAndThemeSettings }
+							resetLayout={ resetLayoutDefaults }
+							name={ blockName }
+							clientId={ clientId }
 						/>
-					</ToolsPanelItem>
-				) }
-
-				{ layoutType && layoutType.name !== 'default' && (
-					<layoutType.inspectorControls
-						layout={ usedLayout }
-						value={ layout }
-						onChange={ onChangeLayout }
-						layoutBlockSupport={ blockSupportAndThemeSettings }
-						resetLayout={ resetLayoutDefaults }
-						name={ blockName }
-						clientId={ clientId }
-					/>
-				) }
-				{ constrainedType && displayControlsForLegacyLayouts && (
-					<constrainedType.inspectorControls
-						layout={ usedLayout }
-						value={ layout }
-						onChange={ onChangeLayout }
-						layoutBlockSupport={ blockSupportAndThemeSettings }
-						resetLayout={ resetLayoutDefaults }
-						name={ blockName }
-						clientId={ clientId }
-					/>
-				) }
-			</InspectorControls>
+					) }
+				</InspectorControls>
+			) }
 			{ ! inherit && layoutType && (
 				<layoutType.toolBarControls
 					layout={ usedLayout }

package/src/hooks/states.js

@@ -1,6 +1,6 @@
 import { useMemo } from '@wordpress/element';
 import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import StateControl from '../components/global-styles/state-control';
 import StateControlBadges from '../components/global-styles/state-control-badges';
 import { useToolsPanelDropdownMenuProps } from '../components/global-styles/utils';
@@ -10,10 +10,13 @@ import { unlock } from '../lock-unlock';
 const { getViewportBreakpoints } = unlock( globalStylesEnginePrivateApis );
 
 export const PSEUDO_STATE_LABELS = {
-	':hover': __( 'Hover' ),
-	':focus': __( 'Focus' ),
-	':focus-visible': __( 'Focus-visible' ),
-	':active': __( 'Active' ),
+	':hover': _x( 'Hover', 'Name for the CSS pseudo-class selector' ),
+	':focus': _x( 'Focus', 'Name for the CSS pseudo-class selector' ),
+	':focus-visible': _x(
+		'Focus-visible',
+		'Name for the CSS pseudo-class selector'
+	),
+	':active': _x( 'Active', 'Name for the CSS pseudo-class selector' ),
 };
 
 export const RESPONSIVE_STATE_LABELS = {