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

Fix: Global styles for non-core blocks aren't loaded on the front end #44053

Closed
wants to merge 1 commit into from

Conversation

t-hamano
Copy link
Contributor

@t-hamano t-hamano commented Sep 11, 2022

Fix #43679

What?

This PR fixes that global styles for non-core blocks aren't loaded on the front end,

Why?

I think this is due to the fact that non-core blocks were excluded in wp_add_global_styles_for_blocks.

How?

I have applied the logic of script handle generation in the WordPress core.
This will ensure that global styles for non-core blocks and global styles for the elements property of non-core blocks are output correctly.

Testing Instructions

  • Checkout this branch and build gutenberg.
  • run npx @wordpress/create-block gutenpride outside gutenberg repository.
  • Define the following in .wp-env.override.json.
{
	"plugins": [ ".", "../path/to/gutenpride" ],
}
  • run npm run wp-env start -- --update
  • Activate Gutenpride plugin.
  • Activate the emptytheme and put the following code in theme.json.
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"styles": {
		"blocks": {
			"create-block/gutenpride": {
				"border": {
					"width": "3px",
					"color": "#f00",
					"style": "solid"
				},
				"color": {
					"text": "#fff",
					"background": "#000"
				},
				"elements": {
					"button": {
						"color": {
							"text": "#fff"
						}
					}
				}
			}
		}
	}
}
  • Open the post editor.
  • Insert the Gutenpride block and confirm that the style is applied.

Global styles should be output via the block handle on the front-end

  • Confirm that the global style is generated inside the block handle (create-block-gutenpride-style-inline-css) on the front end.

handle

Global styles should be output via the global-styles handle on the front-end

  • Add add_filter( 'should_load_separate_core_block_assets', '__return_false' ); in functions.php.
  • Confirm that the global style is generated inside the global handle (global-styles-inline-css) on the front end.

global

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Sep 11, 2022
@t-hamano t-hamano self-assigned this Sep 11, 2022
@@ -33,16 +45,23 @@ function wp_add_global_styles_for_blocks() {
array_filter(
$metadata['path'],
function ( $item ) {
if ( str_contains( $item, 'core/' ) ) {
if ( str_contains( $item, '/' ) ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think to check only slashes is the only way to include non-core blocks, is there a better approach?

@t-hamano
Copy link
Contributor Author

The GitHub action failing will be resolved if #44052 is merged.

@scruffian
Copy link
Contributor

I did something very similar here! #44018

@t-hamano
Copy link
Contributor Author

Sorry, I should have checked my past PRs.
I would like to close this PR.

@t-hamano t-hamano closed this Sep 11, 2022
@scruffian scruffian deleted the fix/global-styles-non-core-block branch September 12, 2022 08:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Custom Block, theme.json definitions not loaded with latest RC Gutenberg Plugin
2 participants