@wordpress/edit-site 4.3.0 → 4.4.0

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

@@ -24,16 +24,14 @@ import {
 } from '@wordpress/blocks';
 import { useEffect, useState, useContext } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
-
-/**
- * Internal dependencies
- */
+import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils';
 import { GlobalStylesContext } from './context';
+import { useSetting } from './hooks';
 
 function compileStyleValue( uncompiledValue ) {
 	const VARIABLE_REFERENCE_PREFIX = 'var:';
@@ -59,16 +57,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 +132,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 +243,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 +272,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			nodes.push( {
 				styles: blockStyles,
 				selector: blockSelectors[ blockName ].selector,
+				duotoneSelector: blockSelectors[ blockName ].duotoneSelector,
 			} );
 		}
 
@@ -329,13 +360,38 @@ export const toCustomProperties = ( tree, blockSelectors ) => {
 	return ruleset;
 };
 
-export const toStyles = ( tree, blockSelectors ) => {
+export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 	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;
@@ -343,6 +399,26 @@ export const toStyles = ( tree, blockSelectors ) => {
 		ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
 	} );
 
+	/* Add alignment / layout styles */
+	ruleset =
+		ruleset +
+		'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
+	ruleset =
+		ruleset +
+		'.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
+	ruleset =
+		ruleset +
+		'.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+
+	if ( hasBlockGapSupport ) {
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
+	}
+
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
 		if ( ROOT_BLOCK_SELECTOR === selector ) {
 			// Do not add extra specificity for top-level classes.
@@ -358,6 +434,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 +448,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,7 +463,10 @@ const getBlockSelectors = ( blockTypes ) => {
 export function useGlobalStylesOutput() {
 	const [ stylesheets, setStylesheets ] = useState( [] );
 	const [ settings, setSettings ] = useState( {} );
+	const [ svgFilters, setSvgFilters ] = useState( {} );
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	const [ blockGap ] = useSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGap !== null;
 
 	useEffect( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
@@ -389,7 +478,12 @@ export function useGlobalStylesOutput() {
 			mergedConfig,
 			blockSelectors
 		);
-		const globalStyles = toStyles( mergedConfig, blockSelectors );
+		const globalStyles = toStyles(
+			mergedConfig,
+			blockSelectors,
+			hasBlockGapSupport
+		);
+		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		setStylesheets( [
 			{
 				css: customProperties,
@@ -401,7 +495,8 @@ export function useGlobalStylesOutput() {
 			},
 		] );
 		setSettings( mergedConfig.settings );
+		setSvgFilters( filters );
 	}, [ mergedConfig ] );
 
-	return [ stylesheets, settings ];
+	return [ stylesheets, settings, svgFilters, hasBlockGapSupport ];
 }

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',

package/src/components/sidebar/navigation-menu-sidebar/index.js

@@ -16,7 +16,7 @@ export default function NavigationMenuSidebar() {
 		<DefaultSidebar
 			className="edit-site-navigation-menu-sidebar"
 			identifier="edit-site/navigation-menu"
-			title={ __( 'Navigation Menus' ) }
+			title={ __( 'Navigation' ) }
 			icon={ navigation }
 			closeLabel={ __( 'Close navigation menu sidebar' ) }
 			panelClassName="edit-site-navigation-menu-sidebar__panel"
@@ -24,6 +24,9 @@ export default function NavigationMenuSidebar() {
 				<Flex>
 					<FlexBlock>
 						<strong>{ __( 'Navigation Menus' ) }</strong>
+						<span className="edit-site-navigation-sidebar__beta">
+							{ __( 'Beta' ) }
+						</span>
 					</FlexBlock>
 				</Flex>
 			}

package/src/components/sidebar/style.scss

@@ -74,6 +74,7 @@
 	padding: $grid-unit-20;
 }
 
+.edit-site-navigation-sidebar__beta,
 .edit-site-global-styles-sidebar__beta {
 	display: inline-flex;
 	margin-left: $grid-unit-10;
@@ -86,3 +87,52 @@
 	font-size: $helptext-font-size;
 	line-height: 1;
 }
+
+
+.edit-site-global-styles-sidebar__border-box-control__popover,
+.edit-site-global-styles-sidebar__border-box-control__popover-top,
+.edit-site-global-styles-sidebar__border-box-control__popover-right,
+.edit-site-global-styles-sidebar__border-box-control__popover-bottom,
+.edit-site-global-styles-sidebar__border-box-control__popover-left {
+	.components-popover__content {
+		width: 282px;
+	}
+}
+
+$split-border-control-offset: 55px;
+
+@include break-medium() {
+	.edit-site-global-styles-sidebar__border-box-control__popover,
+	.edit-site-global-styles-sidebar__border-box-control__popover-left {
+		.components-popover__content {
+			margin-right: #{ $grid-unit-50 + $grid-unit-15 } !important;
+		}
+	}
+
+	.edit-site-global-styles-sidebar__border-box-control__popover-top,
+	.edit-site-global-styles-sidebar__border-box-control__popover-bottom {
+		.components-popover__content {
+			margin-right: #{ $grid-unit-50 + $grid-unit-15 + $split-border-control-offset } !important;
+		}
+	}
+
+	.edit-site-global-styles-sidebar__border-box-control__popover-right {
+		.components-popover__content {
+			margin-right: #{ $grid-unit-50 + $grid-unit-15 + ( $split-border-control-offset * 2 )} !important;
+		}
+	}
+
+	.edit-site-global-styles-sidebar__border-box-control__popover,
+	.edit-site-global-styles-sidebar__border-box-control__popover-top,
+	.edit-site-global-styles-sidebar__border-box-control__popover-right,
+	.edit-site-global-styles-sidebar__border-box-control__popover-bottom,
+	.edit-site-global-styles-sidebar__border-box-control__popover-left {
+		&.is-from-top .components-popover__content {
+			margin-top: #{ -($grid-unit-50 + $grid-unit-15) } !important;
+		}
+
+		&.is-from-bottom .components-popover__content {
+			margin-bottom: #{ -($grid-unit-50 + $grid-unit-15) } !important;
+		}
+	}
+}