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

Timestamp:

02/07/2023 05:41:11 PM (20 months ago)

Author:

flixos90

Message:

Editor: Add layout controls to children of flex layout blocks.

Props isabel_brison, andrewserong, davidbaumwald, flixos90, mamaduka, ntsekouras, hellofromtonya.
Fixes #57584.

File:

• trunk/src/wp-includes/block-supports/layout.php (modified) (4 diffs)

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

@@ -322 +322 @@
     $block_type     = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
     $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
-
-    if ( ! $support_layout ) {
+    $has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] );
+
+    if ( ! $support_layout && ! $has_child_layout ) {
         return $block_content;
+    }
+    $outer_class_names = array();
+
+    if ( $has_child_layout && ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] || 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) ) {
+        $container_content_class = wp_unique_id( 'wp-container-content-' );
+
+        $child_layout_styles = array();
+
+        if ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
+            $child_layout_styles[] = array(
+                'selector'     => ".$container_content_class",
+                'declarations' => array(
+                    'flex-basis' => $block['attrs']['style']['layout']['flexSize'],
+                    'box-sizing' => 'border-box',
+                ),
+            );
+        } elseif ( 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) {
+            $child_layout_styles[] = array(
+                'selector'     => ".$container_content_class",
+                'declarations' => array(
+                    'flex-grow' => '1',
+                ),
+            );
+        }
+
+        wp_style_engine_get_stylesheet_from_css_rules(
+            $child_layout_styles,
+            array(
+                'context'  => 'block-supports',
+                'prettify' => false,
+            )
+        );
+
+        $outer_class_names[] = $container_content_class;
+    }
+
+    // Return early if only child layout exists.
+    if ( ! $support_layout && ! empty( $outer_class_names ) ) {
+        $content = new WP_HTML_Tag_Processor( $block_content );
+        $content->next_tag();
+        $content->add_class( implode( ' ', $outer_class_names ) );
+        return (string) $content;
     }
 
@@ -342 +385 @@
     $class_names        = array();
     $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
-    $block_classname    = wp_get_block_default_classname( $block['blockName'] );
     $container_class    = wp_unique_id( 'wp-container-' );
     $layout_classname   = '';
@@ -418 +460 @@
 
         $style = wp_get_layout_style(
-            ".$block_classname.$container_class",
+            ".$container_class.$container_class",
             $used_layout,
             $has_block_gap_support,
@@ -433 +475 @@
     }
 
-    /*
-     * This assumes the hook only applies to blocks with a single wrapper.
-     * A limitation of this hook is that nested inner blocks wrappers are not yet supported.
-     */
-    $content = preg_replace(
-        '/' . preg_quote( 'class="', '/' ) . '/',
-        'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
-        $block_content,
-        1
-    );
-
-    return $content;
+    $content_with_outer_classnames = '';
+
+    if ( ! empty( $outer_class_names ) ) {
+        $content_with_outer_classnames = new WP_HTML_Tag_Processor( $block_content );
+        $content_with_outer_classnames->next_tag();
+        foreach ( $outer_class_names as $outer_class_name ) {
+            $content_with_outer_classnames->add_class( $outer_class_name );
+        }
+
+        $content_with_outer_classnames = (string) $content_with_outer_classnames;
+    }
+
+    /**
+    * The first chunk of innerContent contains the block markup up until the inner blocks start.
+    * This targets the opening tag of the inner blocks wrapper, which is the last tag in that chunk.
+    */
+    $inner_content_classnames = '';
+
+    if ( isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ) {
+        $tags            = new WP_HTML_Tag_Processor( $block['innerContent'][0] );
+        $last_classnames = '';
+        while ( $tags->next_tag() ) {
+            $last_classnames = $tags->get_attribute( 'class' );
+        }
+
+        $inner_content_classnames = (string) $last_classnames;
+    }
+
+    $content = $content_with_outer_classnames ? new WP_HTML_Tag_Processor( $content_with_outer_classnames ) : new WP_HTML_Tag_Processor( $block_content );
+
+    if ( $inner_content_classnames ) {
+        $content->next_tag( array( 'class_name' => $inner_content_classnames ) );
+        foreach ( $class_names as $class_name ) {
+            $content->add_class( $class_name );
+        }
+    } else {
+        $content->next_tag();
+        foreach ( $class_names as $class_name ) {
+            $content->add_class( $class_name );
+        }
+    }
+
+    return (string) $content;
 }