From 2cec2669a28ce1d6f393f4947b83f7673a2c2451 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 26 Feb 2024 15:25:18 +1100
Subject: [PATCH 01/17] First commit. Define theme.json schema

Updating constants and docs

Fix props
---
 .../theme-json-reference/theme-json-living.md | 13 +++++
 lib/class-wp-theme-json-gutenberg.php         | 12 +++++
 schemas/json/theme.json                       | 50 +++++++++++++++++++
 3 files changed, 75 insertions(+)

diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
index 0b800757b4ecd0..cec4374388284e 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -203,6 +203,19 @@ Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-
 ## Styles
 
 
+### background
+
+Background styles
+
+| Property  | Type   |  Props  |
+| ---       | ---    |---   |
+| backgroundImage | string, object |  |
+| backgroundPosition | string, object |  |
+| backgroundRepeat | string, object |  |
+| backgroundSize | string, object |  |
+
+---
+
 ### border
 
 Border styles.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 10c29a78d6ff6a..cfb929fbf1adc9 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -203,6 +203,7 @@ class WP_Theme_JSON_Gutenberg {
 	 *              removed the `--wp--style--block-gap` property.
 	 * @since 6.2.0 Added `outline-*`, and `min-height` properties.
 	 * @since 6.3.0 Added `writing-mode` property.
+	 * @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
 	 *
 	 * @var array
 	 */
@@ -210,6 +211,10 @@ class WP_Theme_JSON_Gutenberg {
 		'aspect-ratio'                      => array( 'dimensions', 'aspectRatio' ),
 		'background'                        => array( 'color', 'gradient' ),
 		'background-color'                  => array( 'color', 'background' ),
+		'background-image'                  => array( 'background', 'backgroundImage' ),
+		'background-position'               => array( 'background', 'backgroundPosition' ),
+		'background-repeat'                 => array( 'background', 'backgroundRepeat' ),
+		'background-size'                   => array( 'background', 'backgroundSize' ),
 		'border-radius'                     => array( 'border', 'radius' ),
 		'border-top-left-radius'            => array( 'border', 'radius', 'topLeft' ),
 		'border-top-right-radius'           => array( 'border', 'radius', 'topRight' ),
@@ -461,10 +466,17 @@ class WP_Theme_JSON_Gutenberg {
 	 *              added new property `shadow`,
 	 *              updated `blockGap` to be allowed at any level.
 	 * @since 6.2.0 Added `outline`, and `minHeight` properties.
+	 * @since 6.6.0 Added `background` sub properties to top-level only.
 	 *
 	 * @var array
 	 */
 	const VALID_STYLES = array(
+		'background' => array(
+			'backgroundImage'    => 'top',
+			'backgroundPosition' => 'top',
+			'backgroundRepeat'   => 'top',
+			'backgroundSize'     => 'top',
+		),
 		'border'     => array(
 			'color'  => null,
 			'radius' => null,
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index a9823f6cc6534b..8c41972b432c72 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -1110,6 +1110,56 @@
 		"stylesProperties": {
 			"type": "object",
 			"properties": {
+				"background": {
+					"description": "Background styles",
+					"type": "object",
+					"properties": {
+						"backgroundImage": {
+							"description": "Sets the `background-image` CSS property.",
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
+						},
+						"backgroundPosition": {
+							"description": "Sets the `background-position` CSS property.",
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
+						},
+						"backgroundRepeat": {
+							"description": "Sets the `background-repeat` CSS property.",
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
+						},
+						"backgroundSize": {
+							"description": "Sets the `background-size` CSS property.",
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
+						}
+					}
+				},
 				"border": {
 					"description": "Border styles.",
 					"type": "object",

From fc4e2c11d93d9097c1344bd878e77e879e38f211 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 26 Feb 2024 22:11:10 +1100
Subject: [PATCH 02/17] Adding background to global styles output in the site
 editor

---
 .../src/components/global-styles/use-global-styles-output.js | 1 +
 packages/blocks/src/api/constants.js                         | 5 +++++
 2 files changed, 6 insertions(+)

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 4e8ea6dc0ff95b..f5cb968924459a 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
@@ -600,6 +600,7 @@ const STYLE_KEYS = [
 	'filter',
 	'outline',
 	'shadow',
+	'background',
 ];
 
 function pickStyleKeys( treeToPickFrom ) {
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 7062c98404a2a6..fc5738ec125f67 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -36,6 +36,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		requiresOptOut: true,
 		useEngine: true,
 	},
+	backgroundImage: {
+		value: [ 'background', 'backgroundImage' ],
+		support: [ 'background', 'backgroundImage' ],
+		useEngine: false,
+	},
 	backgroundRepeat: {
 		value: [ 'background', 'backgroundRepeat' ],
 		support: [ 'background', 'backgroundRepeat' ],

From cab3e1e2a089a8dfbc252ce2833e167d3a9f51d6 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 27 Feb 2024 16:22:33 +1100
Subject: [PATCH 03/17] Testing generic block support function to calculate
 block support for background and global styles

---
 lib/block-supports/background.php     | 54 +++++++++++++++------------
 lib/class-wp-theme-json-gutenberg.php |  9 +++++
 schemas/json/theme.json               | 18 ++++++++-
 3 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 4b5f5614d64c9f..4d90936b8e50aa 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -30,6 +30,27 @@ function gutenberg_register_background_support( $block_type ) {
 	}
 }
 
+function gutenberg_get_background_support_styles( $background_styles = array() ) {
+	if ( is_string( $background_styles['backgroundImage'] ) ) {
+		$url = $background_styles['backgroundImage'];
+		$background_styles['backgroundImage'] = array(
+			'url'    => $url,
+		);
+	}
+	return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
+}
+
+gutenberg_get_background_support_styles(
+	array(
+		'backgroundImage'  => array(
+			'source' => 'file',
+			'url'    => 'https://example.com/image.jpg',
+		),
+		'backgroundSize'   => 'cover',
+		'backgroundRepeat' => 'no-repeat',
+	)
+);
+
 /**
  * Renders the background styles to the block wrapper.
  * This block support uses the `render_block` hook to ensure that
@@ -46,38 +67,25 @@ function gutenberg_render_background_support( $block_content, $block ) {
 
 	if (
 		! $has_background_image_support ||
-		wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' )
+		wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' ) ||
+		! isset( $block_attributes['style']['background'] )
 	) {
 		return $block_content;
 	}
 
-	$background_image_source = $block_attributes['style']['background']['backgroundImage']['source'] ?? null;
-	$background_image_url    = $block_attributes['style']['background']['backgroundImage']['url'] ?? null;
-	$background_size         = $block_attributes['style']['background']['backgroundSize'] ?? 'cover';
-	$background_position     = $block_attributes['style']['background']['backgroundPosition'] ?? null;
-	$background_repeat       = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
-
-	$background_block_styles = array();
-
-	if (
-		'file' === $background_image_source &&
-		$background_image_url
-	) {
-		// Set file based background URL.
-		// TODO: In a follow-up, similar logic could be added to inject a featured image url.
-		$background_block_styles['backgroundImage']['url'] = $background_image_url;
-		// Only output the background size and repeat when an image url is set.
-		$background_block_styles['backgroundSize']     = $background_size;
-		$background_block_styles['backgroundRepeat']   = $background_repeat;
-		$background_block_styles['backgroundPosition'] = $background_position;
+	$styles					 = array();
+	$style_background        = $block_attributes['style']['background'];
+	$background_image_source = $style_background['backgroundImage']['source'] ?? null;
 
+	if ( 'file' === $background_image_source && ! empty( $style_background['backgroundImage'] ) ) {
+		$style_background['backgroundSize'] = $style_background['backgroundSize'] ?? 'cover';
 		// If the background size is set to `contain` and no position is set, set the position to `center`.
-		if ( 'contain' === $background_size && ! isset( $background_position ) ) {
-			$background_block_styles['backgroundPosition'] = 'center';
+		if ( 'contain' === $style_background['backgroundSize'] && ! isset( $style_background['backgroundPosition'] ) ) {
+			$style_background['backgroundPosition'] = 'center';
 		}
+		$styles = gutenberg_get_background_support_styles( $style_background );
 	}
 
-	$styles = gutenberg_style_engine_get_styles( array( 'background' => $background_block_styles ) );
 
 	if ( ! empty( $styles['css'] ) ) {
 		// Inject background styles to the first element, presuming it's the wrapper, if it exists.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index cfb929fbf1adc9..881005be10e098 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2150,6 +2150,15 @@ protected static function compute_style_properties( $styles, $settings = array()
 				$value = gutenberg_get_typography_font_size_value( array( 'size' => $value ) );
 			}
 
+			// Processes background styles.
+			if ( $value_path[0] === 'background' ) {
+				$value = gutenberg_get_background_support_styles(
+					array(
+						$value_path[1] => $value,
+					)
+				)['declarations'][ $css_property ];
+			}
+
 			if ( 'aspect-ratio' === $css_property ) {
 				// For aspect ratio to work, other dimensions rules must be unset.
 				// This ensures that a fixed height does not override the aspect ratio.
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 8c41972b432c72..45d511182e54c7 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -1118,10 +1118,25 @@
 							"description": "Sets the `background-image` CSS property.",
 							"oneOf": [
 								{
+									"description": "A URL to an image file.",
 									"type": "string"
 								},
 								{
 									"$ref": "#/definitions/refComplete"
+								},
+								{
+									"type": "object",
+									"properties": {
+										"source": {
+											"description": "The origin of the image.",
+											"type": "string"
+										},
+										"url": {
+											"description": "A URL to an image file.",
+											"type": "string"
+										}
+									},
+									"additionalProperties": false
 								}
 							]
 						},
@@ -1158,7 +1173,8 @@
 								}
 							]
 						}
-					}
+					},
+					"additionalProperties": false
 				},
 				"border": {
 					"description": "Border styles.",

From 674f3cd57d905b4417e108413c18dd49236ca856 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 27 Feb 2024 17:04:43 +1100
Subject: [PATCH 04/17] Pass the entire background object

---
 lib/block-supports/background.php     | 22 +++++++++-------------
 lib/class-wp-theme-json-gutenberg.php | 11 ++++++-----
 schemas/json/theme.json               |  6 +++---
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 4d90936b8e50aa..b1494ef1e14ece 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -30,27 +30,24 @@ function gutenberg_register_background_support( $block_type ) {
 	}
 }
 
+// @TODO tests.
 function gutenberg_get_background_support_styles( $background_styles = array() ) {
+	$background_image_source = $background_styles['backgroundImage']['source'] ?? null;
+
 	if ( is_string( $background_styles['backgroundImage'] ) ) {
 		$url = $background_styles['backgroundImage'];
 		$background_styles['backgroundImage'] = array(
 			'url'    => $url,
 		);
 	}
+
+	if ( 'theme' === $background_image_source ) {
+		$background_styles['backgroundImage']['url'] = esc_url( get_theme_file_uri( $background_styles['backgroundImage']['url'] ) );
+	}
+
 	return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
 }
 
-gutenberg_get_background_support_styles(
-	array(
-		'backgroundImage'  => array(
-			'source' => 'file',
-			'url'    => 'https://example.com/image.jpg',
-		),
-		'backgroundSize'   => 'cover',
-		'backgroundRepeat' => 'no-repeat',
-	)
-);
-
 /**
  * Renders the background styles to the block wrapper.
  * This block support uses the `render_block` hook to ensure that
@@ -73,7 +70,6 @@ function gutenberg_render_background_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$styles					 = array();
 	$style_background        = $block_attributes['style']['background'];
 	$background_image_source = $style_background['backgroundImage']['source'] ?? null;
 
@@ -83,9 +79,9 @@ function gutenberg_render_background_support( $block_content, $block ) {
 		if ( 'contain' === $style_background['backgroundSize'] && ! isset( $style_background['backgroundPosition'] ) ) {
 			$style_background['backgroundPosition'] = 'center';
 		}
-		$styles = gutenberg_get_background_support_styles( $style_background );
 	}
 
+	$styles = gutenberg_get_background_support_styles( $style_background );
 
 	if ( ! empty( $styles['css'] ) ) {
 		// Inject background styles to the first element, presuming it's the wrapper, if it exists.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 881005be10e098..1f8b62b6f63d85 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -211,7 +211,7 @@ class WP_Theme_JSON_Gutenberg {
 		'aspect-ratio'                      => array( 'dimensions', 'aspectRatio' ),
 		'background'                        => array( 'color', 'gradient' ),
 		'background-color'                  => array( 'color', 'background' ),
-		'background-image'                  => array( 'background', 'backgroundImage' ),
+		'background-image'                  => array( 'background', 'backgroundImage', 'url' ),
 		'background-position'               => array( 'background', 'backgroundPosition' ),
 		'background-repeat'                 => array( 'background', 'backgroundRepeat' ),
 		'background-size'                   => array( 'background', 'backgroundSize' ),
@@ -355,7 +355,10 @@ class WP_Theme_JSON_Gutenberg {
 		'appearanceTools'               => null,
 		'useRootPaddingAwareAlignments' => null,
 		'background'                    => array(
-			'backgroundImage' => null,
+			'backgroundImage' => array(
+				'url'    => null,
+				'source' => null,
+			),
 			'backgroundSize'  => null,
 		),
 		'border'                        => array(
@@ -2153,9 +2156,7 @@ protected static function compute_style_properties( $styles, $settings = array()
 			// Processes background styles.
 			if ( $value_path[0] === 'background' ) {
 				$value = gutenberg_get_background_support_styles(
-					array(
-						$value_path[1] => $value,
-					)
+					$styles['background'],
 				)['declarations'][ $css_property ];
 			}
 
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 45d511182e54c7..5d21d67282d7ea 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -1121,9 +1121,6 @@
 									"description": "A URL to an image file.",
 									"type": "string"
 								},
-								{
-									"$ref": "#/definitions/refComplete"
-								},
 								{
 									"type": "object",
 									"properties": {
@@ -1137,6 +1134,9 @@
 										}
 									},
 									"additionalProperties": false
+								},
+								{
+									"$ref": "#/definitions/refComplete"
 								}
 							]
 						},

From 8d96cc6ba4bd1509b2c714610396edd8bb55d4e1 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 27 Feb 2024 17:09:16 +1100
Subject: [PATCH 05/17] testing out theme source

---
 lib/block-supports/background.php | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index b1494ef1e14ece..7e76fe662339af 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -30,12 +30,18 @@ function gutenberg_register_background_support( $block_type ) {
 	}
 }
 
-// @TODO tests.
+/**
+ * Given a theme.json or block background styles, returns the background styles for a block.
+ *
+ * @param  array  $background_styles Background style properties.
+ * @return array                     Style engine array of CSS string and style declarations.
+ */
 function gutenberg_get_background_support_styles( $background_styles = array() ) {
 	$background_image_source = $background_styles['backgroundImage']['source'] ?? null;
 
 	if ( is_string( $background_styles['backgroundImage'] ) ) {
-		$url = $background_styles['backgroundImage'];
+		$url                                 = $background_styles['backgroundImage'];
+		$background_image_source             = 'file';
 		$background_styles['backgroundImage'] = array(
 			'url'    => $url,
 		);

From d2f308c2c6e2cf895342fde85320e623f73e96b1 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 27 Feb 2024 19:16:18 +1100
Subject: [PATCH 06/17] Comments and some checks

---
 lib/block-supports/background.php     | 7 +++++++
 lib/class-wp-theme-json-gutenberg.php | 6 ++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 7e76fe662339af..979af3cbf78cc9 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -39,6 +39,10 @@ function gutenberg_register_background_support( $block_type ) {
 function gutenberg_get_background_support_styles( $background_styles = array() ) {
 	$background_image_source = $background_styles['backgroundImage']['source'] ?? null;
 
+	/*
+	 * If the background image is a string, it's a URL.
+	 * Assume "file" source.
+	 */
 	if ( is_string( $background_styles['backgroundImage'] ) ) {
 		$url                                 = $background_styles['backgroundImage'];
 		$background_image_source             = 'file';
@@ -47,6 +51,9 @@ function gutenberg_get_background_support_styles( $background_styles = array() )
 		);
 	}
 
+	/*
+	 * "theme" source implies relative path to the theme directory
+	 */
 	if ( 'theme' === $background_image_source ) {
 		$background_styles['backgroundImage']['url'] = esc_url( get_theme_file_uri( $background_styles['backgroundImage']['url'] ) );
 	}
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 1f8b62b6f63d85..7e34f2313da379 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2155,9 +2155,11 @@ protected static function compute_style_properties( $styles, $settings = array()
 
 			// Processes background styles.
 			if ( $value_path[0] === 'background' ) {
-				$value = gutenberg_get_background_support_styles(
+				$background_styles = gutenberg_get_background_support_styles(
 					$styles['background'],
-				)['declarations'][ $css_property ];
+				);
+
+				$value = $background_styles['declarations'][$css_property] ?? $value;
 			}
 
 			if ( 'aspect-ratio' === $css_property ) {

From 97d3f7afa13049d7466eeebdec655fc3181e5119 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 28 Feb 2024 15:35:48 +1100
Subject: [PATCH 07/17] Added image fixture for theme source Added tests
 Supporting string and object for backgroundImage

---
 lib/block-supports/background.php             |  27 +++---
 lib/class-wp-theme-json-gutenberg.php         |  20 ++---
 phpunit/block-supports/background-test.php    |  84 ++++++++++++++++++
 .../images/1024x768_e2e_test_image_size.jpeg  | Bin 0 -> 22133 bytes
 4 files changed, 106 insertions(+), 25 deletions(-)
 create mode 100644 phpunit/data/themedir1/block-theme/assets/images/1024x768_e2e_test_image_size.jpeg

diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 979af3cbf78cc9..86516aa9e4e2c8 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -44,13 +44,21 @@ function gutenberg_get_background_support_styles( $background_styles = array() )
 	 * Assume "file" source.
 	 */
 	if ( is_string( $background_styles['backgroundImage'] ) ) {
-		$url                                 = $background_styles['backgroundImage'];
-		$background_image_source             = 'file';
+		$url                                  = esc_url( $background_styles['backgroundImage'] );
+		$background_image_source              = 'file';
 		$background_styles['backgroundImage'] = array(
-			'url'    => $url,
+			'url' => $url,
 		);
 	}
 
+	if ( ! empty( $background_styles['backgroundImage']['url'] ) ) {
+		$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
+		// If the background size is set to `contain` and no position is set, set the position to `center`.
+		if ( 'contain' === $background_styles['backgroundSize'] && ! isset( $background_styles['backgroundPosition'] ) ) {
+			$background_styles['backgroundPosition'] = 'center';
+		}
+	}
+
 	/*
 	 * "theme" source implies relative path to the theme directory
 	 */
@@ -83,18 +91,7 @@ function gutenberg_render_background_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$style_background        = $block_attributes['style']['background'];
-	$background_image_source = $style_background['backgroundImage']['source'] ?? null;
-
-	if ( 'file' === $background_image_source && ! empty( $style_background['backgroundImage'] ) ) {
-		$style_background['backgroundSize'] = $style_background['backgroundSize'] ?? 'cover';
-		// If the background size is set to `contain` and no position is set, set the position to `center`.
-		if ( 'contain' === $style_background['backgroundSize'] && ! isset( $style_background['backgroundPosition'] ) ) {
-			$style_background['backgroundPosition'] = 'center';
-		}
-	}
-
-	$styles = gutenberg_get_background_support_styles( $style_background );
+	$styles = gutenberg_get_background_support_styles( $block_attributes['style']['background'] );
 
 	if ( ! empty( $styles['css'] ) ) {
 		// Inject background styles to the first element, presuming it's the wrapper, if it exists.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 7e34f2313da379..aa3edbd6087ccf 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -211,7 +211,7 @@ class WP_Theme_JSON_Gutenberg {
 		'aspect-ratio'                      => array( 'dimensions', 'aspectRatio' ),
 		'background'                        => array( 'color', 'gradient' ),
 		'background-color'                  => array( 'color', 'background' ),
-		'background-image'                  => array( 'background', 'backgroundImage', 'url' ),
+		'background-image'                  => array( 'background', 'backgroundImage' ),
 		'background-position'               => array( 'background', 'backgroundPosition' ),
 		'background-repeat'                 => array( 'background', 'backgroundRepeat' ),
 		'background-size'                   => array( 'background', 'backgroundSize' ),
@@ -2135,6 +2135,15 @@ protected static function compute_style_properties( $styles, $settings = array()
 				}
 			}
 
+			// Processes background styles.
+			if ( $value_path[0] === 'background' && isset( $styles['background'] ) ) {
+				$background_styles = gutenberg_get_background_support_styles(
+					$styles['background'],
+				);
+
+				$value = $background_styles['declarations'][$css_property] ?? $value;
+			}
+
 			// Skip if empty and not "0" or value represents array of longhand values.
 			$has_missing_value = empty( $value ) && ! is_numeric( $value );
 			if ( $has_missing_value || is_array( $value ) ) {
@@ -2153,15 +2162,6 @@ protected static function compute_style_properties( $styles, $settings = array()
 				$value = gutenberg_get_typography_font_size_value( array( 'size' => $value ) );
 			}
 
-			// Processes background styles.
-			if ( $value_path[0] === 'background' ) {
-				$background_styles = gutenberg_get_background_support_styles(
-					$styles['background'],
-				);
-
-				$value = $background_styles['declarations'][$css_property] ?? $value;
-			}
-
 			if ( 'aspect-ratio' === $css_property ) {
 				// For aspect ratio to work, other dimensions rules must be unset.
 				// This ensures that a fixed height does not override the aspect ratio.
diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
index 92e1d2fc345a0e..a7ba3558d8a1b1 100644
--- a/phpunit/block-supports/background-test.php
+++ b/phpunit/block-supports/background-test.php
@@ -137,6 +137,18 @@ public function data_background_block_support() {
 				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
 				'wrapper'             => '<div>Content</div>',
 			),
+			'background image style is applied when backgroundImage is a string' => array(
+				'theme_name'          => 'block-theme-child-with-fluid-typography',
+				'block_name'          => 'test/background-rules-are-output',
+				'background_settings' => array(
+					'backgroundImage' => true,
+				),
+				'background_style'    => array(
+					'backgroundImage' => 'https://example.com/image.jpg',
+				),
+				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'wrapper'             => '<div>Content</div>',
+			),
 			'background image style with contain, position, and repeat is applied' => array(
 				'theme_name'          => 'block-theme-child-with-fluid-typography',
 				'block_name'          => 'test/background-rules-are-output',
@@ -201,4 +213,76 @@ public function data_background_block_support() {
 			),
 		);
 	}
+
+	/**
+	 * Tests generating background styles.
+	 *
+	 * @covers ::gutenberg_get_background_support_styles
+	 *
+	 * @dataProvider data_get_background_support_styles
+	 *
+	 * @param mixed  $background_style The background styles within the block attributes.
+	 * @param string $expected_css     Expected markup for the block wrapper.
+	 */
+	public function test_get_background_support_styles( $background_style, $expected_css ) {
+		switch_theme( 'block-theme' );
+		$actual = gutenberg_get_background_support_styles( $background_style )['css'];
+
+		$this->assertEquals(
+			$expected_css,
+			$actual,
+			'Background CSS should be correct.'
+		);
+	}
+	public function data_get_background_support_styles() {
+		return array(
+			'css generated with file source'         => array(
+				'background_style' => array(
+					'backgroundImage' => array(
+						'url'    => 'https://example.com/image.jpg',
+						'source' => 'file',
+					),
+				),
+				'expected_css'     => "background-image:url('https://example.com/image.jpg');background-size:cover;",
+			),
+			'css generated with implied file source' => array(
+				'background_style' => array(
+					'backgroundImage' => 'https://example.com/image.jpg',
+				),
+				'expected_css'     => "background-image:url('https://example.com/image.jpg');background-size:cover;",
+			),
+			'css generated with escaped URL'         => array(
+				'background_style' => array(
+					'backgroundImage' => 'https://example.com/image.jpg?q=pom-poms+%3Cscript%3Eevil_script()%3C/script%3E',
+				),
+				'expected_css'     => 'background-size:cover;',
+			),
+			'css generated with expected properties' => array(
+				'background_style' => array(
+					'backgroundImage'    => 'https://example.com/image.jpg',
+					'backgroundSize'     => '6px, auto, contain',
+					'backgroundPosition' => 'bottom 10px right 20px',
+					'backgroundRepeat'   => 'repeat space',
+				),
+				'expected_css'     => "background-image:url('https://example.com/image.jpg');background-position:bottom 10px right 20px;background-repeat:repeat space;background-size:6px, auto, contain;",
+			),
+			'css generated for file source with contain size should add center position' => array(
+				'background_style' => array(
+					'backgroundImage' => 'https://example.com/image.jpg',
+					'backgroundSize'  => 'contain',
+				),
+				'expected_css'     => "background-image:url('https://example.com/image.jpg');background-position:center;background-size:contain;",
+			),
+			'css generated with theme source'        => array(
+				'background_style' => array(
+					'backgroundImage' => array(
+						'url'    => 'assets/image/1024x768_e2e_test_image_size.jpeg',
+						'source' => 'theme',
+					),
+					'backgroundSize'  => 'contain',
+				),
+				'expected_css'     => "background-image:url('http://localhost:8889/wp-content/plugins/gutenberg/phpunit/data/themedir1/block-theme/assets/image/1024x768_e2e_test_image_size.jpeg');background-position:center;background-size:contain;",
+			),
+		);
+	}
 }
diff --git a/phpunit/data/themedir1/block-theme/assets/images/1024x768_e2e_test_image_size.jpeg b/phpunit/data/themedir1/block-theme/assets/images/1024x768_e2e_test_image_size.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..694e710f77c5270a8acfbe813af4934a2bbbe233
GIT binary patch
literal 22133
zcmeIzH&7Kp9LMqh-tN7m1xGS84i6BtBN!V7&?meOjMxDt?7)CJ<BVXo!>pAU(GC<-
zC5obU7zvFC#tO{Roc9D}#>x@P@Bijzi`)6n{C4;D<94|(BrX~$j)=096nT%hy;3M@
zoE2*_&K63!x5No(F`|_tmZP+z+;*8JqU@30GFr;g#`gIG!O#S6LTj8@N^8q#+cw6V
zz1{mR#<Am5vhsZiCFTBbbz*j1Lt`Mdpt&unv~w^mr=q4l7)qWrdCJuE=^2?bX6DYC
zJ!kH``GpG>MivznM;9+yx@`H1vXzyqR<BvRu4?^;jhi;tZrQqR=dRs*_U_w%;NYRd
zM~)sle&XcmGiT48ztD8?Qp@EltyiyIzj5>So%Xx;I_^Js_~`MIr_Y{ub@%kW>>qgb
z`pw&S?}t8o{Pg+D*Kgm4W4V-<^H+@o`y-dP2+A@>8-Fa9vTD6oJH}4Q^2O(u_{*yk
z!r66!#Da##=C)vJPU&D$MNMZYIW4y@eJB>~XR^NwR{u}Qeg_-N)gu$N@-|O9k|(a@
z4NIn+vUY?RSOQJ~KLU3F*C8UHAsV6~8loW@q9GchAsV6~8loW@q9GchAsV6~8loW@
zq9GchAsV6~8loW@q9GchAsV6~8loW@q9GchAsV6~8loW@q9GchAsV6~8loW@q9Gch
nAsV6~8loW@q9GchAsV6~8loW@q9GchAsV6~8vcI`#qIt9PFk%E

literal 0
HcmV?d00001


From f93b197bda304f85d9822336447a5b6b6c6bcf12 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 28 Feb 2024 15:44:10 +1100
Subject: [PATCH 08/17] Use the JS style engine to generate styles

---
 packages/blocks/src/api/constants.js                 |  2 +-
 packages/style-engine/src/styles/background/index.ts | 10 +++++++++-
 packages/style-engine/src/types.ts                   | 10 ++++++----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index fc5738ec125f67..62933d69d764f4 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -39,7 +39,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	backgroundImage: {
 		value: [ 'background', 'backgroundImage' ],
 		support: [ 'background', 'backgroundImage' ],
-		useEngine: false,
+		useEngine: true,
 	},
 	backgroundRepeat: {
 		value: [ 'background', 'backgroundRepeat' ],
diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
index 8ce8c7d577fb28..1cb3a36c80d9d5 100644
--- a/packages/style-engine/src/styles/background/index.ts
+++ b/packages/style-engine/src/styles/background/index.ts
@@ -7,7 +7,7 @@ import { generateRule, safeDecodeURI } from '../utils';
 const backgroundImage = {
 	name: 'backgroundImage',
 	generate: ( style: Style, options: StyleOptions ) => {
-		const _backgroundImage = style?.background?.backgroundImage;
+		let _backgroundImage = style?.background?.backgroundImage;
 		const _backgroundSize = style?.background?.backgroundSize;
 
 		const styleRules: GeneratedCSSRule[] = [];
@@ -16,6 +16,14 @@ const backgroundImage = {
 			return styleRules;
 		}
 
+		if ( typeof _backgroundImage === 'string' ) {
+			const imageUrl = _backgroundImage;
+			_backgroundImage = {
+				source: 'file',
+				url: imageUrl,
+			};
+		}
+
 		if ( _backgroundImage?.source === 'file' && _backgroundImage?.url ) {
 			styleRules.push( {
 				selector: options.selector,
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index b5085ce53f1363..4ada5593302601 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -22,10 +22,12 @@ export interface BorderIndividualStyles< T extends BoxEdge > {
 
 export interface Style {
 	background?: {
-		backgroundImage: {
-			url?: CSSProperties[ 'backgroundImage' ];
-			source?: string;
-		};
+		backgroundImage:
+			| string
+			| {
+					url?: CSSProperties[ 'backgroundImage' ];
+					source?: string;
+			  };
 		backgroundPosition?: CSSProperties[ 'backgroundPosition' ];
 		backgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];
 		backgroundSize?: CSSProperties[ 'backgroundSize' ];

From 22595857746c7d0b2147e9e82b87487a575503a7 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 28 Feb 2024 19:59:42 +1100
Subject: [PATCH 09/17] Default background size is always 'cover' - this
 matches current behaviour Now assuming that a string value will have it's own
 `url()`

---
 lib/block-supports/background.php             | 19 +++++---------
 .../src/styles/background/index.ts            | 14 ++++++----
 packages/style-engine/src/test/index.js       | 26 +++++++++++++++++++
 packages/style-engine/src/types.ts            |  7 +----
 phpunit/block-supports/background-test.php    | 18 ++++++++-----
 5 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 86516aa9e4e2c8..96a48855cdac88 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -37,22 +37,15 @@ function gutenberg_register_background_support( $block_type ) {
  * @return array                     Style engine array of CSS string and style declarations.
  */
 function gutenberg_get_background_support_styles( $background_styles = array() ) {
-	$background_image_source = $background_styles['backgroundImage']['source'] ?? null;
+	$background_image_source             = isset( $background_styles['backgroundImage']['source'] ) ? $background_styles['backgroundImage']['source'] : null;
+	$background_styles['backgroundSize'] = ! empty( $background_styles['backgroundSize'] ) ? $background_styles['backgroundSize'] : 'cover';
+
 
 	/*
-	 * If the background image is a string, it's a URL.
-	 * Assume "file" source.
+	 * @TODO document
+	 * $background_styles['backgroundImage']['url'] and file source implies an image URL path.
 	 */
-	if ( is_string( $background_styles['backgroundImage'] ) ) {
-		$url                                  = esc_url( $background_styles['backgroundImage'] );
-		$background_image_source              = 'file';
-		$background_styles['backgroundImage'] = array(
-			'url' => $url,
-		);
-	}
-
-	if ( ! empty( $background_styles['backgroundImage']['url'] ) ) {
-		$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
+	if ( ( 'file' === $background_image_source || 'theme' === $background_image_source ) && ! empty( $background_styles['backgroundImage']['url'] ) ) {
 		// If the background size is set to `contain` and no position is set, set the position to `center`.
 		if ( 'contain' === $background_styles['backgroundSize'] && ! isset( $background_styles['backgroundPosition'] ) ) {
 			$background_styles['backgroundPosition'] = 'center';
diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
index 1cb3a36c80d9d5..d2237b35a3e6dd 100644
--- a/packages/style-engine/src/styles/background/index.ts
+++ b/packages/style-engine/src/styles/background/index.ts
@@ -16,12 +16,16 @@ const backgroundImage = {
 			return styleRules;
 		}
 
+		/*
+		 * If the background image is a string, it could already contain a url() function,
+		 * or have a linear-gradient value.
+		 */
 		if ( typeof _backgroundImage === 'string' ) {
-			const imageUrl = _backgroundImage;
-			_backgroundImage = {
-				source: 'file',
-				url: imageUrl,
-			};
+			styleRules.push( {
+				selector: options.selector,
+				key: 'backgroundImage',
+				value: _backgroundImage,
+			} );
 		}
 
 		if ( _backgroundImage?.source === 'file' && _backgroundImage?.url ) {
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index b679775d3f37f4..f53c13d752e7fc 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -459,6 +459,32 @@ describe( 'getCSSRules', () => {
 		] );
 	} );
 
+	it( 'should output background image value when that value is a string', () => {
+		expect(
+			getCSSRules(
+				{
+					background: {
+						backgroundImage: "linear-gradient(to bottom,rgb(255 255 0 / 50%),rgb(0 0 255 / 50%), url('https://example.com/image.jpg')",
+					},
+				},
+				{
+					selector: '.some-selector',
+				}
+			)
+		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'backgroundImage',
+				value: "linear-gradient(to bottom,rgb(255 255 0 / 50%),rgb(0 0 255 / 50%), url('https://example.com/image.jpg')",
+			},
+			{
+				selector: '.some-selector',
+				key: 'backgroundSize',
+				value: 'cover',
+			},
+		] );
+	} );
+
 	it( 'should output fallback center position for contain background size', () => {
 		expect(
 			getCSSRules(
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 4ada5593302601..7dcc3deec96795 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -22,12 +22,7 @@ export interface BorderIndividualStyles< T extends BoxEdge > {
 
 export interface Style {
 	background?: {
-		backgroundImage:
-			| string
-			| {
-					url?: CSSProperties[ 'backgroundImage' ];
-					source?: string;
-			  };
+		backgroundImage?: { url?: CSSProperties[ 'backgroundImage' ]; source?: string } | CSSProperties[ 'backgroundImage' ];
 		backgroundPosition?: CSSProperties[ 'backgroundPosition' ];
 		backgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];
 		backgroundSize?: CSSProperties[ 'backgroundSize' ];
diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
index a7ba3558d8a1b1..490b51957f1608 100644
--- a/phpunit/block-supports/background-test.php
+++ b/phpunit/block-supports/background-test.php
@@ -144,7 +144,7 @@ public function data_background_block_support() {
 					'backgroundImage' => true,
 				),
 				'background_style'    => array(
-					'backgroundImage' => 'https://example.com/image.jpg',
+					'backgroundImage' => "url('https://example.com/image.jpg')",
 				),
 				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
 				'wrapper'             => '<div>Content</div>',
@@ -245,21 +245,24 @@ public function data_get_background_support_styles() {
 				),
 				'expected_css'     => "background-image:url('https://example.com/image.jpg');background-size:cover;",
 			),
-			'css generated with implied file source' => array(
+			'css generated where backgroundImage is a string' => array(
 				'background_style' => array(
-					'backgroundImage' => 'https://example.com/image.jpg',
+					'backgroundImage' => "url('https://example.com/image.jpg')",
 				),
 				'expected_css'     => "background-image:url('https://example.com/image.jpg');background-size:cover;",
 			),
 			'css generated with escaped URL'         => array(
 				'background_style' => array(
-					'backgroundImage' => 'https://example.com/image.jpg?q=pom-poms+%3Cscript%3Eevil_script()%3C/script%3E',
+					'backgroundImage' => array(
+						'url' => 'https://example.com/image.jpg?q=pom-poms+%3Cscript%3Eevil_script()%3C/script%3E',
+					),
+					'backgroundSize'  => 'cover',
 				),
 				'expected_css'     => 'background-size:cover;',
 			),
 			'css generated with expected properties' => array(
 				'background_style' => array(
-					'backgroundImage'    => 'https://example.com/image.jpg',
+					'backgroundImage'    => "url('https://example.com/image.jpg')",
 					'backgroundSize'     => '6px, auto, contain',
 					'backgroundPosition' => 'bottom 10px right 20px',
 					'backgroundRepeat'   => 'repeat space',
@@ -268,7 +271,10 @@ public function data_get_background_support_styles() {
 			),
 			'css generated for file source with contain size should add center position' => array(
 				'background_style' => array(
-					'backgroundImage' => 'https://example.com/image.jpg',
+					'backgroundImage' => array(
+						'url'    => 'https://example.com/image.jpg',
+						'source' => 'file',
+					),
 					'backgroundSize'  => 'contain',
 				),
 				'expected_css'     => "background-image:url('https://example.com/image.jpg');background-position:center;background-size:contain;",

From ab581d6a05dc99aaacefced8b9b57921832ff3ff Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 28 Feb 2024 20:26:13 +1100
Subject: [PATCH 10/17] The linter of doom

---
 lib/block-supports/background.php                    | 1 -
 packages/style-engine/src/styles/background/index.ts | 8 ++++++--
 packages/style-engine/src/test/index.js              | 3 ++-
 packages/style-engine/src/types.ts                   | 4 +++-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 96a48855cdac88..85cd3a95f7121d 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -40,7 +40,6 @@ function gutenberg_get_background_support_styles( $background_styles = array() )
 	$background_image_source             = isset( $background_styles['backgroundImage']['source'] ) ? $background_styles['backgroundImage']['source'] : null;
 	$background_styles['backgroundSize'] = ! empty( $background_styles['backgroundSize'] ) ? $background_styles['backgroundSize'] : 'cover';
 
-
 	/*
 	 * @TODO document
 	 * $background_styles['backgroundImage']['url'] and file source implies an image URL path.
diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
index d2237b35a3e6dd..f738cefd5e83a4 100644
--- a/packages/style-engine/src/styles/background/index.ts
+++ b/packages/style-engine/src/styles/background/index.ts
@@ -7,7 +7,7 @@ import { generateRule, safeDecodeURI } from '../utils';
 const backgroundImage = {
 	name: 'backgroundImage',
 	generate: ( style: Style, options: StyleOptions ) => {
-		let _backgroundImage = style?.background?.backgroundImage;
+		const _backgroundImage = style?.background?.backgroundImage;
 		const _backgroundSize = style?.background?.backgroundSize;
 
 		const styleRules: GeneratedCSSRule[] = [];
@@ -28,7 +28,11 @@ const backgroundImage = {
 			} );
 		}
 
-		if ( _backgroundImage?.source === 'file' && _backgroundImage?.url ) {
+		if (
+			typeof _backgroundImage === 'object' &&
+			_backgroundImage?.source === 'file' &&
+			_backgroundImage?.url
+		) {
 			styleRules.push( {
 				selector: options.selector,
 				key: 'backgroundImage',
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index f53c13d752e7fc..bc76278de9791c 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -464,7 +464,8 @@ describe( 'getCSSRules', () => {
 			getCSSRules(
 				{
 					background: {
-						backgroundImage: "linear-gradient(to bottom,rgb(255 255 0 / 50%),rgb(0 0 255 / 50%), url('https://example.com/image.jpg')",
+						backgroundImage:
+							"linear-gradient(to bottom,rgb(255 255 0 / 50%),rgb(0 0 255 / 50%), url('https://example.com/image.jpg')",
 					},
 				},
 				{
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 7dcc3deec96795..5b361836a8e375 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -22,7 +22,9 @@ export interface BorderIndividualStyles< T extends BoxEdge > {
 
 export interface Style {
 	background?: {
-		backgroundImage?: { url?: CSSProperties[ 'backgroundImage' ]; source?: string } | CSSProperties[ 'backgroundImage' ];
+		backgroundImage?:
+			| { url?: CSSProperties[ 'backgroundImage' ]; source?: string }
+			| CSSProperties[ 'backgroundImage' ];
 		backgroundPosition?: CSSProperties[ 'backgroundPosition' ];
 		backgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];
 		backgroundSize?: CSSProperties[ 'backgroundSize' ];

From 069762e5bd0ec0e16db37322cde79ebc69a1715c Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 29 Feb 2024 10:43:40 +1100
Subject: [PATCH 11/17] Whoops, reverting bad setting

---
 lib/class-wp-theme-json-gutenberg.php | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index aa3edbd6087ccf..dfcab6bd680376 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -355,10 +355,7 @@ class WP_Theme_JSON_Gutenberg {
 		'appearanceTools'               => null,
 		'useRootPaddingAwareAlignments' => null,
 		'background'                    => array(
-			'backgroundImage' => array(
-				'url'    => null,
-				'source' => null,
-			),
+			'backgroundImage' => null,
 			'backgroundSize'  => null,
 		),
 		'border'                        => array(

From 6bfcb74744c12a0880ec29663046f63deb317d38 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 29 Feb 2024 10:46:47 +1100
Subject: [PATCH 12/17] Reverting source:theme support

---
 lib/block-supports/background.php          | 15 +++------------
 phpunit/block-supports/background-test.php | 10 ----------
 2 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 85cd3a95f7121d..64a9dbaf7f2774 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -33,6 +33,8 @@ function gutenberg_register_background_support( $block_type ) {
 /**
  * Given a theme.json or block background styles, returns the background styles for a block.
  *
+ * @since 6.6.0
+ *
  * @param  array  $background_styles Background style properties.
  * @return array                     Style engine array of CSS string and style declarations.
  */
@@ -40,24 +42,13 @@ function gutenberg_get_background_support_styles( $background_styles = array() )
 	$background_image_source             = isset( $background_styles['backgroundImage']['source'] ) ? $background_styles['backgroundImage']['source'] : null;
 	$background_styles['backgroundSize'] = ! empty( $background_styles['backgroundSize'] ) ? $background_styles['backgroundSize'] : 'cover';
 
-	/*
-	 * @TODO document
-	 * $background_styles['backgroundImage']['url'] and file source implies an image URL path.
-	 */
-	if ( ( 'file' === $background_image_source || 'theme' === $background_image_source ) && ! empty( $background_styles['backgroundImage']['url'] ) ) {
+	if ( 'file' === $background_image_source && ! empty( $background_styles['backgroundImage']['url'] ) ) {
 		// If the background size is set to `contain` and no position is set, set the position to `center`.
 		if ( 'contain' === $background_styles['backgroundSize'] && ! isset( $background_styles['backgroundPosition'] ) ) {
 			$background_styles['backgroundPosition'] = 'center';
 		}
 	}
 
-	/*
-	 * "theme" source implies relative path to the theme directory
-	 */
-	if ( 'theme' === $background_image_source ) {
-		$background_styles['backgroundImage']['url'] = esc_url( get_theme_file_uri( $background_styles['backgroundImage']['url'] ) );
-	}
-
 	return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
 }
 
diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
index 490b51957f1608..645948b6a34b85 100644
--- a/phpunit/block-supports/background-test.php
+++ b/phpunit/block-supports/background-test.php
@@ -279,16 +279,6 @@ public function data_get_background_support_styles() {
 				),
 				'expected_css'     => "background-image:url('https://example.com/image.jpg');background-position:center;background-size:contain;",
 			),
-			'css generated with theme source'        => array(
-				'background_style' => array(
-					'backgroundImage' => array(
-						'url'    => 'assets/image/1024x768_e2e_test_image_size.jpeg',
-						'source' => 'theme',
-					),
-					'backgroundSize'  => 'contain',
-				),
-				'expected_css'     => "background-image:url('http://localhost:8889/wp-content/plugins/gutenberg/phpunit/data/themedir1/block-theme/assets/image/1024x768_e2e_test_image_size.jpeg');background-position:center;background-size:contain;",
-			),
 		);
 	}
 }

From 3dc2724bab3861ca223c3f8aa0974e8a786e16f0 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 29 Feb 2024 10:52:02 +1100
Subject: [PATCH 13/17] Update theme.json schema

---
 schemas/json/theme.json | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 5d21d67282d7ea..549cf5cd2207a1 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -1118,15 +1118,17 @@
 							"description": "Sets the `background-image` CSS property.",
 							"oneOf": [
 								{
-									"description": "A URL to an image file.",
+									"description": "A valid CSS value for the background-image property.",
 									"type": "string"
 								},
 								{
 									"type": "object",
 									"properties": {
 										"source": {
-											"description": "The origin of the image.",
-											"type": "string"
+											"description": "The origin of the image. 'file' denotes that the 'url' is a path to an image or other file.",
+											"type": "string",
+											"enum": [ "file" ],
+											"default": "file"
 										},
 										"url": {
 											"description": "A URL to an image file.",

From 3099a551b97768efe65152b5a59baa1f27a32168 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 29 Feb 2024 11:05:09 +1100
Subject: [PATCH 14/17] Tests

---
 phpunit/class-wp-theme-json-test.php | 46 ++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 376eaaff4a2051..4220288b720362 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -4745,6 +4745,52 @@ public function test_get_shadow_styles_for_blocks() {
 		$this->assertSame( $expected_styles, $theme_json->get_stylesheet() );
 	}
 
+	public function test_get_top_level_background_image_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage'    => array(
+							'url' => 'http://example.org/image.png',
+						),
+						'backgroundSize'     => 'cover',
+						'backgroundRepeat'   => 'no-repeat',
+						'backgroundPosition' => 'center center',
+					),
+					'blocks'     => array(
+						'core/paragraph' => array(
+							'background' => array(
+								'backgroundImage'    => array(
+									'url'    => 'http://example.org/image.png',
+									'source' => 'file',
+								),
+								'backgroundSize'     => 'cover',
+								'backgroundRepeat'   => 'no-repeat',
+								'backgroundPosition' => 'center center',
+							),
+						),
+					),
+					'elements'   => array(
+						'button' => array(
+							'background' => array(
+								'backgroundImage'    => array(
+									'url' => 'http://example.org/image.png',
+								),
+								'backgroundSize'     => 'cover',
+								'backgroundRepeat'   => 'no-repeat',
+								'backgroundPosition' => 'center center',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected_styles = "body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}";
+		$this->assertSame( $expected_styles, $theme_json->get_stylesheet() );
+	}
+
 	public function test_get_custom_css_handles_global_custom_css() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(

From 0abcb6d1e896ba444825f1503f9dde66683f15dc Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 29 Feb 2024 11:06:51 +1100
Subject: [PATCH 15/17] LINTY!

---
 lib/class-wp-theme-json-gutenberg.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index dfcab6bd680376..9a5e26fc9c1c2e 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2138,7 +2138,7 @@ protected static function compute_style_properties( $styles, $settings = array()
 					$styles['background'],
 				);
 
-				$value = $background_styles['declarations'][$css_property] ?? $value;
+				$value = $background_styles['declarations'][ $css_property ] ?? $value;
 			}
 
 			// Skip if empty and not "0" or value represents array of longhand values.

From d217355855e096a6023a251355be02fb2d79a2e6 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 29 Feb 2024 11:10:39 +1100
Subject: [PATCH 16/17] We don't need assets in block theme since the "theme"
 source functionality was reverted

---
 phpunit/block-supports/background-test.php      |   1 -
 .../images/1024x768_e2e_test_image_size.jpeg    | Bin 22133 -> 0 bytes
 2 files changed, 1 deletion(-)
 delete mode 100644 phpunit/data/themedir1/block-theme/assets/images/1024x768_e2e_test_image_size.jpeg

diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
index 645948b6a34b85..a4ddb7da3f74af 100644
--- a/phpunit/block-supports/background-test.php
+++ b/phpunit/block-supports/background-test.php
@@ -225,7 +225,6 @@ public function data_background_block_support() {
 	 * @param string $expected_css     Expected markup for the block wrapper.
 	 */
 	public function test_get_background_support_styles( $background_style, $expected_css ) {
-		switch_theme( 'block-theme' );
 		$actual = gutenberg_get_background_support_styles( $background_style )['css'];
 
 		$this->assertEquals(
diff --git a/phpunit/data/themedir1/block-theme/assets/images/1024x768_e2e_test_image_size.jpeg b/phpunit/data/themedir1/block-theme/assets/images/1024x768_e2e_test_image_size.jpeg
deleted file mode 100644
index 694e710f77c5270a8acfbe813af4934a2bbbe233..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 22133
zcmeIzH&7Kp9LMqh-tN7m1xGS84i6BtBN!V7&?meOjMxDt?7)CJ<BVXo!>pAU(GC<-
zC5obU7zvFC#tO{Roc9D}#>x@P@Bijzi`)6n{C4;D<94|(BrX~$j)=096nT%hy;3M@
zoE2*_&K63!x5No(F`|_tmZP+z+;*8JqU@30GFr;g#`gIG!O#S6LTj8@N^8q#+cw6V
zz1{mR#<Am5vhsZiCFTBbbz*j1Lt`Mdpt&unv~w^mr=q4l7)qWrdCJuE=^2?bX6DYC
zJ!kH``GpG>MivznM;9+yx@`H1vXzyqR<BvRu4?^;jhi;tZrQqR=dRs*_U_w%;NYRd
zM~)sle&XcmGiT48ztD8?Qp@EltyiyIzj5>So%Xx;I_^Js_~`MIr_Y{ub@%kW>>qgb
z`pw&S?}t8o{Pg+D*Kgm4W4V-<^H+@o`y-dP2+A@>8-Fa9vTD6oJH}4Q^2O(u_{*yk
z!r66!#Da##=C)vJPU&D$MNMZYIW4y@eJB>~XR^NwR{u}Qeg_-N)gu$N@-|O9k|(a@
z4NIn+vUY?RSOQJ~KLU3F*C8UHAsV6~8loW@q9GchAsV6~8loW@q9GchAsV6~8loW@
zq9GchAsV6~8loW@q9GchAsV6~8loW@q9GchAsV6~8loW@q9GchAsV6~8loW@q9Gch
nAsV6~8loW@q9GchAsV6~8loW@q9GchAsV6~8vcI`#qIt9PFk%E


From f44e14579f7679fb5a9e99a2b49e44e4a1cfcdc0 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 29 Feb 2024 11:14:03 +1100
Subject: [PATCH 17/17] Something about yoda conditions

---
 lib/class-wp-theme-json-gutenberg.php | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 9a5e26fc9c1c2e..165ff997b3180a 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2133,12 +2133,9 @@ protected static function compute_style_properties( $styles, $settings = array()
 			}
 
 			// Processes background styles.
-			if ( $value_path[0] === 'background' && isset( $styles['background'] ) ) {
-				$background_styles = gutenberg_get_background_support_styles(
-					$styles['background'],
-				);
-
-				$value = $background_styles['declarations'][ $css_property ] ?? $value;
+			if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
+				$background_styles = gutenberg_get_background_support_styles( $styles['background'] );
+				$value             = $background_styles['declarations'][ $css_property ] ?? $value;
 			}
 
 			// Skip if empty and not "0" or value represents array of longhand values.