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
+549 −90
Closed

Backport Layout block support refactor part 2 #3254

Show file tree
Hide file tree
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
Move tests to separate file
  • Loading branch information
@hellofromtonya
hellofromtonya committed Sep 21, 2022
commit 53719471ee9c2a9f6f8fc5f07fc09b2797859f6a
308 changes: 0 additions & 308 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,312 +173,4 @@ function test_outer_container_not_restored_for_aligned_image_block_with_themejso

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

/**
* Tests the generation of CSS corresponding to the provided layout.
*
* @ticket 56467
*
* @covers ::wp_get_layout_style
*
* @dataProvider data_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 bool $has_block_gap_support Whether the theme has support for the block gap.
* @type string $gap_value The block gap value to apply.
* @type bool $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().
*
* @return array
*/
public function data_wp_get_layout_style() {
return array(
'no args should return empty value' => array(
'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' => '',
),
'only selector should return empty value' => 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' => '',
),
'default layout and 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;}',
),
'skip serialization should return empty value' => 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' => '',
),
'default layout and 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;}',
),
'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;}',
),
'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);}',
),
'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;}',
),
'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;}',
),
'constrained layout with block gap support and spacing preset' => 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;}',
),
'flex layout with no args should return empty value' => 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' => '',
),
'horizontal flex layout should return empty value' => 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' => '',
),
'flex layout with 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;}',
),
'flex layout with properties and block 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;}',
),
'flex layout with properties and axial block 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;}',
),
'flex layout with properties and axial block gap using spacing preset' => 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;}',
),
'vertical flex layout with 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;}',
),
);
}
}
Loading