Global styles doesn't apply on blocks that not belong to Gutenberg (e.g: WC Blocks)

[gigitux]

Description

With the new Gutenberg versions (from 13.0) the Global Styles for WC Blocks plugin doesn’t apply anymore. It seems that the PR that introduce this bug is #39559: in particular, this change.

Step-by-step reproduction instructions

1. Install WooCommerce.
2. Open the FSE Editor.
3. Add a WC Blocks (e.g: Feature Product Block).
4. Customize the global styles related to the block.
5. Save.
6. Notice that the Global Styles is not saved.

Screenshots, screen recording, code snippet

Environment info

• WordPress 5.9, Gutenberg trunk version, Twenty Twenty-Two

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Aljullu]

@gziolo did you have time to look into this? We might spend some time next week investigating this with more detail, but wondering if some Gutenberg devs could give it a try as well to help diagnose if the issue is in our end or in Gutenberg.

[gziolo]

@Aljullu, I didn't have a chance to look into it. Is it also an issue with WordPress 6.0 RC4 without the Gutenberg plugin? There is different handling for webfonts being shipped in WordPress core so it would be great to clarify what the actual issue is happening.

It seems that the PR that introduce this bug is #39559: in particular, this change.

Making sure I understood it correctly. The issue applies only to webfonts?

[gigitux]

@Aljullu, I didn't have a chance to look into it. Is it also an issue with WordPress 6.0 RC4 without the Gutenberg plugin? There is different handling for webfonts being shipped in WordPress core so it would be great to clarify what the actual issue is happening.

No, I'm not able to replicate it with WordPress 6.0 RC4 without the Gutenberg plugin. With WordPress 6.0 RC4 and Gutenberg plugin, I'm able to replicate it.

Making sure I understood it correctly. The issue applies only to webfonts?

No, the issue is for all the Global Styles.

[oandregal]

Hi @gigitux I've reviewed this using the featured product block in WordPress 5.9 and 6.0 and I wasn't able to make it work in any version (tested frontend, post editor, and site editor: none worked). Plugins: latest WooCommerce but without Gutenberg.

This is what I've found:

• the global styles are correctly generated for all blocks in both versions, including the featured product block. The class generated for that block is wp-block-woocommerce-featured-product.
• Though the block uses the wc-block-featured-product class instead.

So the issue is that the class generated by global styles is not the one the block uses. The way to fix it is by reconciliating them. One way is to update the class in use by the block. The other way is to tell Global Styles to use a different class than the default it generates, this is how it can be done:

• the block needs to have a block.json
• use the __experimentalSelector key with the selector it wants (wc-block-featured-product in this case)
• be registered in the server so this information is readily available for the styles engine to use

I'm going to close this issue as it's part of block configuration.

[danielwrobert]

Hi @oandregal! 👋

I've dug into this a bit further and concluded that the class names for these blocks was not the root of the issue.

Though the block uses the wc-block-featured-product class instead.

These blocks actually use both the wc-block-featured-product and the wp-block-woocommerce-featured-product.

You can read more on my findings in this comment and in this comment as well.

TL;DR:

• There was a separate issue where __experimentalDuotone was preventing the Global Styles from being applied properly. We've since removed that experimental property in this PR, for the time being.
• The original issue reported here still exists, however. If the latest Gutenberg plugin is active, the Global Styles for a non-Gutenberg block are not properly applied on the front-end. This is the case for all of the Woo blocks and we have also been able to replicate the issue with the Jetpack blocks (see screenshots below).

Plugins	Editor (Beta)	Frontend

That being said, can we reopen this issue or would it be preferred that I create a new issue and crosslink to this one?

Thanks in advance!

cc @Aljullu, @gigitux

[oandregal]

Thanks for sharing your findings @danielwrobert

I've reopened. In my testing, the styles for the block didn't work in 5.9 or 6.0 (no Gutenberg installed).

@ajlende @scruffian would you have some time to take a look at this?

[danielwrobert]

Thanks, @oandregal, I appreciate it!

There seems to have been a couple of separate-but-related issues at play (in addition to the aforementioned issue with __experimentalDuotone):

One issue was caused by the default styles for the text color on the Featured Items blocks preventing the Global Styles from taking effect. I’m working on addressing that issue in this PR. It’s possible that this is what you running into with your testing?

The other issue is the problem reported here with the Global Styles not applying to non-Core blocks when the Gutenberg feature plugin is enabled - which seems impact all Woo blocks, along with Jetpack blocks.

[scruffian]

I'm looking at this, but I'm not 100% sure what you're expecting to see? Should third party blocks appear in the Global Styles interface?

[danielwrobert]

@scruffian The Woo and Jetpack blocks do appear in the Global Styles interface. That is expected, at least as far as I understand. The issue is, when applying those Global Styles to one of the Jetpack or Woo blocks, the styles are not saved to the frontend (see screenshots below). In my testing, this issue is present with the Gutenberg feature plugin enabled but not an issue with Core and no Gutenberg plugin active.

Global Styles	With GB Plugin	W/O GB Plugin

[scruffian]

I created a fix for this here: #44018

[ockham]

Closing. This was fixed in Gutenberg 14.1 by #44018, and for WordPress 6.1 by WordPress/wordpress-develop#3529.