WordPress.org
Get WordPress

Make WordPress Core

Changeset 55282


Ignore:
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.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

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

    r55201 r55282  
    322322    $block_type     = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
    323323    $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
    324 
    325     if ( ! $support_layout ) {
     324    $has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] );
     325
     326    if ( ! $support_layout && ! $has_child_layout ) {
    326327        return $block_content;
     328    }
     329    $outer_class_names = array();
     330
     331    if ( $has_child_layout && ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] || 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) ) {
     332        $container_content_class = wp_unique_id( 'wp-container-content-' );
     333
     334        $child_layout_styles = array();
     335
     336        if ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
     337            $child_layout_styles[] = array(
     338                'selector'     => ".$container_content_class",
     339                'declarations' => array(
     340                    'flex-basis' => $block['attrs']['style']['layout']['flexSize'],
     341                    'box-sizing' => 'border-box',
     342                ),
     343            );
     344        } elseif ( 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) {
     345            $child_layout_styles[] = array(
     346                'selector'     => ".$container_content_class",
     347                'declarations' => array(
     348                    'flex-grow' => '1',
     349                ),
     350            );
     351        }
     352
     353        wp_style_engine_get_stylesheet_from_css_rules(
     354            $child_layout_styles,
     355            array(
     356                'context'  => 'block-supports',
     357                'prettify' => false,
     358            )
     359        );
     360
     361        $outer_class_names[] = $container_content_class;
     362    }
     363
     364    // Return early if only child layout exists.
     365    if ( ! $support_layout && ! empty( $outer_class_names ) ) {
     366        $content = new WP_HTML_Tag_Processor( $block_content );
     367        $content->next_tag();
     368        $content->add_class( implode( ' ', $outer_class_names ) );
     369        return (string) $content;
    327370    }
    328371
    … …  
    342385    $class_names        = array();
    343386    $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
    344     $block_classname    = wp_get_block_default_classname( $block['blockName'] );
    345387    $container_class    = wp_unique_id( 'wp-container-' );
    346388    $layout_classname   = '';
    … …  
    418460
    419461        $style = wp_get_layout_style(
    420             ".$block_classname.$container_class",
     462            ".$container_class.$container_class",
    421463            $used_layout,
    422464            $has_block_gap_support,
    … …  
    433475    }
    434476
    435     /*
    436      * This assumes the hook only applies to blocks with a single wrapper.
    437      * A limitation of this hook is that nested inner blocks wrappers are not yet supported.
    438      */
    439     $content = preg_replace(
    440         '/' . preg_quote( 'class="', '/' ) . '/',
    441         'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
    442         $block_content,
    443         1
    444     );
    445 
    446     return $content;
     477    $content_with_outer_classnames = '';
     478
     479    if ( ! empty( $outer_class_names ) ) {
     480        $content_with_outer_classnames = new WP_HTML_Tag_Processor( $block_content );
     481        $content_with_outer_classnames->next_tag();
     482        foreach ( $outer_class_names as $outer_class_name ) {
     483            $content_with_outer_classnames->add_class( $outer_class_name );
     484        }
     485
     486        $content_with_outer_classnames = (string) $content_with_outer_classnames;
     487    }
     488
     489    /**
     490    * The first chunk of innerContent contains the block markup up until the inner blocks start.
     491    * This targets the opening tag of the inner blocks wrapper, which is the last tag in that chunk.
     492    */
     493    $inner_content_classnames = '';
     494
     495    if ( isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ) {
     496        $tags            = new WP_HTML_Tag_Processor( $block['innerContent'][0] );
     497        $last_classnames = '';
     498        while ( $tags->next_tag() ) {
     499            $last_classnames = $tags->get_attribute( 'class' );
     500        }
     501
     502        $inner_content_classnames = (string) $last_classnames;
     503    }
     504
     505    $content = $content_with_outer_classnames ? new WP_HTML_Tag_Processor( $content_with_outer_classnames ) : new WP_HTML_Tag_Processor( $block_content );
     506
     507    if ( $inner_content_classnames ) {
     508        $content->next_tag( array( 'class_name' => $inner_content_classnames ) );
     509        foreach ( $class_names as $class_name ) {
     510            $content->add_class( $class_name );
     511        }
     512    } else {
     513        $content->next_tag();
     514        foreach ( $class_names as $class_name ) {
     515            $content->add_class( $class_name );
     516        }
     517    }
     518
     519    return (string) $content;
    447520}
    448521

  • trunk/tests/phpunit/data/blocks/fixtures/core__column.server.html

    r54274 r55282  
    11
    2 <div class="is-layout-flow wp-block-column">
     2<div class="wp-block-column is-layout-flow">
    33   
    44    <p>Column One, Paragraph One</p>

  • trunk/tests/phpunit/data/blocks/fixtures/core__columns.server.html

    r54274 r55282  
    11
    2 <div class="is-layout-flex wp-container-1 wp-block-columns has-3-columns">
     2<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1">
    33   
    4     <div class="is-layout-flow wp-block-column">
     4    <div class="wp-block-column is-layout-flow">
    55       
    66        <p>Column One, Paragraph One</p>
    … …  
    1212   
    1313   
    14     <div class="is-layout-flow wp-block-column">
     14    <div class="wp-block-column is-layout-flow">
    1515       
    1616        <p>Column Two, Paragraph One</p>

  • trunk/tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html

    r54274 r55282  
    11
    2 <div class="is-layout-flex wp-container-1 wp-block-columns has-3-columns">
     2<div class="wp-block-columns has-3-columns is-layout-flex wp-container-1">
    33   
    44    <p class="layout-column-1">Column One, Paragraph One</p>

  • trunk/tests/phpunit/data/blocks/fixtures/core__gallery.server.html

    r55246 r55282  
    11
    2 <figure class="is-layout-flex wp-block-gallery has-nested-images columns-default is-cropped columns-2 wp-block-gallery-1">
     2<figure class="wp-block-gallery has-nested-images columns-default is-cropped columns-2 wp-block-gallery-1 is-layout-flex">
    33   
    44    <figure class="wp-block-image size-large">

  • trunk/tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html

    r55246 r55282  
    11
    2 <figure class="is-layout-flex wp-block-gallery has-nested-images is-cropped columns-1 wp-block-gallery-1" >
     2<figure class="wp-block-gallery has-nested-images is-cropped columns-1 wp-block-gallery-1 is-layout-flex" >
    33   
    44    <figure class="wp-block-image size-large">

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

    r54889 r55282  
    174174        $this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) );
    175175    }
     176
     177    /**
     178     * @ticket 57584
     179     *
     180     * @dataProvider data_layout_support_flag_renders_classnames_on_wrapper
     181     *
     182     * @covers ::wp_render_layout_support_flag
     183     *
     184     * @param array  $args            Dataset to test.
     185     * @param string $expected_output The expected output.
     186     */
     187    public function test_layout_support_flag_renders_classnames_on_wrapper( $args, $expected_output ) {
     188        $actual_output = wp_render_layout_support_flag( $args['block_content'], $args['block'] );
     189        $this->assertSame( $expected_output, $actual_output );
     190    }
     191
     192    /**
     193     * Data provider for test_layout_support_flag_renders_classnames_on_wrapper.
     194     *
     195     * @return array
     196     */
     197    public function data_layout_support_flag_renders_classnames_on_wrapper() {
     198        return array(
     199            'single wrapper block layout with flow type'   => array(
     200                'args'            => array(
     201                    'block_content' => '<div class="wp-block-group"></div>',
     202                    'block'         => array(
     203                        'blockName'    => 'core/group',
     204                        'attrs'        => array(
     205                            'layout' => array(
     206                                'type' => 'default',
     207                            ),
     208                        ),
     209                        'innerBlocks'  => array(),
     210                        'innerHTML'    => '<div class="wp-block-group"></div>',
     211                        'innerContent' => array(
     212                            '<div class="wp-block-group"></div>',
     213                        ),
     214                    ),
     215                ),
     216                'expected_output' => '<div class="wp-block-group is-layout-flow"></div>',
     217            ),
     218            'single wrapper block layout with constrained type' => array(
     219                'args'            => array(
     220                    'block_content' => '<div class="wp-block-group"></div>',
     221                    'block'         => array(
     222                        'blockName'    => 'core/group',
     223                        'attrs'        => array(
     224                            'layout' => array(
     225                                'type' => 'constrained',
     226                            ),
     227                        ),
     228                        'innerBlocks'  => array(),
     229                        'innerHTML'    => '<div class="wp-block-group"></div>',
     230                        'innerContent' => array(
     231                            '<div class="wp-block-group"></div>',
     232                        ),
     233                    ),
     234                ),
     235                'expected_output' => '<div class="wp-block-group is-layout-constrained"></div>',
     236            ),
     237            'multiple wrapper block layout with flow type' => array(
     238                'args'            => array(
     239                    'block_content' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper"></div></div>',
     240                    'block'         => array(
     241                        'blockName'    => 'core/group',
     242                        'attrs'        => array(
     243                            'layout' => array(
     244                                'type' => 'default',
     245                            ),
     246                        ),
     247                        'innerBlocks'  => array(),
     248                        'innerHTML'    => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper"></div></div>',
     249                        'innerContent' => array(
     250                            '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper">',
     251                            ' ',
     252                            ' </div></div>',
     253                        ),
     254                    ),
     255                ),
     256                'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper is-layout-flow"></div></div>',
     257            ),
     258        );
     259    }
    176260}
Note: See TracChangeset for help on using the changeset viewer.