Skip to content

Commit dec7bd8

Browse files
andrewserongandrewserong
committed
Move style definitions to theme.json
1 parent 3285d88 commit dec7bd8

File tree

3 files changed

+73
-94
lines changed

3 files changed

+73
-94
lines changed

‎lib/block-supports/layout.php

+16-91
Original file line numberDiff line numberDiff line change
@@ -25,106 +25,31 @@ function gutenberg_register_layout_support( $block_type ) {
2525
}
2626
}
2727

28-
function gutenberg_generate_common_flow_layout_styles() {
29-
$style_engine = WP_Style_Engine_Gutenberg::get_instance();
30-
31-
$style_engine->add_style(
32-
'wp-layout-flow',
33-
array(
34-
'selector' => '.alignleft',
35-
'rules' => array(
36-
'float' => 'left',
37-
'margin-right' => '2em',
38-
'margin-left' => '0',
39-
),
40-
)
41-
);
42-
43-
$style_engine->add_style(
44-
'wp-layout-flow',
45-
array(
46-
'selector' => '.alignright',
47-
'rules' => array(
48-
'float' => 'right',
49-
'margin-left' => '2em',
50-
'margin-right' => '0',
51-
),
52-
)
53-
);
54-
55-
$style_engine->add_style(
56-
'wp-layout-flow',
57-
array(
58-
'selector' => '> .alignfull',
59-
'rules' => array(
60-
'max-width' => 'none',
61-
),
62-
)
63-
);
64-
65-
$style_engine->add_style(
66-
'wp-layout-flow--global-gap',
67-
array(
68-
'selector' => '> *',
69-
'rules' => array(
70-
'margin-top' => '0',
71-
'margin-bottom' => '0',
72-
),
73-
)
74-
);
75-
76-
$style_engine->add_style(
77-
'wp-layout-flow--global-gap',
78-
array(
79-
'selector' => '> * + *',
80-
'rules' => array(
81-
'margin-top' => 'var( --wp--style--block-gap )',
82-
'margin-bottom' => '0',
83-
),
84-
)
85-
);
86-
}
87-
88-
function gutenberg_generate_common_flex_layout_styles() {
89-
$style_engine = WP_Style_Engine_Gutenberg::get_instance();
90-
91-
$style_engine->add_style(
92-
'wp-layout-flex',
93-
array(
94-
'rules' => array(
95-
'display' => 'flex',
96-
'gap' => '0.5em',
97-
),
98-
)
99-
);
100-
101-
$style_engine->add_style(
102-
'wp-layout-flex',
103-
array(
104-
'selector' => '> *',
105-
'rules' => array(
106-
'margin' => '0',
107-
),
108-
)
109-
);
110-
}
111-
11228
function gutenberg_get_layout_preset_styles( $preset_metadata, $presets_by_origin ) {
113-
WP_Style_Engine_Gutenberg::get_instance()->reset();
29+
$style_engine = WP_Style_Engine_Gutenberg::get_instance();
30+
$style_engine->reset();
11431

11532
$presets = end( $presets_by_origin );
11633

11734
foreach ( $presets as $preset ) {
118-
if ( isset( $preset['type'] ) ) {
119-
if ( 'flow' === $preset['type'] ) {
120-
$output_styles = gutenberg_generate_common_flow_layout_styles();
121-
} else if ( 'flex' === $preset['type'] ) {
122-
$output_styles = gutenberg_generate_common_flex_layout_styles();
35+
if ( ! empty( $preset['type'] ) && ! empty( $preset['styles'] ) ) {
36+
$slug = ! empty( $preset['slug'] ) ? $preset['slug'] : $preset['type'];
37+
$base_class = 'wp-layout-' . sanitize_title( $slug );
38+
39+
foreach ( $preset['styles'] as $style ) {
40+
if ( ! empty( $style['rules'] ) && is_array( $style['rules'] ) ) {
41+
$options = array(
42+
'selector' => ! empty( $style['selector'] ) ? $style['selector'] : null,
43+
'suffix' => ! empty( $style['suffix'] ) ? sanitize_title( $style['suffix'] ) : null,
44+
'rules' => $style['rules'],
45+
);
46+
$style_engine->add_style( $base_class, $options );
47+
}
12348
}
12449
}
12550
}
12651

127-
return WP_Style_Engine_Gutenberg::get_instance()->get_generated_styles();
52+
return $style_engine->get_generated_styles();
12853
}
12954

13055
/**

‎lib/class-wp-style-engine-gutenberg.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ public function get_generated_styles() {
9191
* @return string The class name for the added style.
9292
*/
9393
public function add_style( $key, $options ) {
94-
$class = ! empty( $options['suffix'] ) ? $key . '-' . sanitize_title( $options['suffix'] ) : $key;
94+
$class = ! empty( $options['suffix'] ) ? $key . '--' . sanitize_title( $options['suffix'] ) : $key;
9595
$selector = ! empty( $options['selector'] ) ? ' ' . trim( $options['selector'] ) : '';
9696
$rules = ! empty( $options['rules'] ) ? $options['rules'] : array();
9797
$prefix = ! empty( $options['prefix'] ) ? $options['prefix'] : '.';

‎lib/compat/wordpress-5.9/theme.json

+56-2
Original file line numberDiff line numberDiff line change
@@ -189,11 +189,65 @@
189189
"types": [
190190
{
191191
"slug": "flow",
192-
"type": "flow"
192+
"type": "flow",
193+
"styles": [
194+
{
195+
"selector": ".alignleft",
196+
"rules": {
197+
"float": "left",
198+
"margin-right": "2em",
199+
"margin-left": "0"
200+
}
201+
},
202+
{
203+
"selector": ".alignright",
204+
"rules": {
205+
"float": "right",
206+
"margin-left": "2em",
207+
"margin-right": "0"
208+
}
209+
},
210+
{
211+
"selector": "> .alignfull",
212+
"rules": {
213+
"max-width": "none"
214+
}
215+
},
216+
{
217+
"suffix": "global-gap",
218+
"selector": "> *",
219+
"rules": {
220+
"margin-top": "0",
221+
"margin-bottom": "0"
222+
}
223+
},
224+
{
225+
"suffix": "global-gap",
226+
"selector": "> * + *",
227+
"rules": {
228+
"margin-top": "var( --wp--style--block-gap )",
229+
"margin-bottom": 0
230+
}
231+
}
232+
]
193233
},
194234
{
195235
"slug": "flex",
196-
"type": "flex"
236+
"type": "flex",
237+
"styles": [
238+
{
239+
"rules": {
240+
"display": "flex",
241+
"gap": "0.5em"
242+
}
243+
},
244+
{
245+
"selector": "> *",
246+
"rules": {
247+
"margin": "0"
248+
}
249+
}
250+
]
197251
}
198252
]
199253
},

0 commit comments

Comments
 (0)