From 6b1211b9e990b30d9adfc002b14fb6cd53c399f0 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 21 Mar 2023 10:28:53 +0100 Subject: [PATCH 1/8] show the filters global section --- packages/block-editor/src/components/global-styles/utils.js | 1 + packages/blocks/src/store/private-selectors.js | 1 + packages/blocks/src/store/test/private-selectors.js | 3 +++ 3 files changed, 5 insertions(+) diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index 2ff2e732298044..3f34e1783930bb 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/packages/block-editor/src/components/global-styles/utils.js @@ -15,6 +15,7 @@ export const ROOT_BLOCK_SUPPORTS = [ 'background', 'backgroundColor', 'color', + 'filter', 'linkColor', 'captionColor', 'buttonColor', diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js index a50c82241dd12d..590422ccff99cc 100644 --- a/packages/blocks/src/store/private-selectors.js +++ b/packages/blocks/src/store/private-selectors.js @@ -14,6 +14,7 @@ const ROOT_BLOCK_SUPPORTS = [ 'background', 'backgroundColor', 'color', + 'filter', 'linkColor', 'captionColor', 'buttonColor', diff --git a/packages/blocks/src/store/test/private-selectors.js b/packages/blocks/src/store/test/private-selectors.js index 8eca5c2e859ea1..7e31e7c3e87621 100644 --- a/packages/blocks/src/store/test/private-selectors.js +++ b/packages/blocks/src/store/test/private-selectors.js @@ -29,6 +29,7 @@ describe( 'private selectors', () => { 'background', 'backgroundColor', 'color', + 'filter', 'linkColor', 'captionColor', 'buttonColor', @@ -51,6 +52,7 @@ describe( 'private selectors', () => { 'background', 'backgroundColor', 'color', + 'filter', 'linkColor', 'captionColor', 'buttonColor', @@ -78,6 +80,7 @@ describe( 'private selectors', () => { 'background', 'backgroundColor', 'color', + 'filter', 'linkColor', 'captionColor', 'buttonColor', From 85ba817c0e900c6410a4c5bb5227e5b494cddbde Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 22 Mar 2023 13:04:12 +0100 Subject: [PATCH 2/8] create exception for filters that are an array of two colors --- .../global-styles/use-global-styles-output.js | 48 +++++++++++++++---- .../components/global-styles/duotone-panel.js | 9 +++- 2 files changed, 47 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index cce2b61f0786e7..9036f0c2b56434 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -15,6 +15,7 @@ import { import { useSelect } from '@wordpress/data'; import { useContext, useMemo } from '@wordpress/element'; import { getCSSRules } from '@wordpress/style-engine'; +import { cleanForSlug } from '@wordpress/url'; /** * Internal dependencies @@ -23,7 +24,7 @@ import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils'; import { getTypographyFontSizeValue } from './typography-utils'; import { GlobalStylesContext } from './context'; import { useGlobalSetting } from './hooks'; -import { PresetDuotoneFilter } from '../duotone/components'; +import { PresetDuotoneFilter, DuotoneFilter } from '../duotone/components'; import { getGapCSSValue } from '../../hooks/gap'; import { store as blockEditorStore } from '../../store'; @@ -36,6 +37,8 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = { typography: 'typography', }; +const customFilters = []; + function compileStyleValue( uncompiledValue ) { const VARIABLE_REFERENCE_PREFIX = 'var:'; const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|'; @@ -260,11 +263,24 @@ export function getStylesDeclarations( const cssProperty = key.startsWith( '--' ) ? key : kebabCase( key ); - declarations.push( - `${ cssProperty }: ${ compileStyleValue( - get( blockStyles, pathToValue ) - ) }` - ); + + //The duotone filter is not one of the presets so we need to build the svg and the filter ID + if ( Array.isArray( blockStyles.filter?.duotone ) ) { + let slug = blockStyles.filter.duotone.map( ( x ) => + cleanForSlug( x ).replaceAll( '-', '' ) + ); + slug = slug.join( '-' ); + declarations.push( + `${ cssProperty }: url('#wp-duotone-${ slug } !important')` + ); + customFilters.push( [ blockStyles.filter.duotone, slug ] ); + } else { + declarations.push( + `${ cssProperty }: ${ compileStyleValue( + get( blockStyles, pathToValue ) + ) }` + ); + } } return declarations; @@ -900,6 +916,16 @@ export const toStyles = ( return ruleset; }; +export function customSvgFilters( filters ) { + return filters.flatMap( ( filter ) => ( + + ) ); +} + export function toSvgFilters( tree, blockSelectors ) { const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); return nodesWithSettings.flatMap( ( { presets } ) => { @@ -1050,7 +1076,9 @@ export function useGlobalStylesOutput() { disableLayoutStyles ); - const filters = toSvgFilters( mergedConfig, blockSelectors ); + const presetSvgs = toSvgFilters( mergedConfig, blockSelectors ); + const customSvgs = customSvgFilters( customFilters ); + const stylesheets = [ { css: customProperties, @@ -1083,7 +1111,11 @@ export function useGlobalStylesOutput() { } } ); - return [ stylesheets, mergedConfig.settings, filters ]; + return [ + stylesheets, + mergedConfig.settings, + [ ...presetSvgs, ...customSvgs ], + ]; }, [ hasBlockGapSupport, hasFallbackGapSupport, diff --git a/packages/edit-site/src/components/global-styles/duotone-panel.js b/packages/edit-site/src/components/global-styles/duotone-panel.js index c8cf095df4fe24..e1ce0c99fdfdcc 100644 --- a/packages/edit-site/src/components/global-styles/duotone-panel.js +++ b/packages/edit-site/src/components/global-styles/duotone-panel.js @@ -53,6 +53,11 @@ function DuotonePanel( { name } ) { defaultSetting: 'color.defaultPalette', } ); + const disableCustomColors = ! useSetting( 'color.custom' ); + const disableCustomDuotone = + ! useSetting( 'color.customDuotone' ) || + ( colorPalette?.length === 0 && disableCustomColors ); + if ( duotonePalette?.length === 0 ) { return null; } @@ -68,8 +73,8 @@ function DuotonePanel( { name } ) { From 8edfbcff79428a657528b4627d191204cfacad55 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 22 Mar 2023 15:21:56 +0100 Subject: [PATCH 3/8] removed important --- .../src/components/global-styles/use-global-styles-output.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 9036f0c2b56434..f5a287fee0f751 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -271,7 +271,7 @@ export function getStylesDeclarations( ); slug = slug.join( '-' ); declarations.push( - `${ cssProperty }: url('#wp-duotone-${ slug } !important')` + `${ cssProperty }: url('#wp-duotone-${ slug }')` ); customFilters.push( [ blockStyles.filter.duotone, slug ] ); } else { From 28e8329bc3b26806c1603ca3ce2d96e154e435a7 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 22 Mar 2023 16:21:35 +0100 Subject: [PATCH 4/8] refactor how we output the svg filters --- .../global-styles/use-global-styles-output.js | 44 ++++++++++++++----- 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index f5a287fee0f751..0fe5684d6bc515 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -37,8 +37,6 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = { typography: 'typography', }; -const customFilters = []; - function compileStyleValue( uncompiledValue ) { const VARIABLE_REFERENCE_PREFIX = 'var:'; const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|'; @@ -273,7 +271,6 @@ export function getStylesDeclarations( declarations.push( `${ cssProperty }: url('#wp-duotone-${ slug }')` ); - customFilters.push( [ blockStyles.filter.duotone, slug ] ); } else { declarations.push( `${ cssProperty }: ${ compileStyleValue( @@ -916,14 +913,37 @@ export const toStyles = ( return ruleset; }; -export function customSvgFilters( filters ) { - return filters.flatMap( ( filter ) => ( - - ) ); +export function customSvgFilters( tree, blockSelectors ) { + const nodesWithStyles = getNodesWithStyles( tree, blockSelectors ); + /* + selector, + duotoneSelector, + styles, + fallbackGapValue, + hasLayoutSupport, + featureSelectors, + styleVariationSelectors, + */ + const aux = nodesWithStyles.flatMap( ( { styles, duotoneSelector } ) => { + if ( duotoneSelector ) { + if ( Array.isArray( styles.filter.duotone ) ) { + let slug = styles.filter.duotone.map( ( x ) => + cleanForSlug( x ).replaceAll( '-', '' ) + ); + slug = slug.join( '-' ); + return ( + + ); + } + return []; + } + return []; + } ); + return aux; } export function toSvgFilters( tree, blockSelectors ) { @@ -1077,7 +1097,7 @@ export function useGlobalStylesOutput() { ); const presetSvgs = toSvgFilters( mergedConfig, blockSelectors ); - const customSvgs = customSvgFilters( customFilters ); + const customSvgs = customSvgFilters( mergedConfig, blockSelectors ); const stylesheets = [ { From 510516a934449ce735c154b80ca5186e1703112f Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 22 Mar 2023 16:35:16 +0100 Subject: [PATCH 5/8] filter nodes instead of using conditionals --- .../global-styles/use-global-styles-output.js | 48 ++++++++----------- 1 file changed, 19 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 0fe5684d6bc515..cc031c27514336 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -915,35 +915,25 @@ export const toStyles = ( export function customSvgFilters( tree, blockSelectors ) { const nodesWithStyles = getNodesWithStyles( tree, blockSelectors ); - /* - selector, - duotoneSelector, - styles, - fallbackGapValue, - hasLayoutSupport, - featureSelectors, - styleVariationSelectors, - */ - const aux = nodesWithStyles.flatMap( ( { styles, duotoneSelector } ) => { - if ( duotoneSelector ) { - if ( Array.isArray( styles.filter.duotone ) ) { - let slug = styles.filter.duotone.map( ( x ) => - cleanForSlug( x ).replaceAll( '-', '' ) - ); - slug = slug.join( '-' ); - return ( - - ); - } - return []; - } - return []; - } ); - return aux; + + return nodesWithStyles + .filter( + ( { styles, duotoneSelector } ) => + duotoneSelector && Array.isArray( styles.filter?.duotone ) + ) + .flatMap( ( node ) => { + let slug = node.styles.filter.duotone.map( ( x ) => + cleanForSlug( x ).replaceAll( '-', '' ) + ); + slug = slug.join( '-' ); + return ( + + ); + } ); } export function toSvgFilters( tree, blockSelectors ) { From 8ba05b2d4f9e4f1e62116e981c06e1be2642887c Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 22 Mar 2023 16:39:11 +0100 Subject: [PATCH 6/8] encapsulate duotone slug into aux function --- .../global-styles/use-global-styles-output.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index cc031c27514336..887b2e01b6840a 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -264,10 +264,7 @@ export function getStylesDeclarations( //The duotone filter is not one of the presets so we need to build the svg and the filter ID if ( Array.isArray( blockStyles.filter?.duotone ) ) { - let slug = blockStyles.filter.duotone.map( ( x ) => - cleanForSlug( x ).replaceAll( '-', '' ) - ); - slug = slug.join( '-' ); + const slug = duotoneSlug( blockStyles.filter.duotone ); declarations.push( `${ cssProperty }: url('#wp-duotone-${ slug }')` ); @@ -913,6 +910,12 @@ export const toStyles = ( return ruleset; }; +function duotoneSlug( colors ) { + return colors + .map( ( x ) => cleanForSlug( x ).replaceAll( '-', '' ) ) + .join( '-' ); +} + export function customSvgFilters( tree, blockSelectors ) { const nodesWithStyles = getNodesWithStyles( tree, blockSelectors ); @@ -922,10 +925,7 @@ export function customSvgFilters( tree, blockSelectors ) { duotoneSelector && Array.isArray( styles.filter?.duotone ) ) .flatMap( ( node ) => { - let slug = node.styles.filter.duotone.map( ( x ) => - cleanForSlug( x ).replaceAll( '-', '' ) - ); - slug = slug.join( '-' ); + const slug = duotoneSlug( node.styles.filter.duotone ); return ( Date: Wed, 22 Mar 2023 17:26:41 +0100 Subject: [PATCH 7/8] allow custom duotone filters on the frontend too --- lib/class-wp-duotone-gutenberg.php | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index 3544f580367101..1b11f4f33efcea 100644 --- a/lib/class-wp-duotone-gutenberg.php +++ b/lib/class-wp-duotone-gutenberg.php @@ -115,7 +115,14 @@ public static function set_global_style_block_names() { continue; } // If it has a duotone filter preset, save the block name and the preset slug. - $slug = self::gutenberg_get_slug_from_attr( $duotone_attr ); + if(is_string($duotone_attr)){ + $slug = self::gutenberg_get_slug_from_attr( $duotone_attr ); + //If the block has custom colors, we generate a slug for it and save it. + } else { + $slug = self::custom_unique_slug($duotone_attr); + self::$global_styles_presets[$slug]['slug'] = $slug; + self::$global_styles_presets[$slug]['colors'] = $duotone_attr; + } if ( $slug && $slug !== $duotone_attr ) { self::$global_styles_block_names[ $block_node['name'] ] = $slug; @@ -247,6 +254,11 @@ public static function output_global_styles() { } } + public static function custom_unique_slug($duotone_attr){ + // Build a unique slug for the filter based on the array of colors. + return wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); + } + /** * Render out the duotone CSS styles and SVG. * @@ -304,9 +316,9 @@ public static function render_duotone_support( $block_content, $block ) { // Pass through the CSS value. $declaration_value = $duotone_attr; } elseif ( $is_custom ) { - // Build a unique slug for the filter based on the array of colors. - $slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); - + + $slug = self::custom_unique_slug($duotone_attr); + $filter_data = array( 'slug' => $slug, 'colors' => $duotone_attr, From 7ab9c253f8e2349ea53d1dff68bcb29ca9bee3b5 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 22 Mar 2023 17:44:22 +0100 Subject: [PATCH 8/8] coding standards --- lib/class-wp-duotone-gutenberg.php | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index 1b11f4f33efcea..45936e4b3e5473 100644 --- a/lib/class-wp-duotone-gutenberg.php +++ b/lib/class-wp-duotone-gutenberg.php @@ -115,13 +115,13 @@ public static function set_global_style_block_names() { continue; } // If it has a duotone filter preset, save the block name and the preset slug. - if(is_string($duotone_attr)){ + if ( is_string( $duotone_attr ) ) { $slug = self::gutenberg_get_slug_from_attr( $duotone_attr ); - //If the block has custom colors, we generate a slug for it and save it. + // If the block has custom colors, we generate a slug for it and save it. } else { - $slug = self::custom_unique_slug($duotone_attr); - self::$global_styles_presets[$slug]['slug'] = $slug; - self::$global_styles_presets[$slug]['colors'] = $duotone_attr; + $slug = self::custom_unique_slug( $duotone_attr ); + self::$global_styles_presets[ $slug ]['slug'] = $slug; + self::$global_styles_presets[ $slug ]['colors'] = $duotone_attr; } if ( $slug && $slug !== $duotone_attr ) { @@ -254,8 +254,13 @@ public static function output_global_styles() { } } - public static function custom_unique_slug($duotone_attr){ - // Build a unique slug for the filter based on the array of colors. + /** + * Generate a unique slug for the filter based on the array of colors. + * + * @param string $duotone_attr The duotone attribute from a block. + * @return string A unique string that defines the custom filter. + */ + public static function custom_unique_slug( $duotone_attr ) { return wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); } @@ -316,9 +321,9 @@ public static function render_duotone_support( $block_content, $block ) { // Pass through the CSS value. $declaration_value = $duotone_attr; } elseif ( $is_custom ) { - - $slug = self::custom_unique_slug($duotone_attr); - + + $slug = self::custom_unique_slug( $duotone_attr ); + $filter_data = array( 'slug' => $slug, 'colors' => $duotone_attr,