@wordpress/edit-site 4.3.2 → 4.3.3

package/src/components/global-styles/use-global-styles-output.js

@@ -24,6 +24,7 @@ import {
 } from '@wordpress/blocks';
 import { useEffect, useState, useContext } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
+import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -59,16 +60,27 @@ function compileStyleValue( uncompiledValue ) {
 function getPresetsDeclarations( blockPresets = {} ) {
 	return reduce(
 		PRESET_METADATA,
-		( declarations, { path, valueKey, cssVarInfix } ) => {
+		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
 			const presetByOrigin = get( blockPresets, path, [] );
 			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( value ) => {
-						declarations.push(
-							`--wp--preset--${ cssVarInfix }--${ kebabCase(
-								value.slug
-							) }: ${ value[ valueKey ] }`
-						);
+						if ( valueKey ) {
+							declarations.push(
+								`--wp--preset--${ cssVarInfix }--${ kebabCase(
+									value.slug
+								) }: ${ value[ valueKey ] }`
+							);
+						} else if (
+							valueFunc &&
+							typeof valueFunc === 'function'
+						) {
+							declarations.push(
+								`--wp--preset--${ cssVarInfix }--${ kebabCase(
+									value.slug
+								) }: ${ valueFunc( value ) }`
+							);
+						}
 					} );
 				}
 			} );
@@ -123,6 +135,25 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) {
 	);
 }
 
+function getPresetsSvgFilters( blockPresets = {} ) {
+	return PRESET_METADATA.filter(
+		// Duotone are the only type of filters for now.
+		( metadata ) => metadata.path.at( -1 ) === 'duotone'
+	).flatMap( ( metadata ) => {
+		const presetByOrigin = get( blockPresets, metadata.path, {} );
+		return [ 'default', 'theme' ]
+			.filter( ( origin ) => presetByOrigin[ origin ] )
+			.flatMap( ( origin ) =>
+				presetByOrigin[ origin ].map( ( preset ) => (
+					<PresetDuotoneFilter
+						preset={ preset }
+						key={ preset.slug }
+					/>
+				) )
+			);
+	} );
+}
+
 function flattenTree( input = {}, prefix, token ) {
 	let result = [];
 	Object.keys( input ).forEach( ( key ) => {
@@ -215,7 +246,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 
 	const pickStyleKeys = ( treeToPickFrom ) =>
 		pickBy( treeToPickFrom, ( value, key ) =>
-			[ 'border', 'color', 'spacing', 'typography' ].includes( key )
+			[ 'border', 'color', 'spacing', 'typography', 'filter' ].includes(
+				key
+			)
 		);
 
 	// Top-level.
@@ -242,6 +275,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			nodes.push( {
 				styles: blockStyles,
 				selector: blockSelectors[ blockName ].selector,
+				duotoneSelector: blockSelectors[ blockName ].duotoneSelector,
 			} );
 		}
 
@@ -333,9 +367,34 @@ export const toStyles = ( tree, blockSelectors ) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 
-	let ruleset =
-		'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }';
-	nodesWithStyles.forEach( ( { selector, styles } ) => {
+	/*
+	 * Reset default browser margin on the root body element.
+	 * This is set on the root selector **before** generating the ruleset
+	 * from the `theme.json`. This is to ensure that if the `theme.json` declares
+	 * `margin` in its `spacing` declaration for the `body` element then these
+	 * user-generated values take precedence in the CSS cascade.
+	 * @link https://github.com/WordPress/gutenberg/issues/36147.
+	 */
+	let ruleset = 'body {margin: 0;}';
+	nodesWithStyles.forEach( ( { selector, duotoneSelector, styles } ) => {
+		const duotoneStyles = {};
+		if ( styles?.filter ) {
+			duotoneStyles.filter = styles.filter;
+			delete styles.filter;
+		}
+
+		// Process duotone styles (they use color.__experimentalDuotone selector).
+		if ( duotoneSelector ) {
+			const duotoneDeclarations = getStylesDeclarations( duotoneStyles );
+			if ( duotoneDeclarations.length === 0 ) {
+				return;
+			}
+			ruleset =
+				ruleset +
+				`${ duotoneSelector }{${ duotoneDeclarations.join( ';' ) };}`;
+		}
+
+		// Process the remaning block styles (they use either normal block class or __experimentalSelector).
 		const declarations = getStylesDeclarations( styles );
 		if ( declarations.length === 0 ) {
 			return;
@@ -358,6 +417,13 @@ export const toStyles = ( tree, blockSelectors ) => {
 	return ruleset;
 };
 
+export function toSvgFilters( tree, blockSelectors ) {
+	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
+	return nodesWithSettings.flatMap( ( { presets } ) => {
+		return getPresetsSvgFilters( presets );
+	} );
+}
+
 const getBlockSelectors = ( blockTypes ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
@@ -365,9 +431,12 @@ const getBlockSelectors = ( blockTypes ) => {
 		const selector =
 			blockType?.supports?.__experimentalSelector ??
 			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
+		const duotoneSelector =
+			blockType?.supports?.color?.__experimentalDuotone ?? null;
 		result[ name ] = {
 			name,
 			selector,
+			duotoneSelector,
 		};
 	} );
 
@@ -377,6 +446,7 @@ const getBlockSelectors = ( blockTypes ) => {
 export function useGlobalStylesOutput() {
 	const [ stylesheets, setStylesheets ] = useState( [] );
 	const [ settings, setSettings ] = useState( {} );
+	const [ svgFilters, setSvgFilters ] = useState( {} );
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
 
 	useEffect( () => {
@@ -390,6 +460,7 @@ export function useGlobalStylesOutput() {
 			blockSelectors
 		);
 		const globalStyles = toStyles( mergedConfig, blockSelectors );
+		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		setStylesheets( [
 			{
 				css: customProperties,
@@ -401,7 +472,8 @@ export function useGlobalStylesOutput() {
 			},
 		] );
 		setSettings( mergedConfig.settings );
+		setSvgFilters( filters );
 	}, [ mergedConfig ] );
 
-	return [ stylesheets, settings ];
+	return [ stylesheets, settings, svgFilters ];
 }

package/src/components/global-styles/utils.js

@@ -49,6 +49,12 @@ export const PRESET_METADATA = [
 			},
 		],
 	},
+	{
+		path: [ 'color', 'duotone' ],
+		cssVarInfix: 'duotone',
+		valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
+		classes: [],
+	},
 	{
 		path: [ 'typography', 'fontSizes' ],
 		valueKey: 'size',