From 96698defedc564770c522e51092696c37ef11f13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 25 Nov 2021 11:04:57 +0100 Subject: [PATCH 1/5] Remove __experimentalNoWrapper API --- .../src/utils/transform-styles/index.js | 29 +++++++++---------- .../global-styles/use-global-styles-output.js | 1 - 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js index 4d4a4d0336ec9..854ffd11da2ce 100644 --- a/packages/block-editor/src/utils/transform-styles/index.js +++ b/packages/block-editor/src/utils/transform-styles/index.js @@ -23,23 +23,20 @@ import wrap from './transforms/wrap'; * @return {Array} converted rules. */ const transformStyles = ( styles, wrapperClassName = '' ) => { - return map( - styles, - ( { css, baseURL, __experimentalNoWrapper = false } ) => { - const transforms = []; - if ( wrapperClassName && ! __experimentalNoWrapper ) { - transforms.push( wrap( wrapperClassName ) ); - } - if ( baseURL ) { - transforms.push( urlRewrite( baseURL ) ); - } - if ( transforms.length ) { - return traverse( css, compose( transforms ) ); - } - - return css; + return map( styles, ( { css, baseURL } ) => { + const transforms = []; + if ( wrapperClassName ) { + transforms.push( wrap( wrapperClassName ) ); + } + if ( baseURL ) { + transforms.push( urlRewrite( baseURL ) ); } - ); + if ( transforms.length ) { + return traverse( css, compose( transforms ) ); + } + + return css; + } ); }; export default transformStyles; diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 4908196c84d27..b3ca7bd9ba016 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -378,7 +378,6 @@ export function useGlobalStylesOutput() { { css: customProperties, isGlobalStyles: true, - __experimentalNoWrapper: true, }, { css: globalStyles, From 4c4bf990bc8d75e3edfa394c0712a302c76589d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 25 Nov 2021 11:00:20 +0100 Subject: [PATCH 2/5] Make sure CSS Custom Properties are enqueued in the site editor --- lib/global-styles.php | 46 +++++++++++++++++++++---------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 2a2e1925ee1e1..39c9c2c85768a 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -71,34 +71,22 @@ function_exists( 'gutenberg_is_edit_site_page' ) && } $new_global_styles = array(); - $new_presets = array( - array( - 'css' => 'variables', - '__unstableType' => 'presets', - '__experimentalNoWrapper' => true, - ), - array( - 'css' => 'presets', + + $style_css = wp_get_global_stylesheet( array( 'presets' ) ); + if ( '' !== $style_css ) { + $new_global_styles[] = array( + 'css' => $style_css, '__unstableType' => 'presets', - ), - ); - foreach ( $new_presets as $new_style ) { - $style_css = wp_get_global_stylesheet( array( $new_style['css'] ) ); - if ( '' !== $style_css ) { - $new_style['css'] = $style_css; - $new_global_styles[] = $new_style; - } + ); } - $new_block_classes = array( - 'css' => 'styles', - '__unstableType' => 'theme', - ); if ( WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) { - $style_css = wp_get_global_stylesheet( array( $new_block_classes['css'] ) ); + $style_css = wp_get_global_stylesheet( array( 'styles' ) ); if ( '' !== $style_css ) { - $new_block_classes['css'] = $style_css; - $new_global_styles[] = $new_block_classes; + $new_global_styles[] = array( + 'css' => $style_css, + '__unstableType' => 'theme', + ); } } @@ -288,6 +276,16 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $ return ! ! preg_match( '/^var\(--wp-[a-zA-Z0-9\-]+\)$/', trim( $parts[1] ) ); } +/** + * Function to enqueue the CSS Custom Properties + * coming from theme.json. + */ +function gutenberg_load_css_custom_properties() { + wp_register_style( 'global-styles-css-custom-properties', false, array(), true, true ); + wp_add_inline_style( 'global-styles-css-custom-properties', gutenberg_get_global_stylesheet( array( 'variables' ) ) ); + wp_enqueue_style( 'global-styles-css-custom-properties' ); +} + // The else clause can be removed when plugin support requires WordPress 5.8.0+. if ( function_exists( 'get_block_editor_settings' ) ) { add_filter( 'block_editor_settings_all', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX ); @@ -304,3 +302,5 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $ add_filter( 'force_filtered_html_on_import', 'gutenberg_global_styles_force_filtered_html_on_import_filter', 999 ); add_filter( 'safecss_filter_attr_allow_css', 'gutenberg_global_styles_include_support_for_wp_variables', 10, 2 ); // This filter needs to be executed last. + +add_filter( 'enqueue_block_editor_assets', 'gutenberg_load_css_custom_properties' ); From 3716889237007c31a2a92243eee249defa8c7a49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 2 Dec 2021 17:58:03 +0100 Subject: [PATCH 3/5] Use gutenberg_extend_block_editor_styles_html --- lib/client-assets.php | 5 +++++ lib/global-styles.php | 12 ------------ 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index 8aaceab181905..13db505c305d8 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -713,12 +713,17 @@ function gutenberg_extend_block_editor_settings_with_fse_theme_flag( $settings ) function gutenberg_extend_block_editor_styles_html() { global $pagenow; + $gs_css_vars = 'global-styles-css-custom-properties'; + wp_register_style( $gs_css_vars, false, array(), true, true ); + wp_add_inline_style( $gs_css_vars, wp_get_global_stylesheet( array( 'variables' ) ) ); + $script_handles = array(); $style_handles = array( 'wp-block-editor', 'wp-block-library', 'wp-block-library-theme', 'wp-edit-blocks', + $gs_css_vars, ); if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) { diff --git a/lib/global-styles.php b/lib/global-styles.php index 39c9c2c85768a..31ecb1d0e7c19 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -276,16 +276,6 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $ return ! ! preg_match( '/^var\(--wp-[a-zA-Z0-9\-]+\)$/', trim( $parts[1] ) ); } -/** - * Function to enqueue the CSS Custom Properties - * coming from theme.json. - */ -function gutenberg_load_css_custom_properties() { - wp_register_style( 'global-styles-css-custom-properties', false, array(), true, true ); - wp_add_inline_style( 'global-styles-css-custom-properties', gutenberg_get_global_stylesheet( array( 'variables' ) ) ); - wp_enqueue_style( 'global-styles-css-custom-properties' ); -} - // The else clause can be removed when plugin support requires WordPress 5.8.0+. if ( function_exists( 'get_block_editor_settings' ) ) { add_filter( 'block_editor_settings_all', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX ); @@ -302,5 +292,3 @@ function gutenberg_load_css_custom_properties() { add_filter( 'force_filtered_html_on_import', 'gutenberg_global_styles_force_filtered_html_on_import_filter', 999 ); add_filter( 'safecss_filter_attr_allow_css', 'gutenberg_global_styles_include_support_for_wp_variables', 10, 2 ); // This filter needs to be executed last. - -add_filter( 'enqueue_block_editor_assets', 'gutenberg_load_css_custom_properties' ); From 48e4e1e3762c26d9054ee861794726dd4a12fad4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 3 Dec 2021 11:54:44 +0100 Subject: [PATCH 4/5] Revert "Use gutenberg_extend_block_editor_styles_html" This reverts commit e5d91a66932576f0699ab0df2e2893594734b34a. --- lib/client-assets.php | 5 ----- lib/global-styles.php | 12 ++++++++++++ 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index 13db505c305d8..8aaceab181905 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -713,17 +713,12 @@ function gutenberg_extend_block_editor_settings_with_fse_theme_flag( $settings ) function gutenberg_extend_block_editor_styles_html() { global $pagenow; - $gs_css_vars = 'global-styles-css-custom-properties'; - wp_register_style( $gs_css_vars, false, array(), true, true ); - wp_add_inline_style( $gs_css_vars, wp_get_global_stylesheet( array( 'variables' ) ) ); - $script_handles = array(); $style_handles = array( 'wp-block-editor', 'wp-block-library', 'wp-block-library-theme', 'wp-edit-blocks', - $gs_css_vars, ); if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) { diff --git a/lib/global-styles.php b/lib/global-styles.php index 31ecb1d0e7c19..39c9c2c85768a 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -276,6 +276,16 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $ return ! ! preg_match( '/^var\(--wp-[a-zA-Z0-9\-]+\)$/', trim( $parts[1] ) ); } +/** + * Function to enqueue the CSS Custom Properties + * coming from theme.json. + */ +function gutenberg_load_css_custom_properties() { + wp_register_style( 'global-styles-css-custom-properties', false, array(), true, true ); + wp_add_inline_style( 'global-styles-css-custom-properties', gutenberg_get_global_stylesheet( array( 'variables' ) ) ); + wp_enqueue_style( 'global-styles-css-custom-properties' ); +} + // The else clause can be removed when plugin support requires WordPress 5.8.0+. if ( function_exists( 'get_block_editor_settings' ) ) { add_filter( 'block_editor_settings_all', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX ); @@ -292,3 +302,5 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $ add_filter( 'force_filtered_html_on_import', 'gutenberg_global_styles_force_filtered_html_on_import_filter', 999 ); add_filter( 'safecss_filter_attr_allow_css', 'gutenberg_global_styles_include_support_for_wp_variables', 10, 2 ); // This filter needs to be executed last. + +add_filter( 'enqueue_block_editor_assets', 'gutenberg_load_css_custom_properties' ); From b4819281c71c833af8fcd83adcd54169561c1600 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 3 Dec 2021 11:58:21 +0100 Subject: [PATCH 5/5] Use proper function name --- 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 39c9c2c85768a..67ebac81a6a7b 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -282,7 +282,7 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $ */ function gutenberg_load_css_custom_properties() { wp_register_style( 'global-styles-css-custom-properties', false, array(), true, true ); - wp_add_inline_style( 'global-styles-css-custom-properties', gutenberg_get_global_stylesheet( array( 'variables' ) ) ); + wp_add_inline_style( 'global-styles-css-custom-properties', wp_get_global_stylesheet( array( 'variables' ) ) ); wp_enqueue_style( 'global-styles-css-custom-properties' ); }