From eac7bbd47c55578c2e4ca6ae87ac7c8e8bd72354 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 14 Apr 2022 16:30:19 +1200 Subject: [PATCH 01/12] Use a var for user presets to avoid having to use ! important to enforce them --- lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php | 6 +++--- packages/block-library/src/group/style.scss | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php index 19b8611df0a4d5..7ac5702b5ce241 100644 --- a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php +++ b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php @@ -948,8 +948,8 @@ protected static function compute_preset_classes( $settings, $selector, $origins static::append_to_selector( $selector, $class_name ), array( array( - 'name' => $property, - 'value' => 'var(' . $css_var . ') !important', + 'name' => '--wp--user--preset--' . $property, + 'value' => 'var(' . $css_var . ')', ), ) ); @@ -1263,7 +1263,7 @@ protected static function compute_style_properties( $styles, $settings = array() $declarations[] = array( 'name' => $css_property, - 'value' => $value, + 'value' => 'var(--wp--user--preset--' . $css_property . ',' . $value . ')', ); } diff --git a/packages/block-library/src/group/style.scss b/packages/block-library/src/group/style.scss index 3457a12adb6221..1a0f40aa60828f 100644 --- a/packages/block-library/src/group/style.scss +++ b/packages/block-library/src/group/style.scss @@ -1,4 +1,6 @@ .wp-block-group { // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; + background-color: var(--wp-user-preset-background-color); + color: var(--wp-user-preset-color); } From a85b9bb03f2f75f852769b6c69e0cef3607dc094 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 14 Apr 2022 17:03:58 +1200 Subject: [PATCH 02/12] Declare the standard properties as well as vars to avoid having to declare them at block level --- lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php | 4 ++++ packages/block-library/src/group/style.scss | 2 -- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php index 7ac5702b5ce241..59e90e41640c03 100644 --- a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php +++ b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php @@ -951,6 +951,10 @@ protected static function compute_preset_classes( $settings, $selector, $origins 'name' => '--wp--user--preset--' . $property, 'value' => 'var(' . $css_var . ')', ), + array( + 'name' => $property, + 'value' => 'var(' . $css_var . ')', + ), ) ); } diff --git a/packages/block-library/src/group/style.scss b/packages/block-library/src/group/style.scss index 1a0f40aa60828f..3457a12adb6221 100644 --- a/packages/block-library/src/group/style.scss +++ b/packages/block-library/src/group/style.scss @@ -1,6 +1,4 @@ .wp-block-group { // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; - background-color: var(--wp-user-preset-background-color); - color: var(--wp-user-preset-color); } From aa5d11fb13f4eca380fa79de87ed1c63d49b9f82 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 19 Apr 2022 10:24:12 +1200 Subject: [PATCH 03/12] Move from 5.9 to 6.0 compat --- .../wordpress-5.9/class-wp-theme-json-5-9.php | 8 +- .../wordpress-6.0/class-wp-theme-json-6-0.php | 95 +++++++++++++++++++ packages/block-library/src/common.scss | 11 +++ 3 files changed, 108 insertions(+), 6 deletions(-) diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php index 59e90e41640c03..19b8611df0a4d5 100644 --- a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php +++ b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php @@ -947,13 +947,9 @@ protected static function compute_preset_classes( $settings, $selector, $origins $stylesheet .= static::to_ruleset( static::append_to_selector( $selector, $class_name ), array( - array( - 'name' => '--wp--user--preset--' . $property, - 'value' => 'var(' . $css_var . ')', - ), array( 'name' => $property, - 'value' => 'var(' . $css_var . ')', + 'value' => 'var(' . $css_var . ') !important', ), ) ); @@ -1267,7 +1263,7 @@ protected static function compute_style_properties( $styles, $settings = array() $declarations[] = array( 'name' => $css_property, - 'value' => 'var(--wp--user--preset--' . $css_property . ',' . $value . ')', + 'value' => $value, ); } diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php index 1a0945b1754223..e4bd8e3634da14 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php @@ -677,4 +677,99 @@ protected static function do_opt_in_into_settings( &$context ) { unset( $context['appearanceTools'] ); } + + /** + * Given a settings array, it returns the generated rulesets + * for the preset classes. + * + * @param array $settings Settings to process. + * @param string $selector Selector wrapping the classes. + * @param array $origins List of origins to process. + * @return string The result of processing the presets. + */ + protected static function compute_preset_classes( $settings, $selector, $origins ) { + if ( static::ROOT_BLOCK_SELECTOR === $selector ) { + // Classes at the global level do not need any CSS prefixed, + // and we don't want to increase its specificity. + $selector = ''; + } + + $stylesheet = ''; + foreach ( static::PRESETS_METADATA as $preset_metadata ) { + $slugs = static::get_settings_slugs( $settings, $preset_metadata, $origins ); + foreach ( $preset_metadata['classes'] as $class => $property ) { + foreach ( $slugs as $slug ) { + $css_var = static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ); + $class_name = static::replace_slug_in_string( $class, $slug ); + $stylesheet .= static::to_ruleset( + static::append_to_selector( $selector, $class_name ), + array( + array( + 'name' => '--wp--user--preset--' . $property, + 'value' => 'var(' . $css_var . ')', + ), + ) + ); + } + } + } + + return $stylesheet; + } + + /** + * Given a styles array, it extracts the style properties + * and adds them to the $declarations array following the format: + * + * ```php + * array( + * 'name' => 'property_name', + * 'value' => 'property_value, + * ) + * ``` + * + * @param array $styles Styles to process. + * @param array $settings Theme settings. + * @param array $properties Properties metadata. + * @return array Returns the modified $declarations. + */ + protected static function compute_style_properties( $styles, $settings = array(), $properties = null ) { + if ( null === $properties ) { + $properties = static::PROPERTIES_METADATA; + } + + $declarations = array(); + if ( empty( $styles ) ) { + return $declarations; + } + + foreach ( $properties as $css_property => $value_path ) { + $value = static::get_property_value( $styles, $value_path ); + + // Look up protected properties, keyed by value path. + // Skip protected properties that are explicitly set to `null`. + if ( is_array( $value_path ) ) { + $path_string = implode( '.', $value_path ); + if ( + array_key_exists( $path_string, static::PROTECTED_PROPERTIES ) && + _wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null + ) { + continue; + } + } + + // Skip if empty and not "0" or value represents array of longhand values. + $has_missing_value = empty( $value ) && ! is_numeric( $value ); + if ( $has_missing_value || is_array( $value ) ) { + continue; + } + + $declarations[] = array( + 'name' => $css_property, + 'value' => 'var(--wp--user--preset--' . $css_property . ',' . $value . ')', + ); + } + + return $declarations; + } } diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index 5819a43c93ed52..ae96ca47590ef5 100644 --- a/packages/block-library/src/common.scss +++ b/packages/block-library/src/common.scss @@ -152,3 +152,14 @@ html :where(img[class*="wp-image-"]) { height: auto; max-width: 100%; } + +/** + * Provide default colors if user presets applied to block. + */ +.has-background { + background-color: var(--wp--user--preset--background-color); +} + +.has-text-color { + color: var(--wp--user--preset--color); +} From 4094d69b587cbdc335e3e6a3ef9fe09784489a58 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 19 Apr 2022 16:11:09 +1200 Subject: [PATCH 04/12] Add the css property declarations back for anything other that color and background-color as only they have generic .has-color and .has-background class to declare these in --- .../wordpress-6.0/class-wp-theme-json-6-0.php | 38 +++++++++++++------ 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php index e4bd8e3634da14..0f3bbba163118d 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php @@ -699,17 +699,33 @@ protected static function compute_preset_classes( $settings, $selector, $origins $slugs = static::get_settings_slugs( $settings, $preset_metadata, $origins ); foreach ( $preset_metadata['classes'] as $class => $property ) { foreach ( $slugs as $slug ) { - $css_var = static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ); - $class_name = static::replace_slug_in_string( $class, $slug ); - $stylesheet .= static::to_ruleset( - static::append_to_selector( $selector, $class_name ), - array( + $css_var = static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ); + $class_name = static::replace_slug_in_string( $class, $slug ); + if ( ( ! str_contains( $class_name, '-color' ) && ! str_contains( $class_name, '-background' ) ) || str_contains( $class_name, '-gradient-background' ) ) { + $stylesheet .= static::to_ruleset( + static::append_to_selector( $selector, $class_name ), array( - 'name' => '--wp--user--preset--' . $property, - 'value' => 'var(' . $css_var . ')', - ), - ) - ); + array( + 'name' => '--wp--user--preset--' . $property, + 'value' => 'var(' . $css_var . ')', + ), + array( + 'name' => $property, + 'value' => 'var(' . $css_var . ')', + ), + ) + ); + } else { + $stylesheet .= static::to_ruleset( + static::append_to_selector( $selector, $class_name ), + array( + array( + 'name' => '--wp--user--preset--' . $property, + 'value' => 'var(' . $css_var . ')', + ), + ) + ); + } } } } @@ -717,7 +733,7 @@ protected static function compute_preset_classes( $settings, $selector, $origins return $stylesheet; } - /** + /** * Given a styles array, it extracts the style properties * and adds them to the $declarations array following the format: * From d001b4d7fa34164e10c21b0e18770f4a88e41e7f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 19 Apr 2022 17:19:49 +1200 Subject: [PATCH 05/12] Load the user presets separately so they can be enqueued after the theme stylesheets --- lib/compat/wordpress-5.9/script-loader.php | 13 +++++ .../wordpress-6.0/class-wp-theme-json-6-0.php | 49 +++++++++++++++++++ .../get-global-styles-and-settings.php | 4 +- 3 files changed, 64 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-5.9/script-loader.php b/lib/compat/wordpress-5.9/script-loader.php index fc3eb95454e994..1fedb83b99af4c 100644 --- a/lib/compat/wordpress-5.9/script-loader.php +++ b/lib/compat/wordpress-5.9/script-loader.php @@ -47,6 +47,19 @@ function gutenberg_enqueue_global_styles_assets() { add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_assets' ); add_action( 'wp_footer', 'gutenberg_enqueue_global_styles_assets' ); +/** + * Load the user preset styles separately with lower priority to they will be more + * likely to load after any theme css that they need to override. + */ +function gutenberg_enqueue_user_preset_styles() { + $presets_stylesheet = gutenberg_get_global_stylesheet( array( 'presets' ) ); + + wp_register_style( 'use-preset-styles', false, array(), true, true ); + wp_add_inline_style( 'use-preset-styles', '.has-background { background-color: var(--wp--user--preset--background-color);} .has-text-color {color: var(--wp--user--preset--color);}' . $presets_stylesheet ); + wp_enqueue_style( 'use-preset-styles' ); +} +add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_user_preset_styles', 100 ); + /** * This function takes care of adding inline styles * in the proper place, depending on the theme in use. diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php index 0f3bbba163118d..cf7348a0f78ced 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php @@ -788,4 +788,53 @@ protected static function compute_style_properties( $styles, $settings = array() return $declarations; } + + /** + * Returns the stylesheet that results of processing + * the theme.json structure this object represents. + * + * @param array $types Types of styles to load. Will load all by default. It accepts: + * 'variables': only the CSS Custom Properties for presets & custom ones. + * 'styles': only the styles section in theme.json. + * 'presets': only the classes for the presets. + * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS. + * @return string Stylesheet. + */ + public function get_stylesheet( $types = array( 'variables', 'styles' ), $origins = null ) { + if ( null === $origins ) { + $origins = static::VALID_ORIGINS; + } + + if ( is_string( $types ) ) { + // Dispatch error and map old arguments to new ones. + _deprecated_argument( __FUNCTION__, '5.9' ); + if ( 'block_styles' === $types ) { + $types = array( 'styles', 'presets' ); + } elseif ( 'css_variables' === $types ) { + $types = array( 'variables' ); + } else { + $types = array( 'variables', 'styles', 'presets' ); + } + } + + $blocks_metadata = static::get_blocks_metadata(); + $style_nodes = static::get_style_nodes( $this->theme_json, $blocks_metadata ); + $setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata ); + + $stylesheet = ''; + + if ( in_array( 'variables', $types, true ) ) { + $stylesheet .= $this->get_css_variables( $setting_nodes, $origins ); + } + + if ( in_array( 'styles', $types, true ) ) { + $stylesheet .= $this->get_block_classes( $style_nodes ); + } + + if ( in_array( 'presets', $types, true ) ) { + $stylesheet .= $this->get_preset_classes( $setting_nodes, $origins ); + } + + return $stylesheet; + } } diff --git a/lib/compat/wordpress-6.0/get-global-styles-and-settings.php b/lib/compat/wordpress-6.0/get-global-styles-and-settings.php index bb8819ec2ef257..ec3ea8be166ae1 100644 --- a/lib/compat/wordpress-6.0/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.0/get-global-styles-and-settings.php @@ -93,9 +93,9 @@ function gutenberg_get_global_stylesheet( $types = array() ) { $tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data(); $supports_theme_json = WP_Theme_JSON_Resolver_Gutenberg::theme_has_support(); if ( empty( $types ) && ! $supports_theme_json ) { - $types = array( 'variables', 'presets' ); + $types = array( 'variables' ); } elseif ( empty( $types ) ) { - $types = array( 'variables', 'styles', 'presets' ); + $types = array( 'variables', 'styles' ); } /* From c0e0c9f3689e651842eb7bef65979a67b938630e Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 19 Apr 2022 17:22:07 +1200 Subject: [PATCH 06/12] removed presets from common.scss --- packages/block-library/src/common.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index ae96ca47590ef5..66230002416395 100644 --- a/packages/block-library/src/common.scss +++ b/packages/block-library/src/common.scss @@ -153,13 +153,3 @@ html :where(img[class*="wp-image-"]) { max-width: 100%; } -/** - * Provide default colors if user presets applied to block. - */ -.has-background { - background-color: var(--wp--user--preset--background-color); -} - -.has-text-color { - color: var(--wp--user--preset--color); -} From 33cc9c4521d329c3a686b2d41d8bf4716119c32a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 19 Apr 2022 17:23:04 +1200 Subject: [PATCH 07/12] Remove empty line --- packages/block-library/src/common.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index 66230002416395..5819a43c93ed52 100644 --- a/packages/block-library/src/common.scss +++ b/packages/block-library/src/common.scss @@ -152,4 +152,3 @@ html :where(img[class*="wp-image-"]) { height: auto; max-width: 100%; } - From f30a53cd3f668b2f76b0bec2d1dabfaaf9990506 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Apr 2022 12:29:41 +1200 Subject: [PATCH 08/12] Move script loader to compat folder --- lib/compat/wordpress-5.9/script-loader.php | 13 ------------- lib/compat/wordpress-6.0/script-loader.php | 14 ++++++++++++++ lib/load.php | 1 + 3 files changed, 15 insertions(+), 13 deletions(-) create mode 100644 lib/compat/wordpress-6.0/script-loader.php diff --git a/lib/compat/wordpress-5.9/script-loader.php b/lib/compat/wordpress-5.9/script-loader.php index 1fedb83b99af4c..fc3eb95454e994 100644 --- a/lib/compat/wordpress-5.9/script-loader.php +++ b/lib/compat/wordpress-5.9/script-loader.php @@ -47,19 +47,6 @@ function gutenberg_enqueue_global_styles_assets() { add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_assets' ); add_action( 'wp_footer', 'gutenberg_enqueue_global_styles_assets' ); -/** - * Load the user preset styles separately with lower priority to they will be more - * likely to load after any theme css that they need to override. - */ -function gutenberg_enqueue_user_preset_styles() { - $presets_stylesheet = gutenberg_get_global_stylesheet( array( 'presets' ) ); - - wp_register_style( 'use-preset-styles', false, array(), true, true ); - wp_add_inline_style( 'use-preset-styles', '.has-background { background-color: var(--wp--user--preset--background-color);} .has-text-color {color: var(--wp--user--preset--color);}' . $presets_stylesheet ); - wp_enqueue_style( 'use-preset-styles' ); -} -add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_user_preset_styles', 100 ); - /** * This function takes care of adding inline styles * in the proper place, depending on the theme in use. diff --git a/lib/compat/wordpress-6.0/script-loader.php b/lib/compat/wordpress-6.0/script-loader.php new file mode 100644 index 00000000000000..4f62c6451e64f9 --- /dev/null +++ b/lib/compat/wordpress-6.0/script-loader.php @@ -0,0 +1,14 @@ + Date: Thu, 21 Apr 2022 11:19:12 +1200 Subject: [PATCH 09/12] Add user preset background color css var to Cover block as it doesn't use the .has-background class --- packages/block-library/src/cover/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 8e137633f4e358..2bfdfc0b65e927 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -50,6 +50,10 @@ background-color: $black; } + [class*="-background-color"] { + background-color: var(--wp--user--preset--background-color); + } + .has-background-dim.has-background-gradient { background-color: transparent; } From 874cc1e5bcb5f31afc7043aa2672f7a7e1fe0514 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Apr 2022 12:00:36 +1200 Subject: [PATCH 10/12] If css property is background append -color to css var --- lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php index cf7348a0f78ced..ab232e26d3b01d 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php @@ -780,9 +780,13 @@ protected static function compute_style_properties( $styles, $settings = array() continue; } + $user_preset_var = 'background' === $css_property + ? '--wp--user--preset--' . $css_property . '-color' + : '--wp--user--preset--' . $css_property; + $declarations[] = array( 'name' => $css_property, - 'value' => 'var(--wp--user--preset--' . $css_property . ',' . $value . ')', + 'value' => 'var(' . $user_preset_var . ',' . $value . ')', ); } From 40cf176e1ab18b6216a2331cdfeeb97013028cb8 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 22 Apr 2022 15:22:50 +1200 Subject: [PATCH 11/12] Change var usage to use user preset var in both custom property declaration, and in the application to the given property to avoid confusion --- lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php index ab232e26d3b01d..5cc1c60609f4fb 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php @@ -711,7 +711,7 @@ protected static function compute_preset_classes( $settings, $selector, $origins ), array( 'name' => $property, - 'value' => 'var(' . $css_var . ')', + 'value' => 'var(--wp--user--preset--' . $property . ')', ), ) ); From 38a5047cb89a6fe1586600d110528c29402356a6 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 4 May 2022 14:57:55 +1200 Subject: [PATCH 12/12] Move the .has-background class definitions to static css, and combine gradients to reduce css by approx 6kb --- lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php | 6 +++++- lib/compat/wordpress-6.0/script-loader.php | 2 +- packages/block-library/src/common.scss | 8 ++++++++ 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php index 5cc1c60609f4fb..56ca456df7acc1 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php @@ -701,7 +701,7 @@ protected static function compute_preset_classes( $settings, $selector, $origins foreach ( $slugs as $slug ) { $css_var = static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ); $class_name = static::replace_slug_in_string( $class, $slug ); - if ( ( ! str_contains( $class_name, '-color' ) && ! str_contains( $class_name, '-background' ) ) || str_contains( $class_name, '-gradient-background' ) ) { + if ( ! str_contains( $class_name, '-color' ) && ! str_contains( $class_name, '-background' ) ) { $stylesheet .= static::to_ruleset( static::append_to_selector( $selector, $class_name ), array( @@ -716,6 +716,10 @@ protected static function compute_preset_classes( $settings, $selector, $origins ) ); } else { + if ( str_contains( $class_name, '-gradient-background' ) ) { + $property = 'background-color'; + } + $stylesheet .= static::to_ruleset( static::append_to_selector( $selector, $class_name ), array( diff --git a/lib/compat/wordpress-6.0/script-loader.php b/lib/compat/wordpress-6.0/script-loader.php index 4f62c6451e64f9..08801a9d9fce01 100644 --- a/lib/compat/wordpress-6.0/script-loader.php +++ b/lib/compat/wordpress-6.0/script-loader.php @@ -8,7 +8,7 @@ function gutenberg_enqueue_user_preset_styles() { $presets_stylesheet = gutenberg_get_global_stylesheet( array( 'presets' ) ); wp_register_style( 'use-preset-styles', false, array(), true, true ); - wp_add_inline_style( 'use-preset-styles', '.has-background { background-color: var(--wp--user--preset--background-color);} .has-text-color {color: var(--wp--user--preset--color);}' . $presets_stylesheet ); + wp_add_inline_style( 'use-preset-styles', $presets_stylesheet ); wp_enqueue_style( 'use-preset-styles' ); } add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_user_preset_styles', 100 ); diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index 5819a43c93ed52..83facb1ff67b1e 100644 --- a/packages/block-library/src/common.scss +++ b/packages/block-library/src/common.scss @@ -44,6 +44,14 @@ text-align: right; } +.has-background { + background: var(--wp--user--preset--background-color); +} + +.has-text-color { + color: var(--wp--user--preset--color); +} + // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. #end-resizable-editor-section { display: none;