Skip to content

Commit f7baebc

Browse files
tellthemachinestellthemachines
committed
Editor: fix flex child fixed width and introduce max width option.
Ensures "fixed" becomes actually fixed with `flex-shrink: 0`, and introduces a new "max" designation for the current behaviour of "fixed". Props isabel_brison, andrewserong. Fixes #65462. git-svn-id: https://develop.svn.wordpress.org/trunk@62505 602fd350-edb4-49c9-b593-d223f7449a82
1 parent c8f7e7d commit f7baebc

2 files changed

Lines changed: 191 additions & 3 deletions

File tree

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

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,45 @@ function wp_get_child_layout_style_rules( $selector, $child_layout, $parent_layo
116116
return array_key_exists( $property, $viewport_overrides );
117117
};
118118

119-
$self_stretch = $child_layout['selfStretch'] ?? null;
119+
$self_stretch = $child_layout['selfStretch'] ?? null;
120+
$base_self_stretch = $base_child_layout['selfStretch'] ?? null;
121+
122+
/*
123+
* These are the serialized `selfStretch` values. `max` used to be called
124+
* "Fixed" in the UI, but was renamed and replaced by `fixedNoShrink`.
125+
*/
126+
$flex_child_layout_values = array(
127+
'fit' => 'fit',
128+
'grow' => 'fill',
129+
'max' => 'fixed',
130+
'fixed' => 'fixedNoShrink',
131+
);
132+
$flex_size_values = array(
133+
$flex_child_layout_values['max'],
134+
$flex_child_layout_values['fixed'],
135+
);
120136

121137
if ( null === $viewport_overrides || $has_viewport_property_override( 'selfStretch' ) || $has_viewport_property_override( 'flexSize' ) ) {
122-
if ( 'fixed' === $self_stretch && isset( $child_layout['flexSize'] ) ) {
138+
if (
139+
null !== $viewport_overrides &&
140+
( $flex_child_layout_values['fit'] === $self_stretch || $flex_child_layout_values['grow'] === $self_stretch ) &&
141+
in_array( $base_self_stretch, $flex_size_values, true ) &&
142+
isset( $base_child_layout['flexSize'] )
143+
) {
144+
$child_layout_declarations['flex-basis'] = 'unset';
145+
if ( $flex_child_layout_values['fixed'] === $base_self_stretch ) {
146+
$child_layout_declarations['flex-shrink'] = 'unset';
147+
}
148+
}
149+
if ( in_array( $self_stretch, $flex_size_values, true ) && isset( $child_layout['flexSize'] ) ) {
123150
$child_layout_declarations['flex-basis'] = $child_layout['flexSize'];
151+
if ( $flex_child_layout_values['fixed'] === $self_stretch ) {
152+
$child_layout_declarations['flex-shrink'] = '0';
153+
} elseif ( null !== $viewport_overrides && $flex_child_layout_values['fixed'] === $base_self_stretch ) {
154+
$child_layout_declarations['flex-shrink'] = 'unset';
155+
}
124156
$child_layout_declarations['box-sizing'] = 'border-box';
125-
} elseif ( 'fill' === $self_stretch ) {
157+
} elseif ( $flex_child_layout_values['grow'] === $self_stretch ) {
126158
$child_layout_declarations['flex-grow'] = '1';
127159
}
128160
}

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

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,162 @@ public function data_restore_group_inner_container() {
469469
);
470470
}
471471

472+
/**
473+
* Check that wp_get_child_layout_style_rules() renders flex child sizing styles.
474+
*
475+
* @dataProvider data_wp_get_child_layout_style_rules
476+
*
477+
* @covers ::wp_get_child_layout_style_rules
478+
*
479+
* @param array $child_layout Child layout values.
480+
* @param array|null $viewport_overrides Optional child viewport layout overrides.
481+
* @param array $expected_output The expected output.
482+
*/
483+
public function test_wp_get_child_layout_style_rules( $child_layout, $viewport_overrides, $expected_output ) {
484+
$actual_output = wp_get_child_layout_style_rules(
485+
'.wp-container-content-test',
486+
$child_layout,
487+
array(),
488+
$viewport_overrides
489+
);
490+
491+
$this->assertSame( $expected_output, $actual_output );
492+
}
493+
494+
/**
495+
* Data provider for test_wp_get_child_layout_style_rules().
496+
*
497+
* @return array
498+
*/
499+
public function data_wp_get_child_layout_style_rules() {
500+
return array(
501+
'legacy fixed sizing remains shrinkable' => array(
502+
'child_layout' => array(
503+
'selfStretch' => 'fixed',
504+
'flexSize' => '320px',
505+
),
506+
'viewport_overrides' => null,
507+
'expected_output' => array(
508+
array(
509+
'selector' => '.wp-container-content-test',
510+
'declarations' => array(
511+
'flex-basis' => '320px',
512+
'box-sizing' => 'border-box',
513+
),
514+
),
515+
),
516+
),
517+
'fixed sizing can opt out of shrinking' => array(
518+
'child_layout' => array(
519+
'selfStretch' => 'fixedNoShrink',
520+
'flexSize' => '320px',
521+
),
522+
'viewport_overrides' => null,
523+
'expected_output' => array(
524+
array(
525+
'selector' => '.wp-container-content-test',
526+
'declarations' => array(
527+
'flex-basis' => '320px',
528+
'flex-shrink' => '0',
529+
'box-sizing' => 'border-box',
530+
),
531+
),
532+
),
533+
),
534+
'viewport overrides can switch fixedNoShrink to max' => array(
535+
'child_layout' => array(
536+
'selfStretch' => 'fixedNoShrink',
537+
'flexSize' => '320px',
538+
),
539+
'viewport_overrides' => array(
540+
'selfStretch' => 'fixed',
541+
),
542+
'expected_output' => array(
543+
array(
544+
'selector' => '.wp-container-content-test',
545+
'declarations' => array(
546+
'flex-basis' => '320px',
547+
'flex-shrink' => 'unset',
548+
'box-sizing' => 'border-box',
549+
),
550+
),
551+
),
552+
),
553+
'viewport overrides can switch fixedNoShrink to fit' => array(
554+
'child_layout' => array(
555+
'selfStretch' => 'fixedNoShrink',
556+
'flexSize' => '320px',
557+
),
558+
'viewport_overrides' => array(
559+
'selfStretch' => 'fit',
560+
),
561+
'expected_output' => array(
562+
array(
563+
'selector' => '.wp-container-content-test',
564+
'declarations' => array(
565+
'flex-basis' => 'unset',
566+
'flex-shrink' => 'unset',
567+
),
568+
),
569+
),
570+
),
571+
'viewport overrides can switch fixed to fit' => array(
572+
'child_layout' => array(
573+
'selfStretch' => 'fixed',
574+
'flexSize' => '320px',
575+
),
576+
'viewport_overrides' => array(
577+
'selfStretch' => 'fit',
578+
),
579+
'expected_output' => array(
580+
array(
581+
'selector' => '.wp-container-content-test',
582+
'declarations' => array(
583+
'flex-basis' => 'unset',
584+
),
585+
),
586+
),
587+
),
588+
'viewport overrides can switch fixedNoShrink to grow' => array(
589+
'child_layout' => array(
590+
'selfStretch' => 'fixedNoShrink',
591+
'flexSize' => '320px',
592+
),
593+
'viewport_overrides' => array(
594+
'selfStretch' => 'fill',
595+
),
596+
'expected_output' => array(
597+
array(
598+
'selector' => '.wp-container-content-test',
599+
'declarations' => array(
600+
'flex-basis' => 'unset',
601+
'flex-shrink' => 'unset',
602+
'flex-grow' => '1',
603+
),
604+
),
605+
),
606+
),
607+
'viewport overrides can switch fixed to grow' => array(
608+
'child_layout' => array(
609+
'selfStretch' => 'fixed',
610+
'flexSize' => '320px',
611+
),
612+
'viewport_overrides' => array(
613+
'selfStretch' => 'fill',
614+
),
615+
'expected_output' => array(
616+
array(
617+
'selector' => '.wp-container-content-test',
618+
'declarations' => array(
619+
'flex-basis' => 'unset',
620+
'flex-grow' => '1',
621+
),
622+
),
623+
),
624+
),
625+
);
626+
}
627+
472628
/**
473629
* Checks that `wp_add_parent_layout_to_parsed_block` adds the parent layout attribute to the block object.
474630
*

0 commit comments

Comments
 (0)