Changeset 53085

Timestamp:

04/06/2022 11:39:55 AM (3 years ago)

Author:

gziolo

Message:

Editor: Update layout handling for block supports

Backports changes applied in the Gutenberg plugin planned for WordPress 6.0 release. See ​https://github.com/WordPress/gutenberg/issues/39889.

Props ramonopoly, youknowriad.
See #55505.

Location:

trunk

Files:

• src/wp-includes/block-supports/layout.php (modified) (8 diffs)
• tests/phpunit/tests/block-supports/layout.php (added)

trunk/src/wp-includes/block-supports/layout.php

@@ -36 +36 @@
  * @access private
  *
- * @param string $selector              CSS selector.
- * @param array  $layout                Layout object. The one that is passed has already checked
- *                                      the existence of default block layout.
- * @param bool   $has_block_gap_support Whether the theme has support for the block gap.
- * @param string $gap_value             The block gap value to apply.
+ * @param string  $selector                      CSS selector.
+ * @param array   $layout                        Layout object. The one that is passed has already checked
+ *                                               the existence of default block layout.
+ * @param boolean $has_block_gap_support         Whether the theme has support for the block gap.
+ * @param string  $gap_value                     The block gap value to apply.
+ * @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
  * @return string CSS style.
  */
-function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null ) {
+function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false ) {
     $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
 
@@ -58 +59 @@
         $wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] );
 
-        $style = '';
         if ( $content_size || $wide_size ) {
-            $style  = "$selector > * {";
+            $style  = "$selector > :where(:not(.alignleft):not(.alignright)) {";
             $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
             $style .= 'margin-left: auto !important;';
@@ -70 +70 @@
         }
 
-        $style .= "$selector .alignleft { float: left; margin-right: 2em; }";
-        $style .= "$selector .alignright { float: right; margin-left: 2em; }";
+        $style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
+        $style .= "$selector > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }";
+        $style .= "$selector > .aligncenter { margin-left: auto !important; margin-right: auto !important; }";
         if ( $has_block_gap_support ) {
-            $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
-            $style    .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
-            $style    .= "$selector > * + * { margin-top: $gap_style;  margin-bottom: 0; }";
+            if ( is_array( $gap_value ) ) {
+                $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
+            }
+            $gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap )';
+            $style    .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";
+            $style    .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }";
         }
     } elseif ( 'flex' === $layout_type ) {
@@ -98 +102 @@
         $style .= 'display: flex;';
         if ( $has_block_gap_support ) {
-            $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
+            if ( is_array( $gap_value ) ) {
+                $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 && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
             $style    .= "gap: $gap_style;";
         } else {
             $style .= 'gap: 0.5em;';
         }
+
         $style .= "flex-wrap: $flex_wrap;";
-        $style .= 'align-items: center;';
         if ( 'horizontal' === $layout_orientation ) {
             $style .= 'align-items: center;';
@@ -119 +128 @@
             if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
                 $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
+            } else {
+                $style .= 'align-items: flex-start;';
             }
         }
@@ -164 +175 @@
     // 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     = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value );
+    if ( is_array( $gap_value ) ) {
+        foreach ( $gap_value as $key => $value ) {
+            $gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
+        }
+    } else {
+        $gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
+    }
+
+    // If a block's block.json skips serialization for spacing or spacing.blockGap,
+    // don't apply the user-defined value to the styles.
+    $should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
+    $style                         = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization );
     // This assumes the hook only applies to blocks with a single wrapper.
     // I think this is a reasonable limitation for that particular hook.
@@ -209 +230 @@
 
     if (
-        'core/group' !== $block['blockName'] ||
         WP_Theme_JSON_Resolver::theme_has_support() ||
         1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
@@ -231 +251 @@
 }
 
-add_filter( 'render_block', 'wp_restore_group_inner_container', 10, 2 );
+add_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10, 2 );
+
+/**
+ * For themes without theme.json file, make sure
+ * to restore the outer div for the aligned image block
+ * to avoid breaking styles relying on that div.
+ *
+ * @since 6.0.0
+ * @access private
+ *
+ * @param string $block_content Rendered block content.
+ * @param  array  $block        Block object.
+ * @return string Filtered block content.
+ */
+function wp_restore_image_outer_container( $block_content, $block ) {
+    $image_with_align = "
+/# 1) everything up to the class attribute contents
+(
+    ^\s*
+    <figure\b
+    [^>]*
+    \bclass=
+    [\"']
+)
+# 2) the class attribute contents
+(
+    [^\"']*
+    \bwp-block-image\b
+    [^\"']*
+    \b(?:alignleft|alignright|aligncenter)\b
+    [^\"']*
+)
+# 3) everything after the class attribute contents
+(
+    [\"']
+    [^>]*
+    >
+    .*
+    <\/figure>
+)/iUx";
+
+    if (
+        WP_Theme_JSON_Resolver::theme_has_support() ||
+        0 === preg_match( $image_with_align, $block_content, $matches )
+    ) {
+        return $block_content;
+    }
+
+    $wrapper_classnames = array( 'wp-block-image' );
+
+    // If the block has a classNames attribute these classnames need to be removed from the content and added back
+    // to the new wrapper div also.
+    if ( ! empty( $block['attrs']['className'] ) ) {
+        $wrapper_classnames = array_merge( $wrapper_classnames, explode( ' ', $block['attrs']['className'] ) );
+    }
+    $content_classnames          = explode( ' ', $matches[2] );
+    $filtered_content_classnames = array_diff( $content_classnames, $wrapper_classnames );
+
+    return '<div class="' . implode( ' ', $wrapper_classnames ) . '">' . $matches[1] . implode( ' ', $filtered_content_classnames ) . $matches[3] . '</div>';
+}
+
+add_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10, 2 );