Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 2d75ae2

Browse filesBrowse 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
Copy full SHA for 2d75ae2

File tree

Expand file treeCollapse file tree

7 files changed

+549
-90
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

7 files changed

+549
-90
lines changed
Open diff view settings
Collapse file

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

Copy file name to clipboardExpand all lines: src/wp-includes/block-supports/layout.php
+289-83Lines changed: 289 additions & 83 deletions
Large diffs are not rendered by default.
Collapse file

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

Copy file name to clipboardExpand all lines: tests/phpunit/data/blocks/fixtures/core__column.server.html
+1-1Lines 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

Collapse file

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

Copy file name to clipboardExpand all lines: tests/phpunit/data/blocks/fixtures/core__columns.server.html
+3-3Lines 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

Collapse file

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

Copy file name to clipboardExpand all lines: tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html
+1-1Lines 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

Collapse file

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

Copy file name to clipboardExpand all lines: tests/phpunit/data/blocks/fixtures/core__gallery.server.html
+1-1Lines 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" />
Collapse file

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

Copy file name to clipboardExpand all lines: tests/phpunit/data/blocks/fixtures/core__gallery__columns.server.html
+1-1Lines 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" />
Collapse file

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

Copy file name to clipboard
+253Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.