/
global-styles.php
317 lines (286 loc) · 10.9 KB
/
global-styles.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<?php
/**
* Bootstraps Global Styles.
*
* @package gutenberg
*/
/**
* Fetches the preferences for each origin (core, theme, user)
* and enqueues the resulting stylesheet.
*/
function gutenberg_experimental_global_styles_enqueue_assets() {
$stylesheet = gutenberg_get_global_stylesheet();
if ( empty( $stylesheet ) ) {
return;
}
if ( isset( wp_styles()->registered['global-styles'] ) ) {
wp_styles()->registered['global-styles']->extra['after'][0] = $stylesheet;
} else {
wp_register_style( 'global-styles', false, array(), true, true );
wp_add_inline_style( 'global-styles', $stylesheet );
wp_enqueue_style( 'global-styles' );
}
}
/**
* Adds the necessary settings for the Global Styles client UI.
*
* @param array $settings Existing block editor settings.
*
* @return array New block editor settings.
*/
function gutenberg_experimental_global_styles_settings( $settings ) {
// Set what is the context for this data request.
$context = 'other';
if (
is_callable( 'get_current_screen' ) &&
function_exists( 'gutenberg_is_edit_site_page' ) &&
gutenberg_is_edit_site_page( get_current_screen()->id )
) {
$context = 'site-editor';
}
if (
defined( 'REST_REQUEST' ) &&
REST_REQUEST &&
isset( $_GET['context'] ) &&
'mobile' === $_GET['context']
) {
$context = 'mobile';
}
if ( 'mobile' === $context && WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
$settings['__experimentalStyles'] = gutenberg_get_global_styles();
}
if ( 'other' === $context ) {
// Make sure the styles array exists.
// In some contexts, like the navigation editor, it doesn't.
if ( ! isset( $settings['styles'] ) ) {
$settings['styles'] = array();
}
// Reset existing global styles.
$styles_without_existing_global_styles = array();
foreach ( $settings['styles'] as $style ) {
if ( ! isset( $style['__unstableType'] ) || 'globalStyles' !== $style['__unstableType'] ) {
$styles_without_existing_global_styles[] = $style;
}
}
$new_global_styles = array();
$new_presets = array(
array(
'css' => 'variables',
'__unstableType' => 'presets',
'__experimentalNoWrapper' => true,
),
array(
'css' => 'presets',
'__unstableType' => 'presets',
),
);
foreach ( $new_presets as $new_style ) {
$style_css = gutenberg_get_global_stylesheet( array( $new_style['css'] ) );
if ( '' !== $style_css ) {
$new_style['css'] = $style_css;
$new_global_styles[] = $new_style;
}
}
$new_block_classes = array(
'css' => 'styles',
'__unstableType' => 'theme',
);
if ( WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
$style_css = gutenberg_get_global_stylesheet( array( $new_block_classes['css'] ) );
if ( '' !== $style_css ) {
$new_block_classes['css'] = $style_css;
$new_global_styles[] = $new_block_classes;
}
}
$settings['styles'] = array_merge( $styles_without_existing_global_styles, $new_global_styles );
}
// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
$settings['__experimentalFeatures'] = gutenberg_get_global_settings();
if ( isset( $settings['__experimentalFeatures']['color']['palette'] ) ) {
$colors_by_origin = $settings['__experimentalFeatures']['color']['palette'];
$settings['colors'] = isset( $colors_by_origin['user'] ) ?
$colors_by_origin['user'] : (
isset( $colors_by_origin['theme'] ) ?
$colors_by_origin['theme'] :
$colors_by_origin['default']
);
}
if ( isset( $settings['__experimentalFeatures']['color']['gradients'] ) ) {
$gradients_by_origin = $settings['__experimentalFeatures']['color']['gradients'];
$settings['gradients'] = isset( $gradients_by_origin['user'] ) ?
$gradients_by_origin['user'] : (
isset( $gradients_by_origin['theme'] ) ?
$gradients_by_origin['theme'] :
$gradients_by_origin['default']
);
}
if ( isset( $settings['__experimentalFeatures']['typography']['fontSizes'] ) ) {
$font_sizes_by_origin = $settings['__experimentalFeatures']['typography']['fontSizes'];
$settings['fontSizes'] = isset( $font_sizes_by_origin['user'] ) ?
$font_sizes_by_origin['user'] : (
isset( $font_sizes_by_origin['theme'] ) ?
$font_sizes_by_origin['theme'] :
$font_sizes_by_origin['default']
);
}
if ( isset( $settings['__experimentalFeatures']['color']['custom'] ) ) {
$settings['disableCustomColors'] = ! $settings['__experimentalFeatures']['color']['custom'];
unset( $settings['__experimentalFeatures']['color']['custom'] );
}
if ( isset( $settings['__experimentalFeatures']['color']['customGradient'] ) ) {
$settings['disableCustomGradients'] = ! $settings['__experimentalFeatures']['color']['customGradient'];
unset( $settings['__experimentalFeatures']['color']['customGradient'] );
}
if ( isset( $settings['__experimentalFeatures']['typography']['customFontSize'] ) ) {
$settings['disableCustomFontSizes'] = ! $settings['__experimentalFeatures']['typography']['customFontSize'];
unset( $settings['__experimentalFeatures']['typography']['customFontSize'] );
}
if ( isset( $settings['__experimentalFeatures']['typography']['lineHeight'] ) ) {
$settings['enableCustomLineHeight'] = $settings['__experimentalFeatures']['typography']['lineHeight'];
unset( $settings['__experimentalFeatures']['typography']['lineHeight'] );
}
if ( isset( $settings['__experimentalFeatures']['spacing']['units'] ) ) {
$settings['enableCustomUnits'] = $settings['__experimentalFeatures']['spacing']['units'];
}
if ( isset( $settings['__experimentalFeatures']['spacing']['padding'] ) ) {
$settings['enableCustomSpacing'] = $settings['__experimentalFeatures']['spacing']['padding'];
unset( $settings['__experimentalFeatures']['spacing']['padding'] );
}
return $settings;
}
/**
* Whether or not the Site Editor is available.
*
* @return boolean
*/
function gutenberg_experimental_is_site_editor_available() {
return gutenberg_is_fse_theme();
}
/**
* Register CPT to store/access user data.
*
* @return void
*/
function gutenberg_experimental_global_styles_register_user_cpt() {
if ( gutenberg_experimental_is_site_editor_available() ) {
WP_Theme_JSON_Resolver_Gutenberg::register_user_custom_post_type();
}
}
/**
* Sanitizes global styles user content removing unsafe rules.
*
* @param string $content Post content to filter.
* @return string Filtered post content with unsafe rules removed.
*/
function gutenberg_global_styles_filter_post( $content ) {
$decoded_data = json_decode( wp_unslash( $content ), true );
$json_decoding_error = json_last_error();
if (
JSON_ERROR_NONE === $json_decoding_error &&
is_array( $decoded_data ) &&
isset( $decoded_data['isGlobalStylesUserThemeJSON'] ) &&
$decoded_data['isGlobalStylesUserThemeJSON']
) {
unset( $decoded_data['isGlobalStylesUserThemeJSON'] );
$data_to_encode = WP_Theme_JSON_Gutenberg::remove_insecure_properties( $decoded_data );
$data_to_encode['isGlobalStylesUserThemeJSON'] = true;
return wp_slash( wp_json_encode( $data_to_encode ) );
}
return $content;
}
/**
* Adds the filters to filter global styles user theme.json.
*/
function gutenberg_global_styles_kses_init_filters() {
add_filter( 'content_save_pre', 'gutenberg_global_styles_filter_post' );
add_filter( 'safe_style_css', 'gutenberg_global_styles_include_support_for_duotone', 10, 2 );
}
/**
* Removes the filters to filter global styles user theme.json.
*/
function gutenberg_global_styles_kses_remove_filters() {
remove_filter( 'content_save_pre', 'gutenberg_global_styles_filter_post' );
}
/**
* Register global styles kses filters if the user does not have unfiltered_html capability.
*
* @uses render_block_core_navigation()
* @throws WP_Error An WP_Error exception parsing the block definition.
*/
function gutenberg_global_styles_kses_init() {
gutenberg_global_styles_kses_remove_filters();
if ( ! current_user_can( 'unfiltered_html' ) ) {
gutenberg_global_styles_kses_init_filters();
}
}
/**
* This filter is the last being executed on force_filtered_html_on_import.
* If the input of the filter is true it means we are in an import situation and should
* enable kses, independently of the user capabilities.
* So in that case we call gutenberg_global_styles_kses_init_filters;
*
* @param string $arg Input argument of the filter.
* @return string Exactly what was passed as argument.
*/
function gutenberg_global_styles_force_filtered_html_on_import_filter( $arg ) {
// force_filtered_html_on_import is true we need to init the global styles kses filters.
if ( $arg ) {
gutenberg_global_styles_kses_init_filters();
}
return $arg;
}
/**
* This filter is the last being executed on force_filtered_html_on_import.
* If the input of the filter is true it means we are in an import situation and should
* enable kses, independently of the user capabilities.
* So in that case we call gutenberg_global_styles_kses_init_filters;
*
* @param bool $allow_css Whether the CSS in the test string is considered safe.
* @param bool $css_test_string The CSS string to test..
* @return bool If $allow_css is true it returns true.
* If $allow_css is false and the CSS rule is referencing a WordPress css variable it returns true.
* Otherwise the function return false.
*/
function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $css_test_string ) {
if ( $allow_css ) {
return $allow_css;
}
$allowed_preset_attributes = array(
'background',
'background-color',
'border-color',
'color',
'font-family',
'font-size',
);
$parts = explode( ':', $css_test_string, 2 );
if ( ! in_array( trim( $parts[0] ), $allowed_preset_attributes, true ) ) {
return $allow_css;
}
return ! ! preg_match( '/^var\(--wp-[a-zA-Z0-9\-]+\)$/', trim( $parts[1] ) );
}
/**
* This is for using kses to test user data.
*
* @param array $atts Allowed CSS property names, according to kses.
*
* @return array The new allowed CSS property names.
*/
function gutenberg_global_styles_include_support_for_duotone( $atts ) {
$atts[] = 'filter';
return $atts;
}
// The else clause can be removed when plugin support requires WordPress 5.8.0+.
if ( function_exists( 'get_block_editor_settings' ) ) {
add_filter( 'block_editor_settings_all', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX );
} else {
add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX );
}
add_action( 'init', 'gutenberg_experimental_global_styles_register_user_cpt' );
add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' );
// kses actions&filters.
add_action( 'init', 'gutenberg_global_styles_kses_init' );
add_action( 'set_current_user', 'gutenberg_global_styles_kses_init' );
add_filter( 'force_filtered_html_on_import', 'gutenberg_global_styles_force_filtered_html_on_import_filter', 999 );
add_filter( 'safecss_filter_attr_allow_css', 'gutenberg_global_styles_include_support_for_wp_variables', 10, 2 );
// This filter needs to be executed last.