Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load the global styles before the theme styles in the editor #2139

Closed
wants to merge 1 commit into from
Closed

Load the global styles before the theme styles in the editor #2139

wants to merge 1 commit into from

Conversation

oandregal
Copy link
Member

@oandregal oandregal commented Jan 11, 2022

Fixes https://core.trac.wordpress.org/ticket/55188
Related Gutenberg PR WordPress/gutenberg#37885

This follows what we do in the front-end, where theme styles are loaded after global styles by default.

How to test

  • Use empty theme and apply the patch below via git apply <file.patch>:
Patch for empty theme

diff --git a/emptytheme/functions.php b/emptytheme/functions.php
index 5ee5593..a50baf4 100644
--- a/emptytheme/functions.php
+++ b/emptytheme/functions.php
@@ -6,8 +6,17 @@ if ( ! function_exists( 'emptytheme_support' ) ) :
 		// Adding support for core block visual styles.
 		add_theme_support( 'wp-block-styles' );
 
+		register_block_style(
+			'core/group',
+			array(
+				'name'  => 'background-color-hotpink',
+				'label' => 'BG Hotpink'
+			)
+		);
+
 		// Enqueue editor styles.
 		add_editor_style( 'style.css' );
+
 	}
 	add_action( 'after_setup_theme', 'emptytheme_support' );
 endif;
diff --git a/emptytheme/style.css b/emptytheme/style.css
index c10d92f..0dc53b7 100644
--- a/emptytheme/style.css
+++ b/emptytheme/style.css
@@ -14,3 +14,6 @@ Text Domain: emptytheme
 Emptytheme WordPress Theme, (C) 2021 WordPress.org
 Emptytheme is distributed under the terms of the GNU GPL.
 */
+.is-style-background-color-hotpink {
+    background-color: hotpink;
+}
\ No newline at end of file
diff --git a/emptytheme/theme.json b/emptytheme/theme.json
index 46b0979..1925b81 100644
--- a/emptytheme/theme.json
+++ b/emptytheme/theme.json
@@ -6,5 +6,14 @@
 			"contentSize": "840px",
 			"wideSize": "1100px"
 		}
+	},
+	"styles": {
+		"blocks": {
+			"core/group": {
+				"color": {
+					"background": "green"
+				}
+			}
+		}
 	}
 }

  • Go to the editor and create a group block. Verify background color of the block is green.
  • Go to the block sidebar and select the "BG Hotpink" style. Verify the background color of the block is now hotpink.

This follows what we do in the front-end, where theme
styles are loaded after global styles by default.
@oandregal
Copy link
Member Author

I see this has been commited to trunk and backported to 5.9. https://core.trac.wordpress.org/ticket/55188 is now closed, so I'm closing this one as well.

@oandregal oandregal closed this Feb 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant