@wordpress/block-editor 11.6.0 → 11.8.0

package/src/hooks/duotone.js

@@ -8,7 +8,11 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
-import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import {
+	getBlockSupport,
+	getBlockType,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useContext, createPortal } from '@wordpress/element';
@@ -28,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 = [];
@@ -162,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;
 	}
 
@@ -189,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(
@@ -218,77 +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 = 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( ', ' );
+
+	const isValidFilter = Array.isArray( colors ) || colors === 'unset';
 
-	return createPortal(
-		<InlineDuotone
-			selector={ selectorsGroup }
-			id={ id }
-			colors={ colors }
-		/>,
-		element
+	return (
+		element &&
+		isValidFilter &&
+		createPortal(
+			<InlineDuotone
+				selector={ selector }
+				id={ filterId }
+				colors={ colors }
+			/>,
+			element
+		)
 	);
 }
 
@@ -301,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
@@ -318,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/position.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import {
 	BaseControl,
@@ -49,7 +49,7 @@ const DEFAULT_OPTION = {
 const STICKY_OPTION = {
 	key: 'sticky',
 	value: 'sticky',
-	name: __( 'Sticky' ),
+	name: _x( 'Sticky', 'Name for the value of the CSS position property' ),
 	className: OPTION_CLASSNAME,
 	__experimentalHint: __(
 		'The block will stick to the top of the window instead of scrolling.'
@@ -59,7 +59,7 @@ const STICKY_OPTION = {
 const FIXED_OPTION = {
 	key: 'fixed',
 	value: 'fixed',
-	name: __( 'Fixed' ),
+	name: _x( 'Fixed', 'Name for the value of the CSS position property' ),
 	className: OPTION_CLASSNAME,
 	__experimentalHint: __(
 		'The block will not move when the page is scrolled.'

package/src/hooks/style.js

@@ -384,39 +384,40 @@ const withElementsStyles = createHigherOrderComponent(
 		);
 
 		const styles = useMemo( () => {
-			const rawElementsStyles = props.attributes.style?.elements;
+			// The .editor-styles-wrapper selector is required on elements styles. As it is
+			// added to all other editor styles, not providing it causes reset and global
+			// styles to override element styles because of higher specificity.
+			const elements = [
+				{
+					styles: ! skipLinkColorSerialization
+						? props.attributes.style?.elements?.link
+						: undefined,
+					selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS.link }`,
+				},
+				{
+					styles: ! skipLinkColorSerialization
+						? props.attributes.style?.elements?.link?.[ ':hover' ]
+						: undefined,
+					selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS.link }:hover`,
+				},
+			];
 			const elementCssRules = [];
-			if (
-				rawElementsStyles &&
-				Object.keys( rawElementsStyles ).length > 0
-			) {
-				// Remove values based on whether serialization has been skipped for a specific style.
-				const filteredElementsStyles = {
-					...rawElementsStyles,
-					link: {
-						...rawElementsStyles.link,
-						color: ! skipLinkColorSerialization
-							? rawElementsStyles.link?.color
-							: undefined,
-					},
-				};
-
-				for ( const [ elementName, elementStyles ] of Object.entries(
-					filteredElementsStyles
-				) ) {
+			for ( const { styles: elementStyles, selector } of elements ) {
+				if ( elementStyles ) {
 					const cssRule = compileCSS( elementStyles, {
-						// The .editor-styles-wrapper selector is required on elements styles. As it is
-						// added to all other editor styles, not providing it causes reset and global
-						// styles to override element styles because of higher specificity.
-						selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS[ elementName ] }`,
+						selector,
 					} );
-					if ( !! cssRule ) {
-						elementCssRules.push( cssRule );
-					}
+					elementCssRules.push( cssRule );
 				}
 			}
-			return elementCssRules.length > 0 ? elementCssRules : undefined;
-		}, [ props.attributes.style?.elements ] );
+			return elementCssRules.length > 0
+				? elementCssRules.join( '' )
+				: undefined;
+		}, [
+			props.attributes.style?.elements,
+			blockElementsContainerIdentifier,
+			skipLinkColorSerialization,
+		] );
 
 		const element = useContext( BlockList.__unstableElementContext );
 

package/src/hooks/test/utils.js

@@ -7,113 +7,9 @@ import { applyFilters } from '@wordpress/hooks';
  * Internal dependencies
  */
 import '../anchor';
-import { immutableSet } from '../utils';
 
 const noop = () => {};
 
-describe( 'immutableSet', () => {
-	describe( 'handling falsy values properly', () => {
-		it( 'should create a new object if `undefined` is passed', () => {
-			const result = immutableSet( undefined, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if `null` is passed', () => {
-			const result = immutableSet( null, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if `false` is passed', () => {
-			const result = immutableSet( false, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if `0` is passed', () => {
-			const result = immutableSet( 0, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if an empty string is passed', () => {
-			const result = immutableSet( '', 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if a NaN is passed', () => {
-			const result = immutableSet( NaN, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-	} );
-
-	describe( 'manages data assignment properly', () => {
-		it( 'assigns value properly when it does not exist', () => {
-			const result = immutableSet( {}, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'overrides existing values', () => {
-			const result = immutableSet( { test: 1 }, 'test', 2 );
-
-			expect( result ).toEqual( { test: 2 } );
-		} );
-
-		describe( 'with array notation access', () => {
-			it( 'assigns values at deeper levels', () => {
-				const result = immutableSet( {}, [ 'foo', 'bar', 'baz' ], 5 );
-
-				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
-			} );
-
-			it( 'overrides existing values at deeper levels', () => {
-				const result = immutableSet(
-					{ foo: { bar: { baz: 1 } } },
-					[ 'foo', 'bar', 'baz' ],
-					5
-				);
-
-				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
-			} );
-
-			it( 'keeps other properties intact', () => {
-				const result = immutableSet(
-					{ foo: { bar: { baz: 1 } } },
-					[ 'foo', 'bar', 'test' ],
-					5
-				);
-
-				expect( result ).toEqual( {
-					foo: { bar: { baz: 1, test: 5 } },
-				} );
-			} );
-		} );
-	} );
-
-	describe( 'does not mutate the original object', () => {
-		it( 'clones the object at the first level', () => {
-			const input = {};
-			const result = immutableSet( input, 'test', 1 );
-
-			expect( result ).not.toBe( input );
-		} );
-
-		it( 'clones the object at deeper levels', () => {
-			const input = { foo: { bar: { baz: 1 } } };
-			const result = immutableSet( input, [ 'foo', 'bar', 'baz' ], 2 );
-
-			expect( result ).not.toBe( input );
-			expect( result.foo ).not.toBe( input.foo );
-			expect( result.foo.bar ).not.toBe( input.foo.bar );
-			expect( result.foo.bar.baz ).not.toBe( input.foo.bar.baz );
-		} );
-	} );
-} );
-
 describe( 'anchor', () => {
 	const blockSettings = {
 		save: noop,

package/src/hooks/typography.js

@@ -138,7 +138,6 @@ export function TypographyPanel( {
 		<StylesTypographyPanel
 			as={ TypographyInspectorControl }
 			panelId={ clientId }
-			name={ name }
 			settings={ settings }
 			value={ value }
 			onChange={ onChange }