Just a commit to explore adding a private selector to mimic get_theme…

…_file_uri (would be extracted into a new PR)

Haven't worked out global styles yet. CSS rules might need to be injected into the DOM???

.wp-env.json

@@ -1,7 +1,7 @@
 {
 	"core": "WordPress/WordPress",
 	"plugins": [ "." ],
-	"themes": [ "./test/emptytheme" ],
+	"themes": [ "./test/emptytheme", "./test/emptytheme-child" ],
 	"env": {
 		"tests": {
 			"mappings": {

lib/block-supports/background.php

@@ -45,9 +45,6 @@ function gutenberg_get_background_support_styles( $background_styles = array() )
 	 * "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_theme_file_uri( $background_styles['backgroundImage']['url'] ) );
 	}
 	return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );

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

@@ -38,6 +38,7 @@ import { TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
@@ -201,6 +202,23 @@ function BackgroundImageToolsPanelItem( {
 		...inheritedValue?.background?.backgroundImage,
 	};
 
+	const { backgroundImageURL } = useSelect(
+		( select ) => {
+			const { getThemeFileURI } = unlock( select( blockEditorStore ) );
+			let file = url;
+			if (
+				!! style?.background?.backgroundImage?.url &&
+				style?.background?.backgroundImage?.source === 'theme'
+			) {
+				file = getThemeFileURI( style.background.backgroundImage.url );
+			}
+			return {
+				backgroundImageURL: file,
+			};
+		},
+		[ url ]
+	);
+
 	const replaceContainerRef = useRef();
 
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -295,15 +313,15 @@ function BackgroundImageToolsPanelItem( {
 			>
 				<MediaReplaceFlow
 					mediaId={ id }
-					mediaURL={ url }
+					mediaURL={ backgroundImageURL }
 					allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
 					accept="image/*"
 					onSelect={ onSelectMedia }
 					name={
 						<InspectorImagePreview
 							label={ title }
 							filename={ title || __( 'Untitled' ) }
-							url={ url }
+							url={ backgroundImageURL }
 						/>
 					}
 					variant="secondary"

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

@@ -323,8 +323,7 @@ export function getStylesDeclarations(
 	selector = '',
 	useRootPaddingAlign,
 	tree = {},
-	isTemplate = true,
-	editorSettings
+	isTemplate = true
 ) {
 	const { kebabCase } = unlock( componentsPrivateApis );
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
@@ -401,17 +400,13 @@ export function getStylesDeclarations(
 	 */
 	if ( !! blockStyles?.background ) {
 		blockStyles = setBackgroundStyleDefaults( blockStyles, {
-			...editorSettings,
 			selector,
 		} );
 	}
 
 	// 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, {
-		...editorSettings,
-		isRoot,
-	} );
+	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
 		// Don't output padding properties if padding variables are set or if we're not editing a full template.
 		if (
@@ -794,8 +789,7 @@ export const toStyles = (
 	hasBlockGapSupport,
 	hasFallbackGapSupport,
 	disableLayoutStyles = false,
-	isTemplate = true,
-	editorSettings = {}
+	isTemplate = true
 ) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
@@ -905,8 +899,7 @@ export const toStyles = (
 									styleVariations,
 									styleVariationSelector,
 									useRootPaddingAlign,
-									tree,
-									editorSettings
+									tree
 								);
 							if ( styleVariationDeclarations.length ) {
 								ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
@@ -954,8 +947,7 @@ export const toStyles = (
 				selector,
 				useRootPaddingAlign,
 				tree,
-				isTemplate,
-				editorSettings
+				isTemplate
 			);
 			if ( declarations?.length ) {
 				ruleset += `:where(${ selector }){${ declarations.join(
@@ -1217,17 +1209,12 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 	const hasBlockGapSupport = blockGap !== null;
 	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
 
-	const { stylesheetURI, templateURI, disableLayoutStyles } = useSelect(
-		( select ) => {
-			const _settings = select( blockEditorStore ).getSettings();
-			return {
-				stylesheetURI:
-					_settings?.__experimentalCurrentTheme?.stylesheetURI,
-				templateURI: _settings?.__experimentalCurrentTheme?.templateURI,
-				disableLayoutStyles: !! _settings.disableLayoutStyles,
-			};
-		}
-	);
+	const { disableLayoutStyles } = useSelect( ( select ) => {
+		const _settings = select( blockEditorStore ).getSettings();
+		return {
+			disableLayoutStyles: !! _settings.disableLayoutStyles,
+		};
+	} );
 
 	const blockContext = useContext( BlockContext );
 
@@ -1257,12 +1244,9 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			hasBlockGapSupport,
 			hasFallbackGapSupport,
 			disableLayoutStyles,
-			isTemplate,
-			{
-				stylesheetURI,
-				templateURI,
-			}
+			isTemplate
 		);
+		console.log( 'globalStyles', globalStyles );
 		const svgs = toSvgFilters( updatedConfig, blockSelectors );
 
 		const styles = [
@@ -1310,8 +1294,6 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 		disableLayoutStyles,
 		isTemplate,
 		getBlockStyles,
-		stylesheetURI,
-		templateURI,
 	] );
 }
 

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

@@ -18,6 +18,7 @@ import {
 	hasBackgroundImageValue,
 } from '../components/global-styles/background-panel';
 import { ROOT_BLOCK_SELECTOR } from '../components/global-styles/utils';
+import { unlock } from '../lock-unlock';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
@@ -72,32 +73,6 @@ export function setBackgroundStyleDefaults( blockStyles, options ) {
 	const backgroundImage = blockStyles?.background?.backgroundImage;
 	const newBackgroundStyles = {};
 
-/*	if (
-		backgroundImage?.source === 'theme' &&
-		!! backgroundImage?.url &&
-		!! options?.stylesheetURI &&
-		!! options?.templateURI
-	) {
-		const activeThemeImageResource = `${ options.stylesheetURI }${
-			backgroundImage.url.startsWith( '/' )
-				? backgroundImage.url
-				: `/${ backgroundImage.url }`
-		}`;
-
-		const parentThemeImageResource = `${ options.templateURI }${
-			backgroundImage.url.startsWith( '/' )
-				? backgroundImage.url
-				: `/${ backgroundImage.url }`
-		}`;
-
-		newBackgroundStyles.backgroundImage = {
-			...backgroundImage,
-			url: `${ encodeURI(
-				safeDecodeURI( activeThemeImageResource )
-			) }, ${ encodeURI( safeDecodeURI( parentThemeImageResource ) ) }`,
-		};
-	}*/
-
 	// Set block background defaults.
 	if ( options?.selector !== ROOT_BLOCK_SELECTOR && !! backgroundImage ) {
 		if ( ! blockStyles?.background?.backgroundSize ) {
@@ -202,7 +177,44 @@ export function BackgroundImagePanel( {
 	);
 }
 
+function useBlockProps( { name, style } ) {
+	const { backgroundImageURL } = useSelect(
+		( select ) => {
+			const { getThemeFileURI } = unlock( select( blockEditorStore ) );
+			let file;
+			if (
+				!! style?.background?.backgroundImage?.url &&
+				style?.background?.backgroundImage?.source === 'theme'
+			) {
+				file = getThemeFileURI( style.background.backgroundImage.url );
+			}
+			return {
+				backgroundImageURL: file,
+			};
+		},
+		[ style?.background?.backgroundImage ]
+	);
+
+	if (
+		! hasBackgroundSupport( name, 'backgroundImage' ) ||
+		! backgroundImageURL
+	) {
+		return;
+	}
+
+	return {
+		style: {
+			// @TODO this should be backgroundImage. How to do that?
+			// Also, maybe consider reinstating https://github.com/WordPress/gutenberg/blob/fc98542a7dbba194bb4096d49cd0bd093b63f43e/packages/block-editor/src/hooks/background.js#L82
+			background: `url( '${ encodeURI(
+				safeDecodeURI( backgroundImageURL )
+			) }' )`,
+		},
+	};
+}
+
 export default {
 	attributeKeys: [ 'style' ],
 	hasSupport: hasBackgroundSupport,
+	useBlockProps,
 };

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

@@ -8,6 +8,7 @@ import {
 } from './utils';
 import './compat';
 import align from './align';
+import background from './background';
 import './lock';
 import anchor from './anchor';
 import ariaLabel from './aria-label';
@@ -48,6 +49,7 @@ createBlockEditFilter(
 );
 createBlockListBlockFilter( [
 	align,
+	background,
 	textAlign,
 	style,
 	color,

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

@@ -61,11 +61,11 @@ const hasStyleSupport = ( nameOrType ) =>
  *
  * @return {Object} Flattened CSS variables declaration.
  */
-export function getInlineStyles( styles = {}, options ) {
+export function getInlineStyles( styles = {} ) {
 	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, options ).forEach( ( rule ) => {
+	getCSSRules( styles ).forEach( ( rule ) => {
 		output[ rule.key ] = rule.value;
 	} );
 
@@ -287,15 +287,13 @@ export function omitStyle( style, paths, preserveReference = false ) {
  * @param {Object|string}             blockNameOrType Block type.
  * @param {Object}                    attributes      Block attributes.
  * @param {?Record<string, string[]>} skipPaths       An object of keys and paths to skip serialization.
- * @param {Object}                    editorSettings  Current editor settings.
  * @return {Object} Filtered props applied to save element.
  */
 export function addSaveProps(
 	props,
 	blockNameOrType,
 	attributes,
 	skipPaths = skipSerializationPathsSave,
-	editorSettings
 ) {
 	if ( ! hasStyleSupport( blockNameOrType ) ) {
 		return props;
@@ -325,13 +323,11 @@ export function addSaveProps(
 	 * Only applies to background styles for now.
 	 */
 	if ( !! style.background ) {
-		style = setBackgroundStyleDefaults( style, editorSettings );
+		style = setBackgroundStyleDefaults( style );
 	}
 
 	props.style = {
-		...getInlineStyles( style, {
-			...editorSettings,
-		} ),
+		...getInlineStyles( style ),
 		...props.style,
 	};
 
@@ -481,10 +477,6 @@ function useBlockProps( { name, style } ) {
 		name,
 		{ style },
 		skipSerializationPathsEdit,
-		{
-			stylesheetURI,
-			templateURI,
-		}
 	);
 }
 

packages/block-editor/src/private-apis.js

@@ -35,6 +35,7 @@ import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	getThemeFileURIKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -76,4 +77,5 @@ lock( privateApis, {
 	requiresWrapperOnCopy,
 	PrivateRichText,
 	reusableBlocksSelectKey,
+	getThemeFileURIKey,
 } );

packages/block-editor/src/store/private-keys.js

@@ -1,2 +1,3 @@
 export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
+export const getThemeFileURIKey = Symbol( 'getThemeFileURI' );

packages/block-editor/src/store/private-selectors.js

@@ -26,6 +26,7 @@ import { unlock } from '../lock-unlock';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	getThemeFileURIKey,
 } from './private-keys';
 
 export { getBlockSettings } from './get-block-settings';
@@ -388,6 +389,15 @@ export const getReusableBlocks = createRegistrySelector(
 	}
 );
 
+export const getThemeFileURI = createRegistrySelector(
+	( select ) => ( state, file ) => {
+		const getThemeFileURISelect = state.settings[ getThemeFileURIKey ];
+		return getThemeFileURISelect
+			? getThemeFileURISelect( select, file )
+			: '';
+	}
+);
+
 /**
  * Returns the element of the last element that had focus when focus left the editor canvas.
  *

packages/core-data/src/private-selectors.ts

@@ -50,3 +50,7 @@ export const getBlockPatternsForPostType = createRegistrySelector(
 			() => [ select( STORE_NAME ).getBlockPatterns() ]
 		)
 );
+
+export function getThemeFileURI( state: State, file: string ) {
+	return state.themeFileURIs?.[ file ];
+}