From ebcf8d0c029c623b5c0f3eaa4da4023d9e1866bd Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 8 May 2024 16:17:25 +1000 Subject: [PATCH] Background image: size controls should show when an image is set (#61388) * In the site editor, show the background size panel if a value is present, just like block styles. * Show size controls by default * Revert inherited style check Co-authored-by: ramonjd Co-authored-by: andrewserong Co-authored-by: jameskoster --- .../global-styles/background-panel.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) 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 2addf109873aae..65dd9738b2b4fb 100644 --- a/packages/edit-site/src/components/global-styles/background-panel.js +++ b/packages/edit-site/src/components/global-styles/background-panel.js @@ -20,6 +20,21 @@ const { BackgroundPanel: StylesBackgroundPanel, } = unlock( blockEditorPrivateApis ); +/** + * Checks if there is a current value in the background image block support + * attributes. + * + * @param {Object} style Style attribute. + * @return {boolean} Whether the block has a background image value set. + */ +export function hasBackgroundImageValue( style ) { + return ( + !! style?.background?.backgroundImage?.id || + !! style?.background?.backgroundImage?.url || + typeof style?.background?.backgroundImage === 'string' + ); +} + export default function BackgroundPanel() { const [ style ] = useGlobalStyle( '', undefined, 'user', { shouldDecodeEncode: false, @@ -32,8 +47,8 @@ export default function BackgroundPanel() { const defaultControls = { backgroundImage: true, backgroundSize: - !! style?.background?.backgroundImage && - !! inheritedStyle?.background?.backgroundImage, + hasBackgroundImageValue( style ) || + hasBackgroundImageValue( inheritedStyle ), }; return (