From cb36e109e4c580d3afc3e65cf194843fba2c06a0 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Mon, 9 May 2022 15:21:30 +1000
Subject: [PATCH] Also passing the style color value to `getClassnames` so it
 will add the generic class name if required. Regenerating fixtures due to the
 re-ordering of color classnames.

---
 packages/block-editor/src/hooks/color.js      | 22 ++++++++++---------
 .../style-engine/src/styles/color/index.ts    |  2 +-
 packages/style-engine/src/test/index.js       | 10 ++++-----
 .../core__button__squared.serialized.html     |  2 +-
 .../fixtures/blocks/core__post-terms.json     |  2 +-
 ...__pullquote__custom-colors.serialized.html |  2 +-
 ...e__pullquote__deprecated-4.serialized.html |  2 +-
 7 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 13c8b84d423d74..18f00c5c683687 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -262,20 +262,22 @@ export function addSaveProps( props, blockType, attributes ) {
 	// Primary color classes must come before the `has-text-color`,
 	// `has-background` and `has-link-color` classes to maintain backwards
 	// compatibility and avoid block invalidations.
-	if ( textColor && shouldSerialize( 'text' ) ) {
-		colorStyles.text = `var:preset|color|${ textColor }`;
+	if ( shouldSerialize( 'text' ) ) {
+		colorStyles.text = textColor
+			? `var:preset|color|${ textColor }`
+			: style?.color?.text;
 	}
 
-	if (
-		gradient &&
-		shouldSerialize( 'gradients' ) &&
-		hasGradientSupport( blockType )
-	) {
-		colorStyles.gradient = `var:preset|gradient|${ gradient }`;
+	if ( shouldSerialize( 'gradients' ) && hasGradientSupport( blockType ) ) {
+		colorStyles.gradient = gradient
+			? `var:preset|gradient|${ gradient }`
+			: style?.color?.gradient;
 	}
 
-	if ( backgroundColor && shouldSerialize( 'background' ) ) {
-		colorStyles.background = `var:preset|color|${ backgroundColor }`;
+	if ( shouldSerialize( 'background' ) ) {
+		colorStyles.background = backgroundColor
+			? `var:preset|color|${ backgroundColor }`
+			: style?.color?.background;
 	}
 
 	const newClassName = classnames(
diff --git a/packages/style-engine/src/styles/color/index.ts b/packages/style-engine/src/styles/color/index.ts
index 0f8ab94a67dd78..15db28d726a806 100644
--- a/packages/style-engine/src/styles/color/index.ts
+++ b/packages/style-engine/src/styles/color/index.ts
@@ -5,4 +5,4 @@ import background from './background';
 import gradient from './gradient';
 import text from './text';
 
-export default [ background, gradient, text ];
+export default [ text, gradient, background ];
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index 948ccfe4f395e9..68e32bc04f4584 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -20,7 +20,7 @@ describe( 'generate', () => {
 				},
 			} )
 		).toEqual(
-			'background-color: #222222; background: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(143,47,47) 49%,rgb(155,81,224) 100%); color: #f1f1f1; margin: 12px; padding: 10px;'
+			'color: #f1f1f1; background: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(143,47,47) 49%,rgb(155,81,224) 100%); background-color: #222222; margin: 12px; padding: 10px;'
 		);
 	} );
 
@@ -164,7 +164,7 @@ describe( 'getClassnames', () => {
 				spacing: { padding: '10px', margin: '12px' },
 				color: { text: '#381515', background: '#000000' },
 			} )
-		).toEqual( [ 'has-background', 'has-text-color' ] );
+		).toEqual( [ 'has-text-color', 'has-background' ] );
 	} );
 
 	it( 'should generate classnames for eligible preset values', () => {
@@ -178,11 +178,11 @@ describe( 'getClassnames', () => {
 				},
 			} )
 		).toEqual( [
-			'has-mustard-pickles-background-color',
-			'has-background',
-			'has-hairy-orange-gradient-background',
 			'has-white-as-show-color',
 			'has-text-color',
+			'has-hairy-orange-gradient-background',
+			'has-background',
+			'has-mustard-pickles-background-color',
 		] );
 	} );
 } );
diff --git a/test/integration/fixtures/blocks/core__button__squared.serialized.html b/test/integration/fixtures/blocks/core__button__squared.serialized.html
index 29e7fed15a510c..ec83bb66b4971b 100644
--- a/test/integration/fixtures/blocks/core__button__squared.serialized.html
+++ b/test/integration/fixtures/blocks/core__button__squared.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"style":{"border":{"radius":0},"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="background-color:#aa5a20;color:#1b9b6c">My button</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="color:#1b9b6c;background-color:#aa5a20">My button</a></div>
 <!-- /wp:button -->
diff --git a/test/integration/fixtures/blocks/core__post-terms.json b/test/integration/fixtures/blocks/core__post-terms.json
index f3b9bd3b4828f2..6cddf3d6043d9f 100644
--- a/test/integration/fixtures/blocks/core__post-terms.json
+++ b/test/integration/fixtures/blocks/core__post-terms.json
@@ -3,8 +3,8 @@
 		"name": "core/post-terms",
 		"isValid": true,
 		"attributes": {
-			"prefix": "",
 			"separator": ", ",
+			"prefix": "",
 			"suffix": ""
 		},
 		"innerBlocks": []
diff --git a/test/integration/fixtures/blocks/core__pullquote__custom-colors.serialized.html b/test/integration/fixtures/blocks/core__pullquote__custom-colors.serialized.html
index ba577c8f5c2a77..d6b9f285fdecb3 100644
--- a/test/integration/fixtures/blocks/core__pullquote__custom-colors.serialized.html
+++ b/test/integration/fixtures/blocks/core__pullquote__custom-colors.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:pullquote {"textAlign":"right","className":"is-style-default","style":{"color":{"background":"#3486aa","text":"#ffefef"},"border":{"color":"#045679"}}} -->
-<figure class="wp-block-pullquote has-text-align-right is-style-default has-border-color has-text-color has-background" style="border-color:#045679;background-color:#3486aa;color:#ffefef"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>
+<figure class="wp-block-pullquote has-text-align-right is-style-default has-border-color has-text-color has-background" style="border-color:#045679;color:#ffefef;background-color:#3486aa"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>
 <!-- /wp:pullquote -->
diff --git a/test/integration/fixtures/blocks/core__pullquote__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__pullquote__deprecated-4.serialized.html
index a780d8fa0ae009..30b3d6071c74d8 100644
--- a/test/integration/fixtures/blocks/core__pullquote__deprecated-4.serialized.html
+++ b/test/integration/fixtures/blocks/core__pullquote__deprecated-4.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:pullquote {"textAlign":"left","className":"is-style-solid-color","backgroundColor":"black","textColor":"white"} -->
-<figure class="wp-block-pullquote has-text-align-left is-style-solid-color has-white-color has-black-background-color has-text-color has-background"><blockquote><p>pullquote</p><cite>before block supports</cite></blockquote></figure>
+<figure class="wp-block-pullquote has-text-align-left is-style-solid-color has-white-color has-text-color has-black-background-color has-background"><blockquote><p>pullquote</p><cite>before block supports</cite></blockquote></figure>
 <!-- /wp:pullquote -->