@wordpress/block-editor 16.1.0 → 17.0.0

package/src/hooks/block-fields/media/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	Icon as WCIcon,
@@ -17,10 +14,6 @@ import {
 	video as videoIcon,
 	reset as resetIcon,
 } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import MediaReplaceFlow from '../../../components/media-replace-flow';
 import MediaUploadCheck from '../../../components/media-upload/check';
 import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';

package/src/hooks/block-fields/rich-text/index.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { BaseControl, useBaseControlProps } from '@wordpress/components';
 import { useMergeRefs } from '@wordpress/compose';
 import { useRegistry } from '@wordpress/data';
 import { useMemo, useRef, useState } from '@wordpress/element';
 import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
-
-/**
- * Internal dependencies
- */
 import { getAllowedFormats } from '../../../components/rich-text/utils';
 import { useEventListeners } from '../../../components/rich-text/event-listeners';
 import FormatEdit from '../../../components/rich-text/format-edit';

package/src/hooks/block-fields/use-inspector-popover-placement.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useViewportMatch } from '@wordpress/compose';
 
 export function useInspectorPopoverPlacement(

package/src/hooks/block-hooks.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { Fragment, useMemo } from '@wordpress/element';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { InspectorControls } from '../components';
 import { store as blockEditorStore } from '../store';
 

package/src/hooks/block-renaming.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 

package/src/hooks/block-style-state.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { cleanEmptyObject } from './utils';
 import { getValueFromObjectPath, setImmutably } from '../utils/object';
 

package/src/hooks/block-style-variation.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
@@ -9,10 +6,6 @@ import {
 	getBlockSelectors,
 	privateApis as globalStylesEnginePrivateApis,
 } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import { usePrivateStyleOverride } from './utils';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';

package/src/hooks/border.js

@@ -1,29 +1,14 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
 import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 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,
@@ -37,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;
 
@@ -262,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/color.js

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import {
 	getColorClassName,
 	getColorObjectByAttributeValues,

package/src/hooks/compat.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { hasBlockSupport } from '@wordpress/blocks';
 import { addFilter } from '@wordpress/hooks';
 

package/src/hooks/contrast-checker.js

@@ -1,17 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { useEffect, useLayoutEffect, useReducer } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 import { getBlockSelector } from '@wordpress/global-styles-engine';
 import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
 import { getContrastWarning } from '../components/contrast-checker';
-
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedValue( node, property ) {

package/src/hooks/custom-class-name.js

@@ -1,19 +1,8 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { InspectorControls } from '../components';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 

package/src/hooks/dimensions.js

@@ -1,19 +1,8 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import InspectorControls from '../components/inspector-controls';
 import {
 	DimensionsPanel as StylesDimensionsPanel,
@@ -30,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';
@@ -79,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 ) {
@@ -90,6 +80,7 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 			return {
 				style: attributes.style,
 				className: attributes.className,
+				layout: attributes.layout,
 			};
 		},
 		[ clientId, isEnabled ]
@@ -129,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.
@@ -144,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

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
-
-/**
- * WordPress dependencies
- */
 import {
 	getBlockSupport,
 	getBlockType,
@@ -20,17 +13,16 @@ import {
 	getBlockSelector,
 	privateApis as globalStylesEnginePrivateApis,
 } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import {
 	BlockControls,
 	InspectorControls,
 	__experimentalDuotoneControl as DuotoneControl,
 	useSettings,
 } from '../components';
-import { scopeSelector } from '../components/global-styles/utils';
+import {
+	scopeSelector,
+	getDuotoneSlugFromPreset,
+} from '../components/global-styles/utils';
 import {
 	cleanEmptyObject,
 	useBlockSettings,
@@ -152,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 = {
@@ -177,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/elements.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { getBlockSupport } from '@wordpress/blocks';
 import { useMemo, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import InspectorControls from '../components/inspector-controls';
 import {
 	useHasColorPanel,

package/src/hooks/fit-text.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { useEffect, useCallback, useState } from '@wordpress/element';
@@ -11,13 +8,8 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
-
 const EMPTY_OBJECT = {};
 const MIN_FONT_SIZE_FOR_WARNING = 12;
-
-/**
- * Internal dependencies
- */
 import { optimizeFitText } from '../utils/fit-text-utils';
 import { store as blockEditorStore } from '../store';
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';

package/src/hooks/font-family.js

@@ -1,20 +1,11 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
+import { kebabCase } from '@wordpress/kebab-case';
 import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
-import { unlock } from '../lock-unlock';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
-const { kebabCase } = unlock( componentsPrivateApis );
 
 /**
  * Filters registered block settings, extending attributes to include

package/src/hooks/font-size.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
 import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import {
 	getFontSize,
 	getFontSizeClass,

package/src/hooks/gap.js

@@ -1,7 +1,20 @@
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
+
 /**
- * Internal dependencies
+ * 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.
  */
-import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
+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.

package/src/hooks/generated-class-name.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport, getBlockDefaultClassName } from '@wordpress/blocks';
 

package/src/hooks/grid-visualizer.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { GridVisualizer, useGridLayoutSync } from '../components/grid';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';

package/src/hooks/index.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	createBlockEditFilter,
 	createBlockListBlockFilter,

package/src/hooks/layout-child.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 import { useStyleOverride } from './utils';
@@ -25,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 );
@@ -280,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 ) => {
@@ -381,6 +410,7 @@ function GridTools( {
 		deviceType,
 		viewportSettings,
 		isChildBlockAGrid,
+		selectedState,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -389,8 +419,8 @@ function GridTools( {
 				getTemplateLock,
 				getBlockAttributes,
 				getSettings,
-			} = select( blockEditorStore );
-
+				getSelectedBlockStyleState,
+			} = unlock( select( blockEditorStore ) );
 			const _rootClientId = getBlockRootClientId( clientId );
 
 			if (
@@ -421,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 ]
@@ -482,13 +513,7 @@ function GridTools( {
 
 	function updateLayout( layout ) {
 		setAttributes( {
-			style: {
-				...style,
-				layout: {
-					...style?.layout,
-					...layout,
-				},
-			},
+			style: getUpdatedChildLayoutStyle( style, layout, selectedState ),
 		} );
 	}