Move the .has-background class definitions to static css, and combine…

… gradients to reduce css by approx 6kb
WordPress · May 20, 2022 · 38a5047 · 38a5047
1 parent 40cf176
commit 38a5047
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 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
@@ -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
@@ -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
@@ -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;