Hide repeat toggle when using cover, ensure updating fixed size doesn…

…'t change repeat value
WordPress · Dec 21, 2023 · 10ac7f8 · 10ac7f8
1 parent becb2e8
commit 10ac7f8
Showing 1 changed file with 21 additions and 7 deletions.
diff --git 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>
 	);
 }