gutenberg / lib / global-styles.php

global-styles.php in Gutenberg 9.5.0, at lib/global-styles.php

241 lines 8.9 KB

Raw Download Zip

1	<?php
2	/**
3	* Bootstraps Global Styles.
4	*
5	* @package gutenberg
6	*/
7
8	/**
9	* Whether the current theme has a theme.json file.
10	*
11	* @return boolean
12	*/
13	function gutenberg_experimental_global_styles_has_theme_json_support() {
14	return is_readable( locate_template( 'experimental-theme.json' ) );
15	}
16
17	/**
18	* Returns the theme presets registered via add_theme_support, if any.
19	*
20	* @param array $settings Existing editor settings.
21	*
22	* @return array Config that adheres to the theme.json schema.
23	*/
24	function gutenberg_experimental_global_styles_get_theme_support_settings( $settings ) {
25	$theme_settings = array();
26	$theme_settings['global'] = array();
27	$theme_settings['global']['settings'] = array();
28
29	// Deprecated theme supports.
30	if ( isset( $settings['disableCustomColors'] ) ) {
31	if ( ! isset( $theme_settings['global']['settings']['color'] ) ) {
32	$theme_settings['global']['settings']['color'] = array();
33	}
34	$theme_settings['global']['settings']['color']['custom'] = ! $settings['disableCustomColors'];
35	}
36
37	if ( isset( $settings['disableCustomGradients'] ) ) {
38	if ( ! isset( $theme_settings['global']['settings']['color'] ) ) {
39	$theme_settings['global']['settings']['color'] = array();
40	}
41	$theme_settings['global']['settings']['color']['customGradient'] = ! $settings['disableCustomGradients'];
42	}
43
44	if ( isset( $settings['disableCustomFontSizes'] ) ) {
45	if ( ! isset( $theme_settings['global']['settings']['typography'] ) ) {
46	$theme_settings['global']['settings']['typography'] = array();
47	}
48	$theme_settings['global']['settings']['typography']['customFontSize'] = ! $settings['disableCustomFontSizes'];
49	}
50
51	if ( isset( $settings['enableCustomLineHeight'] ) ) {
52	if ( ! isset( $theme_settings['global']['settings']['typography'] ) ) {
53	$theme_settings['global']['settings']['typography'] = array();
54	}
55	$theme_settings['global']['settings']['typography']['customLineHeight'] = $settings['enableCustomLineHeight'];
56	}
57
58	if ( isset( $settings['enableCustomUnits'] ) ) {
59	if ( ! isset( $theme_settings['global']['settings']['spacing'] ) ) {
60	$theme_settings['global']['settings']['spacing'] = array();
61	}
62	$theme_settings['global']['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ?
63	array( 'px', 'em', 'rem', 'vh', 'vw' ) :
64	$settings['enableCustomUnits'];
65	}
66
67	if ( isset( $settings['colors'] ) ) {
68	if ( ! isset( $theme_settings['global']['settings']['color'] ) ) {
69	$theme_settings['global']['settings']['color'] = array();
70	}
71	$theme_settings['global']['settings']['color']['palette'] = $settings['colors'];
72	}
73
74	if ( isset( $settings['gradients'] ) ) {
75	if ( ! isset( $theme_settings['global']['settings']['color'] ) ) {
76	$theme_settings['global']['settings']['color'] = array();
77	}
78	$theme_settings['global']['settings']['color']['gradients'] = $settings['gradients'];
79	}
80
81	if ( isset( $settings['fontSizes'] ) ) {
82	$font_sizes = $settings['fontSizes'];
83	// Back-compatibility for presets without units.
84	foreach ( $font_sizes as &$font_size ) {
85	if ( is_numeric( $font_size['size'] ) ) {
86	$font_size['size'] = $font_size['size'] . 'px';
87	}
88	}
89	if ( ! isset( $theme_settings['global']['settings']['typography'] ) ) {
90	$theme_settings['global']['settings']['typography'] = array();
91	}
92	$theme_settings['global']['settings']['typography']['fontSizes'] = $font_sizes;
93	}
94
95	// Things that didn't land in core yet, so didn't have a setting assigned.
96	if ( current( (array) get_theme_support( 'custom-spacing' ) ) ) {
97	if ( ! isset( $theme_settings['global']['settings']['spacing'] ) ) {
98	$theme_settings['global']['settings']['spacing'] = array();
99	}
100	$theme_settings['global']['settings']['spacing']['customPadding'] = true;
101	}
102
103	if ( current( (array) get_theme_support( 'experimental-link-color' ) ) ) {
104	if ( ! isset( $theme_settings['global']['settings']['color'] ) ) {
105	$theme_settings['global']['settings']['color'] = array();
106	}
107	$theme_settings['global']['settings']['color']['link'] = true;
108	}
109
110	return $theme_settings;
111	}
112
113	/**
114	* Takes a tree adhering to the theme.json schema and generates
115	* the corresponding stylesheet.
116	*
117	* @param WP_Theme_JSON $tree Input tree.
118	* @param string $type Type of stylesheet we want accepts 'all', 'block_styles', and 'css_variables'.
119	*
120	* @return string Stylesheet.
121	*/
122	function gutenberg_experimental_global_styles_get_stylesheet( $tree, $type = 'all' ) {
123	// Check if we can use cached.
124	$can_use_cached = (
125	( 'all' === $type ) &&
126	( ! defined( 'WP_DEBUG' ) \|\| ! WP_DEBUG ) &&
127	( ! defined( 'SCRIPT_DEBUG' ) \|\| ! SCRIPT_DEBUG ) &&
128	( ! defined( 'REST_REQUEST' ) \|\| ! REST_REQUEST ) &&
129	! is_admin()
130	);
131
132	if ( $can_use_cached ) {
133	// Check if we have the styles already cached.
134	$cached = get_transient( 'global_styles' );
135	if ( $cached ) {
136	return $cached;
137	}
138	}
139
140	$stylesheet = $tree->get_stylesheet( $type );
141
142	if ( ( 'all' === $type \|\| 'block_styles' === $type ) && gutenberg_experimental_global_styles_has_theme_json_support() ) {
143	// To support all themes, we added in the block-library stylesheet
144	// a style rule such as .has-link-color a { color: var(--wp--style--color--link, #00e); }
145	// so that existing link colors themes used didn't break.
146	// We add this here to make it work for themes that opt-in to theme.json
147	// In the future, we may do this differently.
148	$stylesheet .= 'a{color:var(--wp--style--color--link, #00e);}';
149	}
150
151	if ( $can_use_cached ) {
152	// Cache for a minute.
153	// This cache doesn't need to be any longer, we only want to avoid spikes on high-traffic sites.
154	set_transient( 'global_styles', $stylesheet, MINUTE_IN_SECONDS );
155	}
156
157	return $stylesheet;
158	}
159
160	/**
161	* Fetches the preferences for each origin (core, theme, user)
162	* and enqueues the resulting stylesheet.
163	*/
164	function gutenberg_experimental_global_styles_enqueue_assets() {
165	$settings = gutenberg_get_common_block_editor_settings();
166	$theme_support_data = gutenberg_experimental_global_styles_get_theme_support_settings( $settings );
167
168	$resolver = new WP_Theme_JSON_Resolver();
169	$all = $resolver->get_origin( $theme_support_data );
170
171	$stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $all );
172	if ( empty( $stylesheet ) ) {
173	return;
174	}
175
176	wp_register_style( 'global-styles', false, array(), true, true );
177	wp_add_inline_style( 'global-styles', $stylesheet );
178	wp_enqueue_style( 'global-styles' );
179	}
180
181	/**
182	* Adds the necessary data for the Global Styles client UI to the block settings.
183	*
184	* @param array $settings Existing block editor settings.
185	* @return array New block editor settings
186	*/
187	function gutenberg_experimental_global_styles_settings( $settings ) {
188	$theme_support_data = gutenberg_experimental_global_styles_get_theme_support_settings( $settings );
189	unset( $settings['colors'] );
190	unset( $settings['disableCustomColors'] );
191	unset( $settings['disableCustomFontSizes'] );
192	unset( $settings['disableCustomGradients'] );
193	unset( $settings['enableCustomLineHeight'] );
194	unset( $settings['enableCustomUnits'] );
195	unset( $settings['fontSizes'] );
196	unset( $settings['gradients'] );
197
198	$resolver = new WP_Theme_JSON_Resolver();
199	$all = $resolver->get_origin( $theme_support_data );
200	$base = $resolver->get_origin( $theme_support_data, 'theme' );
201
202	// STEP 1: ADD FEATURES
203	// These need to be added to settings always.
204	$settings['__experimentalFeatures'] = $all->get_settings();
205
206	// STEP 2 - IF EDIT-SITE, ADD DATA REQUIRED FOR GLOBAL STYLES SIDEBAR
207	// The client needs some information to be able to access/update the user styles.
208	// We only do this if the theme has support for theme.json, though,
209	// as an indicator that the theme will know how to combine this with its stylesheet.
210	$screen = get_current_screen();
211	if (
212	! empty( $screen ) &&
213	function_exists( 'gutenberg_is_edit_site_page' ) &&
214	gutenberg_is_edit_site_page( $screen->id ) &&
215	gutenberg_experimental_global_styles_has_theme_json_support()
216	) {
217	$settings['__experimentalGlobalStylesUserEntityId'] = WP_Theme_JSON_Resolver::get_user_custom_post_type_id();
218	$settings['__experimentalGlobalStylesBaseStyles'] = $base->get_raw_data();
219	} else {
220	// STEP 3 - OTHERWISE, ADD STYLES
221	//
222	// If we are in a block editor context, but not in edit-site,
223	// we need to add the styles via the settings. This is because
224	// we want them processed as if they were added via add_editor_styles,
225	// which adds the editor wrapper class.
226	$settings['styles'][] = array(
227	'css' => gutenberg_experimental_global_styles_get_stylesheet( $all, 'css_variables' ),
228	'__experimentalNoWrapper' => true,
229	);
230	$settings['styles'][] = array(
231	'css' => gutenberg_experimental_global_styles_get_stylesheet( $all, 'block_styles' ),
232	);
233	}
234
235	return $settings;
236	}
237
238	add_action( 'init', array( 'WP_Theme_JSON_Resolver', 'register_user_custom_post_type' ) );
239	add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX );
240	add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' );
241