From 1fa16578f8378a83ddd4630048d5cac4ff36b734 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 8 Jul 2021 15:25:03 +0200 Subject: [PATCH 01/13] Do not show duotone panel is subcomponents are empty or disabled --- .../src/components/duotone-control/index.js | 4 -- packages/block-editor/src/hooks/duotone.js | 18 +++++---- .../src/duotone-picker/duotone-picker.js | 37 +++++++++---------- 3 files changed, 29 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js index eb675639a5f143..2ee8499b3525fa 100644 --- a/packages/block-editor/src/components/duotone-control/index.js +++ b/packages/block-editor/src/components/duotone-control/index.js @@ -20,10 +20,6 @@ function DuotoneControl( { } ) { const [ isOpen, setIsOpen ] = useState( false ); - if ( ! duotonePalette ) { - return null; - } - const onToggle = () => { setIsOpen( ( prev ) => ! prev ); }; diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 6e5a79766cae86..bfd008586786c6 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -120,7 +120,7 @@ ${ selector } { ); } -function DuotonePanel( { attributes, setAttributes } ) { +function DuotonePanel( { name, attributes, setAttributes } ) { const style = attributes?.style; const duotone = style?.color?.duotone; @@ -128,6 +128,15 @@ function DuotonePanel( { attributes, setAttributes } ) { const colorPalette = useSetting( 'color.palette' ); const disableCustomColors = ! useSetting( 'color.custom' ); + if ( + ! hasBlockSupport( name, 'color.__experimentalDuotone' ) || + ( duotonePalette?.length === 0 && + colorPalette?.length === 0 && + disableCustomColors ) + ) { + return null; + } + return ( ( props ) => { - const hasDuotoneSupport = hasBlockSupport( - props.name, - 'color.__experimentalDuotone' - ); - return ( <> - { hasDuotoneSupport && } + ); }, diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js index bbc546acec1c46..a5515adced9747 100644 --- a/packages/components/src/duotone-picker/duotone-picker.js +++ b/packages/components/src/duotone-picker/duotone-picker.js @@ -77,25 +77,24 @@ function DuotonePicker( { { ! disableCustomColors && ( ) } - { colorPalette && ( - { - if ( ! newColors[ 0 ] ) { - newColors[ 0 ] = defaultDark; - } - if ( ! newColors[ 1 ] ) { - newColors[ 1 ] = defaultLight; - } - const newValue = - newColors.length >= 2 ? newColors : undefined; - onChange( newValue ); - } } - /> - ) } + + { + if ( ! newColors[ 0 ] ) { + newColors[ 0 ] = defaultDark; + } + if ( ! newColors[ 1 ] ) { + newColors[ 1 ] = defaultLight; + } + const newValue = + newColors.length >= 2 ? newColors : undefined; + onChange( newValue ); + } } + /> ); } From f7c7f916b225e0fb3a74810dc9e5575b886d1a06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 8 Jul 2021 17:26:51 +0200 Subject: [PATCH 02/13] Disable colorlistpicker if custom false and empty palette --- .../src/duotone-picker/duotone-picker.js | 37 ++++++++++--------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js index a5515adced9747..2a3ebf4ad7603f 100644 --- a/packages/components/src/duotone-picker/duotone-picker.js +++ b/packages/components/src/duotone-picker/duotone-picker.js @@ -77,24 +77,25 @@ function DuotonePicker( { { ! disableCustomColors && ( ) } - - { - if ( ! newColors[ 0 ] ) { - newColors[ 0 ] = defaultDark; - } - if ( ! newColors[ 1 ] ) { - newColors[ 1 ] = defaultLight; - } - const newValue = - newColors.length >= 2 ? newColors : undefined; - onChange( newValue ); - } } - /> + { ( ! disableCustomColors || ( colorPalette?.length > 0 ) ) && ( + { + if ( ! newColors[ 0 ] ) { + newColors[ 0 ] = defaultDark; + } + if ( ! newColors[ 1 ] ) { + newColors[ 1 ] = defaultLight; + } + const newValue = + newColors.length >= 2 ? newColors : undefined; + onChange( newValue ); + } } + /> + ) } ); } From 5b00297218e1d57d89ee6909ffee89acda093c14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 8 Jul 2021 17:27:01 +0200 Subject: [PATCH 03/13] Format --- packages/components/src/duotone-picker/duotone-picker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js index 2a3ebf4ad7603f..bb205655c8e817 100644 --- a/packages/components/src/duotone-picker/duotone-picker.js +++ b/packages/components/src/duotone-picker/duotone-picker.js @@ -77,7 +77,7 @@ function DuotonePicker( { { ! disableCustomColors && ( ) } - { ( ! disableCustomColors || ( colorPalette?.length > 0 ) ) && ( + { ( ! disableCustomColors || colorPalette?.length > 0 ) && ( Date: Thu, 8 Jul 2021 17:45:50 +0200 Subject: [PATCH 04/13] Do not render the duotone present if color.duotone is null --- .../src/duotone-picker/duotone-picker.js | 75 ++++++++++--------- 1 file changed, 40 insertions(+), 35 deletions(-) diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js index bb205655c8e817..2d5c51bb3d699b 100644 --- a/packages/components/src/duotone-picker/duotone-picker.js +++ b/packages/components/src/duotone-picker/duotone-picker.js @@ -29,43 +29,48 @@ function DuotonePicker( { () => getDefaultColors( colorPalette ), [ colorPalette ] ); - return ( - { - const style = { - background: getGradientFromCSSColors( colors, '135deg' ), - color: 'transparent', - }; - const tooltipText = - name ?? - sprintf( - // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff". - __( 'Duotone code: %s' ), - slug - ); - const label = name - ? sprintf( - // translators: %s: The name of the option e.g: "Dark grayscale". - __( 'Duotone: %s' ), - name - ) - : tooltipText; - const isSelected = isEqual( colors, value ); - return ( - { - onChange( isSelected ? undefined : colors ); - } } - /> + let duotonePresets = null; + if ( !! duotonePalette ) { + duotonePresets = duotonePalette.map( ( { colors, slug, name } ) => { + const style = { + background: getGradientFromCSSColors( colors, '135deg' ), + color: 'transparent', + }; + const tooltipText = + name ?? + sprintf( + // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff". + __( 'Duotone code: %s' ), + slug ); - } ) } + const label = name + ? sprintf( + // translators: %s: The name of the option e.g: "Dark grayscale". + __( 'Duotone: %s' ), + name + ) + : tooltipText; + const isSelected = isEqual( colors, value ); + + return ( + { + onChange( isSelected ? undefined : colors ); + } } + /> + ); + } ); + } + return ( + onChange( undefined ) } From a31623c869e6745e7b480893434adb76db15e7e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 8 Jul 2021 17:51:21 +0200 Subject: [PATCH 05/13] Defensive handling of null values for color.palette and color.duotone --- packages/block-editor/src/hooks/duotone.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index bfd008586786c6..18a56c2b5f1494 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -130,8 +130,8 @@ function DuotonePanel( { name, attributes, setAttributes } ) { if ( ! hasBlockSupport( name, 'color.__experimentalDuotone' ) || - ( duotonePalette?.length === 0 && - colorPalette?.length === 0 && + ( ( ! duotonePalette || duotonePalette?.length === 0 ) && + ( ! colorPalette || colorPalette?.length === 0 ) && disableCustomColors ) ) { return null; From d77739c9e5240cd166be4ba95f6b7afafbd649a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 8 Jul 2021 18:58:46 +0200 Subject: [PATCH 06/13] Refactor to minimize changes required --- packages/block-editor/src/hooks/duotone.js | 10 ++- .../src/duotone-picker/duotone-picker.js | 74 +++++++++---------- 2 files changed, 41 insertions(+), 43 deletions(-) diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 18a56c2b5f1494..e8069bafa21f97 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -21,6 +21,8 @@ import { useSetting, } from '../components'; +const EMPTY_ARRAY = []; + /** * Convert a list of colors to an object of R, G, and B values. * @@ -124,14 +126,14 @@ function DuotonePanel( { name, attributes, setAttributes } ) { const style = attributes?.style; const duotone = style?.color?.duotone; - const duotonePalette = useSetting( 'color.duotone' ); - const colorPalette = useSetting( 'color.palette' ); + const duotonePalette = useSetting( 'color.duotone' ) || EMPTY_ARRAY; + const colorPalette = useSetting( 'color.palette' ) || EMPTY_ARRAY; const disableCustomColors = ! useSetting( 'color.custom' ); if ( ! hasBlockSupport( name, 'color.__experimentalDuotone' ) || - ( ( ! duotonePalette || duotonePalette?.length === 0 ) && - ( ! colorPalette || colorPalette?.length === 0 ) && + ( duotonePalette?.length === 0 && + colorPalette?.length === 0 && disableCustomColors ) ) { return null; diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js index 2d5c51bb3d699b..e0fbaa363bb388 100644 --- a/packages/components/src/duotone-picker/duotone-picker.js +++ b/packages/components/src/duotone-picker/duotone-picker.js @@ -30,47 +30,43 @@ function DuotonePicker( { [ colorPalette ] ); - let duotonePresets = null; - if ( !! duotonePalette ) { - duotonePresets = duotonePalette.map( ( { colors, slug, name } ) => { - const style = { - background: getGradientFromCSSColors( colors, '135deg' ), - color: 'transparent', - }; - const tooltipText = - name ?? - sprintf( - // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff". - __( 'Duotone code: %s' ), - slug - ); - const label = name - ? sprintf( - // translators: %s: The name of the option e.g: "Dark grayscale". - __( 'Duotone: %s' ), - name - ) - : tooltipText; - const isSelected = isEqual( colors, value ); - - return ( - { - onChange( isSelected ? undefined : colors ); - } } - /> - ); - } ); - } return ( { + const style = { + background: getGradientFromCSSColors( colors, '135deg' ), + color: 'transparent', + }; + const tooltipText = + name ?? + sprintf( + // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff". + __( 'Duotone code: %s' ), + slug + ); + const label = name + ? sprintf( + // translators: %s: The name of the option e.g: "Dark grayscale". + __( 'Duotone: %s' ), + name + ) + : tooltipText; + const isSelected = isEqual( colors, value ); + + return ( + { + onChange( isSelected ? undefined : colors ); + } } + /> + ); + } ) } actions={ onChange( undefined ) } From d0dd541dae2cf3c0462977b9267c215f6f627445 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 8 Jul 2021 20:46:43 +0200 Subject: [PATCH 07/13] Add a color.customDuotone flag --- lib/class-wp-theme-json-gutenberg.php | 1 + lib/experimental-default-theme.json | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 92bd630ad2fffa..60fdc2cf2271b5 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -85,6 +85,7 @@ class WP_Theme_JSON_Gutenberg { ), 'color' => array( 'custom' => null, + 'customDuotone' => null, 'customGradient' => null, 'duotone' => null, 'gradients' => null, diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json index e12e4231018a36..bf7ef9ef5147ba 100644 --- a/lib/experimental-default-theme.json +++ b/lib/experimental-default-theme.json @@ -169,8 +169,9 @@ } ], "custom": true, - "link": false, - "customGradient": true + "customDuotone": true, + "customGradient": true, + "link": false }, "typography": { "dropCap": true, From 7cc88ae6a78afd542d3989f32ddff5187d86a029 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 8 Jul 2021 20:54:21 +0200 Subject: [PATCH 08/13] Use color.customDuotone to control visibility of controls --- .../components/duotone-control/duotone-picker-popover.js | 2 ++ .../block-editor/src/components/duotone-control/index.js | 2 ++ packages/block-editor/src/hooks/duotone.js | 8 +++++--- packages/components/src/duotone-picker/duotone-picker.js | 3 ++- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js b/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js index c277b07ad1487a..64f4c1cf225c2b 100644 --- a/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js +++ b/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js @@ -11,6 +11,7 @@ function DuotonePickerPopover( { duotonePalette, colorPalette, disableCustomColors, + disableCustomDuotone, } ) { return ( diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js index 2ee8499b3525fa..757e83803e86b7 100644 --- a/packages/block-editor/src/components/duotone-control/index.js +++ b/packages/block-editor/src/components/duotone-control/index.js @@ -15,6 +15,7 @@ function DuotoneControl( { colorPalette, duotonePalette, disableCustomColors, + disableCustomDuotone, value, onChange, } ) { @@ -51,6 +52,7 @@ function DuotoneControl( { duotonePalette={ duotonePalette } colorPalette={ colorPalette } disableCustomColors={ disableCustomColors } + disableCustomDuotone={ disableCustomDuotone } /> ) } diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index e8069bafa21f97..5af9096bf24c7f 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -129,12 +129,13 @@ function DuotonePanel( { name, attributes, setAttributes } ) { const duotonePalette = useSetting( 'color.duotone' ) || EMPTY_ARRAY; const colorPalette = useSetting( 'color.palette' ) || EMPTY_ARRAY; const disableCustomColors = ! useSetting( 'color.custom' ); + const disableCustomDuotone = + ! useSetting( 'color.customDuotone' ) || + ( colorPalette?.length === 0 && disableCustomColors ); if ( ! hasBlockSupport( name, 'color.__experimentalDuotone' ) || - ( duotonePalette?.length === 0 && - colorPalette?.length === 0 && - disableCustomColors ) + ( duotonePalette?.length === 0 && disableCustomDuotone ) ) { return null; } @@ -144,6 +145,7 @@ function DuotonePanel( { name, attributes, setAttributes } ) { { diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js index e0fbaa363bb388..a61617e4726da9 100644 --- a/packages/components/src/duotone-picker/duotone-picker.js +++ b/packages/components/src/duotone-picker/duotone-picker.js @@ -22,6 +22,7 @@ function DuotonePicker( { colorPalette, duotonePalette, disableCustomColors, + disableCustomDuotone, value, onChange, } ) { @@ -78,7 +79,7 @@ function DuotonePicker( { { ! disableCustomColors && ( ) } - { ( ! disableCustomColors || colorPalette?.length > 0 ) && ( + { ! disableCustomDuotone && ( Date: Thu, 8 Jul 2021 21:34:47 +0200 Subject: [PATCH 09/13] Use both custom and customDuotone for the bar --- packages/components/src/duotone-picker/duotone-picker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js index a61617e4726da9..c97b3c1543f5e8 100644 --- a/packages/components/src/duotone-picker/duotone-picker.js +++ b/packages/components/src/duotone-picker/duotone-picker.js @@ -76,7 +76,7 @@ function DuotonePicker( { } > - { ! disableCustomColors && ( + { ! disableCustomColors && !disableCustomDuotone && ( ) } { ! disableCustomDuotone && ( From f888713cccd5882a51dd5ca7c51d6ac51ecdd17c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 8 Jul 2021 21:34:56 +0200 Subject: [PATCH 10/13] Format --- packages/components/src/duotone-picker/duotone-picker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js index c97b3c1543f5e8..fa01fd82707671 100644 --- a/packages/components/src/duotone-picker/duotone-picker.js +++ b/packages/components/src/duotone-picker/duotone-picker.js @@ -76,7 +76,7 @@ function DuotonePicker( { } > - { ! disableCustomColors && !disableCustomDuotone && ( + { ! disableCustomColors && ! disableCustomDuotone && ( ) } { ! disableCustomDuotone && ( From 6587407efcdf41ad01494916bf7c6e0d87534ced Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Fri, 9 Jul 2021 09:14:36 +0200 Subject: [PATCH 11/13] Check for block support earlier --- packages/block-editor/src/hooks/duotone.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 5af9096bf24c7f..5b6edc9ed124a1 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -122,7 +122,7 @@ ${ selector } { ); } -function DuotonePanel( { name, attributes, setAttributes } ) { +function DuotonePanel( { attributes, setAttributes } ) { const style = attributes?.style; const duotone = style?.color?.duotone; @@ -133,10 +133,7 @@ function DuotonePanel( { name, attributes, setAttributes } ) { ! useSetting( 'color.customDuotone' ) || ( colorPalette?.length === 0 && disableCustomColors ); - if ( - ! hasBlockSupport( name, 'color.__experimentalDuotone' ) || - ( duotonePalette?.length === 0 && disableCustomDuotone ) - ) { + if ( duotonePalette?.length === 0 && disableCustomDuotone ) { return null; } @@ -199,10 +196,15 @@ function addDuotoneAttributes( settings ) { */ const withDuotoneControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { + const hasDuotoneSupport = ! hasBlockSupport( + props.name, + 'color.__experimentalDuotone' + ); + return ( <> - + { hasDuotoneSupport && } ); }, From 2b0e5f8234bfe5dfae2449b0422bd4294c388598 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Fri, 9 Jul 2021 09:21:42 +0200 Subject: [PATCH 12/13] Fix typo --- packages/block-editor/src/hooks/duotone.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 5b6edc9ed124a1..c0de112b020d8d 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -196,7 +196,7 @@ function addDuotoneAttributes( settings ) { */ const withDuotoneControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const hasDuotoneSupport = ! hasBlockSupport( + const hasDuotoneSupport = hasBlockSupport( props.name, 'color.__experimentalDuotone' ); From 6bde4472f94ad62a6c64cd224abbc9c1a46e46de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Fri, 9 Jul 2021 09:27:10 +0200 Subject: [PATCH 13/13] Add docs for new setting --- docs/how-to-guides/themes/theme-json.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md index 0990c618ea9f4e..6e751aa2e19ff8 100644 --- a/docs/how-to-guides/themes/theme-json.md +++ b/docs/how-to-guides/themes/theme-json.md @@ -169,6 +169,7 @@ The settings section has the following structure: "settings": { "color": { "custom": true, + "customDuotone": true, "customGradient": true, "duotone": [], "gradients": [], @@ -220,6 +221,7 @@ The settings section has the following structure: }, "color": { "custom": true, + "customDuotone": true, "customGradient": true, "duotone": [], "gradients": [],