diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 7a99a46943dbc6..08ed251da48992 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/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={
@@ -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,7 +775,7 @@ export default function BackgroundPanel( {
@@ -732,9 +783,9 @@ export default function BackgroundPanel( {
{
setIsDropDownOpen( false );
resetBackground();
@@ -745,8 +796,7 @@ export default function BackgroundPanel( {
panelId={ panelId }
style={ value }
defaultValues={ defaultValues }
- inheritedValue={ inheritedValue }
- themeFileURIs={ themeFileURIs }
+ inheritedValue={ resolvedInheritedValue }
/>
@@ -754,8 +804,7 @@ export default function BackgroundPanel( {
) }
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
index a1a4fc1a0a6ae1..2be77aec18a2c6 100644
--- a/packages/block-editor/src/components/global-styles/hooks.js
+++ b/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.
*
diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js
index 062df0a5606e90..8096a48569f199 100644
--- a/packages/block-editor/src/components/global-styles/index.js
+++ b/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 {
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 0642641aa17870..bd3d3b116740f8 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/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' ] }
/>
);
}
diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
index 24ab914bed8c52..e185079d8cee04 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/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' ] }
/>
);
}
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index a16a01956f5a88..95ba1f5211a9c9 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/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 && (