Background image: explicitly set background repeat value in user styl…

…es (#61526) * Update wrong key in style engine Fix edge case in which theme.json defines a backgroundSize value of 'cover' and a backgroundRepeat value. If a user backgroundSize is set, ignore the inherited backgroundRepeat value as style?.background?.backgroundRepeat is deliberately set to undefined in updateBackgroundSize(). * Add backgroundPosition to VALID STYLES. Roll back previous fix, and explicitly set backgroundRepeat to "repeat", because it seems as if it's being overwritten by merging styles (undefined values are stripped) * Update constants.js Co-authored-by: ramonjd <[email protected]> Co-authored-by: andrewserong <[email protected]>
WordPress · May 10, 2024 · 02c6a8f · 02c6a8f
1 parent d3e377f
commit 02c6a8f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 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
@@ -439,7 +439,7 @@ function BackgroundSizeToolsPanelItem( {
 			setImmutably(
 				style,
 				[ 'background', 'backgroundRepeat' ],
-				repeatCheckedValue === true ? 'no-repeat' : undefined
+				repeatCheckedValue === true ? 'no-repeat' : 'repeat'
 			)
 		);
 

diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
@@ -51,6 +51,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		support: [ 'background', 'backgroundSize' ],
 		useEngine: true,
 	},
+	backgroundPosition: {
+		value: [ 'background', 'backgroundPosition' ],
+		support: [ 'background', 'backgroundPosition' ],
+		useEngine: true,
+	},
 	borderColor: {
 		value: [ 'border', 'color' ],
 		support: [ '__experimentalBorder', 'color' ],

diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
@@ -39,7 +39,7 @@ const backgroundImage = {
 };
 
 const backgroundPosition = {
-	name: 'backgroundRepeat',
+	name: 'backgroundPosition',
 	generate: ( style: Style, options: StyleOptions ) => {
 		return generateRule(
 			style,