Add/background image theme source

lib/block-supports/background.php

@@ -30,6 +30,30 @@ 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() ) {
+	/*
+	 * Styles backgrounds.
+	 * Where a URL is not absolute (has no host fragment), it is assumed to be relative to the theme directory.
+	 * Blocks, elements, and block variations are not yet supported.
+	 */
+	if (
+		isset( $background_styles['backgroundImage']['url'] ) &&
+		is_string( $background_styles['backgroundImage']['url'] ) &&
+		! isset( wp_parse_url( $background_styles['backgroundImage']['url'] )['host'] ) ) {
+		$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
@@ -66,7 +90,7 @@ function gutenberg_render_background_support( $block_content, $block ) {
 		}
 	}
 
-	$styles = gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
+	$styles = gutenberg_get_background_support_styles( $background_styles );
 
 	if ( ! empty( $styles['css'] ) ) {
 		// Inject background styles to the first element, presuming it's the wrapper, if it exists.

lib/class-wp-theme-json-gutenberg.php

@@ -488,10 +488,10 @@ class WP_Theme_JSON_Gutenberg {
 	 */
 	const VALID_STYLES = array(
 		'background' => array(
-			'backgroundImage'    => 'top',
-			'backgroundPosition' => 'top',
-			'backgroundRepeat'   => 'top',
-			'backgroundSize'     => 'top',
+			'backgroundImage'    => null,
+			'backgroundPosition' => null,
+			'backgroundRepeat'   => null,
+			'backgroundSize'     => null,
 		),
 		'border'     => array(
 			'color'  => null,
@@ -2198,7 +2198,7 @@ protected static function compute_style_properties( $styles, $settings = array()
 
 			// Processes background styles.
 			if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
-				$background_styles = gutenberg_style_engine_get_styles( array( 'background' => $styles['background'] ) );
+				$background_styles = gutenberg_get_background_support_styles( $styles['background'] );
 				$value             = $background_styles['declarations'][ $css_property ] ?? $value;
 			}
 

lib/compat/wordpress-6.6/rest-api.php

@@ -76,3 +76,75 @@ function gutenberg_add_class_list_to_public_post_types() {
 	}
 }
 add_action( 'rest_api_init', 'gutenberg_add_class_list_to_public_post_types' );
+
+if ( ! function_exists( 'gutenberg_register_wp_rest_themes_stylesheet_directory_uri_field' ) ) {
+	/**
+	 * Adds `stylesheet_uri` fields to WP_REST_Themes_Controller class.
+	 * Core ticket: https://core.trac.wordpress.org/ticket/61021
+	 */
+	function gutenberg_register_wp_rest_themes_stylesheet_directory_uri_field() {
+		register_rest_field(
+			'theme',
+			'stylesheet_uri',
+			array(
+				'get_callback' => function ( $item ) {
+					if ( ! empty( $item['stylesheet'] ) ) {
+						$theme         = wp_get_theme( $item['stylesheet'] );
+						$current_theme = wp_get_theme();
+						if ( $theme->get_stylesheet() === $current_theme->get_stylesheet() ) {
+							return get_stylesheet_directory_uri();
+						} else {
+							return $theme->get_stylesheet_directory_uri();
+						}
+					}
+
+					return null;
+				},
+				'schema'       => array(
+					'type'        => 'string',
+					'description' => __( 'The uri for the theme\'s stylesheet directory.', 'gutenberg' ),
+					'format'      => 'uri',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+			)
+		);
+	}
+}
+add_action( 'rest_api_init', 'gutenberg_register_wp_rest_themes_stylesheet_directory_uri_field' );
+
+if ( ! function_exists( 'gutenberg_register_wp_rest_themes_template_directory_uri_field' ) ) {
+	/**
+	 * Adds `template_uri` fields to WP_REST_Themes_Controller class.
+	 * Core ticket: https://core.trac.wordpress.org/ticket/61021
+	 */
+	function gutenberg_register_wp_rest_themes_template_directory_uri_field() {
+		register_rest_field(
+			'theme',
+			'template_uri',
+			array(
+				'get_callback' => function ( $item ) {
+					if ( ! empty( $item['stylesheet'] ) ) {
+						$theme         = wp_get_theme( $item['stylesheet'] );
+						$current_theme = wp_get_theme();
+						if ( $theme->get_stylesheet() === $current_theme->get_stylesheet() ) {
+							return get_template_directory_uri();
+						} else {
+							return $theme->get_template_directory_uri();
+						}
+					}
+
+					return null;
+				},
+				'schema'       => array(
+					'type'        => 'string',
+					'description' => __( 'The uri for the theme\'s template directory. If this is a child theme, this refers to the parent theme, otherwise this is the same as the theme\'s stylesheet directory.', 'gutenberg' ),
+					'format'      => 'uri',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+			)
+		);
+	}
+}
+add_action( 'rest_api_init', 'gutenberg_register_wp_rest_themes_template_directory_uri_field' );

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 );
@@ -293,15 +311,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/hooks.js

@@ -368,6 +368,15 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
+		[ 'backgroundImage', 'backgroundSize' ].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.background = {
+					...updatedSettings.background,
+					[ key ]: false,
+				};
+			}
+		} );
+
 		updatedSettings.shadow = supportedStyles.includes( 'shadow' )
 			? updatedSettings.shadow
 			: false;

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

@@ -990,6 +990,34 @@
 				'letter-spacing: 2px',
 			] );
 		} );
+
+		it( 'should process styles and set CSS default values', () => {
+			const styles = {
+				background: {
+					backgroundImage: {
+						url: 'image.jpg',
+						source: 'theme',
+					},
+				},
+			};
+			const editorSettings = {
+				themeDirURI: 'http://example.com/theme',
+			};
+
+			expect(
+				getStylesDeclarations(
+					styles,
+					'.wp-block',
+					false,
+					{},
+					false,
+					editorSettings
+				)
+			).toEqual( [
+				"background-image: url( 'http://example.com/theme/image.jpg' )",
+				'background-size: cover',
+			] );
+		} );
 	} );
 
 	describe( 'processCSSNesting', () => {

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

@@ -12,6 +12,7 @@ import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { isURL } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -35,6 +36,7 @@ import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import BlockContext from '../block-context';
 import { unlock } from '../../lock-unlock';
+import useResolveThemeFileURIs from './use-resolve-theme-file-uris';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -314,6 +316,7 @@ const getFeatureDeclarations = ( selectors, styles ) => {
  * @param {Object}  tree                A theme.json tree containing layout definitions.
  *
  * @param {boolean} isTemplate          Whether the entity being edited is a full template or a pattern.
+ * @param {Object}  editorSettings      Current editor settings.
  * @return {Array} An array of style declarations.
  */
 export function getStylesDeclarations(
@@ -947,19 +950,19 @@ export const toStyles = (
 					} );
 				}
 
-				// Process the remaining block styles (they use either normal block class or __experimentalSelector).
-				const declarations = getStylesDeclarations(
-					styles,
-					selector,
-					useRootPaddingAlign,
-					tree,
-					isTemplate
-				);
-				if ( declarations?.length ) {
-					ruleset += `:where(${ selector }){${ declarations.join(
-						';'
-					) };}`;
-				}
+			// Process the remaining block styles (they use either normal block class or __experimentalSelector).
+			const declarations = getStylesDeclarations(
+				styles,
+				selector,
+				useRootPaddingAlign,
+				tree,
+				isTemplate
+			);
+			if ( declarations?.length ) {
+				ruleset += `:where(${ selector }){${ declarations.join(
+					';'
+				) };}`;
+			}
 
 				// Check for pseudo selector in `styles` and handle separately.
 				const pseudoSelectorStyles = Object.entries( styles ).filter(
@@ -1217,11 +1220,15 @@ export function processCSSNesting( css, blockSelector ) {
  */
 export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
+	const resolvedConfig = useResolveThemeFileURIs( 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 disableLayoutStyles = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return !! getSettings().disableLayoutStyles;
+
+	const { disableLayoutStyles } = useSelect( ( select ) => {
+		const _settings = select( blockEditorStore ).getSettings();
+		return {
+			disableLayoutStyles: !! _settings.disableLayoutStyles,
+		};
 	} );
 
 	const blockContext = useContext( BlockContext );
@@ -1231,10 +1238,10 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 	const { getBlockStyles } = useSelect( blocksStore );
 
 	return useMemo( () => {
-		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
+		if ( ! resolvedConfig?.styles || ! resolvedConfig?.settings ) {
 			return [];
 		}
-		const updatedConfig = updateConfigWithSeparator( mergedConfig );
+		const updatedConfig = updateConfigWithSeparator( resolvedConfig );
 
 		const blockSelectors = getBlockSelectors(
 			getBlockTypes(),
@@ -1297,7 +1304,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 	}, [
 		hasBlockGapSupport,
 		hasFallbackGapSupport,
-		mergedConfig,
+		resolvedConfig,
 		disableLayoutStyles,
 		isTemplate,
 		getBlockStyles,