From 10ac7f8bb309f11ca5030cac2364d00236710382 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 21 Dec 2023 15:04:38 +1100
Subject: [PATCH] Hide repeat toggle when using cover, ensure updating fixed
 size doesn't change repeat value

---
 packages/block-editor/src/hooks/background.js | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 3d648e1928c6e8..67373ecd0516ca 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -409,7 +409,19 @@ function BackgroundSizePanelItem( {
 
 	const updateBackgroundSize = ( next ) => {
 		// When switching to 'contain' toggle the repeat off.
-		const nextRepeat = next === 'contain' ? 'no-repeat' : undefined;
+		let nextRepeat = repeatValue;
+
+		if ( next === 'contain' ) {
+			nextRepeat = 'no-repeat';
+		}
+
+		if (
+			( currentValueForToggle === 'cover' ||
+				currentValueForToggle === 'contain' ) &&
+			next === 'auto'
+		) {
+			nextRepeat = undefined;
+		}
 
 		setAttributes( {
 			style: cleanEmptyObject( {
@@ -482,12 +494,14 @@ function BackgroundSizePanelItem( {
 					value={ sizeValue }
 				/>
 			) : null }
-			<ToggleControl
-				__nextHasNoMarginBottom
-				label={ __( 'Repeat image' ) }
-				checked={ repeatCheckedValue }
-				onChange={ toggleIsRepeated }
-			/>
+			{ currentValueForToggle !== 'cover' && (
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Repeat image' ) }
+					checked={ repeatCheckedValue }
+					onChange={ toggleIsRepeated }
+				/>
+			) }
 		</VStack>
 	);
 }