-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
[Selectors API] Does not affect block styles, global styles works.. but only on the frontend #50416
Comments
@aaronrobertshaw, is it something on your radar? |
I've spent some time trying to debug this myself, although I'm somewhat out of my depth here.. There's a couple of issues with my code:-
Color changes on the block are still applied to the block div, but changing color under global styles is correctly applying to the inner div. I've also tried testing other block supports, and was able to get duotone filters correctly applied to the inner div, on both backend and frontend. |
👍 Thanks for the ping, it looks like there are two separate issues here. The first is there was a regression in the Gutenberg plugin caused by #50079 which resulted in the theme.json classes bundled in it not being used. A fix for this is up in #50310 and should land soon. This bug causes the custom selectors not to be used in the generated stylesheet. After checking out #50310 and adding global styles for the test block, it correctly applies them to the inner div. The second issue is more of a misunderstanding. The selectors API is used to apply global styles to specific block elements via CSS rules. If your block needs to apply block support styles, for individual blocks, to inner elements, it needs to skip the default serialization of the block support styles on the outer block wrapper, and then manually apply them where required. This needs to occur in both the block's edit and save functions. There are several core blocks that do this using
There are also a few utility hooks that you might leverage to save doing the leg work of generating classes and styles when relocating them to inner blocks e.g. Once #50310 lands, we should be able to close out this issue 🤞 I hope that helps. |
Thanks for the update @aaronrobertshaw. I had previously been using That's quite the bummer if it's only intended for global styles use. |
Closing this issue since #50310 is merged. Thanks everyone! |
Description
I am using the Selectors API to apply color properties to an inner div instead of the block div, but it does not appear to be using the selector when I change the blocks properties.
If I change the block colors in global styles it works, but only on the frontend. If I use the former
__experimentalSelector
, it affects global styles in the editor too.Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
Selectors not affecting block styles in the editor,
nor on the frontend.
Selectors not affecting global styles in the editor,
but works on the frontend.
Old Selectors API ("__experimentalSelector") works for global styles in the editor,
and on the frontend.
My block code
block.json
index.js
Environment info
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
The text was updated successfully, but these errors were encountered: