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 #37885

Merged
merged 1 commit into from
Jan 12, 2022

Conversation

oandregal
Copy link
Member

@oandregal oandregal commented Jan 11, 2022

Fixes #37839
Related core patch WordPress/wordpress-develop#2139

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.

Fixes #37839

This follows what we do in the front-end, where theme
styles are loaded after global styles by default.
@oandregal oandregal self-assigned this Jan 11, 2022
@oandregal oandregal requested review from youknowriad, a team and mcsf and removed request for a team January 11, 2022 15:40
@oandregal oandregal added [Feature] Theme Style Variations Related to style variations provided by block themes Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jan 11, 2022
Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and looks good, thanks @oandregal !

@oandregal oandregal merged commit bea24fb into trunk Jan 12, 2022
@oandregal oandregal deleted the update/load-gs-before-anything branch January 12, 2022 17:02
@github-actions github-actions bot added this to the Gutenberg 12.5 milestone Jan 12, 2022
@oandregal oandregal added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Feb 17, 2022
@oandregal
Copy link
Member Author

Marking this to backport as there's a ticket https://core.trac.wordpress.org/ticket/55188 and core patch ready WordPress/wordpress-develop#2139

@Mamaduka Mamaduka removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Mar 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Theme Style Variations Related to style variations provided by block themes Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Load theme.json CSS before add_editor_style() CSS
3 participants