From 6f2a83e8fd9f06a6dd0d74e1f5fd22f12d9889a7 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 31 Jul 2024 18:24:27 +1000
Subject: [PATCH] Check for string types in background image so it will apply
 defaults for blocks. Update comments

---
 .../global-styles/use-global-styles-output.js | 37 ++++++++-----------
 packages/block-editor/src/hooks/background.js |  2 +-
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index d56699cb15c6ac..fce2c9b13724b8 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -396,15 +396,27 @@ export function getStylesDeclarations(
 
 	/*
 	 * Preprocess background image values.
-	 * 1. Sets default values for blocks (not root).
-	 * 2. .
 	 *
-	 * Note: A refactor is for the style engine to handle ref resolution (and possibly defaults)
+	 * Note: As we absorb more and more styles into the engine, we could simplify this function.
+	 * A refactor is for the style engine to handle ref resolution (and possibly defaults)
 	 * via a public util used internally and externally. Theme.json tree and defaults could be passed
 	 * as options.
 	 */
 	if ( !! blockStyles.background ) {
-		// 1. Set default values for block styles except the top-level site background
+		/*
+		 * Resolve dynamic values before they are compiled by the style engine,
+		 * which doesn't (yet) resolve dynamic values.
+		 */
+		if ( blockStyles.background?.backgroundImage?.ref ) {
+			const refPath =
+				blockStyles.background.backgroundImage.ref.split( '.' );
+			blockStyles.background.backgroundImage = getValueFromObjectPath(
+				tree,
+				refPath
+			);
+		}
+
+		// Set default values for block styles except the top-level site background
 		if ( ! isRoot ) {
 			blockStyles = {
 				...blockStyles,
@@ -414,25 +426,8 @@ export function getStylesDeclarations(
 				},
 			};
 		}
-
-		/*
-		 * 2. Resolve dynamic values before they are compiled by the style engine,
-		 * which doesn't (yet) resolve dynamic values.
-		 */
-		if ( blockStyles.background?.backgroundImage?.ref ) {
-			if ( typeof blockStyles.background.backgroundImage !== 'string' ) {
-				const refPath =
-					blockStyles.background.backgroundImage.ref.split( '.' );
-				blockStyles.background.backgroundImage = getValueFromObjectPath(
-					tree,
-					refPath
-				);
-			}
-		}
 	}
 
-	// The goal is to move everything to server side generated engine styles
-	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
 		// Don't output padding properties if padding variables are set or if we're not editing a full template.
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index cd0b017831b795..0642641aa17870 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -63,7 +63,7 @@ export function setBackgroundStyleDefaults( backgroundStyle ) {
 	let backgroundStylesWithDefaults;
 
 	// Set block background defaults.
-	if ( !! backgroundImage?.url ) {
+	if ( !! backgroundImage?.url || typeof backgroundImage === 'string' ) {
 		if ( ! backgroundStyle?.backgroundSize ) {
 			backgroundStylesWithDefaults = {
 				backgroundSize: 'cover',