Try using style engine for PHP output, too

WordPress · Aug 29, 2023 · b836572 · b836572
1 parent 8011ff6
commit b836572
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 22 deletions.
diff --git a/lib/block-supports/media.php b/lib/block-supports/media.php
@@ -51,46 +51,45 @@ function gutenberg_render_media_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	// TODO: should we get the style engine to handle `backgroundImage`?
-
-	$styles = array();
-
 	$background_image_source = _wp_array_get( $block_attributes, array( 'style', 'media', 'backgroundImage', 'source' ), null );
 	$background_image_url    = _wp_array_get( $block_attributes, array( 'style', 'media', 'backgroundImage', 'url' ), null );
-	$background_size         = _wp_array_get( $block_attributes, array( 'style', 'media', 'backgroundSize' ), null );
+	$background_size         = _wp_array_get( $block_attributes, array( 'style', 'media', 'backgroundSize' ), 'cover' );
 
-	if ( empty( $background_size ) ) {
-		$background_size = 'cover';
-	}
+	$media_block_styles = array();
 
 	if (
 		'file' === $background_image_source &&
 		$background_image_url
 	) {
-		$styles[] = sprintf( "background-image: url('%s')", esc_url( $background_image_url ) );
+		// Set file based background URL.
+		// TODO: In a follow-up, similar logic could be added to inject a featured image url.
+		$media_block_styles['backgroundImage']['url'] = $background_image_url;
+		// Only output the background size when an image url is set.
+		$media_block_styles['backgroundSize'] = $background_size;
 	}
 
-	// TODO: Yeah, for this to work reliably, it'd be better to run it through the style engine, I think.
-	$styles[] = "background-size: $background_size";
+	$styles = gutenberg_style_engine_get_styles( array( 'media' => $media_block_styles ) );
 
-	$inline_style = safecss_filter_attr( implode( '; ', $styles ) );
+	if ( ! empty( $styles['css'] ) ) {
+		// Inject media styles to the first element, presuming it's the wrapper, if it exists.
+		$tags = new WP_HTML_Tag_Processor( $block_content );
 
-	// Inject media styles to the first element, presuming it's the wrapper, if it exists.
-	$tags = new WP_HTML_Tag_Processor( $block_content );
-	if ( $tags->next_tag() ) {
-		$existing_style = $tags->get_attribute( 'style' );
+		if ( $tags->next_tag() ) {
+			$existing_style = $tags->get_attribute( 'style' );
+			$updated_style  = '';
 
-		$updated_style = '';
+			if ( ! empty( $existing_style ) && ! str_ends_with( $existing_style, ';' ) ) {
+				$updated_style = $existing_style . '; ';
+			}
 
-		if ( ! empty( $existing_style ) && ! str_ends_with( $existing_style, ';' ) ) {
-			$updated_style = $existing_style . '; ';
+			$updated_style .= $styles['css'];
+			$tags->set_attribute( 'style', $updated_style );
 		}
 
-		$updated_style .= $inline_style;
-		$tags->set_attribute( 'style', $updated_style );
+		return $tags->get_updated_html();
 	}
 
-	return $tags->get_updated_html();
+	return $block_content;
 }
 
 // Register the block support.

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
@@ -160,6 +160,21 @@ final class WP_Style_Engine {
 				),
 			),
 		),
+		'media'      => array(
+			'backgroundImage' => array(
+				'property_keys' => array(
+					'default' => 'background-image',
+				),
+				'value_func'    => array( self::class, 'get_url_or_value_css_declaration' ),
+				'path'          => array( 'media', 'backgroundImage' ),
+			),
+			'backgroundSize'  => array(
+				'property_keys' => array(
+					'default' => 'background-size',
+				),
+				'path'          => array( 'media', 'backgroundSize' ),
+			),
+		),
 		'spacing'    => array(
 			'padding' => array(
 				'property_keys' => array(
@@ -535,6 +550,41 @@ protected static function get_individual_property_css_declarations( $style_value
 		return $css_declarations;
 	}
 
+	/**
+	 * Style value parser that constructs a CSS definition array comprising a single CSS property and value.
+	 * If the provided value is an array containing a `url` property, the function will return a CSS definition array
+	 * with a single property and value, with `url` escaped and injected into a CSS `url()` function,
+	 * e.g., array( 'background-image' => "url( '...' )" ).
+	 *
+	 * @param array $style_value      A single raw style value from $block_styles array.
+	 * @param array $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+	 *
+	 * @return string[] An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
+	 */
+	protected static function get_url_or_value_css_declaration( $style_value, $style_definition ) {
+		if ( empty( $style_value ) ) {
+			return array();
+		}
+
+		$css_declarations = array();
+
+		if ( isset( $style_definition['property_keys']['default'] ) ) {
+			$value = null;
+
+			if ( ! empty( $style_value['url'] ) ) {
+				$value = "url('" . $style_value['url'] . "')";
+			} elseif ( is_string( $style_value ) ) {
+				$value = $style_value;
+			}
+
+			if ( null !== $value ) {
+				$css_declarations[ $style_definition['property_keys']['default'] ] = $value;
+			}
+		}
+
+		return $css_declarations;
+	}
+
 	/**
 	 * Returns compiled CSS from css_declarations.
 	 *

diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php
@@ -493,6 +493,25 @@ public function data_wp_style_engine_get_styles() {
 					),
 				),
 			),
+
+			'inline_background_image_url_with_background_size' => array(
+				'block_styles'    => array(
+					'media' => array(
+						'backgroundImage' => array(
+							'url' => 'http://example.com/image.jpg',
+						),
+						'backgroundSize'  => 'cover',
+					),
+				),
+				'options'         => array(),
+				'expected_output' => array(
+					'css'          => "background-image:url('http://example.com/image.jpg');background-size:cover;",
+					'declarations' => array(
+						'background-image' => "url('http://example.com/image.jpg')",
+						'background-size'  => 'cover',
+					),
+				),
+			),
 		);
 	}