Returning null instead of the argument in getGapCSSValue and updated …

…tests Added comment to explain how we build and pass the boxcontrol component value.
WordPress · Mar 16, 2022 · 75ade72 · 75ade72
1 parent 8c7ccc1
commit 75ade72
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
@@ -64,12 +64,12 @@ export function getGapValueFromStyle( rawBlockGapValue ) {
  *
  * @param {string? | Object?} blockGapValue A style object.
  * @param {string?}           defaultValue  A default gap value.
- * @return {string?}                        The concatenated gap value (row and column).
+ * @return {string|null}                    The concatenated gap value (row and column).
  */
 export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
 	const blockGapBoxControlValue = getGapValueFromStyle( blockGapValue );
 	if ( ! blockGapBoxControlValue ) {
-		return blockGapBoxControlValue;
+		return null;
 	}
 
 	const row = blockGapBoxControlValue?.top || defaultValue;
@@ -174,6 +174,9 @@ export function GapEdit( props ) {
 	const splitOnAxis =
 		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const gapValue = getGapValueFromStyle( style?.spacing?.blockGap );
+
+	// The BoxControl component expects a full complement of side values.
+	// Gap row and column values translate to top/bottom and left/right respectively.
 	const boxControlGapValue = splitOnAxis
 		? {
 				...gapValue,

diff --git a/packages/block-editor/src/hooks/test/gap.js b/packages/block-editor/src/hooks/test/gap.js
@@ -5,8 +5,9 @@ import { getGapCSSValue } from '../gap';
 
 describe( 'gap', () => {
 	describe( 'getGapCSSValue()', () => {
-		it( 'should return argument if argument is falsey', () => {
-			expect( getGapCSSValue( undefined ) ).toBeUndefined();
+		it( 'should return `null` if argument is falsey', () => {
+			expect( getGapCSSValue( undefined ) ).toBeNull();
+			expect( getGapCSSValue( '' ) ).toBeNull();
 		} );
 
 		it( 'should return single value for gap if argument is valid string', () => {