From f52ca325b8f956ce9b25732e700de6cd78f3ec58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 10:49:19 +0100 Subject: [PATCH 01/40] Warm up changes --- lib/global-styles.php | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 8074e454aeb8d0..ef6dc045997dad 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -40,9 +40,9 @@ function gutenberg_enqueue_global_styles_assets() { if ( ! locate_template( 'experimental-theme.json' ) ) { return; } - $default_global_styles_path = dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json'; - $default_global_styles = null; + $default_global_styles = null; + $default_global_styles_path = dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json'; if ( file_exists( $default_global_styles_path ) ) { $default_global_styles = json_decode( file_get_contents( $default_global_styles_path ), @@ -50,11 +50,11 @@ function gutenberg_enqueue_global_styles_assets() { ); } - $theme_json_path = locate_template( 'experimental-theme.json' ); - $theme_json_global_styles = null; - if ( $theme_json_path ) { - $theme_json_global_styles = json_decode( - file_get_contents( $theme_json_path ), + $theme_global_styles = null; + $theme_global_styles_path = locate_template( 'experimental-theme.json' ); + if ( file_exists( $theme_global_styles_path ) ) { + $theme_global_styles = json_decode( + file_get_contents( $theme_global_styles_path ), true ); } @@ -64,7 +64,7 @@ function gutenberg_enqueue_global_styles_assets() { foreach ( array( $default_global_styles, - $theme_json_global_styles, + $theme_global_styles, ) as $global_styles_definition ) { if ( ! $global_styles_definition ) { @@ -90,9 +90,9 @@ function gutenberg_enqueue_global_styles_assets() { $inline_style = ":root {\n"; foreach ( $css_vars as $var => $value ) { - $inline_style .= "\t" . $var . ': ' . $value . ";\n"; + $inline_style = "\t" . $var . ': ' . $value . ";\n"; } - $inline_style .= '}'; + $inline_style = '}'; wp_register_style( 'global-styles', false, array(), true, true ); wp_add_inline_style( 'global-styles', $inline_style ); From 846e8e6ea9902cf94ce678b67822b68ecae2cad7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 11:13:55 +0100 Subject: [PATCH 02/40] Use same pattern name --- lib/global-styles.php | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index ef6dc045997dad..ab6fe2fcde7fea 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -14,7 +14,7 @@ * @param bool $is_start Indicates if we are on the first call to gutenberg_get_css_vars (outside the recursion). * @return array An array whose keys are css variable names and whose values are the css variables value. */ -function gutenberg_get_css_vars( $global_styles_branch, $prefix = '', $is_start = true ) { +function gutenberg_global_styles_get_css_vars( $global_styles_branch, $prefix = '', $is_start = true ) { $result = array(); foreach ( $global_styles_branch as $key => $value ) { $processed_key = str_replace( '/', '-', $key ); @@ -24,7 +24,7 @@ function gutenberg_get_css_vars( $global_styles_branch, $prefix = '', $is_start if ( is_array( $value ) ) { $result = array_merge( $result, - gutenberg_get_css_vars( $value, $new_key, false ) + gutenberg_global_styles_get_css_vars( $value, $new_key, false ) ); } else { $result[ $new_key ] = $value; @@ -36,7 +36,7 @@ function gutenberg_get_css_vars( $global_styles_branch, $prefix = '', $is_start /** * Function responsible for enqueuing the style that define the global styles css variables. */ -function gutenberg_enqueue_global_styles_assets() { +function gutenberg_global_styles_enqueue_assets() { if ( ! locate_template( 'experimental-theme.json' ) ) { return; } @@ -73,13 +73,13 @@ function gutenberg_enqueue_global_styles_assets() { if ( isset( $global_styles_definition['global'] ) ) { $css_vars = array_merge( $css_vars, - gutenberg_get_css_vars( $global_styles_definition['global'], '--wp-' ) + gutenberg_global_styles_get_css_vars( $global_styles_definition['global'], '--wp-' ) ); } if ( isset( $global_styles_definition['blocks'] ) ) { $css_vars = array_merge( $css_vars, - gutenberg_get_css_vars( $global_styles_definition['blocks'], '--wp-block-' ) + gutenberg_global_styles_get_css_vars( $global_styles_definition['blocks'], '--wp-block-' ) ); } } @@ -98,7 +98,7 @@ function gutenberg_enqueue_global_styles_assets() { wp_add_inline_style( 'global-styles', $inline_style ); wp_enqueue_style( 'global-styles' ); } -add_action( 'enqueue_block_assets', 'gutenberg_enqueue_global_styles_assets' ); +add_action( 'enqueue_block_assets', 'gutenberg_global_styles_enqueue_assets' ); /** * Adds class wp-gs to the frontend body class if the theme defines a experimental-theme.json. @@ -106,13 +106,13 @@ function gutenberg_enqueue_global_styles_assets() { * @param array $classes Existing body classes. * @return array The filtered array of body classes. */ -function gutenberg_add_wp_gs_class_front_end( $classes ) { +function gutenberg_global_styles_add_wp_gs_class_front_end( $classes ) { if ( locate_template( 'experimental-theme.json' ) ) { return array_merge( $classes, array( 'wp-gs' ) ); } return $classes; } -add_filter( 'body_class', 'gutenberg_add_wp_gs_class_front_end' ); +add_filter( 'body_class', 'gutenberg_global_styles_add_wp_gs_class_front_end' ); /** @@ -121,11 +121,11 @@ function gutenberg_add_wp_gs_class_front_end( $classes ) { * @param string $classes Existing body classes separated by space. * @return string The filtered string of body classes. */ -function gutenberg_add_wp_gs_class_editor( $classes ) { +function gutenberg_global_styles_add_wp_gs_class_editor( $classes ) { global $current_screen; if ( $current_screen->is_block_editor() && locate_template( 'experimental-theme.json' ) ) { return $classes . ' wp-gs'; } return $classes; } -add_filter( 'admin_body_class', 'gutenberg_add_wp_gs_class_editor' ); +add_filter( 'admin_body_class', 'gutenberg_global_styles_add_wp_gs_class_editor' ); From c41405bd24a547ae2ac761ac1aea0f60cc54c371 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 11:18:10 +0100 Subject: [PATCH 03/40] Extract get_from_file function --- lib/global-styles.php | 40 +++++++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index ab6fe2fcde7fea..a190ab6e6357e7 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -33,6 +33,27 @@ function gutenberg_global_styles_get_css_vars( $global_styles_branch, $prefix = return $result; } +/** + * Returns an array containing the Global Styles + * design tokens found in a file. A void array if none. + * + * @param string $global_styles_path Path to file. + * @return array Global Styles design tokens. + */ +function gutenberg_global_styles_get_from_file( $global_styles_path ) { + $global_styles = []; + if ( file_exists( $global_styles_path ) ) { + $decoded_file = json_decode( + file_get_contents( $global_styles_path ), + true + ); + if ( is_array( $decoded_file ) ) { + $global_styles = $decoded_file; + } + } + return $global_styles; +} + /** * Function responsible for enqueuing the style that define the global styles css variables. */ @@ -41,23 +62,8 @@ function gutenberg_global_styles_enqueue_assets() { return; } - $default_global_styles = null; - $default_global_styles_path = dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json'; - if ( file_exists( $default_global_styles_path ) ) { - $default_global_styles = json_decode( - file_get_contents( $default_global_styles_path ), - true - ); - } - - $theme_global_styles = null; - $theme_global_styles_path = locate_template( 'experimental-theme.json' ); - if ( file_exists( $theme_global_styles_path ) ) { - $theme_global_styles = json_decode( - file_get_contents( $theme_global_styles_path ), - true - ); - } + $default_global_styles = gutenberg_global_styles_get_from_file( dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' ); + $theme_global_styles = gutenberg_global_styles_get_from_file( locate_template( 'experimental-theme.json' ) ); // To-do: Load user customizations from a CPT. $css_vars = array(); From f49f113fd381712725b51f0558acba5a7bf6c885 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 11:19:38 +0100 Subject: [PATCH 04/40] Add placeholder to retrieve user global styles --- lib/global-styles.php | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index a190ab6e6357e7..af1556935fa035 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -54,6 +54,17 @@ function gutenberg_global_styles_get_from_file( $global_styles_path ) { return $global_styles; } +/** + * Returns an array containing the Global Styles + * design tokens found in a file. A void array if none. + * + * @return array Global Styles design tokens. + */ +function gutenberg_global_styles_get_from_cpt() { + // TODO: fetch from CPT. + return []; +} + /** * Function responsible for enqueuing the style that define the global styles css variables. */ @@ -64,13 +75,14 @@ function gutenberg_global_styles_enqueue_assets() { $default_global_styles = gutenberg_global_styles_get_from_file( dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' ); $theme_global_styles = gutenberg_global_styles_get_from_file( locate_template( 'experimental-theme.json' ) ); + $user_global_styles = gutenberg_global_styles_get_from_cpt(); - // To-do: Load user customizations from a CPT. $css_vars = array(); foreach ( array( $default_global_styles, $theme_global_styles, + $user_global_styles, ) as $global_styles_definition ) { if ( ! $global_styles_definition ) { From f598d4acd63b3ab9f1a22f24b4fb11f6ac18c7b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 11:23:45 +0100 Subject: [PATCH 05/40] Simplify css vars retrieval --- experimental-default-global-styles.json | 10 ++++---- lib/global-styles.php | 31 +++++-------------------- 2 files changed, 10 insertions(+), 31 deletions(-) diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json index 9a9259b9f60979..da4314beaaf322 100644 --- a/experimental-default-global-styles.json +++ b/experimental-default-global-styles.json @@ -1,9 +1,7 @@ { - "global": { - "color": { - "primary": "#52accc", - "background": "white", - "text": "black" - } + "color": { + "primary": "#52accc", + "background": "white", + "text": "black" } } diff --git a/lib/global-styles.php b/lib/global-styles.php index af1556935fa035..4343e79c418039 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -76,32 +76,13 @@ function gutenberg_global_styles_enqueue_assets() { $default_global_styles = gutenberg_global_styles_get_from_file( dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' ); $theme_global_styles = gutenberg_global_styles_get_from_file( locate_template( 'experimental-theme.json' ) ); $user_global_styles = gutenberg_global_styles_get_from_cpt(); + $global_styles = array_merge( + $default_global_styles, + $theme_global_styles, + $user_global_styles, + ); - $css_vars = array(); - foreach ( - array( - $default_global_styles, - $theme_global_styles, - $user_global_styles, - ) as $global_styles_definition - ) { - if ( ! $global_styles_definition ) { - continue; - } - if ( isset( $global_styles_definition['global'] ) ) { - $css_vars = array_merge( - $css_vars, - gutenberg_global_styles_get_css_vars( $global_styles_definition['global'], '--wp-' ) - ); - } - if ( isset( $global_styles_definition['blocks'] ) ) { - $css_vars = array_merge( - $css_vars, - gutenberg_global_styles_get_css_vars( $global_styles_definition['blocks'], '--wp-block-' ) - ); - } - } - + $css_vars = gutenberg_global_styles_get_css_vars( $global_styles, '--wp-' ); if ( empty( $css_vars ) ) { return; } From ce83c98ed8178dc7d62eddf4088b44314f069c3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 11:28:37 +0100 Subject: [PATCH 06/40] Better docs --- lib/global-styles.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 4343e79c418039..e4c5b8ce1fb030 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -66,7 +66,9 @@ function gutenberg_global_styles_get_from_cpt() { } /** - * Function responsible for enqueuing the style that define the global styles css variables. + * Fetches the Global Styles design tokens (defaults, theme, user), + * transforms them into a single tree, + * and enqueues the CSS custom properties. */ function gutenberg_global_styles_enqueue_assets() { if ( ! locate_template( 'experimental-theme.json' ) ) { From f54be58b9989f8c1fe8fde4dc3bd628cf3333cca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 11:34:12 +0100 Subject: [PATCH 07/40] Better docs --- lib/global-styles.php | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index e4c5b8ce1fb030..333319f6236a36 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -5,6 +5,15 @@ * @package gutenberg */ +/** + * Whether theme has support for Global Styles + * + * @return boolean + */ +function gutenberg_global_styles_has_theme_support() { + return is_readable( locate_template( 'experimental-theme.json' ) ); +} + /** * Function that given a branch of the global styles object recursively generates * an array defining all the css vars that the global styles object represents. @@ -56,7 +65,7 @@ function gutenberg_global_styles_get_from_file( $global_styles_path ) { /** * Returns an array containing the Global Styles - * design tokens found in a file. A void array if none. + * design tokens found in a given CPT. A void array if none. * * @return array Global Styles design tokens. */ @@ -67,11 +76,10 @@ function gutenberg_global_styles_get_from_cpt() { /** * Fetches the Global Styles design tokens (defaults, theme, user), - * transforms them into a single tree, - * and enqueues the CSS custom properties. + * and enqueues the resulting CSS custom properties if any. */ function gutenberg_global_styles_enqueue_assets() { - if ( ! locate_template( 'experimental-theme.json' ) ) { + if ( ! gutenberg_global_styles_has_theme_support() ) { return; } @@ -102,13 +110,14 @@ function gutenberg_global_styles_enqueue_assets() { add_action( 'enqueue_block_assets', 'gutenberg_global_styles_enqueue_assets' ); /** - * Adds class wp-gs to the frontend body class if the theme defines a experimental-theme.json. + * Adds class wp-gs to the frontend body class + * if the theme has support for Global Styles. * * @param array $classes Existing body classes. * @return array The filtered array of body classes. */ function gutenberg_global_styles_add_wp_gs_class_front_end( $classes ) { - if ( locate_template( 'experimental-theme.json' ) ) { + if ( gutenberg_global_styles_has_theme_support() ) { return array_merge( $classes, array( 'wp-gs' ) ); } return $classes; @@ -117,14 +126,15 @@ function gutenberg_global_styles_add_wp_gs_class_front_end( $classes ) { /** - * Adds class wp-gs to the block-editor body class if the theme defines a experimental-theme.json. + * Adds class wp-gs to the block-editor body class + * if the theme has support for Global Styles. * * @param string $classes Existing body classes separated by space. * @return string The filtered string of body classes. */ function gutenberg_global_styles_add_wp_gs_class_editor( $classes ) { global $current_screen; - if ( $current_screen->is_block_editor() && locate_template( 'experimental-theme.json' ) ) { + if ( $current_screen->is_block_editor() && gutenberg_global_styles_has_theme_support() ) { return $classes . ' wp-gs'; } return $classes; From 187dd64a20459f70fc5ce24960503866f5a28f61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 11:41:14 +0100 Subject: [PATCH 08/40] Extract resolver --- lib/global-styles.php | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 333319f6236a36..8af4e9f2523a45 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -74,6 +74,31 @@ function gutenberg_global_styles_get_from_cpt() { return []; } +/** + * Takes a Global Styles design tokens tree + * and returns the corresponding CSS rule + * that contains the CSS custom properties. + * + * @param array $global_styles Global Styles design tokens. + * @return string Resulting CSS rule. + */ +function gutenberg_global_styles_resolver( $global_styles ) { + $css_rule = ''; + + $css_vars = gutenberg_global_styles_get_css_vars( $global_styles, '--wp-' ); + if ( empty( $css_vars ) ) { + return $css_rule; + } + + $css_rule = ":root {\n"; + foreach ( $css_vars as $var => $value ) { + $css_rule = "\t" . $var . ': ' . $value . ";\n"; + } + $css_rule = '}'; + + return $css_rule; +} + /** * Fetches the Global Styles design tokens (defaults, theme, user), * and enqueues the resulting CSS custom properties if any. @@ -92,17 +117,11 @@ function gutenberg_global_styles_enqueue_assets() { $user_global_styles, ); - $css_vars = gutenberg_global_styles_get_css_vars( $global_styles, '--wp-' ); - if ( empty( $css_vars ) ) { + $inline_style = gutenberg_global_styles_resolver( $global_styles ); + if ( empty ( $inline_style ) ) { return; } - $inline_style = ":root {\n"; - foreach ( $css_vars as $var => $value ) { - $inline_style = "\t" . $var . ': ' . $value . ";\n"; - } - $inline_style = '}'; - wp_register_style( 'global-styles', false, array(), true, true ); wp_add_inline_style( 'global-styles', $inline_style ); wp_enqueue_style( 'global-styles' ); From 021f68bb9aec911f283afe55bd3fd7f028813521 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 11:48:36 +0100 Subject: [PATCH 09/40] Simplify global styles tree processing --- lib/global-styles.php | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 8af4e9f2523a45..066cc0c1c3577a 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -15,25 +15,23 @@ function gutenberg_global_styles_has_theme_support() { } /** - * Function that given a branch of the global styles object recursively generates - * an array defining all the css vars that the global styles object represents. + * Given Global Styles tree it creates a flattened tree + * whose keys are the CSS custom properties + * and its values the CSS custom properties' values. * - * @param array $global_styles_branch Array representing a brach of the global styles object. + * @param array $global_styles Global Styles object to process. * @param string $prefix Prefix to append to each variable. - * @param bool $is_start Indicates if we are on the first call to gutenberg_get_css_vars (outside the recursion). - * @return array An array whose keys are css variable names and whose values are the css variables value. + * @return array The flattened tree. */ -function gutenberg_global_styles_get_css_vars( $global_styles_branch, $prefix = '', $is_start = true ) { +function gutenberg_global_styles_get_css_vars( $global_styles, $prefix = '' ) { $result = array(); - foreach ( $global_styles_branch as $key => $value ) { - $processed_key = str_replace( '/', '-', $key ); - $separator = $is_start ? '' : '--'; - $new_key = ( $prefix ? $prefix . $separator : '' ) . $processed_key; + foreach ( $global_styles as $key => $value ) { + $new_key = $prefix . str_replace( '/', '-', $key ); if ( is_array( $value ) ) { $result = array_merge( $result, - gutenberg_global_styles_get_css_vars( $value, $new_key, false ) + gutenberg_global_styles_get_css_vars( $value, $new_key ) ); } else { $result[ $new_key ] = $value; From 9f43b0a6a134ae5d6d5f32aa088bea396b88038a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 13:00:55 +0100 Subject: [PATCH 10/40] Fix concatenation --- lib/global-styles.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 066cc0c1c3577a..7f88bcb45ebdaa 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -31,7 +31,7 @@ function gutenberg_global_styles_get_css_vars( $global_styles, $prefix = '' ) { if ( is_array( $value ) ) { $result = array_merge( $result, - gutenberg_global_styles_get_css_vars( $value, $new_key ) + gutenberg_global_styles_get_css_vars( $value, $new_key . '-' ) ); } else { $result[ $new_key ] = $value; @@ -90,9 +90,9 @@ function gutenberg_global_styles_resolver( $global_styles ) { $css_rule = ":root {\n"; foreach ( $css_vars as $var => $value ) { - $css_rule = "\t" . $var . ': ' . $value . ";\n"; + $css_rule .= "\t" . $var . ': ' . $value . ";\n"; } - $css_rule = '}'; + $css_rule .= '}'; return $css_rule; } From 70168618bbae74f806c34166a678879cb5f43054 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 13:15:09 +0100 Subject: [PATCH 11/40] Simplify to global css custom prop --- packages/block-library/src/button/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 64e5174f287a3e..cb0cbf13291978 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -37,7 +37,7 @@ $blocks-button__height: 56px; } .wp-gs .wp-block-button__link:not(.has-background) { - background-color: var(--wp-block-core-button--color--background, var(--wp-color--primary, $dark-gray-700)); + background-color: var(--wp-color-primary); } .is-style-squared .wp-block-button__link { From 112ad14ff49ce1bbdbd5c3f5d79bf69dbaf8b964 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 13:20:15 +0100 Subject: [PATCH 12/40] Register CPT to store user global styles --- lib/global-styles.php | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/lib/global-styles.php b/lib/global-styles.php index 7f88bcb45ebdaa..947f41b84a84d0 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -157,3 +157,30 @@ function gutenberg_global_styles_add_wp_gs_class_editor( $classes ) { return $classes; } add_filter( 'admin_body_class', 'gutenberg_global_styles_add_wp_gs_class_editor' ); + +function gutenberg_global_styles_experimental_register_cpt() { + $args = [ + 'label' => 'Global Styles', 'gutenberg', + 'description' => 'CPT to store user design tokens', + 'public' => false, + 'show_ui' => false, + 'show_in_rest' => true, + 'rest_base' => '__experimental/global-styles', + 'capabilities' => [ + 'read' => 'edit_theme_options', + 'create_posts' => 'edit_theme_options', + 'edit_posts' => 'edit_theme_options', + 'edit_published_posts' => 'edit_theme_options', + 'delete_published_posts' => 'edit_theme_options', + 'edit_others_posts' => 'edit_theme_options', + 'delete_others_posts' => 'edit_theme_options', + ], + 'map_meta_cap' => true, + 'supports' => [ + 'editor', + 'revisions', + ] + ]; + register_post_type( 'wp_global_styles', $args ); +} +add_action( 'init', 'gutenberg_global_styles_experimental_register_cpt' ); From 9ebb0e6fd9c3cf75bed1b2378ee3f2830d116f4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 13:22:05 +0100 Subject: [PATCH 13/40] Add data for client within block-editor settings --- lib/global-styles.php | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/lib/global-styles.php b/lib/global-styles.php index 947f41b84a84d0..f38e6543956d69 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -158,6 +158,38 @@ function gutenberg_global_styles_add_wp_gs_class_editor( $classes ) { } add_filter( 'admin_body_class', 'gutenberg_global_styles_add_wp_gs_class_editor' ); +function gutenberg_global_styles_experimental_settings( $settings ) { + // Add CPT ID + $recent_posts = wp_get_recent_posts( [ + 'numberposts' => 1, + 'orderby' => 'ID', + 'order' => 'desc', + 'post_type' => 'wp_global_styles', + ] ); + if ( is_array( $recent_posts ) && ( count( $recent_posts ) > 0 ) ) { + $settings['__experimentalGlobalStylesId'] = $recent_posts[ 0 ][ 'ID' ]; + } else { + $settings['__experimentalGlobalStylesId'] = null; + } + + // Make base Global Styles (core+theme) available. + $settings['__experimentalGlobalStyles'] = [ + 'core' => [ + 'color'=> [ + 'text' => 'black', + ], + ], + 'core/paragraph' => [ + 'color' => [ + 'text' => 'black', + ], + ], + ]; + + return $settings; +} +add_filter( 'block_editor_settings', 'gutenberg_global_styles_experimental_settings' ); + function gutenberg_global_styles_experimental_register_cpt() { $args = [ 'label' => 'Global Styles', 'gutenberg', From a853cbff9702b298d9ed88d12e5fbd5aa43c8fb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 13:23:18 +0100 Subject: [PATCH 14/40] Take into account theme support --- lib/global-styles.php | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/lib/global-styles.php b/lib/global-styles.php index f38e6543956d69..b8a3e3a5da8231 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -159,6 +159,10 @@ function gutenberg_global_styles_add_wp_gs_class_editor( $classes ) { add_filter( 'admin_body_class', 'gutenberg_global_styles_add_wp_gs_class_editor' ); function gutenberg_global_styles_experimental_settings( $settings ) { + if ( ! gutenberg_global_styles_has_theme_support() ) { + return $settings; + } + // Add CPT ID $recent_posts = wp_get_recent_posts( [ 'numberposts' => 1, @@ -191,6 +195,10 @@ function gutenberg_global_styles_experimental_settings( $settings ) { add_filter( 'block_editor_settings', 'gutenberg_global_styles_experimental_settings' ); function gutenberg_global_styles_experimental_register_cpt() { + if ( ! gutenberg_global_styles_has_theme_support() ) { + return; + } + $args = [ 'label' => 'Global Styles', 'gutenberg', 'description' => 'CPT to store user design tokens', From 43437ae5f6e9c81ba1d055e08e0d55bc5f9bda65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 13:31:46 +0100 Subject: [PATCH 15/40] Pass core&theme global styles to client --- lib/global-styles.php | 52 ++++++++++++++++++++++++++----------------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index b8a3e3a5da8231..de13ee7a14c8c6 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -67,11 +67,33 @@ function gutenberg_global_styles_get_from_file( $global_styles_path ) { * * @return array Global Styles design tokens. */ -function gutenberg_global_styles_get_from_cpt() { +function gutenberg_global_styles_get_user() { // TODO: fetch from CPT. return []; } +/** + * Return core's Global Styles design tokens. + * + * @return array Global Styles. + */ +function gutenberg_global_styles_get_core() { + return gutenberg_global_styles_get_from_file( + dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' + ); +} + +/** + * Return theme's Global Styles design tokens. + * + * @return array Global Styles. + */ +function gutenberg_global_styles_get_theme() { + return gutenberg_global_styles_get_from_file( + locate_template( 'experimental-theme.json' ) + ); +} + /** * Takes a Global Styles design tokens tree * and returns the corresponding CSS rule @@ -106,13 +128,10 @@ function gutenberg_global_styles_enqueue_assets() { return; } - $default_global_styles = gutenberg_global_styles_get_from_file( dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' ); - $theme_global_styles = gutenberg_global_styles_get_from_file( locate_template( 'experimental-theme.json' ) ); - $user_global_styles = gutenberg_global_styles_get_from_cpt(); - $global_styles = array_merge( - $default_global_styles, - $theme_global_styles, - $user_global_styles, + $global_styles = array_merge( + gutenberg_global_styles_get_core(), + gutenberg_global_styles_get_theme(), + gutenberg_global_styles_get_user(), ); $inline_style = gutenberg_global_styles_resolver( $global_styles ); @@ -177,18 +196,11 @@ function gutenberg_global_styles_experimental_settings( $settings ) { } // Make base Global Styles (core+theme) available. - $settings['__experimentalGlobalStyles'] = [ - 'core' => [ - 'color'=> [ - 'text' => 'black', - ], - ], - 'core/paragraph' => [ - 'color' => [ - 'text' => 'black', - ], - ], - ]; + $global_styles = array_merge( + gutenberg_global_styles_get_core(), + gutenberg_global_styles_get_theme(), + ); + $settings['__experimentalGlobalStyles'] = $global_styles; return $settings; } From 6001d876aa4d768bc8940afebf9d8ec1b9fbb91a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 13:36:32 +0100 Subject: [PATCH 16/40] Use gutenberg_experimental_global_styles_ as function prefix --- lib/global-styles.php | 64 +++++++++++++++++++++---------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index de13ee7a14c8c6..4c112d84d81042 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -10,7 +10,7 @@ * * @return boolean */ -function gutenberg_global_styles_has_theme_support() { +function gutenberg_experimental_global_styles_has_theme_support() { return is_readable( locate_template( 'experimental-theme.json' ) ); } @@ -23,7 +23,7 @@ function gutenberg_global_styles_has_theme_support() { * @param string $prefix Prefix to append to each variable. * @return array The flattened tree. */ -function gutenberg_global_styles_get_css_vars( $global_styles, $prefix = '' ) { +function gutenberg_experimental_global_styles_get_css_vars( $global_styles, $prefix = '' ) { $result = array(); foreach ( $global_styles as $key => $value ) { $new_key = $prefix . str_replace( '/', '-', $key ); @@ -31,7 +31,7 @@ function gutenberg_global_styles_get_css_vars( $global_styles, $prefix = '' ) { if ( is_array( $value ) ) { $result = array_merge( $result, - gutenberg_global_styles_get_css_vars( $value, $new_key . '-' ) + gutenberg_experimental_global_styles_get_css_vars( $value, $new_key . '-' ) ); } else { $result[ $new_key ] = $value; @@ -47,7 +47,7 @@ function gutenberg_global_styles_get_css_vars( $global_styles, $prefix = '' ) { * @param string $global_styles_path Path to file. * @return array Global Styles design tokens. */ -function gutenberg_global_styles_get_from_file( $global_styles_path ) { +function gutenberg_experimental_global_styles_get_from_file( $global_styles_path ) { $global_styles = []; if ( file_exists( $global_styles_path ) ) { $decoded_file = json_decode( @@ -67,7 +67,7 @@ function gutenberg_global_styles_get_from_file( $global_styles_path ) { * * @return array Global Styles design tokens. */ -function gutenberg_global_styles_get_user() { +function gutenberg_experimental_global_styles_get_user() { // TODO: fetch from CPT. return []; } @@ -77,8 +77,8 @@ function gutenberg_global_styles_get_user() { * * @return array Global Styles. */ -function gutenberg_global_styles_get_core() { - return gutenberg_global_styles_get_from_file( +function gutenberg_experimental_global_styles_get_core() { + return gutenberg_experimental_global_styles_get_from_file( dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' ); } @@ -88,8 +88,8 @@ function gutenberg_global_styles_get_core() { * * @return array Global Styles. */ -function gutenberg_global_styles_get_theme() { - return gutenberg_global_styles_get_from_file( +function gutenberg_experimental_global_styles_get_theme() { + return gutenberg_experimental_global_styles_get_from_file( locate_template( 'experimental-theme.json' ) ); } @@ -102,10 +102,10 @@ function gutenberg_global_styles_get_theme() { * @param array $global_styles Global Styles design tokens. * @return string Resulting CSS rule. */ -function gutenberg_global_styles_resolver( $global_styles ) { +function gutenberg_experimental_global_styles_resolver( $global_styles ) { $css_rule = ''; - $css_vars = gutenberg_global_styles_get_css_vars( $global_styles, '--wp-' ); + $css_vars = gutenberg_experimental_global_styles_get_css_vars( $global_styles, '--wp-' ); if ( empty( $css_vars ) ) { return $css_rule; } @@ -123,18 +123,18 @@ function gutenberg_global_styles_resolver( $global_styles ) { * Fetches the Global Styles design tokens (defaults, theme, user), * and enqueues the resulting CSS custom properties if any. */ -function gutenberg_global_styles_enqueue_assets() { - if ( ! gutenberg_global_styles_has_theme_support() ) { +function gutenberg_experimental_global_styles_enqueue_assets() { + if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { return; } $global_styles = array_merge( - gutenberg_global_styles_get_core(), - gutenberg_global_styles_get_theme(), - gutenberg_global_styles_get_user(), + gutenberg_experimental_global_styles_get_core(), + gutenberg_experimental_global_styles_get_theme(), + gutenberg_experimental_global_styles_get_user(), ); - $inline_style = gutenberg_global_styles_resolver( $global_styles ); + $inline_style = gutenberg_experimental_global_styles_resolver( $global_styles ); if ( empty ( $inline_style ) ) { return; } @@ -143,7 +143,7 @@ function gutenberg_global_styles_enqueue_assets() { wp_add_inline_style( 'global-styles', $inline_style ); wp_enqueue_style( 'global-styles' ); } -add_action( 'enqueue_block_assets', 'gutenberg_global_styles_enqueue_assets' ); +add_action( 'enqueue_block_assets', 'gutenberg_experimental_global_styles_enqueue_assets' ); /** * Adds class wp-gs to the frontend body class @@ -152,13 +152,13 @@ function gutenberg_global_styles_enqueue_assets() { * @param array $classes Existing body classes. * @return array The filtered array of body classes. */ -function gutenberg_global_styles_add_wp_gs_class_front_end( $classes ) { - if ( gutenberg_global_styles_has_theme_support() ) { +function gutenberg_experimental_global_styles_wp_gs_class_front_end( $classes ) { + if ( gutenberg_experimental_global_styles_has_theme_support() ) { return array_merge( $classes, array( 'wp-gs' ) ); } return $classes; } -add_filter( 'body_class', 'gutenberg_global_styles_add_wp_gs_class_front_end' ); +add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); /** @@ -168,17 +168,17 @@ function gutenberg_global_styles_add_wp_gs_class_front_end( $classes ) { * @param string $classes Existing body classes separated by space. * @return string The filtered string of body classes. */ -function gutenberg_global_styles_add_wp_gs_class_editor( $classes ) { +function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) { global $current_screen; - if ( $current_screen->is_block_editor() && gutenberg_global_styles_has_theme_support() ) { + if ( $current_screen->is_block_editor() && gutenberg_experimental_global_styles_has_theme_support() ) { return $classes . ' wp-gs'; } return $classes; } -add_filter( 'admin_body_class', 'gutenberg_global_styles_add_wp_gs_class_editor' ); +add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); -function gutenberg_global_styles_experimental_settings( $settings ) { - if ( ! gutenberg_global_styles_has_theme_support() ) { +function gutenberg_experimental_global_styles_settings( $settings ) { + if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { return $settings; } @@ -197,17 +197,17 @@ function gutenberg_global_styles_experimental_settings( $settings ) { // Make base Global Styles (core+theme) available. $global_styles = array_merge( - gutenberg_global_styles_get_core(), - gutenberg_global_styles_get_theme(), + gutenberg_experimental_global_styles_get_core(), + gutenberg_experimental_global_styles_get_theme(), ); $settings['__experimentalGlobalStyles'] = $global_styles; return $settings; } -add_filter( 'block_editor_settings', 'gutenberg_global_styles_experimental_settings' ); +add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); -function gutenberg_global_styles_experimental_register_cpt() { - if ( ! gutenberg_global_styles_has_theme_support() ) { +function gutenberg_experimental_global_styles_register_cpt() { + if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { return; } @@ -235,4 +235,4 @@ function gutenberg_global_styles_experimental_register_cpt() { ]; register_post_type( 'wp_global_styles', $args ); } -add_action( 'init', 'gutenberg_global_styles_experimental_register_cpt' ); +add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); From 357951c1c739f8595d3244bbf481ec30008642ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 13:55:15 +0100 Subject: [PATCH 17/40] Retrieve user data from CPT --- lib/global-styles.php | 51 +++++++++++++++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 12 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 4c112d84d81042..644ba3bf4074d4 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -68,10 +68,47 @@ function gutenberg_experimental_global_styles_get_from_file( $global_styles_path * @return array Global Styles design tokens. */ function gutenberg_experimental_global_styles_get_user() { - // TODO: fetch from CPT. + $global_styles = []; + $user_cpt = gutenberg_experimental_global_styles_get_user_cpt(); + if ( in_array( 'post_content', $user_cpt ) ) { + $global_styles = $user_cpt[ 'post_content' ]; + } + return $global_styles; +} + +/** + * Returns the CPT containing the user global styles. + * + * @return array CPT. + */ +function gutenberg_experimental_global_styles_get_user_cpt() { + // TODO: + // - sort by date + // - also filter by name: wp_global_styles_ACTIVE_THEME + $recent_posts = wp_get_recent_posts( [ + 'numberposts' => 1, + 'orderby' => 'ID', + 'order' => 'desc', + 'post_type' => 'wp_global_styles', + ] ); + if ( is_array( $recent_posts ) && ( count( $recent_posts ) === 1 ) ) { + return $recent_posts[ 0 ]; + } return []; } +/** + * Returns the post ID of the CPT containing the user global styles. + * + * @return integer CPT ID. + */ +function gutenberg_experimental_global_styles_get_user_cpt_id() { + $user_cpt = gutenberg_experimental_global_styles_get_user_cpt(); + if ( in_array( 'ID', $user_cpt ) ) { + $settings['__experimentalGlobalStylesId'] = $user_cpt[ 'ID' ]; + } +} + /** * Return core's Global Styles design tokens. * @@ -183,17 +220,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { } // Add CPT ID - $recent_posts = wp_get_recent_posts( [ - 'numberposts' => 1, - 'orderby' => 'ID', - 'order' => 'desc', - 'post_type' => 'wp_global_styles', - ] ); - if ( is_array( $recent_posts ) && ( count( $recent_posts ) > 0 ) ) { - $settings['__experimentalGlobalStylesId'] = $recent_posts[ 0 ][ 'ID' ]; - } else { - $settings['__experimentalGlobalStylesId'] = null; - } + $settings['__experimentalGlobalStylesId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); // Make base Global Styles (core+theme) available. $global_styles = array_merge( From 1bdf097b8be499aa37b8ebc2d4d592fa98695554 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 14:07:13 +0100 Subject: [PATCH 18/40] Make user data to be an array --- lib/global-styles.php | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 644ba3bf4074d4..7be3d97bfba171 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -71,8 +71,12 @@ function gutenberg_experimental_global_styles_get_user() { $global_styles = []; $user_cpt = gutenberg_experimental_global_styles_get_user_cpt(); if ( in_array( 'post_content', $user_cpt ) ) { - $global_styles = $user_cpt[ 'post_content' ]; + $decoded_data = json_decode( $user_cpt[ 'post_content' ], true ); + if ( is_array( $decoded_data ) ) { + $global_styles = $decoded_data; + } } + return $global_styles; } From c2eeac16512932e5f3fbd8ba64359072567c9381 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 17:41:18 +0100 Subject: [PATCH 19/40] Filter by post date and slug/name --- lib/global-styles.php | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 7be3d97bfba171..5513ddaf069612 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -86,14 +86,12 @@ function gutenberg_experimental_global_styles_get_user() { * @return array CPT. */ function gutenberg_experimental_global_styles_get_user_cpt() { - // TODO: - // - sort by date - // - also filter by name: wp_global_styles_ACTIVE_THEME $recent_posts = wp_get_recent_posts( [ 'numberposts' => 1, - 'orderby' => 'ID', + 'orderby' => 'date', 'order' => 'desc', 'post_type' => 'wp_global_styles', + 'name' => 'wp_global_styles_' . strtolower( wp_get_theme()->get( 'Name' ) ), ] ); if ( is_array( $recent_posts ) && ( count( $recent_posts ) === 1 ) ) { return $recent_posts[ 0 ]; From 9197535c6deecaba620e3362a5d7891d0214d32f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 17:46:56 +0100 Subject: [PATCH 20/40] Cool down refactorings --- lib/global-styles.php | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 5513ddaf069612..0c705ea22c050f 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -86,6 +86,7 @@ function gutenberg_experimental_global_styles_get_user() { * @return array CPT. */ function gutenberg_experimental_global_styles_get_user_cpt() { + $user_cpt = []; $recent_posts = wp_get_recent_posts( [ 'numberposts' => 1, 'orderby' => 'date', @@ -93,10 +94,12 @@ function gutenberg_experimental_global_styles_get_user_cpt() { 'post_type' => 'wp_global_styles', 'name' => 'wp_global_styles_' . strtolower( wp_get_theme()->get( 'Name' ) ), ] ); + if ( is_array( $recent_posts ) && ( count( $recent_posts ) === 1 ) ) { - return $recent_posts[ 0 ]; + $user_cpt = $recent_posts[ 0 ]; } - return []; + + return $user_cpt; } /** @@ -105,10 +108,12 @@ function gutenberg_experimental_global_styles_get_user_cpt() { * @return integer CPT ID. */ function gutenberg_experimental_global_styles_get_user_cpt_id() { + $user_cpt_id = null; $user_cpt = gutenberg_experimental_global_styles_get_user_cpt(); if ( in_array( 'ID', $user_cpt ) ) { - $settings['__experimentalGlobalStylesId'] = $user_cpt[ 'ID' ]; + $user_cpt_id = $user_cpt[ 'ID' ]; } + return $user_cpt_id; } /** From 23a9d311ee6b78e474dfc8d24f8a6854c799db88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 18:28:50 +0100 Subject: [PATCH 21/40] Create wp_global_styles draft in editor if there is no CPT --- lib/global-styles.php | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 0c705ea22c050f..8152b08c180bfc 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -69,7 +69,7 @@ function gutenberg_experimental_global_styles_get_from_file( $global_styles_path */ function gutenberg_experimental_global_styles_get_user() { $global_styles = []; - $user_cpt = gutenberg_experimental_global_styles_get_user_cpt(); + $user_cpt = gutenberg_experimental_global_styles_get_user_cpt( [ 'publish' ] ); if ( in_array( 'post_content', $user_cpt ) ) { $decoded_data = json_decode( $user_cpt[ 'post_content' ], true ); if ( is_array( $decoded_data ) ) { @@ -85,18 +85,32 @@ function gutenberg_experimental_global_styles_get_user() { * * @return array CPT. */ -function gutenberg_experimental_global_styles_get_user_cpt() { +function gutenberg_experimental_global_styles_get_user_cpt( $post_status = [ 'publish' ], $should_create_draft = false ) { $user_cpt = []; + $post_type = 'wp_global_styles'; + $post_name = 'wp_global_styles_' . strtolower( wp_get_theme()->get( 'Name' ) ); $recent_posts = wp_get_recent_posts( [ 'numberposts' => 1, 'orderby' => 'date', 'order' => 'desc', - 'post_type' => 'wp_global_styles', - 'name' => 'wp_global_styles_' . strtolower( wp_get_theme()->get( 'Name' ) ), + 'post_type' => $post_type, + 'post_status' => $post_status, + 'name' => $post_name, ] ); if ( is_array( $recent_posts ) && ( count( $recent_posts ) === 1 ) ) { $user_cpt = $recent_posts[ 0 ]; + } else if ( $should_create_draft ) { + $cpt_post_id = wp_insert_post( + [ + 'post_content' => json_encode( [] ), + 'post_status' => 'draft', + 'post_type' => $post_type, + 'post_name' => $post_name, + ], + true, + ); + $user_cpt = get_post( $cpt_post_id, ARRAY_A ); } return $user_cpt; @@ -109,7 +123,7 @@ function gutenberg_experimental_global_styles_get_user_cpt() { */ function gutenberg_experimental_global_styles_get_user_cpt_id() { $user_cpt_id = null; - $user_cpt = gutenberg_experimental_global_styles_get_user_cpt(); + $user_cpt = gutenberg_experimental_global_styles_get_user_cpt( [ 'publish', 'draft' ], true ); if ( in_array( 'ID', $user_cpt ) ) { $user_cpt_id = $user_cpt[ 'ID' ]; } From 455cc179548b6ff9a8caea90baf39f2a92aab2be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 18:34:11 +0100 Subject: [PATCH 22/40] Centralize theme support check --- lib/global-styles.php | 35 +++++++++++------------------------ 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 8152b08c180bfc..b4b185fd7ce925 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -1,6 +1,6 @@ is_block_editor() && gutenberg_experimental_global_styles_has_theme_support() ) { + if ( $current_screen->is_block_editor() ) { return $classes . ' wp-gs'; } return $classes; } -add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); function gutenberg_experimental_global_styles_settings( $settings ) { - if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { - return $settings; - } - // Add CPT ID $settings['__experimentalGlobalStylesId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); @@ -252,13 +237,8 @@ function gutenberg_experimental_global_styles_settings( $settings ) { return $settings; } -add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); function gutenberg_experimental_global_styles_register_cpt() { - if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { - return; - } - $args = [ 'label' => 'Global Styles', 'gutenberg', 'description' => 'CPT to store user design tokens', @@ -283,4 +263,11 @@ function gutenberg_experimental_global_styles_register_cpt() { ]; register_post_type( 'wp_global_styles', $args ); } -add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); + +if ( gutenberg_experimental_global_styles_has_theme_support() ) { + add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); + add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); + add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); + add_action( 'enqueue_block_assets', 'gutenberg_experimental_global_styles_enqueue_assets' ); + add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); +} From c89779c0978a051dcc28ced2cc63f15998def388 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 18:55:20 +0100 Subject: [PATCH 23/40] Better docs --- lib/global-styles.php | 83 +++++++++++++++++++++++++------------------ 1 file changed, 48 insertions(+), 35 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index b4b185fd7ce925..525575c2562300 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -1,12 +1,12 @@ get( 'Name' ) ); + $post_type_filter = 'wp_global_styles'; + $post_name_filter = 'wp_global_styles_' . strtolower( wp_get_theme()->get( 'Name' ) ); $recent_posts = wp_get_recent_posts( [ 'numberposts' => 1, 'orderby' => 'date', 'order' => 'desc', - 'post_type' => $post_type, - 'post_status' => $post_status, - 'name' => $post_name, + 'post_type' => $post_type_filter, + 'post_status' => $post_status_filter, + 'name' => $post_name_filter, ] ); if ( is_array( $recent_posts ) && ( count( $recent_posts ) === 1 ) ) { @@ -105,8 +111,8 @@ function gutenberg_experimental_global_styles_get_user_cpt( $post_status = [ 'pu [ 'post_content' => json_encode( [] ), 'post_status' => 'draft', - 'post_type' => $post_type, - 'post_name' => $post_name, + 'post_type' => $post_type_filter, + 'post_name' => $post_name_filter, ], true, ); @@ -117,9 +123,9 @@ function gutenberg_experimental_global_styles_get_user_cpt( $post_status = [ 'pu } /** - * Returns the post ID of the CPT containing the user global styles. + * Returns the post ID of the CPT containing the user's Global Styles. * - * @return integer CPT ID. + * @return integer Custom Post Type ID for the user's Global Styles. */ function gutenberg_experimental_global_styles_get_user_cpt_id() { $user_cpt_id = null; @@ -131,9 +137,9 @@ function gutenberg_experimental_global_styles_get_user_cpt_id() { } /** - * Return core's Global Styles design tokens. + * Return core's Global Styles. * - * @return array Global Styles. + * @return array Global Styles tree. */ function gutenberg_experimental_global_styles_get_core() { return gutenberg_experimental_global_styles_get_from_file( @@ -142,9 +148,9 @@ function gutenberg_experimental_global_styles_get_core() { } /** - * Return theme's Global Styles design tokens. + * Return theme's Global Styles. * - * @return array Global Styles. + * @return array Global Styles tree. */ function gutenberg_experimental_global_styles_get_theme() { return gutenberg_experimental_global_styles_get_from_file( @@ -153,12 +159,11 @@ function gutenberg_experimental_global_styles_get_theme() { } /** - * Takes a Global Styles design tokens tree - * and returns the corresponding CSS rule - * that contains the CSS custom properties. + * Takes a Global Styles tree and returns a CSS rule + * that contains the corresponding CSS custom properties. * - * @param array $global_styles Global Styles design tokens. - * @return string Resulting CSS rule. + * @param array $global_styles Global Styles tree. + * @return string CSS rule. */ function gutenberg_experimental_global_styles_resolver( $global_styles ) { $css_rule = ''; @@ -178,8 +183,8 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { } /** - * Fetches the Global Styles design tokens (defaults, theme, user), - * and enqueues the resulting CSS custom properties if any. + * Fetches the Global Styles for each level (core, theme, user) + * and enqueues the resulting CSS custom properties. */ function gutenberg_experimental_global_styles_enqueue_assets() { $global_styles = array_merge( @@ -199,8 +204,7 @@ function gutenberg_experimental_global_styles_enqueue_assets() { } /** - * Adds class wp-gs to the frontend body class - * if the theme has support for Global Styles. + * Adds class wp-gs to the frontend body class. * * @param array $classes Existing body classes. * @return array The filtered array of body classes. @@ -210,8 +214,7 @@ function gutenberg_experimental_global_styles_wp_gs_class_front_end( $classes ) } /** - * Adds class wp-gs to the block-editor body class - * if the theme has support for Global Styles. + * Adds class wp-gs to the block-editor body class. * * @param string $classes Existing body classes separated by space. * @return string The filtered string of body classes. @@ -224,6 +227,13 @@ function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) { return $classes; } +/** + * Makes the CPT ID and the base Global Styles (core, theme) + * available to the client, to be used for live rendering the styles. + * + * @param array $settings Existing block editor settings. + * @return array New block editor settings + */ function gutenberg_experimental_global_styles_settings( $settings ) { // Add CPT ID $settings['__experimentalGlobalStylesId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); @@ -238,6 +248,9 @@ function gutenberg_experimental_global_styles_settings( $settings ) { return $settings; } +/** + * Registers a Custom Post Type to store the user's Global Styles. + */ function gutenberg_experimental_global_styles_register_cpt() { $args = [ 'label' => 'Global Styles', 'gutenberg', From 2d0fa0e5a5583c917cf010aeb1fd9e1b5f7c3d76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 18:59:43 +0100 Subject: [PATCH 24/40] Consolidate block settings names --- lib/global-styles.php | 9 ++++----- packages/editor/src/components/provider/index.js | 3 +++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 525575c2562300..40874536647198 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -228,22 +228,21 @@ function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) { } /** - * Makes the CPT ID and the base Global Styles (core, theme) + * Makes the base Global Styles (core, theme) + * and the ID of the CPT that stores the user's Global Styles * available to the client, to be used for live rendering the styles. * * @param array $settings Existing block editor settings. * @return array New block editor settings */ function gutenberg_experimental_global_styles_settings( $settings ) { - // Add CPT ID - $settings['__experimentalGlobalStylesId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); + $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); - // Make base Global Styles (core+theme) available. $global_styles = array_merge( gutenberg_experimental_global_styles_get_core(), gutenberg_experimental_global_styles_get_theme(), ); - $settings['__experimentalGlobalStyles'] = $global_styles; + $settings['__experimentalGlobalStylesBase'] = $global_styles; return $settings; } diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index d1a819a420decc..c078a1898f2ce9 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -119,6 +119,9 @@ class EditorProvider extends Component { '__experimentalEnableFullSiteEditing', '__experimentalEnableFullSiteEditingDemo', '__mobileEnablePageTemplates', + '__experimentalEnablePageTemplates', + '__experimentalGlobalStylesUserEntityID', + '__experimentalGlobalStylesBase', 'showInserterHelpPanel', 'gradients', ] ), From ac123338153383f4866f05c112278578c4938ff0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Feb 2020 19:27:57 +0100 Subject: [PATCH 25/40] We should check theme support at later stages --- lib/global-styles.php | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 40874536647198..4284a110f3d7fa 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -187,6 +187,10 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { * and enqueues the resulting CSS custom properties. */ function gutenberg_experimental_global_styles_enqueue_assets() { + if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { + return; + } + $global_styles = array_merge( gutenberg_experimental_global_styles_get_core(), gutenberg_experimental_global_styles_get_theme(), @@ -210,6 +214,10 @@ function gutenberg_experimental_global_styles_enqueue_assets() { * @return array The filtered array of body classes. */ function gutenberg_experimental_global_styles_wp_gs_class_front_end( $classes ) { + if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { + return $classes; + } + return array_merge( $classes, array( 'wp-gs' ) ); } @@ -220,6 +228,10 @@ function gutenberg_experimental_global_styles_wp_gs_class_front_end( $classes ) * @return string The filtered string of body classes. */ function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) { + if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { + return $classes; + } + global $current_screen; if ( $current_screen->is_block_editor() ) { return $classes . ' wp-gs'; @@ -236,6 +248,10 @@ function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) { * @return array New block editor settings */ function gutenberg_experimental_global_styles_settings( $settings ) { + if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { + return $settings; + } + $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); $global_styles = array_merge( @@ -251,6 +267,10 @@ function gutenberg_experimental_global_styles_settings( $settings ) { * Registers a Custom Post Type to store the user's Global Styles. */ function gutenberg_experimental_global_styles_register_cpt() { + if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { + return; + } + $args = [ 'label' => 'Global Styles', 'gutenberg', 'description' => 'CPT to store user design tokens', @@ -276,10 +296,8 @@ function gutenberg_experimental_global_styles_register_cpt() { register_post_type( 'wp_global_styles', $args ); } -if ( gutenberg_experimental_global_styles_has_theme_support() ) { - add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); - add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); - add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); - add_action( 'enqueue_block_assets', 'gutenberg_experimental_global_styles_enqueue_assets' ); - add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); -} +add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); +add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); +add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); +add_action( 'enqueue_block_assets', 'gutenberg_experimental_global_styles_enqueue_assets' ); +add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); From d4fed715b556e008f9fbd366a27d0bdd4423a785 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 5 Feb 2020 10:31:13 +0100 Subject: [PATCH 26/40] Fix typo --- packages/editor/src/components/provider/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index c078a1898f2ce9..2c5159f6b5a5b7 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -120,7 +120,7 @@ class EditorProvider extends Component { '__experimentalEnableFullSiteEditingDemo', '__mobileEnablePageTemplates', '__experimentalEnablePageTemplates', - '__experimentalGlobalStylesUserEntityID', + '__experimentalGlobalStylesUserEntityId', '__experimentalGlobalStylesBase', 'showInserterHelpPanel', 'gradients', From 3e40c298eac409ea3ba75091a54304c2d852c320 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 5 Feb 2020 11:54:09 +0100 Subject: [PATCH 27/40] Follow post name convention: use dash instead of underscore --- lib/global-styles.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 4284a110f3d7fa..468e9b4515e3dd 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -94,7 +94,7 @@ function gutenberg_experimental_global_styles_get_user() { function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = [ 'publish' ], $should_create_draft = false ) { $user_cpt = []; $post_type_filter = 'wp_global_styles'; - $post_name_filter = 'wp_global_styles_' . strtolower( wp_get_theme()->get( 'Name' ) ); + $post_name_filter = 'wp-global-styles-' . strtolower( wp_get_theme()->get( 'Name' ) ); $recent_posts = wp_get_recent_posts( [ 'numberposts' => 1, 'orderby' => 'date', @@ -109,7 +109,7 @@ function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter } else if ( $should_create_draft ) { $cpt_post_id = wp_insert_post( [ - 'post_content' => json_encode( [] ), + 'post_content' => '{}', 'post_status' => 'draft', 'post_type' => $post_type_filter, 'post_name' => $post_name_filter, From caf9773d38d08e7ba38f82460aaf40d6ab144ce2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 5 Feb 2020 16:13:07 +0100 Subject: [PATCH 28/40] Make linter happy --- lib/global-styles.php | 75 ++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 36 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 468e9b4515e3dd..7eea2dada07213 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -48,7 +48,7 @@ function gutenberg_experimental_global_styles_get_css_vars( $global_styles, $pre * @return array Global Styles tree. */ function gutenberg_experimental_global_styles_get_from_file( $global_styles_path ) { - $global_styles = []; + $global_styles = array(); if ( file_exists( $global_styles_path ) ) { $decoded_file = json_decode( file_get_contents( $global_styles_path ), @@ -68,10 +68,10 @@ function gutenberg_experimental_global_styles_get_from_file( $global_styles_path * @return array Global Styles tree. */ function gutenberg_experimental_global_styles_get_user() { - $global_styles = []; - $user_cpt = gutenberg_experimental_global_styles_get_user_cpt( [ 'publish' ] ); - if ( in_array( 'post_content', $user_cpt ) ) { - $decoded_data = json_decode( $user_cpt[ 'post_content' ], true ); + $global_styles = array(); + $user_cpt = gutenberg_experimental_global_styles_get_user_cpt( array( 'publish' ) ); + if ( in_array( 'post_content', $user_cpt, true ) ) { + $decoded_data = json_decode( $user_cpt['post_content'], true ); if ( is_array( $decoded_data ) ) { $global_styles = $decoded_data; } @@ -87,36 +87,38 @@ function gutenberg_experimental_global_styles_get_user() { * * @param array $post_status_filter Filter CPT by post status. * By default, only fetches published posts. - * @param bool $should_create_draft Whether a new draft should be created - * if no CPT was found. False by default. + * @param bool $should_create_draft Whether a new draft should be created + * if no CPT was found. False by default. * @return array Custom Post Type for the user's Global Styles. */ -function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = [ 'publish' ], $should_create_draft = false ) { - $user_cpt = []; +function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = array( 'publish' ), $should_create_draft = false ) { + $user_cpt = array(); $post_type_filter = 'wp_global_styles'; $post_name_filter = 'wp-global-styles-' . strtolower( wp_get_theme()->get( 'Name' ) ); - $recent_posts = wp_get_recent_posts( [ - 'numberposts' => 1, - 'orderby' => 'date', - 'order' => 'desc', - 'post_type' => $post_type_filter, - 'post_status' => $post_status_filter, - 'name' => $post_name_filter, - ] ); + $recent_posts = wp_get_recent_posts( + array( + 'numberposts' => 1, + 'orderby' => 'date', + 'order' => 'desc', + 'post_type' => $post_type_filter, + 'post_status' => $post_status_filter, + 'name' => $post_name_filter, + ) + ); if ( is_array( $recent_posts ) && ( count( $recent_posts ) === 1 ) ) { - $user_cpt = $recent_posts[ 0 ]; - } else if ( $should_create_draft ) { + $user_cpt = $recent_posts[0]; + } elseif ( $should_create_draft ) { $cpt_post_id = wp_insert_post( - [ + array( 'post_content' => '{}', 'post_status' => 'draft', 'post_type' => $post_type_filter, 'post_name' => $post_name_filter, - ], - true, + ), + true ); - $user_cpt = get_post( $cpt_post_id, ARRAY_A ); + $user_cpt = get_post( $cpt_post_id, ARRAY_A ); } return $user_cpt; @@ -129,9 +131,9 @@ function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter */ function gutenberg_experimental_global_styles_get_user_cpt_id() { $user_cpt_id = null; - $user_cpt = gutenberg_experimental_global_styles_get_user_cpt( [ 'publish', 'draft' ], true ); - if ( in_array( 'ID', $user_cpt ) ) { - $user_cpt_id = $user_cpt[ 'ID' ]; + $user_cpt = gutenberg_experimental_global_styles_get_user_cpt( array( 'publish', 'draft' ), true ); + if ( in_array( 'ID', $user_cpt, true ) ) { + $user_cpt_id = $user_cpt['ID']; } return $user_cpt_id; } @@ -194,11 +196,11 @@ function gutenberg_experimental_global_styles_enqueue_assets() { $global_styles = array_merge( gutenberg_experimental_global_styles_get_core(), gutenberg_experimental_global_styles_get_theme(), - gutenberg_experimental_global_styles_get_user(), + gutenberg_experimental_global_styles_get_user() ); $inline_style = gutenberg_experimental_global_styles_resolver( $global_styles ); - if ( empty ( $inline_style ) ) { + if ( empty( $inline_style ) ) { return; } @@ -256,8 +258,9 @@ function gutenberg_experimental_global_styles_settings( $settings ) { $global_styles = array_merge( gutenberg_experimental_global_styles_get_core(), - gutenberg_experimental_global_styles_get_theme(), + gutenberg_experimental_global_styles_get_theme() ); + $settings['__experimentalGlobalStylesBase'] = $global_styles; return $settings; @@ -271,14 +274,14 @@ function gutenberg_experimental_global_styles_register_cpt() { return; } - $args = [ - 'label' => 'Global Styles', 'gutenberg', + $args = array( + 'label' => __( 'Global Styles', 'gutenberg' ), 'description' => 'CPT to store user design tokens', 'public' => false, 'show_ui' => false, 'show_in_rest' => true, 'rest_base' => '__experimental/global-styles', - 'capabilities' => [ + 'capabilities' => array( 'read' => 'edit_theme_options', 'create_posts' => 'edit_theme_options', 'edit_posts' => 'edit_theme_options', @@ -286,13 +289,13 @@ function gutenberg_experimental_global_styles_register_cpt() { 'delete_published_posts' => 'edit_theme_options', 'edit_others_posts' => 'edit_theme_options', 'delete_others_posts' => 'edit_theme_options', - ], + ), 'map_meta_cap' => true, - 'supports' => [ + 'supports' => array( 'editor', 'revisions', - ] - ]; + ), + ); register_post_type( 'wp_global_styles', $args ); } From 946c3988bfd409ebba04aa9f8e4bcb74a12dc03b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 5 Feb 2020 18:29:08 +0100 Subject: [PATCH 29/40] Only load Global Styles if experiment is enabled --- lib/global-styles.php | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 7eea2dada07213..3c7b53522b663b 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -299,8 +299,10 @@ function gutenberg_experimental_global_styles_register_cpt() { register_post_type( 'wp_global_styles', $args ); } -add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); -add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); -add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); -add_action( 'enqueue_block_assets', 'gutenberg_experimental_global_styles_enqueue_assets' ); -add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); +if ( gutenberg_is_experiment_enabled( 'global-styles' ) ) { + add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); + add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); + add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); + add_action( 'enqueue_block_assets', 'gutenberg_experimental_global_styles_enqueue_assets' ); + add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); +} From 1a6db21bb56a54b544662ae9e1f042322bde042b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 5 Feb 2020 18:33:25 +0100 Subject: [PATCH 30/40] Add Global Styles setting to experiments page --- lib/experiments-page.php | 24 ++++++++++++++++++++++++ lib/global-styles.php | 2 +- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 2d8ac36a2c2569..c5b0db8942f908 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -84,6 +84,28 @@ function gutenberg_initialize_experiments_settings() { 'id' => 'gutenberg-full-site-editing-demo', ) ); + add_settings_field( + 'gutenberg-page-templates', + __( 'Page Templates', 'gutenberg' ), + 'gutenberg_display_experiment_field', + 'gutenberg-experiments', + 'gutenberg_experiments_section', + array( + 'label' => __( 'Enable page templates', 'gutenberg' ), + 'id' => 'gutenberg-page-templates', + ) + ); + add_settings_field( + 'gutenberg-global-styles', + __( 'Global Styles', 'gutenberg' ), + 'gutenberg_display_experiment_field', + 'gutenberg-experiments', + 'gutenberg_experiments_section', + array( + 'label' => __( 'Enable Global Styles', 'gutenberg' ), + 'id' => 'gutenberg-global-styles', + ) + ); register_setting( 'gutenberg-experiments', 'gutenberg-experiments' @@ -135,6 +157,8 @@ function gutenberg_experiments_editor_settings( $settings ) { '__experimentalBlockDirectory' => gutenberg_is_experiment_enabled( 'gutenberg-block-directory' ), '__experimentalEnableFullSiteEditing' => gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ), '__experimentalEnableFullSiteEditingDemo' => gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing-demo' ), + '__experimentalEnablePageTemplates' => gutenberg_is_experiment_enabled( 'gutenberg-page-templates' ), + '__experimentalEnableGlobalStyles' => gutenberg_is_experiment_enabled( 'gutenberg-global-styles' ), ); $gradient_presets = current( (array) get_theme_support( 'editor-gradient-presets' ) ); diff --git a/lib/global-styles.php b/lib/global-styles.php index 3c7b53522b663b..d7fb0afea693ed 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -299,7 +299,7 @@ function gutenberg_experimental_global_styles_register_cpt() { register_post_type( 'wp_global_styles', $args ); } -if ( gutenberg_is_experiment_enabled( 'global-styles' ) ) { +if ( gutenberg_is_experiment_enabled( 'gutenberg-global-styles' ) ) { add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); From 3aaccc1d3467c00bbafbb95987aea77b3f61b7a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 6 Feb 2020 11:57:49 +0100 Subject: [PATCH 31/40] Use FSE experiment flag instead of dedicated Global Styles one --- lib/experiments-page.php | 12 ------------ lib/global-styles.php | 2 +- 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index c5b0db8942f908..85d8944bddea1a 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -95,17 +95,6 @@ function gutenberg_initialize_experiments_settings() { 'id' => 'gutenberg-page-templates', ) ); - add_settings_field( - 'gutenberg-global-styles', - __( 'Global Styles', 'gutenberg' ), - 'gutenberg_display_experiment_field', - 'gutenberg-experiments', - 'gutenberg_experiments_section', - array( - 'label' => __( 'Enable Global Styles', 'gutenberg' ), - 'id' => 'gutenberg-global-styles', - ) - ); register_setting( 'gutenberg-experiments', 'gutenberg-experiments' @@ -158,7 +147,6 @@ function gutenberg_experiments_editor_settings( $settings ) { '__experimentalEnableFullSiteEditing' => gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ), '__experimentalEnableFullSiteEditingDemo' => gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing-demo' ), '__experimentalEnablePageTemplates' => gutenberg_is_experiment_enabled( 'gutenberg-page-templates' ), - '__experimentalEnableGlobalStyles' => gutenberg_is_experiment_enabled( 'gutenberg-global-styles' ), ); $gradient_presets = current( (array) get_theme_support( 'editor-gradient-presets' ) ); diff --git a/lib/global-styles.php b/lib/global-styles.php index d7fb0afea693ed..0607a7ddadc4a7 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -299,7 +299,7 @@ function gutenberg_experimental_global_styles_register_cpt() { register_post_type( 'wp_global_styles', $args ); } -if ( gutenberg_is_experiment_enabled( 'gutenberg-global-styles' ) ) { +if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ) ) { add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); From 527c263e2c67b1b092a0c472cb73daef92b2572e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 11 Feb 2020 10:12:34 +0100 Subject: [PATCH 32/40] Update token --- lib/global-styles.php | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 0607a7ddadc4a7..f3b663c99f1dc9 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -20,18 +20,21 @@ function gutenberg_experimental_global_styles_has_theme_support() { * and its values the CSS custom properties' values. * * @param array $global_styles Global Styles object to process. - * @param string $prefix Prefix to append to each variable. + * @param string $prefix Prefix to prepend to each variable. + * @param string $token Token to use between levels. + * * @return array The flattened tree. */ -function gutenberg_experimental_global_styles_get_css_vars( $global_styles, $prefix = '' ) { +function gutenberg_experimental_global_styles_get_css_vars( $global_styles, $prefix = '', $token = '--' ) { $result = array(); foreach ( $global_styles as $key => $value ) { $new_key = $prefix . str_replace( '/', '-', $key ); if ( is_array( $value ) ) { - $result = array_merge( + $new_prefix = $new_key . $token; + $result = array_merge( $result, - gutenberg_experimental_global_styles_get_css_vars( $value, $new_key . '-' ) + gutenberg_experimental_global_styles_get_css_vars( $value, $new_prefix, $token ) ); } else { $result[ $new_key ] = $value; @@ -170,7 +173,9 @@ function gutenberg_experimental_global_styles_get_theme() { function gutenberg_experimental_global_styles_resolver( $global_styles ) { $css_rule = ''; - $css_vars = gutenberg_experimental_global_styles_get_css_vars( $global_styles, '--wp-' ); + $token = '--'; + $prefix = '--wp' . $token; + $css_vars = gutenberg_experimental_global_styles_get_css_vars( $global_styles, $prefix, $token ); if ( empty( $css_vars ) ) { return $css_rule; } From ef09131038a6951539ebc352f2adc557b52fac19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 11 Feb 2020 10:29:27 +0100 Subject: [PATCH 33/40] Adapt CSS custom properties to new convention --- packages/block-library/src/button/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index cb0cbf13291978..7bbe8900b8dc29 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -37,7 +37,7 @@ $blocks-button__height: 56px; } .wp-gs .wp-block-button__link:not(.has-background) { - background-color: var(--wp-color-primary); + background-color: var(--wp--color--primary); } .is-style-squared .wp-block-button__link { From 1588f8cc233916fbdfcd6d7d2fe9241503e3cdaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 11 Feb 2020 10:58:24 +0100 Subject: [PATCH 34/40] Use theme textdomain this gives a well-known string and avoids the need to parse the theme name for spaces, etc. --- lib/global-styles.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index f3b663c99f1dc9..8aea0a25b5ff7e 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -73,7 +73,7 @@ function gutenberg_experimental_global_styles_get_from_file( $global_styles_path function gutenberg_experimental_global_styles_get_user() { $global_styles = array(); $user_cpt = gutenberg_experimental_global_styles_get_user_cpt( array( 'publish' ) ); - if ( in_array( 'post_content', $user_cpt, true ) ) { + if ( array_key_exists( 'post_content', $user_cpt ) ) { $decoded_data = json_decode( $user_cpt['post_content'], true ); if ( is_array( $decoded_data ) ) { $global_styles = $decoded_data; @@ -97,7 +97,7 @@ function gutenberg_experimental_global_styles_get_user() { function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = array( 'publish' ), $should_create_draft = false ) { $user_cpt = array(); $post_type_filter = 'wp_global_styles'; - $post_name_filter = 'wp-global-styles-' . strtolower( wp_get_theme()->get( 'Name' ) ); + $post_name_filter = 'wp-global-styles-' . strtolower( wp_get_theme()->get( 'TextDomain' ) ); $recent_posts = wp_get_recent_posts( array( 'numberposts' => 1, From 1d9169e113edf5e13eb260faf1480521a4b7d13b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 11 Feb 2020 12:42:40 +0100 Subject: [PATCH 35/40] Check for array key presence --- lib/global-styles.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 8aea0a25b5ff7e..c2fdbbd6155543 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -135,7 +135,7 @@ function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter function gutenberg_experimental_global_styles_get_user_cpt_id() { $user_cpt_id = null; $user_cpt = gutenberg_experimental_global_styles_get_user_cpt( array( 'publish', 'draft' ), true ); - if ( in_array( 'ID', $user_cpt, true ) ) { + if ( array_key_exists( 'ID', $user_cpt ) ) { $user_cpt_id = $user_cpt['ID']; } return $user_cpt_id; From aeddf60e8f768012d0d06d2a0c4f1c8631020a01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 11 Feb 2020 12:05:01 +0100 Subject: [PATCH 36/40] Detect whether we are in the site editor context. --- lib/global-styles.php | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index c2fdbbd6155543..a5c786d6da951b 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -239,13 +239,27 @@ function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) { return $classes; } - global $current_screen; - if ( $current_screen->is_block_editor() ) { + if ( gutenberg_experimental_global_styles_is_site_editor() ) { return $classes . ' wp-gs'; } return $classes; } +/** + * Whether the loaded page is the site editor. + * + * @return boolean Whether the loaded page is the site editor. + */ +function gutenberg_experimental_global_styles_is_site_editor() { + if ( ! function_exists( 'get_current_screen' ) ) { + return false; + } + + $screen = get_current_screen(); + return ! empty( $screen ) && + ( 'gutenberg_page_gutenberg-edit-site' === $screen->id ); +} + /** * Makes the base Global Styles (core, theme) * and the ID of the CPT that stores the user's Global Styles From 1e45e2d9568c724fbd958804dbaf78476d484084 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 11 Feb 2020 13:24:56 +0100 Subject: [PATCH 37/40] Fire block settings hook in edit-site --- lib/edit-site-page.php | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php index 8fffad69ef6f3b..a85d0bb8ec39a8 100644 --- a/lib/edit-site-page.php +++ b/lib/edit-site-page.php @@ -80,6 +80,11 @@ function gutenberg_edit_site_init( $hook ) { apply_filters( 'template_include', null ); $settings['templateId'] = $_wp_current_template_id; + // This is so other parts of the code can hook their own settings. + // Example: Global Styles. + global $post; + $settings = apply_filters( 'block_editor_settings', $settings, $post ); + // Initialize editor. wp_add_inline_script( 'wp-edit-site', From 9fe78000831ef7308ada1b1a35e03b90bfbf921b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 11 Feb 2020 13:29:27 +0100 Subject: [PATCH 38/40] Enqueue assets in a way that works for edit-site --- lib/global-styles.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index a5c786d6da951b..84fde4d4039f29 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -322,6 +322,8 @@ function gutenberg_experimental_global_styles_register_cpt() { add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); - add_action( 'enqueue_block_assets', 'gutenberg_experimental_global_styles_enqueue_assets' ); add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); + // enqueue_block_assets is not fired in edit-site, so we use back/front hooks instead. + add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' ); + add_action( 'admin_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' ); } From ee550aded9b46ea0f8f6a59814958773f3aeabad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 11 Feb 2020 13:39:59 +0100 Subject: [PATCH 39/40] Add some editor checks: only load if edit-site --- lib/global-styles.php | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 84fde4d4039f29..71deabe3e2288f 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -189,6 +189,16 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { return $css_rule; } +/** + * Fetches the Global Styles for each level (core, theme, user) + * and enqueues the resulting CSS custom properties for the editor. + */ +function gutenberg_experimental_global_styles_enqueue_assets_editor() { + if ( gutenberg_experimental_global_styles_is_site_editor() ) { + gutenberg_experimental_global_styles_enqueue_assets(); + } +} + /** * Fetches the Global Styles for each level (core, theme, user) * and enqueues the resulting CSS custom properties. @@ -235,14 +245,14 @@ function gutenberg_experimental_global_styles_wp_gs_class_front_end( $classes ) * @return string The filtered string of body classes. */ function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) { - if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { + if ( + ! gutenberg_experimental_global_styles_has_theme_support() || + ! gutenberg_experimental_global_styles_is_site_editor() + ) { return $classes; } - if ( gutenberg_experimental_global_styles_is_site_editor() ) { - return $classes . ' wp-gs'; - } - return $classes; + return $classes . ' wp-gs'; } /** @@ -269,7 +279,10 @@ function gutenberg_experimental_global_styles_is_site_editor() { * @return array New block editor settings */ function gutenberg_experimental_global_styles_settings( $settings ) { - if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { + if ( + ! gutenberg_experimental_global_styles_has_theme_support() || + ! gutenberg_experimental_global_styles_is_site_editor() + ) { return $settings; } @@ -323,7 +336,7 @@ function gutenberg_experimental_global_styles_register_cpt() { add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); - // enqueue_block_assets is not fired in edit-site, so we use back/front hooks instead. + // enqueue_block_assets is not fired in edit-site, so we use separate back/front hooks instead. add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' ); - add_action( 'admin_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' ); + add_action( 'admin_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets_editor' ); } From 6f1e87b1e041921dbc9e5a0582dd52920db71fbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 11 Feb 2020 20:23:26 +0100 Subject: [PATCH 40/40] Remove unrelated changes This has been probably inadvertenly added in a rebase. --- lib/experiments-page.php | 12 ------------ packages/editor/src/components/provider/index.js | 1 - 2 files changed, 13 deletions(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 85d8944bddea1a..2d8ac36a2c2569 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -84,17 +84,6 @@ function gutenberg_initialize_experiments_settings() { 'id' => 'gutenberg-full-site-editing-demo', ) ); - add_settings_field( - 'gutenberg-page-templates', - __( 'Page Templates', 'gutenberg' ), - 'gutenberg_display_experiment_field', - 'gutenberg-experiments', - 'gutenberg_experiments_section', - array( - 'label' => __( 'Enable page templates', 'gutenberg' ), - 'id' => 'gutenberg-page-templates', - ) - ); register_setting( 'gutenberg-experiments', 'gutenberg-experiments' @@ -146,7 +135,6 @@ function gutenberg_experiments_editor_settings( $settings ) { '__experimentalBlockDirectory' => gutenberg_is_experiment_enabled( 'gutenberg-block-directory' ), '__experimentalEnableFullSiteEditing' => gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ), '__experimentalEnableFullSiteEditingDemo' => gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing-demo' ), - '__experimentalEnablePageTemplates' => gutenberg_is_experiment_enabled( 'gutenberg-page-templates' ), ); $gradient_presets = current( (array) get_theme_support( 'editor-gradient-presets' ) ); diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 2c5159f6b5a5b7..97065c54844ab3 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -119,7 +119,6 @@ class EditorProvider extends Component { '__experimentalEnableFullSiteEditing', '__experimentalEnableFullSiteEditingDemo', '__mobileEnablePageTemplates', - '__experimentalEnablePageTemplates', '__experimentalGlobalStylesUserEntityId', '__experimentalGlobalStylesBase', 'showInserterHelpPanel',