Resolving urls in theme.json

Feature complete, but hacky
WordPress · May 1, 2024 · 1aa8f6a · 1aa8f6a
1 parent 7e9e4c5
commit 1aa8f6a
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 326 deletions.
diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
@@ -30,27 +30,6 @@ function gutenberg_register_background_support( $block_type ) {
 	}
 }
 
-/**
- * Given a theme.json or block background styles, returns the background styles for a block.
- *
- * @since 6.6.0
- *
- * @param  array $background_styles Background style properties.
- * @return array                     Style engine array of CSS string and style declarations.
- */
-function gutenberg_get_background_support_styles( $background_styles = 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 ) {
-		$background_styles['backgroundImage']['url'] = esc_url( get_theme_file_uri( $background_styles['backgroundImage']['url'] ) );
-	}
-	return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
-}
-
-
 /**
  * Renders the background styles to the block wrapper.
  * This block support uses the `render_block` hook to ensure that
@@ -87,7 +66,7 @@ function gutenberg_render_background_support( $block_content, $block ) {
 		}
 	}
 
-	$styles = gutenberg_get_background_support_styles( $background_styles );
+	$styles = gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
 
 	if ( ! empty( $styles['css'] ) ) {
 		// Inject background styles to the first element, presuming it's the wrapper, if it exists.

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -2196,9 +2196,9 @@ protected static function compute_style_properties( $styles, $settings = array()
 				}
 			}
 
-			// Processes background styles.
+			// Processes background styles in order to build any `url()` functions.
 			if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
-				$background_styles = gutenberg_get_background_support_styles( $styles['background'] );
+				$background_styles = gutenberg_style_engine_get_styles( array( 'background' => $styles['background'] ) );
 				$value             = $background_styles['declarations'][ $css_property ] ?? $value;
 			}
 
@@ -4085,4 +4085,21 @@ protected static function get_valid_block_style_variations() {
 
 		return $valid_variations;
 	}
+
+	// @TODO abstract and test this.
+	public function resolve_relative_paths() {
+		// Styles backgrounds.
+		/*
+		 * "theme" source implies relative path to the theme directory
+		 */
+		if ( ! empty( $this->theme_json['styles']['background']['backgroundImage']['url'] ) && is_string( $this->theme_json['styles']['background']['backgroundImage']['url'] ) ) {
+			$background_image_source = ! empty( $this->theme_json['styles']['background']['backgroundImage']['source'] ) ? $this->theme_json['styles']['background']['backgroundImage']['source'] : null;
+			if ( 'theme' === $background_image_source ) {
+				$this->theme_json['styles']['background']['backgroundImage']['url'] = esc_url( get_theme_file_uri( $this->theme_json['styles']['background']['backgroundImage']['url'] ) );
+			}
+		}
+		// Elements... (backgrounds not yet supported)
+
+		// Block variations... (backgrounds not yet supported)
+	}
 }
diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -355,6 +355,7 @@ public static function get_theme_data( $deprecated = array(), $options = array()
 				$theme_support_data['settings']['appearanceTools'] = true;
 			}
 		}
+
 		$with_theme_supports = new WP_Theme_JSON_Gutenberg( $theme_support_data );
 		$with_theme_supports->merge( static::$theme );
 		return $with_theme_supports;
@@ -615,11 +616,13 @@ public static function get_merged_data( $origin = 'custom' ) {
 		$result->merge( static::get_theme_data() );
 		if ( 'theme' === $origin ) {
 			$result->set_spacing_sizes();
+			$result->resolve_relative_paths();
 			return $result;
 		}
 
 		$result->merge( static::get_user_data() );
 		$result->set_spacing_sizes();
+		$result->resolve_relative_paths();
 		return $result;
 	}
 

diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
@@ -181,7 +181,7 @@ function useBlockProps( { name, style } ) {
 	const { backgroundImageURL } = useSelect(
 		( select ) => {
 			const { getThemeFileURI } = unlock( select( blockEditorStore ) );
-			let file;
+			let file = style?.background?.backgroundImage?.url;
 			if (
 				!! style?.background?.backgroundImage?.url &&
 				style?.background?.backgroundImage?.source === 'theme'
@@ -201,14 +201,26 @@ function useBlockProps( { name, style } ) {
 	) {
 		return;
 	}
+	const newBackgroundStyles = {};
+	if ( ! style?.background?.backgroundSize ) {
+		newBackgroundStyles.backgroundSize = 'cover';
+	}
+
+	if (
+		'contain' === style?.background?.backgroundSize &&
+		! style?.background?.backgroundPosition
+	) {
+		newBackgroundStyles.backgroundPosition = 'center';
+	}
 
 	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(
+			backgroundImage: `url( '${ encodeURI(
 				safeDecodeURI( backgroundImageURL )
 			) }' )`,
+			...newBackgroundStyles,
 		},
 	};
 }

diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
@@ -49,7 +49,6 @@ createBlockEditFilter(
 );
 createBlockListBlockFilter( [
 	align,
-	background,
 	textAlign,
 	style,
 	color,
@@ -60,6 +59,7 @@ createBlockListBlockFilter( [
 	border,
 	position,
 	childLayout,
+	background,
 ] );
 createBlockSaveFilter( [
 	align,

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
@@ -10,16 +10,11 @@ import {
 } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { getCSSRules, compileCSS } from '@wordpress/style-engine';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import {
-	BACKGROUND_SUPPORT_KEY,
-	BackgroundImagePanel,
-	setBackgroundStyleDefaults,
-} 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 {
@@ -39,7 +34,6 @@ import {
 } from './utils';
 import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockEditingMode } from '../components/block-editing-mode';
-import { store as blockEditorStore } from '../store';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
@@ -287,13 +281,14 @@ 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.
+ *
  * @return {Object} Filtered props applied to save element.
  */
 export function addSaveProps(
 	props,
 	blockNameOrType,
 	attributes,
-	skipPaths = skipSerializationPathsSave,
+	skipPaths = skipSerializationPathsSave
 ) {
 	if ( ! hasStyleSupport( blockNameOrType ) ) {
 		return props;
@@ -317,15 +312,6 @@ export function addSaveProps(
 		}
 	} );
 
-	/*
-	 * Set styles defaults.
-	 * Applies default values to the style object based on the block settings.
-	 * Only applies to background styles for now.
-	 */
-	if ( !! style.background ) {
-		style = setBackgroundStyleDefaults( style );
-	}
-
 	props.style = {
 		...getInlineStyles( style ),
 		...props.style,
@@ -383,13 +369,6 @@ const elementTypes = [
 ];
 
 function useBlockProps( { name, style } ) {
-	const { stylesheetURI, templateURI } = useSelect( ( select ) => {
-		const _settings = select( blockEditorStore ).getSettings();
-		return {
-			stylesheetURI: _settings?.__experimentalCurrentTheme?.stylesheetURI,
-			templateURI: _settings?.__experimentalCurrentTheme?.templateURI,
-		};
-	} );
 	const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId(
 		useBlockProps
 	) }`;
@@ -476,7 +455,7 @@ function useBlockProps( { name, style } ) {
 		{ className: blockElementsContainerIdentifier },
 		name,
 		{ style },
-		skipSerializationPathsEdit,
+		skipSerializationPathsEdit
 	);
 }
 

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