Color Palette: Respect defaultPalette setting (fixes Cover block placeholder state)

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,

packages/block-library/src/cover/edit/index.js

@@ -317,8 +317,21 @@ function CoverEdit( {
 	const ref = useRef();
 	const blockProps = useBlockProps( { ref } );
 
+	// Gather settings for font sizes and color palette values.
+	const [
+		fontSizes,
+		customColors,
+		themeColors,
+		defaultColors,
+		defaultPaletteEnabled,
+	] = useSettings(
+		'typography.fontSizes',
+		'color.palette.custom',
+		'color.palette.theme',
+		'color.palette.default',
+		'color.defaultPalette'
+	);
 	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
-	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 	const hasFontSizes = fontSizes?.length > 0;
 	const innerBlocksTemplate = getInnerBlocksTemplate( {
 		fontSize: hasFontSizes ? 'large' : undefined,
@@ -339,6 +352,19 @@ 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(
+		() => [
+			...( customColors || [] ),
+			...( themeColors || [] ),
+			...( defaultColors && defaultPaletteEnabled && ! themeColors?.length
+				? defaultColors
+				: [] ),
+		],
+		[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]
+	);
+
 	const mediaElement = useRef();
 	const currentSettings = {
 		isVideoBackground,
@@ -464,6 +490,7 @@ function CoverEdit( {
 					>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette
+								colors={ colors }
 								disableCustomColors={ true }
 								value={ overlayColor.color }
 								onChange={ onSetOverlayColor }

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();
 
@@ -335,7 +407,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 +424,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' } )
 					);