Check for string types in background image so it will apply defaults …

…for blocks.

Update comments

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.

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',