Skip to content

Commit 7e9385e

Browse files
tellthemachinestellthemachines
committed
Editor: stabilise layout and refactor definitions.
Marks the layout support stable and moves layout definitions from `theme.json` into `wp-includes/block-supports/layout.php`. Props andrewserong, poena, ramonopoly, peterwilsoncc. Fixes #58550. git-svn-id: https://develop.svn.wordpress.org/trunk@56055 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 14a3070 commit 7e9385e

File tree

4 files changed

+267
-353
lines changed

4 files changed

+267
-353
lines changed

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

+194-10
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,203 @@
66
* @since 5.8.0
77
*/
88

9+
/**
10+
* Returns layout definitions, keyed by layout type.
11+
*
12+
* Provides a common definition of slugs, classnames, base styles, and spacing styles for each layout type.
13+
* When making changes or additions to layout definitions, the corresponding JavaScript definitions should
14+
* also be updated.
15+
*
16+
* @since 6.3.0
17+
* @access private
18+
*
19+
* @return array[] Layout definitions.
20+
*/
21+
function wp_get_layout_definitions() {
22+
$layout_definitions = array(
23+
'default' => array(
24+
'name' => 'default',
25+
'slug' => 'flow',
26+
'className' => 'is-layout-flow',
27+
'baseStyles' => array(
28+
array(
29+
'selector' => ' > .alignleft',
30+
'rules' => array(
31+
'float' => 'left',
32+
'margin-inline-start' => '0',
33+
'margin-inline-end' => '2em',
34+
),
35+
),
36+
array(
37+
'selector' => ' > .alignright',
38+
'rules' => array(
39+
'float' => 'right',
40+
'margin-inline-start' => '2em',
41+
'margin-inline-end' => '0',
42+
),
43+
),
44+
array(
45+
'selector' => ' > .aligncenter',
46+
'rules' => array(
47+
'margin-left' => 'auto !important',
48+
'margin-right' => 'auto !important',
49+
),
50+
),
51+
),
52+
'spacingStyles' => array(
53+
array(
54+
'selector' => ' > :first-child:first-child',
55+
'rules' => array(
56+
'margin-block-start' => '0',
57+
),
58+
),
59+
array(
60+
'selector' => ' > :last-child:last-child',
61+
'rules' => array(
62+
'margin-block-end' => '0',
63+
),
64+
),
65+
array(
66+
'selector' => ' > *',
67+
'rules' => array(
68+
'margin-block-start' => null,
69+
'margin-block-end' => '0',
70+
),
71+
),
72+
),
73+
),
74+
'constrained' => array(
75+
'name' => 'constrained',
76+
'slug' => 'constrained',
77+
'className' => 'is-layout-constrained',
78+
'baseStyles' => array(
79+
array(
80+
'selector' => ' > .alignleft',
81+
'rules' => array(
82+
'float' => 'left',
83+
'margin-inline-start' => '0',
84+
'margin-inline-end' => '2em',
85+
),
86+
),
87+
array(
88+
'selector' => ' > .alignright',
89+
'rules' => array(
90+
'float' => 'right',
91+
'margin-inline-start' => '2em',
92+
'margin-inline-end' => '0',
93+
),
94+
),
95+
array(
96+
'selector' => ' > .aligncenter',
97+
'rules' => array(
98+
'margin-left' => 'auto !important',
99+
'margin-right' => 'auto !important',
100+
),
101+
),
102+
array(
103+
'selector' => ' > :where(:not(.alignleft):not(.alignright):not(.alignfull))',
104+
'rules' => array(
105+
'max-width' => 'var(--wp--style--global--content-size)',
106+
'margin-left' => 'auto !important',
107+
'margin-right' => 'auto !important',
108+
),
109+
),
110+
array(
111+
'selector' => ' > .alignwide',
112+
'rules' => array(
113+
'max-width' => 'var(--wp--style--global--wide-size)',
114+
),
115+
),
116+
),
117+
'spacingStyles' => array(
118+
array(
119+
'selector' => ' > :first-child:first-child',
120+
'rules' => array(
121+
'margin-block-start' => '0',
122+
),
123+
),
124+
array(
125+
'selector' => ' > :last-child:last-child',
126+
'rules' => array(
127+
'margin-block-end' => '0',
128+
),
129+
),
130+
array(
131+
'selector' => ' > *',
132+
'rules' => array(
133+
'margin-block-start' => null,
134+
'margin-block-end' => '0',
135+
),
136+
),
137+
),
138+
),
139+
'flex' => array(
140+
'name' => 'flex',
141+
'slug' => 'flex',
142+
'className' => 'is-layout-flex',
143+
'displayMode' => 'flex',
144+
'baseStyles' => array(
145+
array(
146+
'selector' => '',
147+
'rules' => array(
148+
'flex-wrap' => 'wrap',
149+
'align-items' => 'center',
150+
),
151+
),
152+
array(
153+
'selector' => ' > *',
154+
'rules' => array(
155+
'margin' => '0',
156+
),
157+
),
158+
),
159+
'spacingStyles' => array(
160+
array(
161+
'selector' => '',
162+
'rules' => array(
163+
'gap' => null,
164+
),
165+
),
166+
),
167+
),
168+
'grid' => array(
169+
'name' => 'grid',
170+
'slug' => 'grid',
171+
'className' => 'is-layout-grid',
172+
'displayMode' => 'grid',
173+
'baseStyles' => array(
174+
array(
175+
'selector' => ' > *',
176+
'rules' => array(
177+
'margin' => '0',
178+
),
179+
),
180+
),
181+
'spacingStyles' => array(
182+
array(
183+
'selector' => '',
184+
'rules' => array(
185+
'gap' => null,
186+
),
187+
),
188+
),
189+
),
190+
);
191+
192+
return $layout_definitions;
193+
}
194+
9195
/**
10196
* Registers the layout block attribute for block types that support it.
11197
*
12198
* @since 5.8.0
199+
* @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`.
13200
* @access private
14201
*
15202
* @param WP_Block_Type $block_type Block Type.
16203
*/
17204
function wp_register_layout_support( $block_type ) {
18-
$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
205+
$support_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
19206
if ( $support_layout ) {
20207
if ( ! $block_type->attributes ) {
21208
$block_type->attributes = array();
@@ -352,6 +539,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
352539
*
353540
* @since 5.8.0
354541
* @since 6.3.0 Adds compound class to layout wrapper for global spacing styles.
542+
* @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`.
355543
* @access private
356544
*
357545
* @param string $block_content Rendered block content.
@@ -360,7 +548,7 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
360548
*/
361549
function wp_render_layout_support_flag( $block_content, $block ) {
362550
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
363-
$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
551+
$support_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
364552
$has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] );
365553

366554
if ( ! $support_layout && ! $has_child_layout ) {
@@ -409,16 +597,12 @@ function wp_render_layout_support_flag( $block_content, $block ) {
409597
return (string) $content;
410598
}
411599

412-
$global_settings = wp_get_global_settings();
413-
$global_layout_settings = _wp_array_get( $global_settings, array( 'layout' ), null );
414-
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
415-
416-
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] && ! $global_layout_settings ) {
417-
return $block_content;
418-
}
600+
$global_settings = wp_get_global_settings();
601+
$fallback_layout = ! empty( _wp_array_get( $block_type->supports, array( 'layout', 'default' ), array() ) ) ? _wp_array_get( $block_type->supports, array( 'layout', 'default' ), array() ) : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
602+
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $fallback_layout;
419603

420604
$class_names = array();
421-
$layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
605+
$layout_definitions = wp_get_layout_definitions();
422606
$container_class = wp_unique_id( 'wp-container-' );
423607
$layout_classname = '';
424608

‎src/wp-includes/class-wp-theme-json.php

+3-4
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ class WP_Theme_JSON {
338338
* @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
339339
* @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', 'shadow.defaultPresets',
340340
* `position.fixed` and `position.sticky`.
341-
* @since 6.3.0 Added support for `typography.textColumns`.
341+
* @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`.
342342
*
343343
* @var array
344344
*/
@@ -374,7 +374,6 @@ class WP_Theme_JSON {
374374
),
375375
'layout' => array(
376376
'contentSize' => null,
377-
'definitions' => null,
378377
'wideSize' => null,
379378
),
380379
'position' => array(
@@ -1277,7 +1276,7 @@ protected function get_layout_styles( $block_metadata ) {
12771276

12781277
if ( isset( $block_metadata['name'] ) ) {
12791278
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] );
1280-
if ( ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {
1279+
if ( ! block_has_support( $block_type, array( 'layout' ), false ) && ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {
12811280
return $block_rules;
12821281
}
12831282
}
@@ -1286,7 +1285,7 @@ protected function get_layout_styles( $block_metadata ) {
12861285
$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
12871286
$has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support.
12881287
$node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
1289-
$layout_definitions = _wp_array_get( $this->theme_json, array( 'settings', 'layout', 'definitions' ), array() );
1288+
$layout_definitions = wp_get_layout_definitions();
12901289
$layout_selector_pattern = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
12911290

12921291
// Gap styles will only be output if the theme has block gap support, or supports a fallback gap.

0 commit comments

Comments
 (0)