Consolidating all resolutions in the background panel - removing useG…

…lobalStyleLinks in the process

Ensuring only uploaded block images get the defaults.

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

@@ -34,6 +34,7 @@ import {
 	useRef,
 	useState,
 	useEffect,
+	useMemo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
@@ -42,11 +43,15 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import { useToolsPanelDropdownMenuProps } from './utils';
+import { useToolsPanelDropdownMenuProps, getResolvedRefValue } from './utils';
 import { setImmutably } from '../../utils/object';
 import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
 import { getResolvedThemeFilePath } from './theme-file-uri-utils';
+import {
+	globalStylesDataKey,
+	globalStylesLinksDataKey,
+} from '../../store/private-keys';
 
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
@@ -269,7 +274,7 @@ function BackgroundImageControls( {
 	inheritedValue,
 	onRemoveImage = noop,
 	displayInPanel,
-	themeFileURIs,
+	defaultValues,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -318,7 +323,8 @@ function BackgroundImageControls( {
 			return;
 		}
 
-		const sizeValue = style?.background?.backgroundSize;
+		const sizeValue =
+			style?.background?.backgroundSize || defaultValues?.backgroundSize;
 		const positionValue = style?.background?.backgroundPosition;
 
 		onChange(
@@ -334,6 +340,7 @@ function BackgroundImageControls( {
 					! positionValue && ( 'auto' === sizeValue || ! sizeValue )
 						? '50% 0'
 						: positionValue,
+				backgroundSize: sizeValue,
 			} )
 		);
 	};
@@ -393,10 +400,7 @@ function BackgroundImageControls( {
 				name={
 					<InspectorImagePreviewItem
 						className="block-editor-global-styles-background-panel__image-preview"
-						imgUrl={ getResolvedThemeFilePath(
-							url,
-							themeFileURIs
-						) }
+						imgUrl={ url }
 						filename={ title }
 						label={ imgLabel }
 					/>
@@ -437,7 +441,6 @@ function BackgroundSizeControls( {
 	style,
 	inheritedValue,
 	defaultValues,
-	themeFileURIs,
 } ) {
 	const sizeValue =
 		style?.background?.backgroundSize ||
@@ -564,7 +567,7 @@ function BackgroundSizeControls( {
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Focal point' ) }
-				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
+				url={ imageValue }
 				value={ backgroundPositionToCoords( positionValue ) }
 				onChange={ updateBackgroundPosition }
 			/>
@@ -679,6 +682,54 @@ export default function BackgroundPanel( {
 	headerLabel = __( 'Background image' ),
 	themeFileURIs,
 } ) {
+	const { globalStyles, _links } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const _settings = getSettings();
+		return {
+			globalStyles: _settings[ globalStylesDataKey ],
+			_links: _settings[ globalStylesLinksDataKey ],
+		};
+	}, [] );
+
+	themeFileURIs = themeFileURIs || _links?.[ 'wp:theme-file' ];
+
+	/*
+	 * Resolve any inherited "ref" pointers.
+	 * Should the block editor need inherited values
+	 * across all controls, this could be abstracted.
+	 */
+	const resolvedInheritedValue = useMemo( () => {
+		const resolvedValues = {
+			background: {},
+		};
+
+		if ( ! inheritedValue?.background ) {
+			return inheritedValue;
+		}
+
+		Object.entries( inheritedValue?.background ).forEach(
+			( [ key, backgroundValue ] ) => {
+				resolvedValues.background[ key ] = getResolvedRefValue(
+					backgroundValue,
+					{
+						styles: globalStyles,
+					}
+				);
+				if (
+					'backgroundImage' === key &&
+					resolvedValues.background[ key ]?.url
+				) {
+					resolvedValues.background[ key ].url =
+						getResolvedThemeFilePath(
+							resolvedValues.background[ key ].url,
+							themeFileURIs
+						);
+				}
+			}
+		);
+		return resolvedValues;
+	}, [ globalStyles, inheritedValue ] );
+
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -690,11 +741,11 @@ export default function BackgroundPanel( {
 		onChange( setImmutably( value, [ 'background' ], {} ) );
 
 	const { title, url } = value?.background?.backgroundImage || {
-		...inheritedValue?.background?.backgroundImage,
+		...resolvedInheritedValue?.background?.backgroundImage,
 	};
 	const hasImageValue =
 		hasBackgroundImageValue( value ) ||
-		hasBackgroundImageValue( inheritedValue );
+		hasBackgroundImageValue( resolvedInheritedValue );
 
 	const shouldShowBackgroundImageControls =
 		hasImageValue &&
@@ -724,17 +775,17 @@ export default function BackgroundPanel( {
 					<BackgroundControlsPanel
 						label={ title }
 						filename={ title }
-						url={ getResolvedThemeFilePath( url, themeFileURIs ) }
+						url={ url }
 						onToggle={ setIsDropDownOpen }
 						hasImageValue={ hasImageValue }
 					>
 						<VStack spacing={ 3 } className="single-column">
 							<BackgroundImageControls
 								onChange={ onChange }
 								style={ value }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
+								inheritedValue={ resolvedInheritedValue }
 								displayInPanel
+								defaultValues={ defaultValues }
 								onRemoveImage={ () => {
 									setIsDropDownOpen( false );
 									resetBackground();
@@ -745,17 +796,15 @@ export default function BackgroundPanel( {
 								panelId={ panelId }
 								style={ value }
 								defaultValues={ defaultValues }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
+								inheritedValue={ resolvedInheritedValue }
 							/>
 						</VStack>
 					</BackgroundControlsPanel>
 				) : (
 					<BackgroundImageControls
 						onChange={ onChange }
 						style={ value }
-						inheritedValue={ inheritedValue }
-						themeFileURIs={ themeFileURIs }
+						inheritedValue={ resolvedInheritedValue }
 					/>
 				) }
 			</div>

packages/block-editor/src/components/global-styles/hooks.js

@@ -209,11 +209,6 @@ export function useGlobalStyle(
 	return [ result, setStyle ];
 }
 
-export function useGlobalStyleLinks() {
-	const { merged: mergedConfig } = useContext( GlobalStylesContext );
-	return mergedConfig?._links;
-}
-
 /**
  * React hook that overrides a global settings object with block and element specific settings.
  *

packages/block-editor/src/components/global-styles/index.js

@@ -3,7 +3,6 @@ export {
 	useGlobalSetting,
 	useGlobalStyle,
 	useSettingsForBlockElement,
-	useGlobalStyleLinks,
 } from './hooks';
 export { getBlockCSSSelector } from './get-block-css-selector';
 export {

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

@@ -24,6 +24,8 @@ import {
 	scopeFeatureSelectors,
 	appendToSelector,
 	getBlockStyleVariationSelector,
+	compileStyleValue,
+	getResolvedRefValue,
 } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue } from './typography-utils';
@@ -54,21 +56,6 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
 };
 const { kebabCase } = unlock( componentsPrivateApis );
 
-function compileStyleValue( uncompiledValue ) {
-	const VARIABLE_REFERENCE_PREFIX = 'var:';
-	const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
-	const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-
-	if ( uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX ) ) {
-		const variable = uncompiledValue
-			.slice( VARIABLE_REFERENCE_PREFIX.length )
-			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
-			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })`;
-	}
-	return uncompiledValue;
-}
-
 /**
  * Transform given preset tree into a set of style declarations.
  *
@@ -416,8 +403,11 @@ export function getStylesDeclarations(
 			);
 		}
 
-		// Set default values for block styles except the top-level site background
-		if ( ! isRoot ) {
+		/*
+		 * Set default values for block background styles for uploaded images.
+		 * Top-level styles are an exception as they are applied to the body.
+		 */
+		if ( ! isRoot && !! blockStyles.background?.backgroundImage?.id ) {
 			blockStyles = {
 				...blockStyles,
 				background: {
@@ -442,17 +432,10 @@ export function getStylesDeclarations(
 			? rule.key
 			: kebabCase( rule.key );
 
-		let ruleValue = rule.value;
-		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
-			const refPath = ruleValue.ref.split( '.' );
-			ruleValue = compileStyleValue(
-				getValueFromObjectPath( tree, refPath )
-			);
-			// Presence of another ref indicates a reference to another dynamic value.
-			// Pointing to another dynamic value is not supported.
-			if ( ! ruleValue || ruleValue?.ref ) {
-				return;
-			}
+		let ruleValue = getResolvedRefValue( rule.value, tree, undefined );
+
+		if ( ! ruleValue ) {
+			return;
 		}
 
 		// Calculate fluid typography rules where available.

packages/block-editor/src/components/global-styles/utils.js

@@ -525,3 +525,36 @@ export function getBlockStyleVariationSelector( variation, blockSelector ) {
 
 	return result.join( ',' );
 }
+
+export function compileStyleValue( uncompiledValue ) {
+	const VARIABLE_REFERENCE_PREFIX = 'var:';
+	const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
+	const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
+
+	if ( uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX ) ) {
+		const variable = uncompiledValue
+			.slice( VARIABLE_REFERENCE_PREFIX.length )
+			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
+			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
+		return `var(--wp--${ variable })`;
+	}
+	return uncompiledValue;
+}
+
+export function getResolvedRefValue( ruleValue, tree, defaultValue ) {
+	if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
+		const refPath = ruleValue.ref.split( '.' );
+		const resolvedValue = compileStyleValue(
+			getValueFromObjectPath( tree, refPath, defaultValue )
+		);
+		/*
+		 * Presence of another ref indicates a reference to another dynamic value.
+		 * Pointing to another dynamic value is not supported.
+		 */
+		if ( ! resolvedValue || resolvedValue?.ref ) {
+			return defaultValue;
+		}
+		return resolvedValue;
+	}
+	return ruleValue;
+}

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

@@ -16,10 +16,7 @@ import {
 	useHasBackgroundPanel,
 	hasBackgroundImageValue,
 } from '../components/global-styles/background-panel';
-import {
-	globalStylesDataKey,
-	globalStylesLinksDataKey,
-} from '../store/private-keys';
+import { globalStylesDataKey } from '../store/private-keys';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
@@ -138,14 +135,13 @@ export function BackgroundImagePanel( {
 	setAttributes,
 	settings,
 } ) {
-	const { style, inheritedValue, _links } = useSelect(
+	const { style, inheritedValue } = useSelect(
 		( select ) => {
 			const { getBlockAttributes, getSettings } =
 				select( blockEditorStore );
 			const _settings = getSettings();
 			return {
 				style: getBlockAttributes( clientId )?.style,
-				_links: _settings[ globalStylesLinksDataKey ],
 				/*
 				 * @TODO 1. Pass inherited value down to all block style controls,
 				 *   See: packages/block-editor/src/hooks/style.js
@@ -191,7 +187,6 @@ export function BackgroundImagePanel( {
 			settings={ updatedSettings }
 			onChange={ onChange }
 			value={ style }
-			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }

packages/edit-site/src/components/global-styles/background-panel.js

@@ -16,7 +16,6 @@ const BACKGROUND_DEFAULT_VALUES = {
 const {
 	useGlobalStyle,
 	useGlobalSetting,
-	useGlobalStyleLinks,
 	BackgroundPanel: StylesBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
@@ -42,7 +41,6 @@ export default function BackgroundPanel() {
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const _links = useGlobalStyleLinks();
 	const [ settings ] = useGlobalSetting( '' );
 
 	return (
@@ -52,7 +50,6 @@ export default function BackgroundPanel() {
 			onChange={ setStyle }
 			settings={ settings }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
-			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }

packages/edit-site/src/components/global-styles/screen-block.js

@@ -84,7 +84,6 @@ const {
 	FiltersPanel: StylesFiltersPanel,
 	ImageSettingsPanel,
 	AdvancedPanel: StylesAdvancedPanel,
-	useGlobalStyleLinks,
 } = unlock( blockEditorPrivateApis );
 
 function ScreenBlock( { name, variation } ) {
@@ -104,7 +103,6 @@ function ScreenBlock( { name, variation } ) {
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const blockType = getBlockType( name );
-	const _links = useGlobalStyleLinks();
 
 	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
 	if (
@@ -271,7 +269,6 @@ function ScreenBlock( { name, variation } ) {
 					onChange={ setStyle }
 					settings={ settings }
 					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
-					themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 				/>
 			) }
 			{ hasTypographyPanel && (