From 92f13238aebe4702c3ab271e5540444949e25ab0 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 9 Feb 2024 12:05:24 +1100 Subject: [PATCH 1/4] Color Palette: Respect defaultPalette setting --- .../color-palette/with-color-context.js | 28 +++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/color-palette/with-color-context.js b/packages/block-editor/src/components/color-palette/with-color-context.js index 62b8c1bc4b618..edb431fa70b05 100644 --- a/packages/block-editor/src/components/color-palette/with-color-context.js +++ b/packages/block-editor/src/components/color-palette/with-color-context.js @@ -2,18 +2,42 @@ * WordPress dependencies */ import { createHigherOrderComponent } from '@wordpress/compose'; +import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ import { useSettings } from '../use-settings'; +const EMPTY_COLORS = []; + export default createHigherOrderComponent( ( WrappedComponent ) => { return ( props ) => { - const [ colorsFeature, enableCustomColors ] = useSettings( - 'color.palette', + const [ + customColors, + themeColors, + defaultColors, + defaultPaletteEnabled, + enableCustomColors, + ] = useSettings( + 'color.palette.custom', + 'color.palette.theme', + 'color.palette.default', + 'color.defaultPalette', 'color.custom' ); + + const colorsFeature = useMemo( + () => [ + ...( customColors || EMPTY_COLORS ), + ...( themeColors || EMPTY_COLORS ), + ...( defaultColors && defaultPaletteEnabled + ? defaultColors + : EMPTY_COLORS ), + ], + [ customColors, themeColors, defaultColors, defaultPaletteEnabled ] + ); + const { colors = colorsFeature, disableCustomColors = ! enableCustomColors, From f51fc7337e3050d1c2c82b306779961f5f988836 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 9 Feb 2024 14:49:56 +1100 Subject: [PATCH 2/4] Fix tests --- packages/block-library/src/cover/test/edit.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js index ab99d3c555e3b..d94fc70b5d8e1 100644 --- a/packages/block-library/src/cover/test/edit.js +++ b/packages/block-library/src/cover/test/edit.js @@ -335,7 +335,11 @@ describe( 'Cover block', () => { describe( 'when colors are disabled', () => { test( 'does not render overlay control', async () => { await setup( undefined, true, disabledColorSettings ); - await createAndSelectBlock(); + await userEvent.click( + screen.getByRole( 'document', { + name: 'Block: Cover', + } ) + ); await userEvent.click( screen.getByRole( 'tab', { name: 'Styles' } ) ); @@ -348,7 +352,11 @@ describe( 'Cover block', () => { } ); test( 'does not render opacity control', async () => { await setup( undefined, true, disabledColorSettings ); - await createAndSelectBlock(); + await userEvent.click( + screen.getByRole( 'document', { + name: 'Block: Cover', + } ) + ); await userEvent.click( screen.getByRole( 'tab', { name: 'Styles' } ) ); From 197ac89a25cc61e33b2ea3c337ecbc808e0e9bf0 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Mon, 12 Feb 2024 14:20:01 +1100 Subject: [PATCH 3/4] Only show the default colors in the cover block if there are no theme colors --- .../block-library/src/cover/edit/index.js | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 098a3fe6f5d77..d2504b5e87eeb 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -318,7 +318,19 @@ function CoverEdit( { const blockProps = useBlockProps( { ref } ); // Check for fontSize support before we pass a fontSize attribute to the innerBlocks. - const [ fontSizes ] = useSettings( 'typography.fontSizes' ); + const [ + fontSizes, + customColors, + themeColors, + defaultColors, + defaultPaletteEnabled, + ] = useSettings( + 'typography.fontSizes', + 'color.palette.custom', + 'color.palette.theme', + 'color.palette.default', + 'color.defaultPalette' + ); const hasFontSizes = fontSizes?.length > 0; const innerBlocksTemplate = getInnerBlocksTemplate( { fontSize: hasFontSizes ? 'large' : undefined, @@ -339,6 +351,18 @@ function CoverEdit( { } ); + // Only show the default colors if the default palette is enabled and no theme colors are set. + const colors = useMemo( + () => [ + ...( customColors || [] ), + ...( themeColors || [] ), + ...( defaultColors && defaultPaletteEnabled && ! themeColors?.length + ? defaultColors + : [] ), + ], + [ customColors, themeColors, defaultColors, defaultPaletteEnabled ] + ); + const mediaElement = useRef(); const currentSettings = { isVideoBackground, @@ -464,6 +488,7 @@ function CoverEdit( { >
Date: Tue, 13 Feb 2024 16:42:45 +1100 Subject: [PATCH 4/4] Add tests to cover new Cover block placeholder color picker logic --- .../block-library/src/cover/edit/index.js | 4 +- packages/block-library/src/cover/test/edit.js | 72 +++++++++++++++++++ 2 files changed, 75 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index d2504b5e87eeb..150583a50dcd6 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -317,7 +317,7 @@ function CoverEdit( { const ref = useRef(); const blockProps = useBlockProps( { ref } ); - // Check for fontSize support before we pass a fontSize attribute to the innerBlocks. + // Gather settings for font sizes and color palette values. const [ fontSizes, customColors, @@ -331,6 +331,7 @@ function CoverEdit( { 'color.palette.default', 'color.defaultPalette' ); + // Check for fontSize support before we pass a fontSize attribute to the innerBlocks. const hasFontSizes = fontSizes?.length > 0; const innerBlocksTemplate = getInnerBlocksTemplate( { fontSize: hasFontSizes ? 'large' : undefined, @@ -351,6 +352,7 @@ function CoverEdit( { } ); + // Set the colors to be used by the placeholder state's color picker. // Only show the default colors if the default palette is enabled and no theme colors are set. const colors = useMemo( () => [ diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js index d94fc70b5d8e1..904aedad0c245 100644 --- a/packages/block-library/src/cover/test/edit.js +++ b/packages/block-library/src/cover/test/edit.js @@ -92,6 +92,78 @@ describe( 'Cover block', () => { ); } ); + test( 'placeholder color picker shows only those colors coming from the theme', async () => { + const themeColorSettings = { + ...defaultSettings, + __experimentalFeatures: { + ...defaultSettings.__experimentalFeatures, + color: { + ...defaultSettings.__experimentalFeatures.color, + palette: { + ...defaultSettings.__experimentalFeatures.color + .palette, + theme: [ + { + name: 'Green', + slug: 'green', + color: '#00FF00', + }, + ], + }, + }, + }, + }; + await setup( undefined, true, themeColorSettings ); + expect( + screen.queryByRole( 'option', { + name: 'Color: Black', + } ) + ).not.toBeInTheDocument(); + expect( + screen.getByRole( 'option', { + name: 'Color: Green', + } ) + ).toBeInTheDocument(); + } ); + + test( 'placeholder color picker shows default colors', async () => { + await setup( undefined, true, defaultSettings ); + expect( + screen.getByRole( 'option', { + name: 'Color: Black', + } ) + ).toBeInTheDocument(); + expect( + screen.getByRole( 'option', { + name: 'Color: White', + } ) + ).toBeInTheDocument(); + } ); + + test( 'placeholder shows no default colors', async () => { + const defaultPaletteFalseSettings = { + ...defaultSettings, + __experimentalFeatures: { + ...defaultSettings.__experimentalFeatures, + color: { + ...defaultSettings.__experimentalFeatures.color, + defaultPalette: false, + }, + }, + }; + await setup( undefined, true, defaultPaletteFalseSettings ); + expect( + screen.queryByRole( 'option', { + name: 'Color: Black', + } ) + ).not.toBeInTheDocument(); + expect( + screen.queryByRole( 'option', { + name: 'Color: White', + } ) + ).not.toBeInTheDocument(); + } ); + test( 'can have the title edited', async () => { await setup();