diff --git a/lib/global-styles.php b/lib/global-styles.php index 2a2e1925ee1e1..67ebac81a6a7b 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', wp_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' ); 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,