mirrored from git://develop.git.wordpress.org/
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Editor: Improves layout block support in
wp_get_layout_style().
This commit merges the remaining changes from [WordPress/gutenberg#40875 Gutenberg PR 40875]. It's Part 2 (see [54162] for Part 1) of a layout improvement initiative and targets `wp_get_layout_style()` in `layout.php`. Context: The overall initiative is to improve layout block support: >to use centralised layout definitions, output base layout styles from global styles, introduce a layout type semantic classname, reduce duplication of container class and style tag output, and fix blockGap at the block level in global styles. Changes include: * Adding an optional parameter `$block_spacing` to `wp_get_layout_style()` for setting a custom spacing on the block. * Adding handle for the block spacing. * Using the style engine to to enqueue and render layout styles via `wp_style_engine_get_stylesheet_from_css_rules()`. * Introduces a new test file for `wp_get_layout_style()`. Follow-up to [54162], [54160], [54159], [53421], [52380], [53085], [52069]. Props andrewserong, isabel_brison, costdev, hellofromTonya. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54274 602fd350-edb4-49c9-b593-d223f7449a82
- Loading branch information
1 parent
34ace23
commit 2d75ae2
Showing
7 changed files
with
549 additions
and
90 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
253 changes: 253 additions & 0 deletions
253
tests/phpunit/tests/block-supports/wpGetLayoutStyle.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,253 @@ | ||
| <?php | ||
|
|
||
| /** | ||
| * @group block-supports | ||
| * @covers ::wp_get_layout_style | ||
| */ | ||
| class Tests_Block_Supports_WpGetLayoutStyle extends WP_UnitTestCase { | ||
| const ARGS_DEFAULTS = array( | ||
| 'selector' => null, | ||
| 'layout' => null, | ||
| 'has_block_gap_support' => false, | ||
| 'gap_value' => null, | ||
| 'should_skip_gap_serialization' => false, | ||
| 'fallback_gap_value' => '0.5em', | ||
| 'block_spacing' => null, | ||
| ); | ||
|
|
||
| /** | ||
| * @dataProvider data_wp_get_layout_style | ||
| * @ticket 56467 | ||
| * | ||
| * @param array $args Dataset to test. | ||
| * @param string $expected_output The expected output. | ||
| */ | ||
| public function test_wp_get_layout_style( array $args, $expected_output ) { | ||
| $args = array_merge( static::ARGS_DEFAULTS, $args ); | ||
| $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. | ||
| * | ||
| * @return array | ||
| */ | ||
| public function data_wp_get_layout_style() { | ||
| return array( | ||
| 'no args should return empty value' => array( | ||
| 'args' => array(), | ||
| 'expected_output' => '', | ||
| ), | ||
| 'nulled 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', | ||
| ), | ||
| 'expected_output' => '', | ||
| ), | ||
| 'default layout and block gap support' => array( | ||
| 'args' => array( | ||
| 'selector' => '.wp-layout', | ||
| 'has_block_gap_support' => true, | ||
| 'gap_value' => '1em', | ||
| ), | ||
| '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', | ||
| 'has_block_gap_support' => true, | ||
| 'gap_value' => '1em', | ||
| 'should_skip_gap_serialization' => true, | ||
| ), | ||
| 'expected_output' => '', | ||
| ), | ||
| 'default layout and axial block gap support' => array( | ||
| 'args' => array( | ||
| 'selector' => '.wp-layout', | ||
| 'has_block_gap_support' => true, | ||
| 'gap_value' => array( 'top' => '1em' ), | ||
| ), | ||
| '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', | ||
| ), | ||
| ), | ||
| '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', | ||
| ), | ||
| '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', | ||
| ), | ||
| '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' ), | ||
| ), | ||
| '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', | ||
| ), | ||
| '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', | ||
| ), | ||
| ), | ||
| 'expected_output' => '', | ||
| ), | ||
| 'horizontal flex layout should return empty value' => array( | ||
| 'args' => array( | ||
| 'selector' => '.wp-layout', | ||
| 'layout' => array( | ||
| 'type' => 'flex', | ||
| 'orientation' => 'horizontal', | ||
| ), | ||
| ), | ||
| 'expected_output' => '', | ||
| ), | ||
| 'flex layout with properties' => array( | ||
| 'args' => array( | ||
| 'selector' => '.wp-layout', | ||
| 'layout' => array( | ||
| 'type' => 'flex', | ||
| 'orientation' => 'horizontal', | ||
| 'flexWrap' => 'nowrap', | ||
| 'justifyContent' => 'left', | ||
| 'verticalAlignment' => 'bottom', | ||
| ), | ||
| ), | ||
| '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', | ||
| ), | ||
| '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', | ||
| ), | ||
| ), | ||
| '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', | ||
| ), | ||
| 'fallback_gap_value' => '11px', | ||
| ), | ||
| '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', | ||
| ), | ||
| ), | ||
| 'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;}', | ||
| ), | ||
| ); | ||
| } | ||
| } |