Fix reset and hasValue logic, add tests, update label

packages/block-editor/src/hooks/background.js

@@ -60,13 +60,17 @@ export function hasBackgroundImageValue( style ) {
 
 /**
  * Checks if there is a current value in the background size block support
- * attributes.
+ * attributes. Background size values include background size as well
+ * as background position.
  *
  * @param {Object} style Style attribute.
  * @return {boolean}     Whether or not the block has a background size value set.
  */
 export function hasBackgroundSizeValue( style ) {
-	return style?.background?.backgroundSize !== undefined;
+	return (
+		style?.background?.backgroundPosition !== undefined ||
+		style?.background?.backgroundSize !== undefined
+	);
 }
 
 /**
@@ -131,6 +135,7 @@ function resetBackgroundSize( style = {}, setAttributes ) {
 			...style,
 			background: {
 				...style?.background,
+				backgroundPosition: undefined,
 				backgroundRepeat: undefined,
 				backgroundSize: undefined,
 			},
@@ -368,60 +373,22 @@ function backgroundSizeHelpText( value ) {
 	return __( 'Set a fixed width.' );
 }
 
-const coordsToBackgroundPosition = ( value ) => {
-	if ( ! value ) {
+export const coordsToBackgroundPosition = ( value ) => {
+	if ( ! value || isNaN( value.x ) || isNaN( value.y ) ) {
 		return undefined;
 	}
 
-	if ( value.x === 0 && value.y === 0 ) {
-		return 'left top';
-	}
-
-	if ( value.x === 0 && value.y === 1 ) {
-		return 'left bottom';
-	}
-
-	if ( value.x === 1 && value.y === 0 ) {
-		return 'right top';
-	}
-
-	if ( value.x === 1 && value.y === 1 ) {
-		return 'right bottom';
-	}
-
-	if ( value.x === 0.5 && value.y === 0.5 ) {
-		return 'center';
-	}
-
 	return `${ value.x * 100 }% ${ value.y * 100 }%`;
 };
 
-const backgroundPositionToCoords = ( value ) => {
+export const backgroundPositionToCoords = ( value ) => {
 	if ( ! value ) {
-		return { x: 0.5, y: 0.5 };
-	}
-
-	if ( value === 'left top' ) {
-		return { x: 0, y: 0 };
-	}
-
-	if ( value === 'left bottom' ) {
-		return { x: 0, y: 1 };
-	}
-
-	if ( value === 'right top' ) {
-		return { x: 1, y: 0 };
-	}
-
-	if ( value === 'right bottom' ) {
-		return { x: 1, y: 1 };
-	}
-
-	if ( value === 'center' ) {
-		return { x: 0.5, y: 0.5 };
+		return { x: undefined, y: undefined };
 	}
 
-	const [ x, y ] = value.split( ' ' ).map( ( v ) => parseFloat( v ) / 100 );
+	let [ x, y ] = value.split( ' ' ).map( ( v ) => parseFloat( v ) / 100 );
+	x = isNaN( x ) ? undefined : x;
+	y = isNaN( y ) ? x : y;
 
 	return { x, y };
 };
@@ -545,7 +512,7 @@ function BackgroundSizePanelItem( {
 			<FocalPointPicker
 				__nextHasNoMarginBottom
 				__next40pxDefaultSize
-				label={ __( 'Focal point' ) }
+				label={ __( 'Position' ) }
 				url={ style?.background?.backgroundImage?.url }
 				value={ backgroundPositionToCoords(
 					style?.background?.backgroundPosition

packages/block-editor/src/hooks/test/background.js

@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+
+import {
+	backgroundPositionToCoords,
+	coordsToBackgroundPosition,
+} from '../background';
+
+describe( 'backgroundPositionToCoords', () => {
+	it( 'should return the correct coordinates for a percentage value using 2-value syntax', () => {
+		expect( backgroundPositionToCoords( '25% 75%' ) ).toEqual( {
+			x: 0.25,
+			y: 0.75,
+		} );
+	} );
+
+	it( 'should return the correct coordinates for a percentage using 1-value syntax', () => {
+		expect( backgroundPositionToCoords( '50%' ) ).toEqual( {
+			x: 0.5,
+			y: 0.5,
+		} );
+	} );
+
+	it( 'should return undefined coords in given an empty value', () => {
+		expect( backgroundPositionToCoords( '' ) ).toEqual( {
+			x: undefined,
+			y: undefined,
+		} );
+	} );
+
+	it( 'should return undefined coords in given a string that cannot be converted', () => {
+		expect( backgroundPositionToCoords( 'apples' ) ).toEqual( {
+			x: undefined,
+			y: undefined,
+		} );
+	} );
+} );
+
+describe( 'coordsToBackgroundPosition', () => {
+	it( 'should return the correct background position for a set of coordinates', () => {
+		expect( coordsToBackgroundPosition( { x: 0.25, y: 0.75 } ) ).toBe(
+			'25% 75%'
+		);
+	} );
+
+	it( 'should return undefined if no coordinates are provided', () => {
+		expect( coordsToBackgroundPosition( {} ) ).toBeUndefined();
+	} );
+} );

packages/style-engine/src/styles/background/index.ts

@@ -40,26 +40,26 @@ const backgroundImage = {
 	},
 };
 
-const backgroundRepeat = {
+const backgroundPosition = {
 	name: 'backgroundRepeat',
 	generate: ( style: Style, options: StyleOptions ) => {
 		return generateRule(
 			style,
 			options,
-			[ 'background', 'backgroundRepeat' ],
-			'backgroundRepeat'
+			[ 'background', 'backgroundPosition' ],
+			'backgroundPosition'
 		);
 	},
 };
 
-const backgroundPosition = {
+const backgroundRepeat = {
 	name: 'backgroundRepeat',
 	generate: ( style: Style, options: StyleOptions ) => {
 		return generateRule(
 			style,
 			options,
-			[ 'background', 'backgroundPosition' ],
-			'backgroundPosition'
+			[ 'background', 'backgroundRepeat' ],
+			'backgroundRepeat'
 		);
 	},
 };
@@ -103,7 +103,7 @@ const backgroundSize = {
 
 export default [
 	backgroundImage,
-	backgroundRepeat,
 	backgroundPosition,
+	backgroundRepeat,
 	backgroundSize,
 ];

packages/style-engine/src/test/index.js

@@ -229,6 +229,7 @@ describe( 'getCSSRules', () => {
 							source: 'file',
 							url: 'https://example.com/image.jpg',
 						},
+						backgroundPosition: '50% 50%',
 						backgroundRepeat: 'no-repeat',
 						backgroundSize: '300px',
 					},
@@ -384,6 +385,11 @@ describe( 'getCSSRules', () => {
 				key: 'backgroundImage',
 				value: "url( 'https://example.com/image.jpg' )",
 			},
+			{
+				selector: '.some-selector',
+				key: 'backgroundPosition',
+				value: '50% 50%',
+			},
 			{
 				selector: '.some-selector',
 				key: 'backgroundRepeat',