Cleaning up. Using single row value where blockGap isn't split.

WordPress · Oct 26, 2021 · 4ab1ff9 · 4ab1ff9
1 parent a1893e5
commit 4ab1ff9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 33 deletions.
diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
@@ -111,38 +111,40 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
 	$styles = [];
 	if ( is_array( $gap_value ) ) {
 
-		// This is messy I know.. just testing
-		if (
-			! preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] ) &&
-			! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] )
-		) {
+		// Skip if gap value contains unsupported characters.
+		// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
+		// because we only want to match against the value, not the CSS attribute.
+		$gap_row_value_is_valid    = ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] );
+		$gap_column_value_is_valid = ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] );
+
+
+		if ( $gap_row_value_is_valid && $gap_column_value_is_valid ) {
 			$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value['row'] ), esc_attr( $gap_value['column'] ) );
 		}
 
-		if ( ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] ) ) {
+		if ( $gap_row_value_is_valid ) {
 			$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value['row'] ) );
 		}
 
-		if ( ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] ) ) {
+		if ( $gap_column_value_is_valid ) {
 			$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value['column'] ) );
 		}
 
 	} else {
-
-		if ( ! preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
-			$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value ), esc_attr( $gap_value ) );
-			$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value ) );
-			$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value ) );
+		// Skip if gap value contains unsupported characters.
+		// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
+		// because we only want to match against the value, not the CSS attribute.
+		if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
+			return $block_content;
 		}
 
+		$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value ), esc_attr( $gap_value ) );
+		$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value ) );
+		$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value ) );
+
 	}
 
-	// Skip if gap value contains unsupported characters.
-	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
-	// because we only want to match against the value, not the CSS attribute.
-//	if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
-//		return $block_content;
-//	}
+
 
 //	$style = sprintf(
 //		'--wp--style--block-gap: %s',

diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isObject } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -112,21 +107,16 @@ export function GapEdit( props ) {
 	}
 
 	const onChange = ( next ) => {
-		// TODO: make this less bad
-		if ( ! isObject( next ) ) {
-			next = {
-				top: next,
-				left: next,
-			};
-		}
+		const row = next?.top ?? next;
+		const column = next?.left ?? next;
 
 		const newStyle = {
 			...style,
 			spacing: {
 				...style?.spacing,
 				blockGap: {
-					row: next?.top,
-					column: next?.left,
+					row,
+					column,
 				},
 			},
 		};
@@ -177,7 +167,8 @@ export function GapEdit( props ) {
 						min={ 0 }
 						onChange={ onChange }
 						units={ units }
-						value={ style?.spacing?.blockGap }
+						// Default to `row` for combined values.
+						value={ style?.spacing?.blockGap?.row }
 					/>
 				) }
 			</>