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 17d9066067f792..76216fcc918e6e 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -335,7 +335,7 @@ function BackgroundSizeToolsPanelItem( { onChange, style, inheritedValue, - defaultControlValues, + defaultValues, } ) { const sizeValue = style?.background?.backgroundSize || @@ -363,7 +363,7 @@ function BackgroundSizeToolsPanelItem( { sizeValue !== 'contain' ) || sizeValue === '' ? 'auto' - : sizeValue || defaultControlValues?.backgroundSize; + : sizeValue || defaultValues?.backgroundSize; /* * If the current value is `cover` and the repeat value is `undefined`, then @@ -394,16 +394,11 @@ function BackgroundSizeToolsPanelItem( { const updateBackgroundSize = ( next ) => { // When switching to 'contain' toggle the repeat off. let nextRepeat = repeatValue; - let nextPosition = positionValue; if ( next === 'contain' ) { nextRepeat = 'no-repeat'; } - if ( next !== 'contain' && nextPosition === 'center' ) { - nextPosition = undefined; - } - if ( next === 'cover' ) { nextRepeat = undefined; } @@ -419,7 +414,6 @@ function BackgroundSizeToolsPanelItem( { onChange( setImmutably( style, [ 'background' ], { ...style?.background, - backgroundPosition: nextPosition, backgroundRepeat: nextRepeat, backgroundSize: next, } ) @@ -557,7 +551,7 @@ export default function BackgroundPanel( { settings, panelId, defaultControls = DEFAULT_CONTROLS, - defaultControlValues = {}, + defaultValues = {}, } ) { const resetAllFilter = useCallback( ( previousValue ) => { return { @@ -589,7 +583,7 @@ export default function BackgroundPanel( { isShownByDefault={ defaultControls.backgroundSize } style={ value } inheritedValue={ inheritedValue } - defaultControlValues={ defaultControlValues } + defaultValues={ defaultValues } /> ) } diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js index e368e78ff70478..7c8d62d5dd5a99 100644 --- a/packages/block-editor/src/hooks/background.js +++ b/packages/block-editor/src/hooks/background.js @@ -19,6 +19,11 @@ import { export const BACKGROUND_SUPPORT_KEY = 'background'; +// Initial control values where no block style is set. +const BACKGROUND_BLOCK_DEFAULT_VALUES = { + backgroundSize: 'cover', +}; + /** * Determine whether there is block support for background. * @@ -45,44 +50,54 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) { return !! support?.[ feature ]; } -function useBlockProps( { name, style } ) { - if ( - ! hasBackgroundSupport( name ) || - ! style?.background?.backgroundImage - ) { +export function setBackgroundStyleDefaults( backgroundStyle ) { + if ( ! backgroundStyle ) { return; } - const backgroundImage = style?.background?.backgroundImage; - let props; + const backgroundImage = backgroundStyle?.backgroundImage; + let backgroundStylesWithDefaults; // Set block background defaults. if ( backgroundImage?.source === 'file' && !! backgroundImage?.url ) { - if ( ! style?.background?.backgroundSize ) { - props = { - style: { - backgroundSize: 'cover', - }, + if ( ! backgroundStyle?.backgroundSize ) { + backgroundStylesWithDefaults = { + backgroundSize: 'cover', }; } if ( - 'contain' === style?.background?.backgroundSize && - ! style?.background?.backgroundPosition + 'contain' === backgroundStyle?.backgroundSize && + ! backgroundStyle?.backgroundPosition ) { - props = { - style: { - backgroundPosition: 'center', - }, + backgroundStylesWithDefaults = { + backgroundPosition: 'center', }; } } - if ( ! props ) { + return backgroundStylesWithDefaults; +} + +function useBlockProps( { name, style } ) { + if ( + ! hasBackgroundSupport( name ) || + ! style?.background?.backgroundImage + ) { + return; + } + + const backgroundStyles = setBackgroundStyleDefaults( style?.background ); + + if ( ! backgroundStyles ) { return; } - return props; + return { + style: { + ...backgroundStyles, + }, + }; } /** @@ -153,17 +168,12 @@ export function BackgroundImagePanel( { }, }; - // Initial control values where no block style is set. - const defaultControlValues = { - backgroundSize: 'cover', - }; - return (