Changeset 58170

Timestamp:

05/18/2024 08:30:57 PM (3 months ago)

Author:

isabel_brison

Message:

Editor: add column and row spans to grid children.

Adds support for setting spans using grid-column and grid-row properties on children of blocks with grid layout.

Props isabel_brison, andrewserong, peterwilsoncc, mukesh27.
Fixes #61111.

Location:

trunk

Files:

• src/wp-includes/block-supports/layout.php (modified) (5 diffs)
• src/wp-includes/kses.php (modified) (3 diffs)
• tests/phpunit/tests/block-supports/layout.php (modified) (4 diffs)

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

@@ -490 +490 @@
             $layout_styles[] = array(
                 'selector'     => $selector,
-                'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))' ),
+                'declarations' => array(
+                    'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))',
+                    'container-type'        => 'inline-size',
+                ),
             );
         }
@@ -556 +559 @@
     $block_type            = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
     $block_supports_layout = block_has_support( $block_type, 'layout', false ) || block_has_support( $block_type, '__experimentalLayout', false );
-    $layout_from_parent    = isset( $block['attrs']['style']['layout']['selfStretch'] ) ? $block['attrs']['style']['layout']['selfStretch'] : null;
-
-    if ( ! $block_supports_layout && ! $layout_from_parent ) {
+    $'] : null;
+
+    if ( ! $block_supports_layout && ! $t ) {
         return $block_content;
     }
@@ -564 +567 @@
     $outer_class_names = array();
 
-    if ( 'fixed' === $layout_from_parent || 'fill' === $layout_from_parent ) {
-        $container_content_class = wp_unique_id( 'wp-container-content-' );
-
-        $child_layout_styles = array();
-
-        if ( 'fixed' === $layout_from_parent && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
+    // Child layout specific logic.
+    if ( $child_layout ) {
+        $container_content_class   = wp_unique_prefixed_id( 'wp-container-content-' );
+        $child_layout_declarations = array();
+        $child_layout_styles       = array();
+
+        $self_stretch = isset( $child_layout['selfStretch'] ) ? $child_layout['selfStretch'] : null;
+
+        if ( 'fixed' === $self_stretch && isset( $child_layout['flexSize'] ) ) {
+            $child_layout_declarations['flex-basis'] = $child_layout['flexSize'];
+            $child_layout_declarations['box-sizing'] = 'border-box';
+        } elseif ( 'fill' === $self_stretch ) {
+            $child_layout_declarations['flex-grow'] = '1';
+        }
+
+        if ( isset( $child_layout['columnSpan'] ) ) {
+            $column_span                              = $child_layout['columnSpan'];
+            $child_layout_declarations['grid-column'] = "span $column_span";
+        }
+        if ( isset( $child_layout['rowSpan'] ) ) {
+            $row_span                              = $child_layout['rowSpan'];
+            $child_layout_declarations['grid-row'] = "span $row_span";
+        }
+        $child_layout_styles[] = array(
+            'selector'     => ".$container_content_class",
+            'declarations' => $child_layout_declarations,
+        );
+
+        /*
+         * If columnSpan is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set,
+         * the columnSpan should be removed on small grids. If there's a minimumColumnWidth, the grid is responsive.
+         * But if the minimumColumnWidth value wasn't changed, it won't be set. In that case, if columnCount doesn't
+         * exist, we can assume that the grid is responsive.
+         */
+        if ( isset( $child_layout['columnSpan'] ) && ( isset( $block['parentLayout']['minimumColumnWidth'] ) || ! isset( $block['parentLayout']['columnCount'] ) ) ) {
+            $column_span_number  = floatval( $child_layout['columnSpan'] );
+            $parent_column_width = isset( $block['parentLayout']['minimumColumnWidth'] ) ? $block['parentLayout']['minimumColumnWidth'] : '12rem';
+            $parent_column_value = floatval( $parent_column_width );
+            $parent_column_unit  = explode( $parent_column_value, $parent_column_width );
+
+            /*
+             * If there is no unit, the width has somehow been mangled so we reset both unit and value
+             * to defaults.
+             * Additionally, the unit should be one of px, rem or em, so that also needs to be checked.
+             */
+            if ( count( $parent_column_unit ) <= 1 ) {
+                $parent_column_unit  = 'rem';
+                $parent_column_value = 12;
+            } else {
+                $parent_column_unit = $parent_column_unit[1];
+
+                if ( ! in_array( $parent_column_unit, array( 'px', 'rem', 'em' ), true ) ) {
+                    $parent_column_unit = 'rem';
+                }
+            }
+
+            /*
+             * A default gap value is used for this computation because custom gap values may not be
+             * viable to use in the computation of the container query value.
+             */
+            $default_gap_value     = 'px' === $parent_column_unit ? 24 : 1.5;
+            $container_query_value = $column_span_number * $parent_column_value + ( $column_span_number - 1 ) * $default_gap_value;
+            $container_query_value = $container_query_value . $parent_column_unit;
+
             $child_layout_styles[] = array(
+
                 'selector'     => ".$container_content_class",
                 'declarations' => array(
-                    'flex-basis' => $block['attrs']['style']['layout']['flexSize'],
-                    'box-sizing' => 'border-box',
+                    'grid-column' => '1/-1',
                 ),
             );
-        } elseif ( 'fill' === $layout_from_parent ) {
-            $child_layout_styles[] = array(
-                'selector'     => ".$container_content_class",
-                'declarations' => array(
-                    'flex-grow' => '1',
-                ),
-            );
-        }
-
-        wp_style_engine_get_stylesheet_from_css_rules(
+        }
+
+        /*
+         * Add to the style engine store to enqueue and render layout styles.
+         * Return styles here just to check if any exist.
+         */
+        $child_css = wp_style_engine_get_stylesheet_from_css_rules(
             $child_layout_styles,
             array(
@@ -594 +652 @@
         );
 
-        $outer_class_names[] = $container_content_class;
+        if ( $child_css ) {
+            $outer_class_names[] = $container_content_class;
+        }
     }
 
@@ -851 +911 @@
     return $processor->get_updated_html();
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 // Register the block support.

trunk/src/wp-includes/kses.php

@@ -2442 +2442 @@
             'grid-column-start',
             'grid-column-end',
+
             'grid-column-gap',
             'grid-template-rows',
@@ -2447 +2448 @@
             'grid-row-start',
             'grid-row-end',
+
             'grid-row-gap',
             'grid-gap',
@@ -2476 +2478 @@
             'box-shadow',
             'aspect-ratio',
+
 
             // Custom CSS properties.

trunk/tests/phpunit/tests/block-supports/layout.php

@@ -173 +173 @@
      * @ticket 58548
      * @ticket 60292
+
      *
      * @dataProvider data_layout_support_flag_renders_classnames_on_wrapper
@@ -182 +183 @@
      */
     public function test_layout_support_flag_renders_classnames_on_wrapper( $args, $expected_output ) {
+
         $actual_output = wp_render_layout_support_flag( $args['block_content'], $args['block'] );
         $this->assertSame( $expected_output, $actual_output );
@@ -251 +253 @@
                 ),
                 'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper is-layout-flow wp-block-group-is-layout-flow"></div></div>',
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
             ),
             'skip classname output if block does not support layout and there are no child layout classes to be output' => array(
@@ -363 +386 @@
         );
     }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 }