Pass resolved URIs to display inherited background image styles with relative paths

Also, output any background styles, even if there's no background image

Author: ramonjd

lib/block-supports/background.php

@@ -52,14 +52,14 @@ function gutenberg_render_background_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$background_styles                    = array();
-	$background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array();
+	$background_styles                       = array();
+	$background_styles['backgroundImage']    = $block_attributes['style']['background']['backgroundImage'] ?? null;
+	$background_styles['backgroundSize']     = $block_attributes['style']['background']['backgroundSize'] ?? null;
+	$background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
+	$background_styles['backgroundRepeat']   = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
 
 	if ( ! empty( $background_styles['backgroundImage'] ) ) {
-		$background_styles['backgroundSize']     = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover';
-		$background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null;
-		$background_styles['backgroundRepeat']   = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null;
-
+		$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'] && ! $background_styles['backgroundPosition'] ) {
 			$background_styles['backgroundPosition'] = 'center';

packages/block-editor/src/components/global-styles/background-panel.js

@@ -269,6 +269,7 @@ function BackgroundImageControls( {
 	inheritedValue,
 	onRemoveImage = noop,
 	displayInPanel,
+	themeFileURIs,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -392,7 +393,10 @@ function BackgroundImageControls( {
 				name={
 					<InspectorImagePreviewItem
 						className="block-editor-global-styles-background-panel__image-preview"
-						imgUrl={ url }
+						imgUrl={ getResolvedThemeFilePath(
+							url,
+							themeFileURIs
+						) }
 						filename={ title }
 						label={ imgLabel }
 					/>
@@ -706,6 +710,7 @@ export default function BackgroundPanel( {
 								onChange={ onChange }
 								style={ value }
 								inheritedValue={ inheritedValue }
+								themeFileURIs={ themeFileURIs }
 								displayInPanel
 								onRemoveImage={ () => {
 									setIsDropDownOpen( false );
@@ -727,6 +732,7 @@ export default function BackgroundPanel( {
 						onChange={ onChange }
 						style={ value }
 						inheritedValue={ inheritedValue }
+						themeFileURIs={ themeFileURIs }
 					/>
 				) }
 			</div>