Skip to content

Commit 4873322

Browse files
tellthemachinestellthemachines
committed
Editor: fix layout value unsetting in viewport states.
Enables content and wide width values to be unset when a viewport state is selected, when the default state has a custom value for these properties. Props isabel_brison, mukesh27, talldanwp. Fixes #65544. git-svn-id: https://develop.svn.wordpress.org/trunk@62579 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 3d3546f commit 4873322

2 files changed

Lines changed: 67 additions & 15 deletions

File tree

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

Lines changed: 49 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -497,13 +497,19 @@ function wp_register_layout_support( $block_type ) {
497497
* @return string CSS styles on success. Else, empty string.
498498
*/
499499
function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null, $options = array() ) {
500-
$base_layout = is_array( $layout ) ? $layout : array();
501-
$viewport_overrides = $options['viewport_overrides'] ?? null;
502-
$layout_for_styles = null === $viewport_overrides ? $base_layout : array_replace( $base_layout, $viewport_overrides );
503-
$layout_type = $base_layout['type'] ?? 'default';
504-
$rules_group = $options['rules_group'] ?? null;
505-
$has_block_gap_override = ! empty( $options['has_block_gap_override'] );
506-
$should_output_block_gap = null === $viewport_overrides || $has_block_gap_override;
500+
$base_layout = is_array( $layout ) ? $layout : array();
501+
$viewport_overrides = $options['viewport_overrides'] ?? null;
502+
$layout_for_styles = null === $viewport_overrides ? $base_layout : array_replace( $base_layout, $viewport_overrides );
503+
$layout_type = $base_layout['type'] ?? 'default';
504+
$rules_group = $options['rules_group'] ?? null;
505+
$has_block_gap_override = ! empty( $options['has_block_gap_override'] );
506+
$should_output_block_gap = null === $viewport_overrides || $has_block_gap_override;
507+
508+
/*
509+
* Viewport styles only store changed fields. If a field is present with null,
510+
* the user cleared a value inherited from the default viewport, so check
511+
* whether the key exists rather than whether the value is truthy.
512+
*/
507513
$has_viewport_property_override = static function ( $property ) use ( $viewport_overrides ) {
508514
return array_key_exists( $property, $viewport_overrides );
509515
};
@@ -546,8 +552,29 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
546552
$wide_size = $layout_for_styles['wideSize'] ?? '';
547553
$justify_content = $layout_for_styles['justifyContent'] ?? 'center';
548554

549-
$all_max_width_value = $content_size ? $content_size : $wide_size;
550-
$wide_max_width_value = $wide_size ? $wide_size : $content_size;
555+
// Check if viewport-specific ("override") values exist. Null values are valid and mean the user cleared a value inherited from the default viewport.
556+
$has_justify_content_override = null !== $viewport_overrides && $has_viewport_property_override( 'justifyContent' );
557+
$has_content_size_override = null !== $viewport_overrides && $has_viewport_property_override( 'contentSize' );
558+
$has_wide_size_override = null !== $viewport_overrides && $has_viewport_property_override( 'wideSize' );
559+
560+
/*
561+
* Styles should be output either if there are no viewport overrides (this is the default case), or if the user has set a new viewport-specific
562+
* value for contentSize or wideSize. If a viewport clears a custom constrained size, reset to the global layout variable.
563+
*/
564+
$should_output_constrained_sizes = null === $viewport_overrides || $has_content_size_override || $has_wide_size_override;
565+
$is_resetting_constrained_sizes = null !== $viewport_overrides &&
566+
(
567+
( $has_content_size_override && ! $content_size ) ||
568+
( $has_wide_size_override && ! $wide_size )
569+
);
570+
571+
// If a viewport clears a custom constrained size, reset to the global layout variable.
572+
$all_max_width_value = $content_size
573+
? $content_size
574+
: ( $wide_size && ! $has_content_size_override ? $wide_size : 'var(--wp--style--global--content-size, none)' );
575+
$wide_max_width_value = $wide_size
576+
? $wide_size
577+
: ( $content_size && ! $has_wide_size_override ? $content_size : 'var(--wp--style--global--wide-size, none)' );
551578

552579
// Make sure there is a single CSS rule, and all tags are stripped for security.
553580
$all_max_width_value = safecss_filter_attr( explode( ';', $all_max_width_value )[0] );
@@ -556,9 +583,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
556583
$margin_left = 'left' === $justify_content ? '0 !important' : 'auto !important';
557584
$margin_right = 'right' === $justify_content ? '0 !important' : 'auto !important';
558585

559-
$has_justify_content_override = null !== $viewport_overrides && $has_viewport_property_override( 'justifyContent' );
560-
$should_output_constrained_sizes = null === $viewport_overrides || $has_viewport_property_override( 'contentSize' ) || $has_viewport_property_override( 'wideSize' );
561-
if ( $should_output_constrained_sizes && ( $content_size || $wide_size ) ) {
586+
if ( $should_output_constrained_sizes && ( $content_size || $wide_size || $is_resetting_constrained_sizes ) ) {
562587
$content_size_declarations = array(
563588
'max-width' => $all_max_width_value,
564589
);
@@ -698,6 +723,10 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
698723
$vertical_alignment_options += array( 'space-between' => 'space-between' );
699724
}
700725

726+
/*
727+
* Styles should be output either if there are no viewport overrides (this is the default case), or if the user has set a new viewport-specific
728+
* value for any of the flex properties.
729+
*/
701730
$should_output_flex_wrap = null === $viewport_overrides || $has_viewport_property_override( 'flexWrap' );
702731
$should_output_flex_orientation = null === $viewport_overrides || $has_viewport_property_override( 'orientation' );
703732
$should_output_flex_justification = null === $viewport_overrides || $has_viewport_property_override( 'justifyContent' ) || $has_viewport_property_override( 'orientation' );
@@ -828,6 +857,10 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
828857
$responsive_gap_value = '0px';
829858
}
830859

860+
/*
861+
* Styles should be output either if there are no viewport overrides (this is the default case), or if the user has set a new viewport-specific
862+
* value for any of the grid properties.
863+
*/
831864
$should_output_grid_columns = null === $viewport_overrides || $has_viewport_property_override( 'minimumColumnWidth' ) || $has_viewport_property_override( 'columnCount' ) || $has_viewport_property_override( 'autoFit' );
832865
$uses_gap_in_grid_columns = ! empty( $layout_for_styles['columnCount'] ) && ! empty( $layout_for_styles['minimumColumnWidth'] );
833866
if ( $has_block_gap_override && $uses_gap_in_grid_columns ) {
@@ -837,8 +870,10 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
837870
$should_output_grid_rows = ( null === $viewport_overrides || $has_viewport_property_override( 'rowCount' ) ) && ! empty( $layout_for_styles['columnCount'] ) && ! empty( $layout_for_styles['rowCount'] );
838871
$grid_declarations = array();
839872

840-
// When enabled, columns stretch to fill the available space using
841-
// `auto-fit`; otherwise empty tracks are preserved with `auto-fill`.
873+
/*
874+
* When enabled, columns stretch to fill the available space using
875+
* `auto-fit`; otherwise empty tracks are preserved with `auto-fill`.
876+
*/
842877
$auto_placement = ! empty( $layout_for_styles['autoFit'] ) ? 'auto-fit' : 'auto-fill';
843878

844879
if ( $should_output_grid_columns && ! empty( $layout_for_styles['columnCount'] ) && ! empty( $layout_for_styles['minimumColumnWidth'] ) ) {

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ class Tests_Block_Supports_WpGetLayoutStyle extends WP_UnitTestCase {
1313
'should_skip_gap_serialization' => false,
1414
'fallback_gap_value' => '0.5em',
1515
'block_spacing' => null,
16+
'options' => array(),
1617
);
1718

1819
/**
@@ -32,7 +33,8 @@ public function test_wp_get_layout_style( array $args, $expected_output ) {
3233
$args['gap_value'],
3334
$args['should_skip_gap_serialization'],
3435
$args['fallback_gap_value'],
35-
$args['block_spacing']
36+
$args['block_spacing'],
37+
$args['options']
3638
);
3739

3840
$this->assertSame( $expected_output, $layout_styles );
@@ -120,6 +122,21 @@ public function data_wp_get_layout_style() {
120122
),
121123
'expected_output' => '.wp-layout > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:800px;margin-left:auto !important;margin-right:auto !important;}.wp-layout > .alignwide{max-width:1200px;}.wp-layout .alignfull{max-width:none;}.wp-layout > .alignfull{margin-right:calc(10px * -1);margin-left:calc(20px * -1);}',
122124
),
125+
'constrained layout with content size unset in viewport' => array(
126+
'args' => array(
127+
'selector' => '.wp-layout',
128+
'layout' => array(
129+
'type' => 'constrained',
130+
'contentSize' => '800px',
131+
),
132+
'options' => array(
133+
'viewport_overrides' => array(
134+
'contentSize' => null,
135+
),
136+
),
137+
),
138+
'expected_output' => '.wp-layout > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:var(--wp--style--global--content-size, none);}.wp-layout > .alignwide{max-width:var(--wp--style--global--wide-size, none);}.wp-layout .alignfull{max-width:none;}',
139+
),
123140
'constrained layout with block gap support' => array(
124141
'args' => array(
125142
'selector' => '.wp-layout',

0 commit comments

Comments
 (0)