Changeset 58170 for trunk/src/wp-includes/block-supports/layout.php

Timestamp:

05/18/2024 08:30:57 PM (14 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.

File:

• trunk/src/wp-includes/block-supports/layout.php (modified) (5 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 ) {
+    $child_layout          = isset( $block['attrs']['style']['layout'] ) ? $block['attrs']['style']['layout'] : null;
+
+    if ( ! $block_supports_layout && ! $child_layout ) {
         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(
+                'rules_group'  => "@container (max-width: $container_query_value )",
                 '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();
 }
+
+/**
+ * Check if the parent block exists and if it has a layout attribute.
+ * If it does, add the parent layout to the parsed block
+ *
+ * @since 6.6.0
+ * @access private
+ *
+ * @param array    $parsed_block The parsed block.
+ * @param array    $source_block The source block.
+ * @param WP_Block $parent_block The parent block.
+ * @return array The parsed block with parent layout attribute if it exists.
+ */
+function wp_add_parent_layout_to_parsed_block( $parsed_block, $source_block, $parent_block ) {
+    if ( $parent_block && isset( $parent_block->parsed_block['attrs']['layout'] ) ) {
+        $parsed_block['parentLayout'] = $parent_block->parsed_block['attrs']['layout'];
+    }
+    return $parsed_block;
+}
+
+add_filter( 'render_block_data', 'wp_add_parent_layout_to_parsed_block', 10, 3 );
 
 // Register the block support.