From c42b6cc4ca6004f9890e1aadce280c7aec7d1a9c Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Tue, 9 Apr 2024 09:39:50 +1000
Subject: [PATCH] Background image: display default background size value in
 global styles (#60490)

* rename constant to BACKGROUND_DEFAULT_VALUES
ensure that the default background size is displayed in the control

* Tesating if `currentValueForToggle` is a good substitute for sizeValue to determine if the size control should be displayed

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 .../src/components/global-styles/background-panel.js        | 6 +++---
 packages/block-editor/src/hooks/background.js               | 4 ++--
 .../src/components/global-styles/background-panel.js        | 6 ++++++
 3 files changed, 11 insertions(+), 5 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 1288ff823b46cd..c1354bbc4a4e14 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -492,9 +492,9 @@ function BackgroundSizeToolsPanelItem( {
 					label={ __( 'Fixed' ) }
 				/>
 			</ToggleGroupControl>
-			{ sizeValue !== undefined &&
-			sizeValue !== 'cover' &&
-			sizeValue !== 'contain' ? (
+			{ currentValueForToggle !== undefined &&
+			currentValueForToggle !== 'cover' &&
+			currentValueForToggle !== 'contain' ? (
 				<UnitControl
 					size={ '__unstable-large' }
 					onChange={ updateBackgroundSize }
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 7c8d62d5dd5a99..3d47f42645afca 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -20,7 +20,7 @@ import {
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
 // Initial control values where no block style is set.
-const BACKGROUND_BLOCK_DEFAULT_VALUES = {
+const BACKGROUND_DEFAULT_VALUES = {
 	backgroundSize: 'cover',
 };
 
@@ -173,7 +173,7 @@ export function BackgroundImagePanel( {
 			as={ BackgroundInspectorControl }
 			panelId={ clientId }
 			defaultControls={ defaultControls }
-			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
 			value={ style }
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 e4760a810ecbc2..cae8bdba61871f 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -8,6 +8,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { unlock } from '../../lock-unlock';
 
+// Initial control values where no block style is set.
+const BACKGROUND_DEFAULT_VALUES = {
+	backgroundSize: 'auto',
+};
+
 const {
 	useGlobalStyle,
 	useGlobalSetting,
@@ -29,6 +34,7 @@ export default function BackgroundPanel() {
 			value={ style }
 			onChange={ setStyle }
 			settings={ settings }
+			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 		/>
 	);
 }