Global styles: background UI controls (WordPress#59454)

* Refactor global styles and refactor existing background components
* Porting over existing hook code to shared, global styles component.
* Move tests, move styles, remove duplicate code from block support hook
* Pull over changes to background.js from WordPress#59557
* Add default control values for block supports. The default backgroundSize value for block backgrounds is 'cover'
* Resetting position if it's center and size is not contain.
* Add background-image to INDIRECT_PROPERTIES_METADATA because the value is "indirectly" stored in an array, at least determined by multiple values in an array.

---------

Co-authored-by: ramonjd <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: jameskoster <[email protected]>

lib/class-wp-theme-json-gutenberg.php

@@ -286,26 +286,31 @@ class WP_Theme_JSON_Gutenberg {
 	 *
 	 * Indirect properties are not output directly by `compute_style_properties`,
 	 * but are used elsewhere in the processing of global styles. The indirect
-	 * property is used to validate whether or not a style value is allowed.
+	 * property is used to validate whether a style value is allowed.
 	 *
 	 * @since 6.2.0
+	 * @since 6.6.0 Added background-image properties.
 	 *
 	 * @var array
 	 */
 	const INDIRECT_PROPERTIES_METADATA = array(
-		'gap'        => array(
+		'gap'              => array(
 			array( 'spacing', 'blockGap' ),
 		),
-		'column-gap' => array(
+		'column-gap'       => array(
 			array( 'spacing', 'blockGap', 'left' ),
 		),
-		'row-gap'    => array(
+		'row-gap'          => array(
 			array( 'spacing', 'blockGap', 'top' ),
 		),
-		'max-width'  => array(
+		'max-width'        => array(
 			array( 'layout', 'contentSize' ),
 			array( 'layout', 'wideSize' ),
 		),
+		'background-image' => array(
+			array( 'background', 'backgroundImage', 'url' ),
+			array( 'background', 'backgroundImage', 'source' ),
+		),
 	);
 
 	/**
@@ -1359,7 +1364,7 @@ public function get_block_custom_css_nodes() {
 	 *
 	 * @since 6.6.0
 	 *
-	 * @param array $css The block css node.
+	 * @param array  $css The block css node.
 	 * @param string $selector The block selector.
 	 *
 	 * @return string The global styles custom CSS for the block.