From 936c2c8ebd9753d18030f5fa5b2cf99fd258d434 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Thu, 18 Nov 2021 17:32:46 +0100
Subject: [PATCH] The theme palette goes before the default one

---
 .../panel-color-gradient-settings.js          | 24 +++++++++----------
 .../src/components/global-styles/hooks.js     | 24 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index e0a707790ff97a..7d1cfc2fbda6f0 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -179,6 +179,12 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 
 	colorGradientSettings.colors = useMemo( () => {
 		const result = [];
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: __( 'Theme' ),
+				colors: themeColors,
+			} );
+		}
 		if (
 			shouldDisplayDefaultColors &&
 			defaultColors &&
@@ -189,12 +195,6 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 				colors: defaultColors,
 			} );
 		}
-		if ( themeColors && themeColors.length ) {
-			result.push( {
-				name: __( 'Theme' ),
-				colors: themeColors,
-			} );
-		}
 		if ( customColors && customColors.length ) {
 			result.push( {
 				name: __( 'Custom' ),
@@ -212,6 +212,12 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 	);
 	colorGradientSettings.gradients = useMemo( () => {
 		const result = [];
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: __( 'Theme' ),
+				gradients: themeGradients,
+			} );
+		}
 		if (
 			shouldDisplayDefaultGradients &&
 			defaultGradients &&
@@ -222,12 +228,6 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 				gradients: defaultGradients,
 			} );
 		}
-		if ( themeGradients && themeGradients.length ) {
-			result.push( {
-				name: __( 'Theme' ),
-				gradients: themeGradients,
-			} );
-		}
 		if ( customGradients && customGradients.length ) {
 			result.push( {
 				name: __( 'Custom' ),
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 02ad1ebdf2f7b6..a2340fc5e98787 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -223,18 +223,18 @@ export function useColorsPerOrigin( name ) {
 	const [ defaultColors ] = useSetting( 'color.palette.core', name );
 	return useMemo( () => {
 		const result = [];
-		if ( defaultColors && defaultColors.length ) {
-			result.push( {
-				name: __( 'Default' ),
-				colors: defaultColors,
-			} );
-		}
 		if ( themeColors && themeColors.length ) {
 			result.push( {
 				name: __( 'Theme' ),
 				colors: themeColors,
 			} );
 		}
+		if ( defaultColors && defaultColors.length ) {
+			result.push( {
+				name: __( 'Default' ),
+				colors: defaultColors,
+			} );
+		}
 		if ( customColors && customColors.length ) {
 			result.push( {
 				name: __( 'Custom' ),
@@ -251,18 +251,18 @@ export function useGradientsPerOrigin( name ) {
 	const [ defaultGradients ] = useSetting( 'color.gradients.core', name );
 	return useMemo( () => {
 		const result = [];
-		if ( defaultGradients && defaultGradients.length ) {
-			result.push( {
-				name: __( 'Default' ),
-				gradients: defaultGradients,
-			} );
-		}
 		if ( themeGradients && themeGradients.length ) {
 			result.push( {
 				name: __( 'Theme' ),
 				gradients: themeGradients,
 			} );
 		}
+		if ( defaultGradients && defaultGradients.length ) {
+			result.push( {
+				name: __( 'Default' ),
+				gradients: defaultGradients,
+			} );
+		}
 		if ( customGradients && customGradients.length ) {
 			result.push( {
 				name: __( 'Custom' ),