diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 830cbc1ef5458..779015a09ff95 100644 --- 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 index 869f4f62d04a6..6445d1ebd9774 100644 --- 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, - } ); + }; } /**