From 43e9107e4ea6cb0115ed08af2ce794d2867f7246 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 1 Aug 2024 16:50:34 +1000 Subject: [PATCH] Consolidating all resolutions in the background panel - removing useGlobalStyleLinks in the process Ensuring only uploaded block images get the defaults. --- .../global-styles/background-panel.js | 85 +++++++++++++++---- .../src/components/global-styles/hooks.js | 5 -- .../src/components/global-styles/index.js | 1 - .../global-styles/use-global-styles-output.js | 39 +++------ .../src/components/global-styles/utils.js | 33 +++++++ packages/block-editor/src/hooks/background.js | 9 +- .../global-styles/background-panel.js | 3 - .../components/global-styles/screen-block.js | 3 - 8 files changed, 113 insertions(+), 65 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 index 7a99a46943dbc..08ed251da4899 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 a1a4fc1a0a6ae..2be77aec18a2c 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 062df0a5606e9..8096a48569f19 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/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index fce2c9b13724b..2f06a8d63acfa 100644 --- 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 @@ -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. diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index bf84e6f0b5765..3b1c7dcd89ca1 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/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; +} diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js index 0642641aa1787..bd3d3b116740f 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 24ab914bed8c5..e185079d8cee0 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 a16a01956f5a8..95ba1f5211a9c 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 && (