From 55e839a3d92fb2d75ca54279e449676ea300fd78 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 6 May 2024 16:19:58 +1000 Subject: [PATCH 1/3] In the site editor, show the background size panel if a value is present, just like block styles. --- .../src/components/global-styles/background-panel.js | 4 +++- .../src/components/global-styles/background-panel.js | 4 +--- 2 files changed, 4 insertions(+), 4 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 f45c787e45589..771782f28e3ee 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -379,7 +379,9 @@ function BackgroundSizeToolsPanelItem( { ( currentValueForToggle === 'cover' && repeatValue === undefined ) ); - const hasValue = hasBackgroundSizeValue( style ); + const hasValue = + hasBackgroundSizeValue( inheritedValue ) || + hasBackgroundSizeValue( style ); const resetAllFilter = useCallback( ( previousValue ) => { return { 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 2addf109873aa..798e4bfe610f3 100644 --- a/packages/edit-site/src/components/global-styles/background-panel.js +++ b/packages/edit-site/src/components/global-styles/background-panel.js @@ -31,9 +31,7 @@ export default function BackgroundPanel() { const defaultControls = { backgroundImage: true, - backgroundSize: - !! style?.background?.backgroundImage && - !! inheritedStyle?.background?.backgroundImage, + backgroundSize: false, }; return ( From 00b579d0472234630412212a143d1c414d14c45c Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 8 May 2024 11:59:47 +1000 Subject: [PATCH 2/3] Show size controls by default --- .../global-styles/background-panel.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) 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 798e4bfe610f3..65dd9738b2b4f 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, @@ -31,7 +46,9 @@ export default function BackgroundPanel() { const defaultControls = { backgroundImage: true, - backgroundSize: false, + backgroundSize: + hasBackgroundImageValue( style ) || + hasBackgroundImageValue( inheritedStyle ), }; return ( From 44e31198a36f7b8e7349570cc62b0131393cc37c Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 8 May 2024 15:40:54 +1000 Subject: [PATCH 3/3] Revert inherited style check --- .../src/components/global-styles/background-panel.js | 4 +--- 1 file changed, 1 insertion(+), 3 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 771782f28e3ee..f45c787e45589 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -379,9 +379,7 @@ function BackgroundSizeToolsPanelItem( { ( currentValueForToggle === 'cover' && repeatValue === undefined ) ); - const hasValue = - hasBackgroundSizeValue( inheritedValue ) || - hasBackgroundSizeValue( style ); + const hasValue = hasBackgroundSizeValue( style ); const resetAllFilter = useCallback( ( previousValue ) => { return {