From 653d32a7c791da805ff60c04695c6b50d9f9a45c Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 26 Mar 2024 14:32:33 +1100
Subject: [PATCH] Remove ref to "control" in defaultControlValues

---
 .../global-styles/background-panel.js         | 14 ++---
 packages/block-editor/src/hooks/background.js | 62 +++++++++++--------
 2 files changed, 40 insertions(+), 36 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 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 }
 				/>
 			) }
 		</Wrapper>
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 (
 		<StylesBackgroundPanel
 			as={ BackgroundInspectorControl }
 			panelId={ clientId }
 			defaultControls={ defaultControls }
-			defaultControlValues={ defaultControlValues }
+			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
 			value={ style }