Background image support: Fix issue with background position if keyboard entry happens before mouse interaction (#59050)

andrewserong · tellthemachines · youknowriad · commit 9b48e8619624 · 2024-02-20T15:21:18.000+01:00
Co-authored-by: andrewserong &lt;andrewserong@git.wordpress.org&gt;
Co-authored-by: tellthemachines &lt;isabel_brison@git.wordpress.org&gt;
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
@@ -374,11 +374,14 @@ function backgroundSizeHelpText( value ) {
 }
 
 export const coordsToBackgroundPosition = ( value ) => {
-	if ( ! value || isNaN( value.x ) || isNaN( value.y ) ) {
+	if ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {
 		return undefined;
 	}
 
-	return `${ value.x * 100 }% ${ value.y * 100 }%`;
+	const x = isNaN( value.x ) ? 0.5 : value.x;
+	const y = isNaN( value.y ) ? 0.5 : value.y;
+
+	return `${ x * 100 }% ${ y * 100 }%`;
 };
 
 export const backgroundPositionToCoords = ( value ) => {

Original file line number	Diff line number	Diff line change
`@@ -374,11 +374,14 @@ function backgroundSizeHelpText( value ) {`
`374`	`374`	`}`
`375`	`375`
`376`	`376`	`export const coordsToBackgroundPosition = ( value ) => {`
`377`		`- if ( ! value \|\| isNaN( value.x ) \|\| isNaN( value.y ) ) {`
	`377`	`+ if ( ! value \|\| ( isNaN( value.x ) && isNaN( value.y ) ) ) {`
`378`	`378`	`return undefined;`
`379`	`379`	`}`
`380`	`380`
`381`		- return `${ value.x * 100 }% ${ value.y * 100 }%`;
	`381`	`+ const x = isNaN( value.x ) ? 0.5 : value.x;`
	`382`	`+ const y = isNaN( value.y ) ? 0.5 : value.y;`
	`383`	`+`
	`384`	+ return `${ x * 100 }% ${ y * 100 }%`;
`382`	`385`	`};`
`383`	`386`
`384`	`387`	`export const backgroundPositionToCoords = ( value ) => {`