Skip to content

Commit b5582f9

Browse files
glendaviesnzGlen Davies
glendaviesnz
and
Glen Davies
authored
Theme.json: Add initial spacing size presets infrastructure (#41527)
Co-authored-by: Glen Davies <glen.davies@a8c.com>
1 parent f319f4c commit b5582f9

17 files changed

+1036
-175
lines changed

‎docs/reference-guides/theme-json-reference/theme-json-living.md

+3
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,9 @@ Settings related to spacing.
8383
| margin | boolean | false | |
8484
| padding | boolean | false | |
8585
| units | array | px,em,rem,vh,vw,% | |
86+
| customSpacingSize | boolean | true | |
87+
| spacingSizes | array | | name, size, slug |
88+
| spacingScale | object | | |
8689

8790
---
8891

‎lib/block-supports/border.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
119119

120120
// Collect classes and styles.
121121
$attributes = array();
122-
$styles = gutenberg_style_engine_generate( array( 'border' => $border_block_styles ) );
122+
$styles = gutenberg_style_engine_generate( array( 'border' => $border_block_styles ), array( 'css_vars' => true ) );
123123

124124
if ( ! empty( $styles['classnames'] ) ) {
125125
$attributes['class'] = $styles['classnames'];

‎lib/block-supports/spacing.php

+2-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
5858
$spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null;
5959
$spacing_block_styles['margin'] = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null;
6060
$styles = gutenberg_style_engine_generate(
61-
array( 'spacing' => $spacing_block_styles )
61+
array( 'spacing' => $spacing_block_styles ),
62+
array( 'css_vars' => true )
6263
);
6364

6465
if ( ! empty( $styles['css'] ) ) {

‎lib/compat/wordpress-6.0/block-editor-settings.php

-146
Original file line numberDiff line numberDiff line change
@@ -47,149 +47,3 @@ function gutenberg_is_global_styles_in_5_9( $style ) {
4747

4848
return false;
4949
}
50-
51-
/**
52-
* Adds styles and __experimentalFeatures to the block editor settings.
53-
*
54-
* @param array $settings Existing block editor settings.
55-
*
56-
* @return array New block editor settings.
57-
*/
58-
function gutenberg_get_block_editor_settings( $settings ) {
59-
// Set what is the context for this data request.
60-
$context = 'other';
61-
if (
62-
defined( 'REST_REQUEST' ) &&
63-
REST_REQUEST &&
64-
isset( $_GET['context'] ) &&
65-
'mobile' === $_GET['context']
66-
) {
67-
$context = 'mobile';
68-
}
69-
70-
if ( 'other' === $context ) {
71-
global $wp_version;
72-
$is_wp_5_8 = version_compare( $wp_version, '5.8', '>=' ) && version_compare( $wp_version, '5.9', '<' );
73-
$is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0-beta1', '<' );
74-
$is_wp_6_0 = version_compare( $wp_version, '6.0-beta1', '>=' );
75-
76-
// Make sure the styles array exists.
77-
// In some contexts, like the navigation editor, it doesn't.
78-
if ( ! isset( $settings['styles'] ) ) {
79-
$settings['styles'] = array();
80-
}
81-
82-
// Remove existing global styles provided by core.
83-
$styles_without_existing_global_styles = array();
84-
foreach ( $settings['styles'] as $style ) {
85-
if (
86-
( $is_wp_5_8 && ! gutenberg_is_global_styles_in_5_8( $style ) ) || // Can be removed when plugin minimum version is 5.9.
87-
( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) || // Can be removed when plugin minimum version is 6.0.
88-
( $is_wp_6_0 && ( ! isset( $style['isGlobalStyles'] ) || ! $style['isGlobalStyles'] ) )
89-
) {
90-
$styles_without_existing_global_styles[] = $style;
91-
}
92-
}
93-
94-
// Recreate global styles.
95-
$new_global_styles = array();
96-
$presets = array(
97-
array(
98-
'css' => 'variables',
99-
'__unstableType' => 'presets',
100-
'isGlobalStyles' => true,
101-
),
102-
array(
103-
'css' => 'presets',
104-
'__unstableType' => 'presets',
105-
'isGlobalStyles' => true,
106-
),
107-
);
108-
foreach ( $presets as $preset_style ) {
109-
$actual_css = gutenberg_get_global_stylesheet( array( $preset_style['css'] ) );
110-
if ( '' !== $actual_css ) {
111-
$preset_style['css'] = $actual_css;
112-
$new_global_styles[] = $preset_style;
113-
}
114-
}
115-
116-
if ( WP_Theme_JSON_Resolver::theme_has_support() ) {
117-
$block_classes = array(
118-
'css' => 'styles',
119-
'__unstableType' => 'theme',
120-
'isGlobalStyles' => true,
121-
);
122-
$actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
123-
if ( '' !== $actual_css ) {
124-
$block_classes['css'] = $actual_css;
125-
$new_global_styles[] = $block_classes;
126-
}
127-
}
128-
129-
$settings['styles'] = array_merge( $new_global_styles, $styles_without_existing_global_styles );
130-
}
131-
132-
// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
133-
$settings['__experimentalFeatures'] = gutenberg_get_global_settings();
134-
135-
if ( isset( $settings['__experimentalFeatures']['color']['palette'] ) ) {
136-
$colors_by_origin = $settings['__experimentalFeatures']['color']['palette'];
137-
$settings['colors'] = isset( $colors_by_origin['custom'] ) ?
138-
$colors_by_origin['custom'] : (
139-
isset( $colors_by_origin['theme'] ) ?
140-
$colors_by_origin['theme'] :
141-
$colors_by_origin['default']
142-
);
143-
}
144-
145-
if ( isset( $settings['__experimentalFeatures']['color']['gradients'] ) ) {
146-
$gradients_by_origin = $settings['__experimentalFeatures']['color']['gradients'];
147-
$settings['gradients'] = isset( $gradients_by_origin['custom'] ) ?
148-
$gradients_by_origin['custom'] : (
149-
isset( $gradients_by_origin['theme'] ) ?
150-
$gradients_by_origin['theme'] :
151-
$gradients_by_origin['default']
152-
);
153-
}
154-
155-
if ( isset( $settings['__experimentalFeatures']['typography']['fontSizes'] ) ) {
156-
$font_sizes_by_origin = $settings['__experimentalFeatures']['typography']['fontSizes'];
157-
$settings['fontSizes'] = isset( $font_sizes_by_origin['custom'] ) ?
158-
$font_sizes_by_origin['custom'] : (
159-
isset( $font_sizes_by_origin['theme'] ) ?
160-
$font_sizes_by_origin['theme'] :
161-
$font_sizes_by_origin['default']
162-
);
163-
}
164-
165-
if ( isset( $settings['__experimentalFeatures']['color']['custom'] ) ) {
166-
$settings['disableCustomColors'] = ! $settings['__experimentalFeatures']['color']['custom'];
167-
unset( $settings['__experimentalFeatures']['color']['custom'] );
168-
}
169-
if ( isset( $settings['__experimentalFeatures']['color']['customGradient'] ) ) {
170-
$settings['disableCustomGradients'] = ! $settings['__experimentalFeatures']['color']['customGradient'];
171-
unset( $settings['__experimentalFeatures']['color']['customGradient'] );
172-
}
173-
if ( isset( $settings['__experimentalFeatures']['typography']['customFontSize'] ) ) {
174-
$settings['disableCustomFontSizes'] = ! $settings['__experimentalFeatures']['typography']['customFontSize'];
175-
unset( $settings['__experimentalFeatures']['typography']['customFontSize'] );
176-
}
177-
if ( isset( $settings['__experimentalFeatures']['typography']['lineHeight'] ) ) {
178-
$settings['enableCustomLineHeight'] = $settings['__experimentalFeatures']['typography']['lineHeight'];
179-
unset( $settings['__experimentalFeatures']['typography']['lineHeight'] );
180-
}
181-
if ( isset( $settings['__experimentalFeatures']['spacing']['units'] ) ) {
182-
$settings['enableCustomUnits'] = $settings['__experimentalFeatures']['spacing']['units'];
183-
unset( $settings['__experimentalFeatures']['spacing']['units'] );
184-
}
185-
if ( isset( $settings['__experimentalFeatures']['spacing']['padding'] ) ) {
186-
$settings['enableCustomSpacing'] = $settings['__experimentalFeatures']['spacing']['padding'];
187-
unset( $settings['__experimentalFeatures']['spacing']['padding'] );
188-
}
189-
190-
$settings['localAutosaveInterval'] = 15;
191-
192-
return $settings;
193-
}
194-
195-
add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings', PHP_INT_MAX );

‎lib/compat/wordpress-6.1/block-editor-settings.php

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<?php
2+
/**
3+
* Adds settings to the block editor.
4+
*
5+
* @package gutenberg
6+
*/
7+
8+
/**
9+
* Adds styles and __experimentalFeatures to the block editor settings.
10+
*
11+
* @param array $settings Existing block editor settings.
12+
*
13+
* @return array New block editor settings.
14+
*/
15+
function gutenberg_get_block_editor_settings( $settings ) {
16+
// Set what is the context for this data request.
17+
$context = 'other';
18+
if (
19+
defined( 'REST_REQUEST' ) &&
20+
REST_REQUEST &&
21+
isset( $_GET['context'] ) &&
22+
'mobile' === $_GET['context']
23+
) {
24+
$context = 'mobile';
25+
}
26+
27+
if ( 'other' === $context ) {
28+
global $wp_version;
29+
$is_wp_5_8 = version_compare( $wp_version, '5.8', '>=' ) && version_compare( $wp_version, '5.9', '<' );
30+
$is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0-beta1', '<' );
31+
$is_wp_6_0 = version_compare( $wp_version, '6.0-beta1', '>=' );
32+
33+
// Make sure the styles array exists.
34+
// In some contexts, like the navigation editor, it doesn't.
35+
if ( ! isset( $settings['styles'] ) ) {
36+
$settings['styles'] = array();
37+
}
38+
39+
// Remove existing global styles provided by core.
40+
$styles_without_existing_global_styles = array();
41+
foreach ( $settings['styles'] as $style ) {
42+
if (
43+
( $is_wp_5_8 && ! gutenberg_is_global_styles_in_5_8( $style ) ) || // Can be removed when plugin minimum version is 5.9.
44+
( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) || // Can be removed when plugin minimum version is 6.0.
45+
( $is_wp_6_0 && ( ! isset( $style['isGlobalStyles'] ) || ! $style['isGlobalStyles'] ) )
46+
) {
47+
$styles_without_existing_global_styles[] = $style;
48+
}
49+
}
50+
51+
// Recreate global styles.
52+
$new_global_styles = array();
53+
$presets = array(
54+
array(
55+
'css' => 'variables',
56+
'__unstableType' => 'presets',
57+
'isGlobalStyles' => true,
58+
),
59+
array(
60+
'css' => 'presets',
61+
'__unstableType' => 'presets',
62+
'isGlobalStyles' => true,
63+
),
64+
);
65+
foreach ( $presets as $preset_style ) {
66+
$actual_css = gutenberg_get_global_stylesheet( array( $preset_style['css'] ) );
67+
if ( '' !== $actual_css ) {
68+
$preset_style['css'] = $actual_css;
69+
$new_global_styles[] = $preset_style;
70+
}
71+
}
72+
73+
if ( WP_Theme_JSON_Resolver::theme_has_support() ) {
74+
$block_classes = array(
75+
'css' => 'styles',
76+
'__unstableType' => 'theme',
77+
'isGlobalStyles' => true,
78+
);
79+
$actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
80+
if ( '' !== $actual_css ) {
81+
$block_classes['css'] = $actual_css;
82+
$new_global_styles[] = $block_classes;
83+
}
84+
}
85+
86+
$settings['styles'] = array_merge( $new_global_styles, $styles_without_existing_global_styles );
87+
}
88+
89+
// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
90+
$settings['__experimentalFeatures'] = gutenberg_get_global_settings();
91+
92+
if ( isset( $settings['__experimentalFeatures']['color']['palette'] ) ) {
93+
$colors_by_origin = $settings['__experimentalFeatures']['color']['palette'];
94+
$settings['colors'] = isset( $colors_by_origin['custom'] ) ?
95+
$colors_by_origin['custom'] : (
96+
isset( $colors_by_origin['theme'] ) ?
97+
$colors_by_origin['theme'] :
98+
$colors_by_origin['default']
99+
);
100+
}
101+
102+
if ( isset( $settings['__experimentalFeatures']['color']['gradients'] ) ) {
103+
$gradients_by_origin = $settings['__experimentalFeatures']['color']['gradients'];
104+
$settings['gradients'] = isset( $gradients_by_origin['custom'] ) ?
105+
$gradients_by_origin['custom'] : (
106+
isset( $gradients_by_origin['theme'] ) ?
107+
$gradients_by_origin['theme'] :
108+
$gradients_by_origin['default']
109+
);
110+
}
111+
112+
if ( isset( $settings['__experimentalFeatures']['typography']['fontSizes'] ) ) {
113+
$font_sizes_by_origin = $settings['__experimentalFeatures']['typography']['fontSizes'];
114+
$settings['fontSizes'] = isset( $font_sizes_by_origin['custom'] ) ?
115+
$font_sizes_by_origin['custom'] : (
116+
isset( $font_sizes_by_origin['theme'] ) ?
117+
$font_sizes_by_origin['theme'] :
118+
$font_sizes_by_origin['default']
119+
);
120+
}
121+
122+
if ( isset( $settings['__experimentalFeatures']['color']['custom'] ) ) {
123+
$settings['disableCustomColors'] = ! $settings['__experimentalFeatures']['color']['custom'];
124+
unset( $settings['__experimentalFeatures']['color']['custom'] );
125+
}
126+
if ( isset( $settings['__experimentalFeatures']['color']['customGradient'] ) ) {
127+
$settings['disableCustomGradients'] = ! $settings['__experimentalFeatures']['color']['customGradient'];
128+
unset( $settings['__experimentalFeatures']['color']['customGradient'] );
129+
}
130+
if ( isset( $settings['__experimentalFeatures']['typography']['customFontSize'] ) ) {
131+
$settings['disableCustomFontSizes'] = ! $settings['__experimentalFeatures']['typography']['customFontSize'];
132+
unset( $settings['__experimentalFeatures']['typography']['customFontSize'] );
133+
}
134+
if ( isset( $settings['__experimentalFeatures']['typography']['lineHeight'] ) ) {
135+
$settings['enableCustomLineHeight'] = $settings['__experimentalFeatures']['typography']['lineHeight'];
136+
unset( $settings['__experimentalFeatures']['typography']['lineHeight'] );
137+
}
138+
if ( isset( $settings['__experimentalFeatures']['spacing']['units'] ) ) {
139+
$settings['enableCustomUnits'] = $settings['__experimentalFeatures']['spacing']['units'];
140+
unset( $settings['__experimentalFeatures']['spacing']['units'] );
141+
}
142+
if ( isset( $settings['__experimentalFeatures']['spacing']['padding'] ) ) {
143+
$settings['enableCustomSpacing'] = $settings['__experimentalFeatures']['spacing']['padding'];
144+
unset( $settings['__experimentalFeatures']['spacing']['padding'] );
145+
}
146+
if ( isset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] ) ) {
147+
$settings['disableCustomSpacingSize'] = ! $settings['__experimentalFeatures']['spacing']['customSpacingSize'];
148+
unset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] );
149+
}
150+
151+
if ( isset( $settings['__experimentalFeatures']['spacing']['spacingSizes'] ) ) {
152+
$spacing_sizes_by_origin = $settings['__experimentalFeatures']['spacing']['spacingSizes'];
153+
$settings['spacingSizes'] = isset( $spacing_sizes_by_origin['custom'] ) ?
154+
$spacing_sizes_by_origin['custom'] : (
155+
isset( $spacing_sizes_by_origin['theme'] ) ?
156+
$spacing_sizes_by_origin['theme'] :
157+
$spacing_sizes_by_origin['default']
158+
);
159+
}
160+
161+
$settings['localAutosaveInterval'] = 15;
162+
163+
return $settings;
164+
}
165+
166+
add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings', PHP_INT_MAX );

0 commit comments

Comments
 (0)