Skip to content

Commit 05c1b0c

Browse files
felixarntzfelixarntz
committed
Editor: Add layout controls to children of flex layout blocks.
Props isabel_brison, andrewserong, davidbaumwald, flixos90, mamaduka, ntsekouras, hellofromtonya. Fixes #57584. git-svn-id: https://develop.svn.wordpress.org/trunk@55282 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 69164aa commit 05c1b0c

File tree

7 files changed

+178
-21
lines changed

7 files changed

+178
-21
lines changed

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

Lines changed: 87 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -321,10 +321,53 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
321321
function wp_render_layout_support_flag( $block_content, $block ) {
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+
$has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] );
324325

325-
if ( ! $support_layout ) {
326+
if ( ! $support_layout && ! $has_child_layout ) {
326327
return $block_content;
327328
}
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;
370+
}
328371

329372
$global_settings = wp_get_global_settings();
330373
$block_gap = _wp_array_get( $global_settings, array( 'spacing', 'blockGap' ), null );
@@ -341,7 +384,6 @@ function wp_render_layout_support_flag( $block_content, $block ) {
341384

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 = '';
347389

@@ -417,7 +459,7 @@ function wp_render_layout_support_flag( $block_content, $block ) {
417459
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
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,
423465
$gap_value,
@@ -432,18 +474,49 @@ function wp_render_layout_support_flag( $block_content, $block ) {
432474
}
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-
);
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+
}
445518

446-
return $content;
519+
return (string) $content;
447520
}
448521

449522
// Register the block support.

‎tests/phpunit/data/blocks/fixtures/core__column.server.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
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>
55

‎tests/phpunit/data/blocks/fixtures/core__columns.server.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
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>
77

@@ -11,7 +11,7 @@
1111
</div>
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>
1717

‎tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
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>
55

‎tests/phpunit/data/blocks/fixtures/core__gallery.server.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
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">
55
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="Image gallery image" />

‎tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
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">
55
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="Image gallery image" />

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,4 +173,88 @@ public function test_outer_container_not_restored_for_aligned_image_block_with_t
173173

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
}

0 commit comments

Comments
 (0)