If we pass a 'baseUrl' to the style engine, it will it append it to a…

…ll url-like paths.

lib/block-editor-settings.php

@@ -76,11 +76,14 @@ function gutenberg_get_block_editor_settings( $settings ) {
 		}
 	}
 
-	// Could house also `__unstableIsBlockBasedTheme` as 'isBlockTheme' => $current_theme->is_block_theme().
+
 	$current_theme            = wp_get_theme();
 	$settings['currentTheme'] = array(
+		// Directory of the current or parent theme. If a child theme is active, it's the parent theme directory.
 		'parentDirectoryURI' => $current_theme->get_template_directory_uri(),
+		// Directory of the current theme. Will be the child theme directory if a child theme is active.
 		'directoryURI'       => $current_theme->get_stylesheet_directory_uri(),
+		// `__unstableIsBlockBasedTheme` could also be relocated here, e.g., 'isBlockTheme' => $current_theme->is_block_theme().
 	);
 
 	$settings['styles'] = array_merge( $global_styles, get_block_editor_theme_styles() );

lib/block-supports/background.php

@@ -39,18 +39,16 @@ 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() ) {
+	$style_engine_options    = array();
 	$background_image_source = ! empty( $background_styles['backgroundImage']['source'] ) ? $background_styles['backgroundImage']['source'] : null;
 
 	/*
 	 * "theme" source implies relative path to the theme directory
 	 */
 	if ( ! empty( $background_styles['backgroundImage']['url'] ) && is_string( $background_styles['backgroundImage']['url'] ) && 'theme' === $background_image_source ) {
-		if ( ! str_starts_with( $background_styles['backgroundImage']['url'], '/' ) ) {
-			$background_styles['backgroundImage']['url'] = '/' . $background_styles['backgroundImage']['url'];
-		}
-		$background_styles['backgroundImage']['url'] = esc_url( get_stylesheet_directory_uri() . $background_styles['backgroundImage']['url'] );
+		$style_engine_options['base_url'] = esc_url( get_stylesheet_directory_uri() );
 	}
-	return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
+	return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ), $style_engine_options );
 }
 
 

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -35,7 +35,6 @@ import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import BlockContext from '../block-context';
 import { unlock } from '../../lock-unlock';
-import { getBackgroundSupportStyles } from '../../hooks/background';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -394,24 +393,11 @@ export function getStylesDeclarations(
 		[]
 	);
 
-	// Set background defaults.
-	// Applies to all blocks/global styles.
-	if ( !! blockStyles.background ) {
-		blockStyles = {
-			...blockStyles,
-			background: {
-				...blockStyles.background,
-				...getBackgroundSupportStyles(
-					blockStyles.background,
-					editorSettings
-				),
-			},
-		};
-	}
-
 	// 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 );
+	const extraRules = getCSSRules( blockStyles, {
+		baseUrl: editorSettings?.themeDirURI,
+	} );
 	extraRules.forEach( ( rule ) => {
 		// Don't output padding properties if padding variables are set or if we're not editing a full template.
 		if (

packages/block-editor/src/hooks/background.js

@@ -50,22 +50,6 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
-export function getBackgroundSupportStyles( backgroundStyle, options ) {
-	const backgroundImage = backgroundStyle?.backgroundImage;
-	if (
-		backgroundImage?.source === 'theme' &&
-		!! backgroundImage?.url &&
-		options?.themeDirURI
-	) {
-		return {
-			backgroundImage: {
-				url: `${ options.themeDirURI }${ backgroundImage.url }`,
-				source: 'file',
-			},
-		};
-	}
-}
-
 export function setBackgroundStyleDefaults( backgroundStyle ) {
 	if ( ! backgroundStyle ) {
 		return;

packages/block-editor/src/hooks/style.js

@@ -15,11 +15,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import {
-	BACKGROUND_SUPPORT_KEY,
-	BackgroundImagePanel,
-	getBackgroundSupportStyles,
-} from './background';
+import { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';
 import { BORDER_SUPPORT_KEY, BorderPanel, SHADOW_SUPPORT_KEY } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import {
@@ -57,15 +53,16 @@ const hasStyleSupport = ( nameOrType ) =>
 /**
  * Returns the inline styles to add depending on the style object
  *
- * @param {Object} styles Styles configuration.
+ * @param {Object} styles  Styles configuration.
+ * @param {Object} options Style engine options.
  *
  * @return {Object} Flattened CSS variables declaration.
  */
-export function getInlineStyles( styles = {} ) {
+export function getInlineStyles( styles = {}, options ) {
 	const output = {};
 	// 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.
-	getCSSRules( styles ).forEach( ( rule ) => {
+	getCSSRules( styles, options ).forEach( ( rule ) => {
 		output[ rule.key ] = rule.value;
 	} );
 
@@ -319,23 +316,10 @@ export function addSaveProps(
 		}
 	} );
 
-	// Set background defaults.
-	// Applies to all blocks/global styles.
-	if ( !! style.background ) {
-		style = {
-			...style,
-			background: {
-				...style.background,
-				...getBackgroundSupportStyles(
-					style.background,
-					editorSettings
-				),
-			},
-		};
-	}
-
 	props.style = {
-		...getInlineStyles( style ),
+		...getInlineStyles( style, {
+			baseUrl: editorSettings?.themeDirURI,
+		} ),
 		...props.style,
 	};
 

packages/style-engine/class-wp-style-engine.php

@@ -355,7 +355,7 @@ protected static function is_valid_style_value( $style_value ) {
 		 * @param string   $store_name       A valid store key.
 		 * @param string   $css_selector     When a selector is passed, the function will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
 		 * @param string[] $css_declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
-		 * @param string $rules_group        Optional. A parent CSS selector in the case of nested CSS, or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
+		 * @param string   $rules_group        Optional. A parent CSS selector in the case of nested CSS, or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
 		 *
 		 * @return void.
 		 */
@@ -589,14 +589,19 @@ protected static function get_individual_property_css_declarations( $style_value
 		 * 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( '...' )" ).
+		 * e.g., array( 'background-image' => "url( '...' )" ). If a $base_url exists, it will be appended to the 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.
+		 * @param array $options         {
+		 *      Optional. An array of options. Default empty array.
+		 *
+		 *      @type string $base_url A URL to the theme directory to be used as a base for relative URLs.
+		 * }
 		 *
 		 * @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 ) {
+		protected static function get_url_or_value_css_declaration( $style_value, $style_definition, $options = array() ) {
 			if ( empty( $style_value ) ) {
 				return array();
 			}
@@ -605,9 +610,15 @@ protected static function get_url_or_value_css_declaration( $style_value, $style
 
 			if ( isset( $style_definition['property_keys']['default'] ) ) {
 				$value = null;
-
-				if ( ! empty( $style_value['url'] ) ) {
-					$value = "url('" . $style_value['url'] . "')";
+				if ( ! empty( $style_value['url'] ) && is_string( $style_value['url'] ) ) {
+					$url = $style_value['url'];
+					if ( ! empty( $options['base_url'] ) ) {
+						if ( ! str_starts_with( $url, '/' ) ) {
+							$url = '/' . $url;
+						}
+						$url = esc_url( $options['base_url'] . $url );
+					}
+					$value = "url('" . $url . "')";
 				} elseif ( is_string( $style_value ) ) {
 					$value = $style_value;
 				}

packages/style-engine/src/styles/background/index.ts

@@ -9,14 +9,20 @@ const backgroundImage = {
 	generate: ( style: Style, options: StyleOptions ) => {
 		const _backgroundImage = style?.background?.backgroundImage;
 		if ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) {
+			const url = !! options?.baseUrl
+				? `${ options.baseUrl }${
+						_backgroundImage.url.startsWith( '/' )
+							? _backgroundImage.url
+							: `/${ _backgroundImage.url }`
+				  }`
+				: _backgroundImage.url;
+
 			return [
 				{
 					selector: options.selector,
 					key: 'backgroundImage',
 					// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-					value: `url( '${ encodeURI(
-						safeDecodeURI( _backgroundImage.url )
-					) }' )`,
+					value: `url( '${ encodeURI( safeDecodeURI( url ) ) }' )`,
 				},
 			];
 		}

packages/style-engine/src/types.ts

@@ -90,6 +90,7 @@ export interface StyleOptions {
 	 * CSS selector for the generated style.
 	 */
 	selector?: string;
+	baseUrl?: string;
 }
 
 export interface GeneratedCSSRule {

packages/style-engine/style-engine.php

@@ -30,6 +30,7 @@
  *     @type bool        $convert_vars_to_classnames Whether to skip converting incoming CSS var patterns, e.g., `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`, to var( --wp--preset--* ) values. Default `false`.
  *     @type string      $selector                   Optional. When a selector is passed, the value of `$css` in the return value will comprise a full CSS rule `$selector { ...$css_declarations }`,
  *                                                   otherwise, the value will be a concatenated string of CSS declarations.
+ *     @type string      $base_url                   A URL to the theme directory to be used as a base for relative URLs.
  * }
  *
  * @return array {