Skip to content

Backport Layout block support refactor part 2 #3254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
andrewserong wants to merge 14 commits into from
Closed

Backport Layout block support refactor part 2 #3254

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
7761f11
Backport Layou block support refactor part 2
andrewserong Sep 15, 2022
7a1b5d4
Add tests
andrewserong Sep 15, 2022
a7904b4
Update test fixtures with new classnames
andrewserong Sep 15, 2022
c5dd3dc
Fix Layout tests
andrewserong Sep 15, 2022
145a9c2
Add code quality updates based on feedback
andrewserong Sep 16, 2022
0007932
Fix whitespace linting issue
andrewserong Sep 16, 2022
dcebfae
Try to fix odd linting issue
andrewserong Sep 16, 2022
8fe0766
Revert prior change to linting
andrewserong Sep 16, 2022
ef94265
Re-fix linting
andrewserong Sep 16, 2022
2a6a882
Split call to wp_get_layout_style onto multiple lines
andrewserong Sep 16, 2022
d64d61d
Empty commit to restart CI
andrewserong Sep 16, 2022
0099959
`return` mention improvement
audrasjb Sep 21, 2022
ad32baa
Update wp_get_layout_style() DocBlock
hellofromtonya Sep 21, 2022
5371947
Move tests to separate file
hellofromtonya Sep 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add tests
  • Loading branch information
@andrewserong
andrewserong committed Sep 20, 2022
commit 7a1b5d4cbb994e7bfdd3f13f2cda3ba4a6125c1e
302 changes: 302 additions & 0 deletions tests/phpunit/tests/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,4 +173,306 @@ function test_outer_container_not_restored_for_aligned_image_block_with_themejso

$this->assertSame( $expected, wp_restore_image_outer_container( $block_content, $block ) );
}

/**
* Generates the CSS corresponding to the provided layout.
*
* @ticket 56467
*
* @dataProvider data_wp_get_layout_style
*
* @covers ::wp_get_layout_style
*
* @param array $args {
* Arguments for the test function.
*
* @type string $selector CSS selector.
* @type array $layout Layout object. The one that is passed has already checked the existence of default block layout.
* @type boolean $has_block_gap_support Whether the theme has support for the block gap.
* @type string $gap_value The block gap value to apply.
* @type boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
* @type string $fallback_gap_value The block gap value to apply.
* @type array $block_spacing Custom spacing set on the block.
* }
* @param string $expected_output The expected output.
*/
function test_wp_get_layout_style( $args, $expected_output ) {
$layout_styles = wp_get_layout_style( $args['selector'], $args['layout'], $args['has_block_gap_support'], $args['gap_value'], $args['should_skip_gap_serialization'], $args['fallback_gap_value'], $args['block_spacing'] );
$this->assertSame( $expected_output, $layout_styles );
}

/**
* Data provider for test_wp_get_layout_style().
*
* @ticket 56467
*
* @return array
*/
public function data_wp_get_layout_style() {
return array(
'should_return_empty_value_with_no_args' => array(
Copy link
Contributor

@costdev costdev Sep 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See this comment on another PR.

Copy link
Contributor Author

@andrewserong andrewserong Sep 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated the wording for each of these, thanks!

'args' => array(
'selector' => null,
'layout' => null,
'has_block_gap_support' => null,
'gap_value' => null,
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '',
),
'should_return_empty_value_with_only_selector' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => null,
'has_block_gap_support' => null,
'gap_value' => null,
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '',
),
'should_return_default_layout_with_block_gap_support' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => null,
'has_block_gap_support' => true,
'gap_value' => '1em',
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}',
),
'should_return_empty_value_with_block_gap_support_and_skip_serialization' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => null,
'has_block_gap_support' => true,
'gap_value' => '1em',
'should_skip_gap_serialization' => true,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '',
),
'should_return_default_layout_with_axial_block_gap_support' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => null,
'has_block_gap_support' => true,
'gap_value' => array( 'top' => '1em' ),
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}',
),
'should_return_constrained_layout_with_sizes' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'constrained',
'contentSize' => '800px',
'wideSize' => '1200px',
),
'has_block_gap_support' => null,
'gap_value' => null,
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'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;}',
),
'should_return_constrained_layout_with_sizes_and_block_spacing' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'constrained',
'contentSize' => '800px',
'wideSize' => '1200px',
),
'has_block_gap_support' => null,
'gap_value' => null,
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => array(
'padding' => array(
'left' => '20px',
'right' => '10px',
),
),
),
'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);}',
),
'should_return_constrained_layout_with_block_gap_support' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'constrained',
),
'has_block_gap_support' => true,
'gap_value' => '2.5rem',
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:2.5rem;margin-block-end:0;}',
),
'should_return_constrained_layout_with_axial_block_gap_support' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'constrained',
),
'has_block_gap_support' => true,
'gap_value' => array( 'top' => '2.5rem' ),
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:2.5rem;margin-block-end:0;}',
),
'should_return_constrained_layout_with_block_gap_support_and_spacing' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'constrained',
),
'has_block_gap_support' => true,
'gap_value' => 'var:preset|spacing|50',
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:var(--wp--preset--spacing--50);margin-block-end:0;}',
),
'should_return_empty_value_for_flex_layout_with_no_args' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
),
'has_block_gap_support' => null,
'gap_value' => null,
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '',
),
'should_return_empty_value_for_horizontal_flex_layout_with_orientation_only' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'horizontal',
),
'has_block_gap_support' => null,
'gap_value' => null,
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '',
),
'should_return_rule_horizontal_flex_layout_with_flex_properties' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'horizontal',
'flexWrap' => 'nowrap',
'justifyContent' => 'left',
'verticalAlignment' => 'bottom',
),
'has_block_gap_support' => null,
'gap_value' => null,
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;}',
),
'should_return_rule_for_horizontal_flex_layout_with_flex_properties_and_gap' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'horizontal',
'flexWrap' => 'nowrap',
'justifyContent' => 'left',
'verticalAlignment' => 'bottom',
),
'has_block_gap_support' => true,
'gap_value' => '29px',
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:29px;justify-content:flex-start;align-items:flex-end;}',
),
'should_return_rule_for_horizontal_flex_layout_with_flex_properties_and_axial_gap' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'horizontal',
'flexWrap' => 'nowrap',
'justifyContent' => 'left',
'verticalAlignment' => 'bottom',
),
'has_block_gap_support' => true,
'gap_value' => array(
'top' => '1px',
'left' => '2px',
),
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:1px 2px;justify-content:flex-start;align-items:flex-end;}',
),
'should_return_rule_for_horizontal_flex_layout_with_flex_properties_gap_fallback_and_spacing' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'horizontal',
'flexWrap' => 'nowrap',
'justifyContent' => 'left',
'verticalAlignment' => 'bottom',
),
'has_block_gap_support' => true,
'gap_value' => array(
'left' => 'var:preset|spacing|40',
),
'should_skip_gap_serialization' => null,
'fallback_gap_value' => '11px',
'block_spacing' => null,
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:11px var(--wp--preset--spacing--40);justify-content:flex-start;align-items:flex-end;}',
),
'should_return_rule_for_vertical_flex_layout_with_flex_properties' => array(
'args' => array(
'selector' => '.wp-layout',
'layout' => array(
'type' => 'flex',
'orientation' => 'vertical',
'flexWrap' => 'nowrap',
'justifyContent' => 'left',
'verticalAlignment' => 'bottom',
),
'has_block_gap_support' => null,
'gap_value' => null,
'should_skip_gap_serialization' => null,
'fallback_gap_value' => null,
'block_spacing' => null,
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;}',
),
);
}
}