Checking for gap array items before using them.

WordPress · Feb 21, 2022 · 2bcb42b · 2bcb42b
1 parent 69dd44f
commit 2bcb42b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -95,13 +95,16 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		$style .= 'display: flex;';
 		if ( $has_block_gap_support ) {
 			if ( is_array( $gap_value ) ) {
-				$gap_value = $gap_value['left'] === $gap_value['top'] ? $gap_value['top'] : $gap_value['top'] . ' ' . $gap_value['left'];
+				$gap_row    = isset( $gap_value['top'] ) ? $gap_value['top'] : '0.5em';
+				$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em';
+				$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
 			}
 			$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
 			$style    .= "gap: $gap_style;";
 		} else {
 			$style .= 'gap: 0.5em;';
 		}
+
 		$style .= "flex-wrap: $flex_wrap;";
 		if ( 'horizontal' === $layout_orientation ) {
 			$style .= 'align-items: center;';
@@ -161,8 +164,15 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	// 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_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
-	$style     = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support, $gap_value );
+	if ( is_array( $gap_value ) ) {
+		foreach ( $gap_value as $key => $value ) {
+			$gap_value[ $key ] = preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
+		}
+	} else {
+		$gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
+	}
+
+	$style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support, $gap_value );
 	// This assumes the hook only applies to blocks with a single wrapper.
 	// I think this is a reasonable limitation for that particular hook.
 	$content = preg_replace(

diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
@@ -53,10 +53,10 @@ export function getGapValueFromStyle( rawBlockGapValue ) {
 	}
 
 	const isValueString = typeof rawBlockGapValue === 'string';
-	return cleanEmptyObject( {
+	return {
 		top: isValueString ? rawBlockGapValue : rawBlockGapValue?.top,
 		left: isValueString ? rawBlockGapValue : rawBlockGapValue?.left,
-	} );
+	};
 }
 
 /**