@wordpress/block-editor 11.7.0 → 11.8.0

package/src/hooks/duotone.js

@@ -32,6 +32,8 @@ import {
 	__unstableDuotoneStylesheet as DuotoneStylesheet,
 	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
 } from '../components/duotone';
+import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
+import { scopeSelector } from '../components/global-styles/utils';
 import { store as blockEditorStore } from '../store';
 
 const EMPTY_ARRAY = [];
@@ -166,7 +168,9 @@ function DuotonePanel( { attributes, setAttributes } ) {
  * @return {Object} Filtered block settings.
  */
 function addDuotoneAttributes( settings ) {
-	if ( ! hasBlockSupport( settings, 'color.__experimentalDuotone' ) ) {
+	// Previous `color.__experimentalDuotone` support flag is migrated via
+	// block_type_metadata_settings filter in `lib/block-supports/duotone.php`.
+	if ( ! hasBlockSupport( settings, 'filter.duotone' ) ) {
 		return settings;
 	}
 
@@ -193,10 +197,13 @@ function addDuotoneAttributes( settings ) {
  */
 const withDuotoneControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
+		// Previous `color.__experimentalDuotone` support flag is migrated via
+		// block_type_metadata_settings filter in `lib/block-supports/duotone.php`.
 		const hasDuotoneSupport = hasBlockSupport(
 			props.name,
-			'color.__experimentalDuotone'
+			'filter.duotone'
 		);
+
 		const isContentLocked = useSelect(
 			( select ) => {
 				return select(
@@ -222,76 +229,71 @@ const withDuotoneControls = createHigherOrderComponent(
 	'withDuotoneControls'
 );
 
-/**
- * Function that scopes a selector with another one. This works a bit like
- * SCSS nesting except the `&` operator isn't supported.
- *
- * @example
- * ```js
- * const scope = '.a, .b .c';
- * const selector = '> .x, .y';
- * const merged = scopeSelector( scope, selector );
- * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
- * ```
- *
- * @param {string} scope    Selector to scope to.
- * @param {string} selector Original selector.
- *
- * @return {string} Scoped selector.
- */
-function scopeSelector( scope, selector ) {
-	const scopes = scope.split( ',' );
-	const selectors = selector.split( ',' );
-
-	const selectorsScoped = [];
-	scopes.forEach( ( outer ) => {
-		selectors.forEach( ( inner ) => {
-			selectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );
-		} );
-	} );
-
-	return selectorsScoped.join( ', ' );
-}
+function DuotoneStyles( {
+	id: filterId,
+	selector: duotoneSelector,
+	attribute: duotoneAttr,
+} ) {
+	const element = useContext( BlockList.__unstableElementContext );
 
-function BlockDuotoneStyles( { name, duotoneStyle, id } ) {
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
 		defaultSetting: 'color.defaultDuotone',
 	} );
 
-	const element = useContext( BlockList.__unstableElementContext );
-
-	// Portals cannot exist without a container.
-	// Guard against empty Duotone styles.
-	if ( ! element || ! duotoneStyle ) {
-		return null;
+	// Possible values for duotone attribute:
+	// 1. Array of colors - e.g. ['#000000', '#ffffff'].
+	// 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue' or 'var(--wp--preset--duotone--green-blue)''
+	// 3. A CSS string - e.g. 'unset' to remove globally applied duotone.
+	const isCustom = Array.isArray( duotoneAttr );
+	const duotonePreset = isCustom
+		? undefined
+		: getColorsFromDuotonePreset( duotoneAttr, duotonePalette );
+	const isPreset = typeof duotoneAttr === 'string' && duotonePreset;
+	const isCSS = typeof duotoneAttr === 'string' && ! isPreset;
+
+	// Match the structure of WP_Duotone_Gutenberg::render_duotone_support() in PHP.
+	let colors = null;
+	if ( isPreset ) {
+		// Array of colors.
+		colors = duotonePreset;
+	} else if ( isCSS ) {
+		// CSS filter property string (e.g. 'unset').
+		colors = duotoneAttr;
+	} else if ( isCustom ) {
+		// Array of colors.
+		colors = duotoneAttr;
 	}
 
-	let colors = duotoneStyle;
+	// Build the CSS selectors to which the filter will be applied.
+	const selectors = duotoneSelector.split( ',' );
 
-	if ( ! Array.isArray( colors ) && colors !== 'unset' ) {
-		colors = getColorsFromDuotonePreset( colors, duotonePalette );
-	}
+	const selectorsScoped = selectors.map( ( selectorPart ) => {
+		// Extra .editor-styles-wrapper specificity is needed in the editor
+		// since we're not using inline styles to apply the filter. We need to
+		// override duotone applied by global styles and theme.json.
 
-	const duotoneSupportSelectors =
-		getBlockType( name ).selectors?.filter?.duotone ||
-		getBlockSupport( name, 'color.__experimentalDuotone' );
+		// Assuming the selector part is a subclass selector (not a tag name)
+		// so we can prepend the filter id class. If we want to support elements
+		// such as `img` or namespaces, we'll need to add a case for that here.
+		return `.editor-styles-wrapper .${ filterId }${ selectorPart.trim() }`;
+	} );
 
-	// Extra .editor-styles-wrapper specificity is needed in the editor
-	// since we're not using inline styles to apply the filter. We need to
-	// override duotone applied by global styles and theme.json.
-	const selectorsGroup = scopeSelector(
-		`.editor-styles-wrapper .${ id }`,
-		duotoneSupportSelectors
-	);
+	const selector = selectorsScoped.join( ', ' );
 
-	return createPortal(
-		<InlineDuotone
-			selector={ selectorsGroup }
-			id={ id }
-			colors={ colors }
-		/>,
-		element
+	const isValidFilter = Array.isArray( colors ) || colors === 'unset';
+
+	return (
+		element &&
+		isValidFilter &&
+		createPortal(
+			<InlineDuotone
+				selector={ selector }
+				id={ filterId }
+				colors={ colors }
+			/>,
+			element
+		)
 	);
 }
 
@@ -304,16 +306,56 @@ function BlockDuotoneStyles( { name, duotoneStyle, id } ) {
  */
 const withDuotoneStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const duotoneSupport = getBlockSupport(
-			props.name,
-			'color.__experimentalDuotone'
-		);
-
-		const id = `wp-duotone-${ useInstanceId( BlockListBlock ) }`;
-		const className = duotoneSupport
-			? classnames( props?.className, id )
+		const id = useInstanceId( BlockListBlock );
+
+		const selector = useMemo( () => {
+			const blockType = getBlockType( props.name );
+
+			if ( blockType ) {
+				// Backwards compatibility for `supports.color.__experimentalDuotone`
+				// is provided via the `block_type_metadata_settings` filter. If
+				// `supports.filter.duotone` has not been set and the
+				// experimental property has been, the experimental property
+				// value is copied into `supports.filter.duotone`.
+				const duotoneSupport = getBlockSupport(
+					blockType,
+					'filter.duotone',
+					false
+				);
+				if ( ! duotoneSupport ) {
+					return null;
+				}
+
+				// If the experimental duotone support was set, that value is
+				// to be treated as a selector and requires scoping.
+				const experimentalDuotone = getBlockSupport(
+					blockType,
+					'color.__experimentalDuotone',
+					false
+				);
+				if ( experimentalDuotone ) {
+					const rootSelector = getBlockCSSSelector( blockType );
+					return typeof experimentalDuotone === 'string'
+						? scopeSelector( rootSelector, experimentalDuotone )
+						: rootSelector;
+				}
+
+				// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
+				return getBlockCSSSelector( blockType, 'filter.duotone', {
+					fallback: true,
+				} );
+			}
+		}, [ props.name ] );
+
+		const attribute = props?.attributes?.style?.color?.duotone;
+
+		const filterClass = `wp-duotone-${ id }`;
+
+		const shouldRender = selector && attribute;
+
+		const className = shouldRender
+			? classnames( props?.className, filterClass )
 			: props?.className;
-		const duotoneStyle = props?.attributes?.style?.color?.duotone;
 
 		// CAUTION: code added before this line will be executed
 		// for all blocks, not just those that support duotone. Code added
@@ -321,11 +363,11 @@ const withDuotoneStyles = createHigherOrderComponent(
 		// performance.
 		return (
 			<>
-				{ duotoneSupport && duotoneStyle && (
-					<BlockDuotoneStyles
-						name={ props?.name }
-						duotoneStyle={ duotoneStyle }
-						id={ id }
+				{ shouldRender && (
+					<DuotoneStyles
+						id={ filterClass }
+						selector={ selector }
+						attribute={ attribute }
 					/>
 				) }
 				<BlockListBlock { ...props } className={ className } />

package/src/hooks/margin.js

@@ -1,43 +1,48 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useRef, useState, useEffect } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
  */
 import BlockPopover from '../components/block-popover';
-import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
+import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+
+function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}
 
 export function MarginVisualizer( { clientId, attributes, forceShow } ) {
+	const blockElement = useBlockElement( clientId );
+	const [ style, setStyle ] = useState();
+
 	const margin = attributes?.style?.spacing?.margin;
 
-	const style = useMemo( () => {
-		const marginTop = margin?.top
-			? getSpacingPresetCssVar( margin?.top )
-			: 0;
-		const marginRight = margin?.right
-			? getSpacingPresetCssVar( margin?.right )
-			: 0;
-		const marginBottom = margin?.bottom
-			? getSpacingPresetCssVar( margin?.bottom )
-			: 0;
-		const marginLeft = margin?.left
-			? getSpacingPresetCssVar( margin?.left )
-			: 0;
+	useEffect( () => {
+		if ( ! blockElement ) {
+			return;
+		}
 
-		return {
-			borderTopWidth: marginTop,
-			borderRightWidth: marginRight,
-			borderBottomWidth: marginBottom,
-			borderLeftWidth: marginLeft,
-			top: marginTop ? `calc(${ marginTop } * -1)` : 0,
-			right: marginRight ? `calc(${ marginRight } * -1)` : 0,
-			bottom: marginBottom ? `calc(${ marginBottom } * -1)` : 0,
-			left: marginLeft ? `calc(${ marginLeft } * -1)` : 0,
-		};
-	}, [ margin ] );
+		const top = getComputedCSS( blockElement, 'margin-top' );
+		const right = getComputedCSS( blockElement, 'margin-right' );
+		const bottom = getComputedCSS( blockElement, 'margin-bottom' );
+		const left = getComputedCSS( blockElement, 'margin-left' );
+
+		setStyle( {
+			borderTopWidth: top,
+			borderRightWidth: right,
+			borderBottomWidth: bottom,
+			borderLeftWidth: left,
+			top: top ? `-${ top }` : 0,
+			right: right ? `-${ right }` : 0,
+			bottom: bottom ? `-${ bottom }` : 0,
+			left: left ? `-${ left }` : 0,
+		} );
+	}, [ blockElement, margin ] );
 
 	const [ isActive, setIsActive ] = useState( false );
 	const valueRef = useRef( margin );

package/src/hooks/padding.js

@@ -1,33 +1,39 @@
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useEffect, useMemo } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
  */
 import BlockPopover from '../components/block-popover';
-import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
+import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+
+function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}
 
 export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
+	const blockElement = useBlockElement( clientId );
+	const [ style, setStyle ] = useState();
+
 	const padding = attributes?.style?.spacing?.padding;
-	const style = useMemo( () => {
-		return {
-			borderTopWidth: padding?.top
-				? getSpacingPresetCssVar( padding?.top )
-				: 0,
-			borderRightWidth: padding?.right
-				? getSpacingPresetCssVar( padding?.right )
-				: 0,
-			borderBottomWidth: padding?.bottom
-				? getSpacingPresetCssVar( padding?.bottom )
-				: 0,
-			borderLeftWidth: padding?.left
-				? getSpacingPresetCssVar( padding?.left )
-				: 0,
-		};
-	}, [ padding ] );
+
+	useEffect( () => {
+		if ( ! blockElement ) {
+			return;
+		}
+
+		setStyle( {
+			borderTopWidth: getComputedCSS( blockElement, 'padding-top' ),
+			borderRightWidth: getComputedCSS( blockElement, 'padding-right' ),
+			borderBottomWidth: getComputedCSS( blockElement, 'padding-bottom' ),
+			borderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),
+		} );
+	}, [ blockElement, padding ] );
 
 	const [ isActive, setIsActive ] = useState( false );
 	const valueRef = useRef( padding );

package/src/hooks/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, mapValues, get } from 'lodash';
+import { isEmpty, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -31,9 +31,9 @@ export const cleanEmptyObject = ( object ) => {
 		return object;
 	}
 	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
-			( [ , value ] ) => Boolean( value )
-		)
+		Object.entries( object )
+			.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
+			.filter( ( [ , value ] ) => Boolean( value ) )
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };

package/src/layouts/utils.js

@@ -83,10 +83,10 @@ export function getBlockGapCSS(
  * @return {Object} An object with contextual info per alignment.
  */
 export function getAlignmentsInfo( layout ) {
-	const { contentSize, wideSize } = layout;
+	const { contentSize, wideSize, type = 'default' } = layout;
 	const alignmentInfo = {};
 	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
-	if ( sizeRegex.test( contentSize ) ) {
+	if ( sizeRegex.test( contentSize ) && type === 'constrained' ) {
 		// translators: %s: container size (i.e. 600px etc)
 		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
 	}

package/src/private-apis.js

@@ -6,6 +6,7 @@ import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import OffCanvasEditor from './components/off-canvas-editor';
 import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
+import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
 
@@ -20,4 +21,5 @@ lock( privateApis, {
 	OffCanvasEditor,
 	PrivateInserter,
 	PrivateListView,
+	ResizableBoxPopover,
 } );

package/src/store/actions.js

@@ -75,7 +75,7 @@ export const resetBlocks =
 /**
  * Block validity is a function of blocks state (at the point of a
  * reset) and the template setting. As a compromise to its placement
- * across distinct parts of state, it is implemented here as a side-
+ * across distinct parts of state, it is implemented here as a side
  * effect of the block reset action.
  *
  * @param {Array} blocks Array of blocks.

package/src/style.scss

@@ -26,6 +26,7 @@
 @import "./components/date-format-picker/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
+@import "./components/global-styles/style.scss";
 @import "./components/height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";

package/src/utils/object.js

@@ -27,7 +27,7 @@ function normalizePath( path ) {
  * @return {*} Cloned object, or original literal non-object value.
  */
 function cloneObject( object ) {
-	if ( typeof object === 'object' ) {
+	if ( object && typeof object === 'object' ) {
 		return {
 			...Object.fromEntries(
 				Object.entries( object ).map( ( [ key, value ] ) => [

package/src/utils/test/object.js

@@ -84,6 +84,44 @@ describe( 'immutableSet', () => {
 				} );
 			} );
 		} );
+
+		describe( 'for nested falsey values', () => {
+			it( 'overwrites undefined values', () => {
+				const result = immutableSet( { test: undefined }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites null values', () => {
+				const result = immutableSet( { test: null }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites false values', () => {
+				const result = immutableSet( { test: false }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites `0` values', () => {
+				const result = immutableSet( { test: 0 }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites empty string values', () => {
+				const result = immutableSet( { test: '' }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites NaN values', () => {
+				const result = immutableSet( { test: NaN }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+		} );
 	} );
 
 	describe( 'does not mutate the original object', () => {

package/build/components/rich-text/use-native-props.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useNativeProps = useNativeProps;
-
-function useNativeProps() {
-  return {};
-}
-//# sourceMappingURL=use-native-props.js.map

package/build/components/rich-text/use-native-props.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/rich-text/use-native-props.js"],"names":["useNativeProps"],"mappings":";;;;;;;AAAO,SAASA,cAAT,GAA0B;AAChC,SAAO,EAAP;AACA","sourcesContent":["export function useNativeProps() {\n\treturn {};\n}\n"]}

package/build/components/rich-text/use-native-props.native.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useNativeProps = useNativeProps;
-
-var _element = require("@wordpress/element");
-
-var _blockList = require("../block-list");
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function useNativeProps() {
-  return {
-    onCaretVerticalPositionChange: (0, _element.useContext)(_blockList.OnCaretVerticalPositionChange)
-  };
-}
-//# sourceMappingURL=use-native-props.native.js.map

package/build/components/rich-text/use-native-props.native.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/rich-text/use-native-props.native.js"],"names":["useNativeProps","onCaretVerticalPositionChange","OnCaretVerticalPositionChange"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGO,SAASA,cAAT,GAA0B;AAChC,SAAO;AACNC,IAAAA,6BAA6B,EAAE,yBAC9BC,wCAD8B;AADzB,GAAP;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { OnCaretVerticalPositionChange } from '../block-list';\n\nexport function useNativeProps() {\n\treturn {\n\t\tonCaretVerticalPositionChange: useContext(\n\t\t\tOnCaretVerticalPositionChange\n\t\t),\n\t};\n}\n"]}

package/build-module/components/rich-text/use-native-props.js

@@ -1,4 +0,0 @@
-export function useNativeProps() {
-  return {};
-}
-//# sourceMappingURL=use-native-props.js.map

package/build-module/components/rich-text/use-native-props.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/rich-text/use-native-props.js"],"names":["useNativeProps"],"mappings":"AAAA,OAAO,SAASA,cAAT,GAA0B;AAChC,SAAO,EAAP;AACA","sourcesContent":["export function useNativeProps() {\n\treturn {};\n}\n"]}

package/build-module/components/rich-text/use-native-props.native.js

@@ -1,15 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-
-import { OnCaretVerticalPositionChange } from '../block-list';
-export function useNativeProps() {
-  return {
-    onCaretVerticalPositionChange: useContext(OnCaretVerticalPositionChange)
-  };
-}
-//# sourceMappingURL=use-native-props.native.js.map

package/build-module/components/rich-text/use-native-props.native.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/rich-text/use-native-props.native.js"],"names":["useContext","OnCaretVerticalPositionChange","useNativeProps","onCaretVerticalPositionChange"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,SAASC,6BAAT,QAA8C,eAA9C;AAEA,OAAO,SAASC,cAAT,GAA0B;AAChC,SAAO;AACNC,IAAAA,6BAA6B,EAAEH,UAAU,CACxCC,6BADwC;AADnC,GAAP;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { OnCaretVerticalPositionChange } from '../block-list';\n\nexport function useNativeProps() {\n\treturn {\n\t\tonCaretVerticalPositionChange: useContext(\n\t\t\tOnCaretVerticalPositionChange\n\t\t),\n\t};\n}\n"]}

package/src/components/rich-text/use-native-props.js

@@ -1,3 +0,0 @@
-export function useNativeProps() {
-	return {};
-}

package/src/components/rich-text/use-native-props.native.js

@@ -1,17 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { OnCaretVerticalPositionChange } from '../block-list';
-
-export function useNativeProps() {
-	return {
-		onCaretVerticalPositionChange: useContext(
-			OnCaretVerticalPositionChange
-		),
-	};
-}