Skip to content

Commit 2d75ae2

Browse files
hellofromtonyahellofromtonya
committed
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
1 parent 34ace23 commit 2d75ae2

File tree

7 files changed

+549
-90
lines changed

7 files changed

+549
-90
lines changed

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

Lines changed: 289 additions & 83 deletions
Large diffs are not rendered by default.

‎tests/phpunit/data/blocks/fixtures/core__column.server.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
<div class="wp-container-1 wp-block-column">
2+
<div class="is-layout-flow wp-block-column">
33

44
<p>Column One, Paragraph One</p>
55

‎tests/phpunit/data/blocks/fixtures/core__columns.server.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

2-
<div class="wp-container-1 wp-block-columns has-3-columns">
2+
<div class="is-layout-flex wp-container-1 wp-block-columns has-3-columns">
33

4-
<div class="wp-container-1 wp-block-column">
4+
<div class="is-layout-flow wp-block-column">
55

66
<p>Column One, Paragraph One</p>
77

@@ -11,7 +11,7 @@
1111
</div>
1212

1313

14-
<div class="wp-container-1 wp-block-column">
14+
<div class="is-layout-flow wp-block-column">
1515

1616
<p>Column Two, Paragraph One</p>
1717

‎tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
<div class="wp-container-1 wp-block-columns has-3-columns">
2+
<div class="is-layout-flex wp-container-1 wp-block-columns has-3-columns">
33

44
<p class="layout-column-1">Column One, Paragraph One</p>
55

‎tests/phpunit/data/blocks/fixtures/core__gallery.server.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
<figure class="wp-container-1 wp-block-gallery-1 wp-block-gallery has-nested-images columns-default is-cropped columns-2">
2+
<figure class="is-layout-flex wp-block-gallery-1 wp-block-gallery has-nested-images columns-default is-cropped columns-2">
33

44
<figure class="wp-block-image size-large">
55
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="Image gallery image" />

‎tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
<figure class="wp-container-1 wp-block-gallery-1 wp-block-gallery has-nested-images is-cropped columns-1" >
2+
<figure class="is-layout-flex wp-block-gallery-1 wp-block-gallery has-nested-images is-cropped columns-1" >
33

44
<figure class="wp-block-image size-large">
55
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="Image gallery image" />

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

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
<?php
2+
3+
/**
4+
* @group block-supports
5+
* @covers ::wp_get_layout_style
6+
*/
7+
class Tests_Block_Supports_WpGetLayoutStyle extends WP_UnitTestCase {
8+
const ARGS_DEFAULTS = array(
9+
'selector' => null,
10+
'layout' => null,
11+
'has_block_gap_support' => false,
12+
'gap_value' => null,
13+
'should_skip_gap_serialization' => false,
14+
'fallback_gap_value' => '0.5em',
15+
'block_spacing' => null,
16+
);
17+
18+
/**
19+
* @dataProvider data_wp_get_layout_style
20+
* @ticket 56467
21+
*
22+
* @param array $args Dataset to test.
23+
* @param string $expected_output The expected output.
24+
*/
25+
public function test_wp_get_layout_style( array $args, $expected_output ) {
26+
$args = array_merge( static::ARGS_DEFAULTS, $args );
27+
$layout_styles = wp_get_layout_style(
28+
$args['selector'],
29+
$args['layout'],
30+
$args['has_block_gap_support'],
31+
$args['gap_value'],
32+
$args['should_skip_gap_serialization'],
33+
$args['fallback_gap_value'],
34+
$args['block_spacing']
35+
);
36+
37+
$this->assertSame( $expected_output, $layout_styles );
38+
}
39+
40+
/**
41+
* Data provider.
42+
*
43+
* @return array
44+
*/
45+
public function data_wp_get_layout_style() {
46+
return array(
47+
'no args should return empty value' => array(
48+
'args' => array(),
49+
'expected_output' => '',
50+
),
51+
'nulled args should return empty value' => array(
52+
'args' => array(
53+
'selector' => null,
54+
'layout' => null,
55+
'has_block_gap_support' => null,
56+
'gap_value' => null,
57+
'should_skip_gap_serialization' => null,
58+
'fallback_gap_value' => null,
59+
'block_spacing' => null,
60+
),
61+
'expected_output' => '',
62+
),
63+
'only selector should return empty value' => array(
64+
'args' => array(
65+
'selector' => '.wp-layout',
66+
),
67+
'expected_output' => '',
68+
),
69+
'default layout and block gap support' => array(
70+
'args' => array(
71+
'selector' => '.wp-layout',
72+
'has_block_gap_support' => true,
73+
'gap_value' => '1em',
74+
),
75+
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}',
76+
),
77+
'skip serialization should return empty value' => array(
78+
'args' => array(
79+
'selector' => '.wp-layout',
80+
'has_block_gap_support' => true,
81+
'gap_value' => '1em',
82+
'should_skip_gap_serialization' => true,
83+
),
84+
'expected_output' => '',
85+
),
86+
'default layout and axial block gap support' => array(
87+
'args' => array(
88+
'selector' => '.wp-layout',
89+
'has_block_gap_support' => true,
90+
'gap_value' => array( 'top' => '1em' ),
91+
),
92+
'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}',
93+
),
94+
'constrained layout with sizes' => array(
95+
'args' => array(
96+
'selector' => '.wp-layout',
97+
'layout' => array(
98+
'type' => 'constrained',
99+
'contentSize' => '800px',
100+
'wideSize' => '1200px',
101+
),
102+
),
103+
'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;}',
104+
),
105+
'constrained layout with sizes and block spacing' => array(
106+
'args' => array(
107+
'selector' => '.wp-layout',
108+
'layout' => array(
109+
'type' => 'constrained',
110+
'contentSize' => '800px',
111+
'wideSize' => '1200px',
112+
),
113+
'block_spacing' => array(
114+
'padding' => array(
115+
'left' => '20px',
116+
'right' => '10px',
117+
),
118+
),
119+
),
120+
'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);}',
121+
),
122+
'constrained layout with block gap support' => array(
123+
'args' => array(
124+
'selector' => '.wp-layout',
125+
'layout' => array(
126+
'type' => 'constrained',
127+
),
128+
'has_block_gap_support' => true,
129+
'gap_value' => '2.5rem',
130+
),
131+
'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;}',
132+
),
133+
'constrained layout with axial block gap support' => array(
134+
'args' => array(
135+
'selector' => '.wp-layout',
136+
'layout' => array(
137+
'type' => 'constrained',
138+
),
139+
'has_block_gap_support' => true,
140+
'gap_value' => array( 'top' => '2.5rem' ),
141+
),
142+
'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;}',
143+
),
144+
'constrained layout with block gap support and spacing preset' => array(
145+
'args' => array(
146+
'selector' => '.wp-layout',
147+
'layout' => array(
148+
'type' => 'constrained',
149+
),
150+
'has_block_gap_support' => true,
151+
'gap_value' => 'var:preset|spacing|50',
152+
),
153+
'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;}',
154+
),
155+
'flex layout with no args should return empty value' => array(
156+
'args' => array(
157+
'selector' => '.wp-layout',
158+
'layout' => array(
159+
'type' => 'flex',
160+
),
161+
),
162+
'expected_output' => '',
163+
),
164+
'horizontal flex layout should return empty value' => array(
165+
'args' => array(
166+
'selector' => '.wp-layout',
167+
'layout' => array(
168+
'type' => 'flex',
169+
'orientation' => 'horizontal',
170+
),
171+
),
172+
'expected_output' => '',
173+
),
174+
'flex layout with properties' => array(
175+
'args' => array(
176+
'selector' => '.wp-layout',
177+
'layout' => array(
178+
'type' => 'flex',
179+
'orientation' => 'horizontal',
180+
'flexWrap' => 'nowrap',
181+
'justifyContent' => 'left',
182+
'verticalAlignment' => 'bottom',
183+
),
184+
),
185+
'expected_output' => '.wp-layout{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;}',
186+
),
187+
'flex layout with properties and block gap' => array(
188+
'args' => array(
189+
'selector' => '.wp-layout',
190+
'layout' => array(
191+
'type' => 'flex',
192+
'orientation' => 'horizontal',
193+
'flexWrap' => 'nowrap',
194+
'justifyContent' => 'left',
195+
'verticalAlignment' => 'bottom',
196+
),
197+
'has_block_gap_support' => true,
198+
'gap_value' => '29px',
199+
),
200+
'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:29px;justify-content:flex-start;align-items:flex-end;}',
201+
),
202+
'flex layout with properties and axial block gap' => array(
203+
'args' => array(
204+
'selector' => '.wp-layout',
205+
'layout' => array(
206+
'type' => 'flex',
207+
'orientation' => 'horizontal',
208+
'flexWrap' => 'nowrap',
209+
'justifyContent' => 'left',
210+
'verticalAlignment' => 'bottom',
211+
),
212+
'has_block_gap_support' => true,
213+
'gap_value' => array(
214+
'top' => '1px',
215+
'left' => '2px',
216+
),
217+
),
218+
'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:1px 2px;justify-content:flex-start;align-items:flex-end;}',
219+
),
220+
'flex layout with properties and axial block gap using spacing preset' => array(
221+
'args' => array(
222+
'selector' => '.wp-layout',
223+
'layout' => array(
224+
'type' => 'flex',
225+
'orientation' => 'horizontal',
226+
'flexWrap' => 'nowrap',
227+
'justifyContent' => 'left',
228+
'verticalAlignment' => 'bottom',
229+
),
230+
'has_block_gap_support' => true,
231+
'gap_value' => array(
232+
'left' => 'var:preset|spacing|40',
233+
),
234+
'fallback_gap_value' => '11px',
235+
),
236+
'expected_output' => '.wp-layout{flex-wrap:nowrap;gap:11px var(--wp--preset--spacing--40);justify-content:flex-start;align-items:flex-end;}',
237+
),
238+
'vertical flex layout with properties' => array(
239+
'args' => array(
240+
'selector' => '.wp-layout',
241+
'layout' => array(
242+
'type' => 'flex',
243+
'orientation' => 'vertical',
244+
'flexWrap' => 'nowrap',
245+
'justifyContent' => 'left',
246+
'verticalAlignment' => 'bottom',
247+
),
248+
),
249+
'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;}',
250+
),
251+
);
252+
}
253+
}

0 commit comments

Comments
 (0)