Testing get_theme_file_uri on the backend and duping the background i…

…mage on the frontend.
WordPress · Apr 29, 2024 · 1779316 · 1779316
1 parent a11f67b
commit 1779316
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 29 deletions.
diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
@@ -48,7 +48,7 @@ function gutenberg_get_background_support_styles( $background_styles = array() )
 		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'] );
+		$background_styles['backgroundImage']['url'] = esc_url( get_theme_file_uri( $background_styles['backgroundImage']['url'] ) );
 	}
 	return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
 }

diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -408,7 +408,10 @@ export function getStylesDeclarations(
 
 	// 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, {
+		...editorSettings,
+		isRoot,
+	} );
 	extraRules.forEach( ( rule ) => {
 		// Don't output padding properties if padding variables are set or if we're not editing a full template.
 		if (
@@ -1214,13 +1217,17 @@ 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 { themeDirURI, disableLayoutStyles } = useSelect( ( select ) => {
-		const _settings = select( blockEditorStore ).getSettings();
-		return {
-			themeDirURI: _settings?.__experimentalCurrentTheme?.stylesheetURI,
-			disableLayoutStyles: !! _settings.disableLayoutStyles,
-		};
-	} );
+	const { stylesheetURI, templateURI, disableLayoutStyles } = useSelect(
+		( select ) => {
+			const _settings = select( blockEditorStore ).getSettings();
+			return {
+				stylesheetURI:
+					_settings?.__experimentalCurrentTheme?.stylesheetURI,
+				templateURI: _settings?.__experimentalCurrentTheme?.templateURI,
+				disableLayoutStyles: !! _settings.disableLayoutStyles,
+			};
+		}
+	);
 
 	const blockContext = useContext( BlockContext );
 
@@ -1252,7 +1259,8 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			disableLayoutStyles,
 			isTemplate,
 			{
-				themeDirURI,
+				stylesheetURI,
+				templateURI,
 			}
 		);
 		const svgs = toSvgFilters( updatedConfig, blockSelectors );
@@ -1302,7 +1310,8 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 		disableLayoutStyles,
 		isTemplate,
 		getBlockStyles,
-		themeDirURI,
+		stylesheetURI,
+		templateURI,
 	] );
 }
 

diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
@@ -55,10 +55,10 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
 /**
  * Updates a styles object with default background values.
  *
- * @param {Object} blockStyles         A styles object.
- * @param {Object} options             Optional settings.
- * @param {string} options.themeDirURI The URI of the current theme directory.
- * @param {string} options.selector    The block selector.
+ * @param {Object} blockStyles           A styles object.
+ * @param {Object} options               Optional settings.
+ * @param {string} options.stylesheetURI The URI of the current theme directory.
+ * @param {string} options.selector      The block selector.
  * @return {Object}                     Updated styles.
  */
 export function setBackgroundStyleDefaults( blockStyles, options ) {
@@ -72,22 +72,31 @@ export function setBackgroundStyleDefaults( blockStyles, options ) {
 	const backgroundImage = blockStyles?.background?.backgroundImage;
 	const newBackgroundStyles = {};
 
-	if (
+/*	if (
 		backgroundImage?.source === 'theme' &&
 		!! backgroundImage?.url &&
-		!! options?.themeDirURI
+		!! options?.stylesheetURI &&
+		!! options?.templateURI
 	) {
-		const url = `${ options.themeDirURI }${
+		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( url ) ),
+			url: `${ encodeURI(
+				safeDecodeURI( activeThemeImageResource )
+			) }, ${ encodeURI( safeDecodeURI( parentThemeImageResource ) ) }`,
 		};
-	}
+	}*/
 
 	// Set block background defaults.
 	if ( options?.selector !== ROOT_BLOCK_SELECTOR && !! backgroundImage ) {

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
@@ -61,11 +61,11 @@ const hasStyleSupport = ( nameOrType ) =>
  *
  * @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;
 	} );
 
@@ -329,7 +329,9 @@ export function addSaveProps(
 	}
 
 	props.style = {
-		...getInlineStyles( style ),
+		...getInlineStyles( style, {
+			...editorSettings,
+		} ),
 		...props.style,
 	};
 
@@ -385,10 +387,11 @@ const elementTypes = [
 ];
 
 function useBlockProps( { name, style } ) {
-	const { themeDirURI } = useSelect( ( select ) => {
+	const { stylesheetURI, templateURI } = useSelect( ( select ) => {
 		const _settings = select( blockEditorStore ).getSettings();
 		return {
-			themeDirURI: _settings?.__experimentalCurrentTheme?.stylesheetURI,
+			stylesheetURI: _settings?.__experimentalCurrentTheme?.stylesheetURI,
+			templateURI: _settings?.__experimentalCurrentTheme?.templateURI,
 		};
 	} );
 	const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId(
@@ -479,7 +482,8 @@ function useBlockProps( { name, style } ) {
 		{ style },
 		skipSerializationPathsEdit,
 		{
-			themeDirURI,
+			stylesheetURI,
+			templateURI,
 		}
 	);
 }

diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -296,6 +296,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			__experimentalUserCanCreatePages: userCanCreatePages,
 			__experimentalCurrentTheme: {
 				stylesheetURI: currentTheme?.stylesheet_uri,
+				templateURI: currentTheme?.template_uri,
 			},
 			pageOnFront,
 			pageForPosts,

diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
@@ -8,15 +8,38 @@ const backgroundImage = {
 	name: 'backgroundImage',
 	generate: ( style: Style, options: StyleOptions ) => {
 		const _backgroundImage = style?.background?.backgroundImage;
+
 		if ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) {
+			let url = _backgroundImage.url;
+			if (
+				_backgroundImage?.source === 'theme' &&
+				!! options?.stylesheetURI &&
+				!! options?.templateURI
+			) {
+				const activeThemeImageResource = `${ options.stylesheetURI }${
+					url.startsWith( '/' ) ? url : `/${ url }`
+				}`;
+
+				const parentThemeImageResource = `${ options.templateURI }${
+					url.startsWith( '/' ) ? url : `/${ url }`
+				}`;
+
+				url = `url('${ encodeURI(
+					safeDecodeURI( activeThemeImageResource )
+				) }'), url('${ encodeURI(
+					safeDecodeURI( parentThemeImageResource )
+				) }')`;
+			} else {
+				url = `url( '${ encodeURI(
+					safeDecodeURI( _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,
 				},
 			];
 		}

diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
@@ -90,6 +90,9 @@ export interface StyleOptions {
 	 * CSS selector for the generated style.
 	 */
 	selector?: string;
+	templateURI?: string;
+	stylesheetURI?: string;
+	isRoot: boolean;
 }
 
 export interface GeneratedCSSRule {