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( { >