vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 12:20:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Improves layout block support in wp_get_layout_style().

Browse Source 
This commit merges the remaining changes from [https://github.com/WordPress/gutenberg/pull/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
This commit is contained in:
Tonya Mork
2022-09-21 13:00:29 +00:00
parent 34ace2304b
commit 2d75ae23d6
7 changed files with 550 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/phpunit/tests/block-supports/wpGetLayoutStyle.php
+253
View File
@@ -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;}',
),
);
}
}