Add all color palettes to select from editor panel (#65148)

* Add all the colors in with-color-context so that they all are listed in block editor * Remove default colour pallete * Remove extra space * Update packages/block-editor/src/components/color-palette/with-color-context.js re-add default colours Co-authored-by: Aki Hamano <[email protected]> * Add default colours if enabled * Update packages/block-editor/src/components/color-palette/with-color-context.js Co-authored-by: Aki Hamano <[email protected]> * update test --------- Unlinked contributors: EddyBoels, burnuser. Co-authored-by: AKSHAT2802 <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: rohitmathur-7 <[email protected]> Co-authored-by: javiercasares <[email protected]>
WordPress · Nov 22, 2024 · 452de1b · 452de1b
1 parent 4d2fb64
commit 452de1b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 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
@@ -10,14 +10,32 @@ import { useSettings } from '../use-settings';
 
 export default createHigherOrderComponent( ( WrappedComponent ) => {
 	return ( props ) => {
-		const [ colorsFeature, enableCustomColors ] = useSettings(
-			'color.palette',
-			'color.custom'
+		// Get the default colors, theme colors, and custom colors
+		const [
+			defaultColors,
+			themeColors,
+			customColors,
+			enableCustomColors,
+			enableDefaultColors,
+		] = useSettings(
+			'color.palette.default',
+			'color.palette.theme',
+			'color.palette.custom',
+			'color.custom',
+			'color.defaultPalette'
 		);
-		const {
-			colors = colorsFeature,
-			disableCustomColors = ! enableCustomColors,
-		} = props;
+
+		const _colors = enableDefaultColors
+			? [
+					...( themeColors || [] ),
+					...( defaultColors || [] ),
+					...( customColors || [] ),
+			  ]
+			: [ ...( themeColors || [] ), ...( customColors || [] ) ];
+
+		const { colors = _colors, disableCustomColors = ! enableCustomColors } =
+			props;
+
 		const hasColorsToChoose =
 			( colors && colors.length > 0 ) || ! disableCustomColors;
 		return (

diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
@@ -337,7 +337,7 @@ describe( 'Cover block', () => {
 			describe( 'when colors are disabled', () => {
 				test( 'does not render overlay control', async () => {
 					await setup( undefined, true, disabledColorSettings );
-					await createAndSelectBlock();
+					await selectBlock( 'Block: Cover' );
 					await userEvent.click(
 						screen.getByRole( 'tab', { name: 'Styles' } )
 					);
@@ -350,7 +350,7 @@ describe( 'Cover block', () => {
 				} );
 				test( 'does not render opacity control', async () => {
 					await setup( undefined, true, disabledColorSettings );
-					await createAndSelectBlock();
+					await selectBlock( 'Block: Cover' );
 					await userEvent.click(
 						screen.getByRole( 'tab', { name: 'Styles' } )
 					);