Background image: display default background size value in global sty…

…les (#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 <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Apr 8, 2024 · e9edf65 · e9edf65
1 parent d6a9db5
commit e9edf65
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 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
@@ -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
@@ -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
@@ -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 }
 		/>
 	);
 }