Cleaning up a bit

WordPress · May 10, 2024 · b5be41f · b5be41f
1 parent f8a5191
commit b5be41f
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 67 deletions.
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/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 { getThemeFileURI } from './set-theme-file-uris';
 
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
@@ -191,6 +192,7 @@ function BackgroundImageToolsPanelItem( {
 	onChange,
 	style,
 	inheritedValue,
+	themeFileURIs,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -301,7 +303,7 @@ function BackgroundImageToolsPanelItem( {
 						<InspectorImagePreview
 							label={ title }
 							filename={ title || __( 'Untitled' ) }
-							url={ url }
+							url={ getThemeFileURI( url, themeFileURIs ) }
 						/>
 					}
 					variant="secondary"
@@ -340,6 +342,7 @@ function BackgroundSizeToolsPanelItem( {
 	style,
 	inheritedValue,
 	defaultValues,
+	themeFileURIs,
 } ) {
 	const sizeValue =
 		style?.background?.backgroundSize ||
@@ -468,7 +471,7 @@ function BackgroundSizeToolsPanelItem( {
 			<FocalPointPicker
 				__next40pxDefaultSize
 				label={ __( 'Position' ) }
-				url={ imageValue }
+				url={ getThemeFileURI( imageValue, themeFileURIs ) }
 				value={ backgroundPositionToCoords( positionValue ) }
 				onChange={ updateBackgroundPosition }
 			/>
@@ -553,6 +556,7 @@ export default function BackgroundPanel( {
 	defaultControls = DEFAULT_CONTROLS,
 	defaultValues = {},
 	headerLabel = __( 'Background image' ),
+	themeFileURIs,
 } ) {
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
@@ -577,6 +581,7 @@ export default function BackgroundPanel( {
 				isShownByDefault={ defaultControls.backgroundImage }
 				style={ value }
 				inheritedValue={ inheritedValue }
+				themeFileURIs={ themeFileURIs }
 			/>
 			{ shouldShowBackgroundSizeControls && (
 				<BackgroundSizeToolsPanelItem
@@ -586,6 +591,7 @@ export default function BackgroundPanel( {
 					style={ value }
 					inheritedValue={ inheritedValue }
 					defaultValues={ defaultValues }
+					themeFileURIs={ themeFileURIs }
 				/>
 			) }
 		</Wrapper>

diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
@@ -18,7 +18,6 @@ import { getValueFromVariable, getPresetVariableFromValue } from './utils';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { GlobalStylesContext } from './context';
 import { unlock } from '../../lock-unlock';
-import setThemeFileUris from './set-theme-file-uris';
 
 const EMPTY_CONFIG = { settings: {}, styles: {} };
 
@@ -179,65 +178,35 @@ export function useGlobalStyle(
 			)
 		);
 	};
-
-	let rawResult, result;
-	const mergedConfigWithResolvedThemeURIs = setThemeFileUris(
-		mergedConfig,
-		mergedConfig?._links?.theme_file_uris
-	);
+	// @TODO _links isn't a great name. styleMeta? themeMeta?
+	let rawResult, result, _links;
 	switch ( source ) {
 		case 'all':
-			rawResult = getValueFromObjectPath(
-				mergedConfigWithResolvedThemeURIs,
-				finalPath
-			);
+			rawResult = getValueFromObjectPath( mergedConfig, finalPath );
+			_links = mergedConfig?._links;
 			result = shouldDecodeEncode
-				? getValueFromVariable(
-						mergedConfigWithResolvedThemeURIs,
-						blockName,
-						rawResult
-				  )
+				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		case 'user':
-			const userConfigWithResolvedThemeURIs = setThemeFileUris(
-				userConfig,
-				userConfig?._links?.theme_file_uris
-			);
-			rawResult = getValueFromObjectPath(
-				userConfigWithResolvedThemeURIs,
-				finalPath
-			);
+			rawResult = getValueFromObjectPath( userConfig, finalPath );
+			_links = userConfig?._links;
 			result = shouldDecodeEncode
-				? getValueFromVariable(
-						mergedConfigWithResolvedThemeURIs,
-						blockName,
-						rawResult
-				  )
+				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		case 'base':
-			const baseConfigWithResolvedThemeURIs = setThemeFileUris(
-				baseConfig,
-				baseConfig?._links?.theme_file_uris
-			);
-			rawResult = getValueFromObjectPath(
-				baseConfigWithResolvedThemeURIs,
-				finalPath
-			);
+			rawResult = getValueFromObjectPath( baseConfig, finalPath );
+			_links = baseConfig?._links;
 			result = shouldDecodeEncode
-				? getValueFromVariable(
-						baseConfigWithResolvedThemeURIs,
-						blockName,
-						rawResult
-				  )
+				? getValueFromVariable( baseConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		default:
 			throw 'Unsupported source';
 	}
 
-	return [ result, setStyle ];
+	return [ result, setStyle, _links ];
 }
 
 /**

diff --git a/packages/block-editor/src/components/global-styles/set-theme-file-uris.js b/packages/block-editor/src/components/global-styles/set-theme-file-uris.js
@@ -7,9 +7,16 @@ function isRelativePath( url ) {
 	return isValidPath( url ) && ! isURL( url );
 }
 
-function getThemeFileURI( file, themeFileURIs = [] ) {
+/**
+ * Looks up a theme file URI based on a relative path.
+ *
+ * @param {string}        file          A relative path.
+ * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
+ * @return {string?} A resolved theme file URI, if one is found in the themeFileURIs collection.
+ */
+export function getThemeFileURI( file, themeFileURIs = [] ) {
 	if ( ! isRelativePath( file ) ) {
-		return;
+		return file;
 	}
 
 	const uri = themeFileURIs.find(
@@ -19,9 +26,19 @@ function getThemeFileURI( file, themeFileURIs = [] ) {
 	return uri?.href;
 }
 
+/**
+ * Houses logic of where to look for unresolved theme file paths.
+ *
+ * @param {Object}        styles        A styles object.
+ * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
+ * @return {Object} Returns mutated styles object.
+ */
 function setUnresolvedThemeFilePaths( styles, themeFileURIs ) {
 	// Top level styles.
-	if ( !! styles?.background?.backgroundImage?.url ) {
+	if (
+		!! styles?.background?.backgroundImage?.url &&
+		isRelativePath( styles?.background?.backgroundImage?.url )
+	) {
 		const backgroundImageUrl = getThemeFileURI(
 			styles?.background?.backgroundImage?.url,
 			themeFileURIs
@@ -36,10 +53,12 @@ function setUnresolvedThemeFilePaths( styles, themeFileURIs ) {
 
 /**
  * Resolves any relative paths if a corresponding theme file URI is available.
+ * Note: this function mutates the object and is specifically to be used in
+ * an async styles build context in useGlobalStylesOutput
  *
- * @param {Object} themeJson     Theme.json/Global styles tree.
- * @param          themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
- * @return {Object}
+ * @param {Object}        themeJson     Theme.json/Global styles tree.
+ * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
+ * @return {Object} Returns mutated object.
  */
 export default function setThemeFileUris( themeJson, themeFileURIs ) {
 	if ( ! themeJson?.styles || ! themeFileURIs ) {

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
@@ -1218,7 +1218,7 @@ export function processCSSNesting( css, blockSelector ) {
  */
 export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
-	const withResolvedThemeURIs = setThemeFileUris(
+	mergedConfig = setThemeFileUris(
 		mergedConfig,
 		mergedConfig?._links?.theme_file_uris
 	);
@@ -1236,15 +1236,10 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 	const { getBlockStyles } = useSelect( blocksStore );
 
 	return useMemo( () => {
-		if (
-			! withResolvedThemeURIs?.styles ||
-			! withResolvedThemeURIs?.settings
-		) {
+		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
 			return [];
 		}
-		const updatedConfig = updateConfigWithSeparator(
-			withResolvedThemeURIs
-		);
+		const updatedConfig = updateConfigWithSeparator( mergedConfig );
 
 		const blockSelectors = getBlockSelectors(
 			getBlockTypes(),
@@ -1307,7 +1302,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 	}, [
 		hasBlockGapSupport,
 		hasFallbackGapSupport,
-		withResolvedThemeURIs,
+		mergedConfig,
 		disableLayoutStyles,
 		isTemplate,
 		getBlockStyles,

diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -39,9 +39,14 @@ export default function BackgroundPanel() {
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
 	} );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
-		shouldDecodeEncode: false,
-	} );
+	const [ inheritedStyle, setStyle, _links ] = useGlobalStyle(
+		'',
+		undefined,
+		'all',
+		{
+			shouldDecodeEncode: false,
+		}
+	);
 	const [ settings ] = useGlobalSetting( '' );
 
 	const defaultControls = {
@@ -60,6 +65,7 @@ export default function BackgroundPanel() {
 			headerLabel={ __( 'Image' ) }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			defaultControls={ defaultControls }
+			themeFileURIs={ _links?.theme_file_uris }
 		/>
 	);
 }
diff --git a/...es/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js b/...es/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
@@ -119,6 +119,7 @@ export default function useGlobalStylesRevisions( { query } = {} ) {
 					id: 'unsaved',
 					styles: userConfig?.styles,
 					settings: userConfig?.settings,
+					_links: userConfig?._links,
 					author: {
 						name: currentUser?.name,
 						avatar_urls: currentUser?.avatar_urls,

diff --git a/packages/edit-site/src/components/global-styles/variations/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js
@@ -22,9 +22,6 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 );
 
 export default function Variation( { variation, children, isPill } ) {
-	// @TODO _links need to be merged as well somehow so that
-	// they are always returned in "mergedConfig" in the global-styles-provider.
-	// console.log( 'variation', variation );
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo(
@@ -42,7 +39,6 @@ export default function Variation( { variation, children, isPill } ) {
 	);
 
 	const selectVariation = () => {
-		console.log( 'variation', variation );
 		setUserConfig( () => ( {
 			settings: variation.settings,
 			styles: variation.styles,