From f57308c642aad7e5ca8f07e9621502ef810cd116 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 8 Apr 2022 14:14:12 +0200 Subject: [PATCH 1/9] Prevent server-generated global styles being sent to the site editor --- .../wordpress-6.0/block-editor-settings.php | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/lib/compat/wordpress-6.0/block-editor-settings.php b/lib/compat/wordpress-6.0/block-editor-settings.php index c070f64c7bf513..b4f6dba8367998 100644 --- a/lib/compat/wordpress-6.0/block-editor-settings.php +++ b/lib/compat/wordpress-6.0/block-editor-settings.php @@ -33,6 +33,21 @@ function_exists( 'gutenberg_is_edit_site_page' ) && $context = 'mobile'; } + if ( 'site-editor' === $context ) { + // Remove global styles added by core. + // This needs to be fixed in core but this will help us in the meanwhile. + $styles_without_existing_global_styles = array(); + foreach( $settings['styles'] as $style ) { + if ( + ! isset( $style['__unstableType'] ) || + ! in_array( $style['__unstableType'], array( 'globalStyles', 'presets' ), true ) + ) { + $styles_without_existing_global_styles[] = $style; + } + } + $settings['styles'] = $styles_without_existing_global_styles; + } + if ( 'other' === $context ) { // Make sure the styles array exists. // In some contexts, like the navigation editor, it doesn't. From 899168b4720fe2c44536c5cc3b7931f45db14a51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 8 Apr 2022 14:57:53 +0200 Subject: [PATCH 2/9] Make linter happy --- lib/compat/wordpress-6.0/block-editor-settings.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.0/block-editor-settings.php b/lib/compat/wordpress-6.0/block-editor-settings.php index b4f6dba8367998..79dade85386656 100644 --- a/lib/compat/wordpress-6.0/block-editor-settings.php +++ b/lib/compat/wordpress-6.0/block-editor-settings.php @@ -37,7 +37,7 @@ function_exists( 'gutenberg_is_edit_site_page' ) && // Remove global styles added by core. // This needs to be fixed in core but this will help us in the meanwhile. $styles_without_existing_global_styles = array(); - foreach( $settings['styles'] as $style ) { + foreach ( $settings['styles'] as $style ) { if ( ! isset( $style['__unstableType'] ) || ! in_array( $style['__unstableType'], array( 'globalStyles', 'presets' ), true ) From 13bc91db26c0bcc4a2cbbd533f9e1a231eca8bd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Apr 2022 14:15:21 +0200 Subject: [PATCH 3/9] Remove all GS coming from core and mark the new GS with isGlobalStyles --- .../wordpress-6.0/block-editor-settings.php | 88 +++++++++---------- 1 file changed, 43 insertions(+), 45 deletions(-) diff --git a/lib/compat/wordpress-6.0/block-editor-settings.php b/lib/compat/wordpress-6.0/block-editor-settings.php index 79dade85386656..1f035e67525c60 100644 --- a/lib/compat/wordpress-6.0/block-editor-settings.php +++ b/lib/compat/wordpress-6.0/block-editor-settings.php @@ -5,6 +5,37 @@ * @package gutenberg */ +function gutenberg_is_global_styles_in_5_8( $style ) { + if ( isset( $style['__unstableType'] ) && ( 'globalStyles' === $style['__unstableType'] ) ) { + return true; + } + + return false; +} + +function gutenberg_is_global_styles_in_5_9( $style ) { + /* + * In WordPress 5.9 we don't have a mechanism to distinguish block styles generated via theme.json + * from styles that come from the stylesheet of a theme. + * + * We do know that the block styles generated via theme.json have some rules for alignment. + * Hence, by detecting the presence of these rules, we can tell with high certainty + * whether or not the incoming $style has been generated from theme.json. + */ + $root_styles = '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }'; + $root_styles .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; + $root_styles .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + + if( + ( isset( $style['__unstableType'] ) && ( 'presets' === $style['__unstableType'] ) ) || + ( isset( $style['__unstableType'] ) && ( 'theme' === $style['__unstableType'] ) && str_contains( $style['css'], $root_styles ) ) + ) { + return true; + } + + return false; +} + /** * Adds styles and __experimentalFeatures to the block editor settings. * @@ -15,15 +46,6 @@ function gutenberg_get_block_editor_settings( $settings ) { // Set what is the context for this data request. $context = 'other'; - if ( - is_callable( 'get_current_screen' ) && - function_exists( 'gutenberg_is_edit_site_page' ) && - is_object( get_current_screen() ) && - gutenberg_is_edit_site_page( get_current_screen()->id ) - ) { - $context = 'site-editor'; - } - if ( defined( 'REST_REQUEST' ) && REST_REQUEST && @@ -33,65 +55,40 @@ function_exists( 'gutenberg_is_edit_site_page' ) && $context = 'mobile'; } - if ( 'site-editor' === $context ) { - // Remove global styles added by core. - // This needs to be fixed in core but this will help us in the meanwhile. - $styles_without_existing_global_styles = array(); - foreach ( $settings['styles'] as $style ) { - if ( - ! isset( $style['__unstableType'] ) || - ! in_array( $style['__unstableType'], array( 'globalStyles', 'presets' ), true ) - ) { - $styles_without_existing_global_styles[] = $style; - } - } - $settings['styles'] = $styles_without_existing_global_styles; - } - if ( 'other' === $context ) { + global $wp_version; + $is_wp_5_8 = version_compare( $wp_version, '5.8', '>=' ) && version_compare( $wp_version, '5.9', '<' ); + $is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0', '<' ); + // Make sure the styles array exists. // In some contexts, like the navigation editor, it doesn't. if ( ! isset( $settings['styles'] ) ) { $settings['styles'] = array(); } + // Remove existing global styles provided by core. $styles_without_existing_global_styles = array(); foreach ( $settings['styles'] as $style ) { if ( - ! isset( $style['__unstableType'] ) || - // '__unstableType' is 'globalStyles' for WordPress 5.8 and 'presets' for WordPress 5.9. - // - // Note that styles classified as'theme', can be from the theme stylesheet - // or from the theme.json (the styles section). - // We are unable to identify which is which, so we can't remove and recreate those. - // Instead, we reload the theme.json styles from the plugin. - // Because they'll use the same selectors and load later, - // they'll have higher priority than core's. - // - // Theoretically, this approach with 'theme' styles could be problematic: - // if we remove style properties in the plugin, if selectors change, etc. - // We need to address this issue directly in core by alowing to identify - // styles coming from theme.json. - // - // A final note about 'theme' styles: this flag is used to identify theme - // styles that may need to be removed if the user toggles - // "Preferences > Use theme styles" in the preferences modal. - // - ! in_array( $style['__unstableType'], array( 'globalStyles', 'presets' ), true ) + ( $is_wp_5_8 && ! gutenberg_is_global_styles_in_5_8( $style ) ) || + ( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) ) { $styles_without_existing_global_styles[] = $style; } } + // Recreate global styles. $new_global_styles = array(); $presets = array( array( 'css' => 'variables', '__unstableType' => 'presets', + 'isGlobalStyles' => true, ), array( 'css' => 'presets', '__unstableType' => 'presets', + 'isGlobalStyles' => true, ), ); foreach ( $presets as $preset_style ) { @@ -102,10 +99,11 @@ function_exists( 'gutenberg_is_edit_site_page' ) && } } - if ( WP_Theme_JSON_Resolver::theme_has_support() ) { + if ( WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) { $block_classes = array( 'css' => 'styles', '__unstableType' => 'theme', + 'isGlobalStyles' => true, ); $actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) ); if ( '' !== $actual_css ) { From ab03416eccb2039e454fafc7b5581b3e2333a09d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Apr 2022 14:39:24 +0200 Subject: [PATCH 4/9] Make linter happy --- lib/compat/wordpress-6.0/block-editor-settings.php | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.0/block-editor-settings.php b/lib/compat/wordpress-6.0/block-editor-settings.php index 1f035e67525c60..0871beee317e9d 100644 --- a/lib/compat/wordpress-6.0/block-editor-settings.php +++ b/lib/compat/wordpress-6.0/block-editor-settings.php @@ -5,6 +5,12 @@ * @package gutenberg */ +/** + * Returns true if the style is coming from global styles. + * + * @param array $style Array containing a '__unstableType' key. + * @return boolean + */ function gutenberg_is_global_styles_in_5_8( $style ) { if ( isset( $style['__unstableType'] ) && ( 'globalStyles' === $style['__unstableType'] ) ) { return true; @@ -13,6 +19,12 @@ function gutenberg_is_global_styles_in_5_8( $style ) { return false; } +/** + * Returns true if the style is coming from global styles. + * + * @param array $style Array containing a '__unstableType' key and a 'css' key with the actual CSS. + * @return boolean + */ function gutenberg_is_global_styles_in_5_9( $style ) { /* * In WordPress 5.9 we don't have a mechanism to distinguish block styles generated via theme.json @@ -26,7 +38,7 @@ function gutenberg_is_global_styles_in_5_9( $style ) { $root_styles .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; $root_styles .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - if( + if ( ( isset( $style['__unstableType'] ) && ( 'presets' === $style['__unstableType'] ) ) || ( isset( $style['__unstableType'] ) && ( 'theme' === $style['__unstableType'] ) && str_contains( $style['css'], $root_styles ) ) ) { From 1979ad65df289b3b35ed41897827472456a48c41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Apr 2022 14:46:33 +0200 Subject: [PATCH 5/9] Revert changes --- lib/compat/wordpress-6.0/block-editor-settings.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.0/block-editor-settings.php b/lib/compat/wordpress-6.0/block-editor-settings.php index 0871beee317e9d..2f120a0348bf47 100644 --- a/lib/compat/wordpress-6.0/block-editor-settings.php +++ b/lib/compat/wordpress-6.0/block-editor-settings.php @@ -111,7 +111,7 @@ function gutenberg_get_block_editor_settings( $settings ) { } } - if ( WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) { + if ( WP_Theme_JSON_Resolver::theme_has_support() ) { $block_classes = array( 'css' => 'styles', '__unstableType' => 'theme', From fdefca94b5bd0842dfc87a96f4a67b5e5b670497 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Apr 2022 10:41:58 +0200 Subject: [PATCH 6/9] Cover WordPress 6.0 as well --- lib/compat/wordpress-6.0/block-editor-settings.php | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.0/block-editor-settings.php b/lib/compat/wordpress-6.0/block-editor-settings.php index 2f120a0348bf47..d400939b018d23 100644 --- a/lib/compat/wordpress-6.0/block-editor-settings.php +++ b/lib/compat/wordpress-6.0/block-editor-settings.php @@ -71,6 +71,7 @@ function gutenberg_get_block_editor_settings( $settings ) { global $wp_version; $is_wp_5_8 = version_compare( $wp_version, '5.8', '>=' ) && version_compare( $wp_version, '5.9', '<' ); $is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0', '<' ); + $is_wp_6_0 = version_compare( $wp_version, '6.0', '>=' ); // Make sure the styles array exists. // In some contexts, like the navigation editor, it doesn't. @@ -82,8 +83,9 @@ function gutenberg_get_block_editor_settings( $settings ) { $styles_without_existing_global_styles = array(); foreach ( $settings['styles'] as $style ) { if ( - ( $is_wp_5_8 && ! gutenberg_is_global_styles_in_5_8( $style ) ) || - ( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) + ( $is_wp_5_8 && ! gutenberg_is_global_styles_in_5_8( $style ) ) || // Can be removed when plugin minimum version is 5.9. + ( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) || // Can be removed when plugin minimum version is 6.0. + ( $is_wp_6_0 && ( ! isset( $style['isGlobalStyles'] ) || ! $style['isGlobalStyles'] ) ) ) { $styles_without_existing_global_styles[] = $style; } From c2c8468c7df7f93c76618ee2cd213dcecab4b87c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Apr 2022 11:19:23 +0200 Subject: [PATCH 7/9] Consider 6.0 from beta1 so we can test this properly --- lib/compat/wordpress-6.0/block-editor-settings.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.0/block-editor-settings.php b/lib/compat/wordpress-6.0/block-editor-settings.php index d400939b018d23..e76f6a40a6230a 100644 --- a/lib/compat/wordpress-6.0/block-editor-settings.php +++ b/lib/compat/wordpress-6.0/block-editor-settings.php @@ -70,8 +70,8 @@ function gutenberg_get_block_editor_settings( $settings ) { if ( 'other' === $context ) { global $wp_version; $is_wp_5_8 = version_compare( $wp_version, '5.8', '>=' ) && version_compare( $wp_version, '5.9', '<' ); - $is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0', '<' ); - $is_wp_6_0 = version_compare( $wp_version, '6.0', '>=' ); + $is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0-beta1', '<' ); + $is_wp_6_0 = version_compare( $wp_version, '6.0-beta1', '>=' ); // Make sure the styles array exists. // In some contexts, like the navigation editor, it doesn't. From 6e56da2dbc565ffabc21ccf6c29f83f1bc49d9b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Apr 2022 13:43:33 +0200 Subject: [PATCH 8/9] Add missing align/layout rules in the client --- .../global-styles/use-global-styles-output.js | 48 +++++++++++++++---- 1 file changed, 39 insertions(+), 9 deletions(-) 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 72ed5a5afe32e4..25082d89f3e1b8 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 @@ -25,15 +25,12 @@ import { import { useEffect, useState, useContext } from '@wordpress/element'; import { getCSSRules } from '@wordpress/style-engine'; -/** - * Internal dependencies - */ - /** * Internal dependencies */ import { PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils'; import { GlobalStylesContext } from './context'; +import { useSetting } from './hooks'; function compileStyleValue( uncompiledValue ) { const VARIABLE_REFERENCE_PREFIX = 'var:'; @@ -329,12 +326,19 @@ export const toCustomProperties = ( tree, blockSelectors ) => { return ruleset; }; -export const toStyles = ( tree, blockSelectors ) => { +export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => { const nodesWithStyles = getNodesWithStyles( tree, blockSelectors ); const nodesWithSettings = getNodesWithSettings( tree, blockSelectors ); - let ruleset = - '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + /* + * Reset default browser margin on the root body element. + * This is set on the root selector **before** generating the ruleset + * from the `theme.json`. This is to ensure that if the `theme.json` declares + * `margin` in its `spacing` declaration for the `body` element then these + * user-generated values take precedence in the CSS cascade. + * @link https://github.com/WordPress/gutenberg/issues/36147. + */ + let ruleset = 'body {margin: 0;}'; nodesWithStyles.forEach( ( { selector, styles } ) => { const declarations = getStylesDeclarations( styles ); if ( declarations.length === 0 ) { @@ -343,6 +347,26 @@ export const toStyles = ( tree, blockSelectors ) => { ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`; } ); + /* Add alignment / layout styles */ + ruleset = + ruleset + + '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }'; + ruleset = + ruleset + + '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; + ruleset = + ruleset + + '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + + if ( hasBlockGapSupport ) { + ruleset = + ruleset + + '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }'; + ruleset = + ruleset + + '.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }'; + } + nodesWithSettings.forEach( ( { selector, presets } ) => { if ( ROOT_BLOCK_SELECTOR === selector ) { // Do not add extra specificity for top-level classes. @@ -378,6 +402,8 @@ export function useGlobalStylesOutput() { const [ stylesheets, setStylesheets ] = useState( [] ); const [ settings, setSettings ] = useState( {} ); const { merged: mergedConfig } = useContext( GlobalStylesContext ); + const [ blockGap ] = useSetting( 'spacing.blockGap' ); + const hasBlockGapSupport = blockGap !== null; useEffect( () => { if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) { @@ -389,7 +415,11 @@ export function useGlobalStylesOutput() { mergedConfig, blockSelectors ); - const globalStyles = toStyles( mergedConfig, blockSelectors ); + const globalStyles = toStyles( + mergedConfig, + blockSelectors, + hasBlockGapSupport + ); setStylesheets( [ { css: customProperties, @@ -403,5 +433,5 @@ export function useGlobalStylesOutput() { setSettings( mergedConfig.settings ); }, [ mergedConfig ] ); - return [ stylesheets, settings ]; + return [ stylesheets, settings, hasBlockGapSupport ]; } From 6002452dfc3f21c9f54f09ba234dc7661f06f363 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Apr 2022 14:50:58 +0200 Subject: [PATCH 9/9] Update unit tests for toStyle --- .../global-styles/test/use-global-styles-output.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js index 5d1c45af104a71..d105ad7a673936 100644 --- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js @@ -377,7 +377,10 @@ describe( 'global styles renderer', () => { }; expect( toStyles( tree, blockSelectors ) ).toEqual( - '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' + 'body {margin: 0;}' + + 'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}' + + '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' + + '.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' ); } ); } );