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

Use Global Styles or theme.json to style individual blocks #33977

Open
fklein-lu opened this issue Aug 10, 2021 · 0 comments
Open

Use Global Styles or theme.json to style individual blocks #33977

fklein-lu opened this issue Aug 10, 2021 · 0 comments

Comments

@fklein-lu
Copy link
Contributor

@fklein-lu fklein-lu commented Aug 10, 2021

What problem does this address?

There's no secret that theme developers have been frustrated with the ability to style blocks.

There are a number of issues here:

  1. Block classes are inconsistent. Not only between blocks, but also between the frontend and the backend.
  2. Block markup changes. The most recent example would be the Group block removing the inner container.
  3. Block styles can be hard to override. Again this is an issue for the frontend and the backend.

Full-site editing introduces the theme.json file, which is intended to fix all of these issues. Because theme developers use Global Styles to express how they want a block to be styled. And WordPress takes care of translating these instructions to CSS.

This is a win-win situation: WordPress can evolve its blocks without needing to keep existing markup. And theme developers can be sure that their themes don't break when WordPress upgrades.

But this is not without drawbacks. It's common for block styles to be so specific that they overload styles provided by theme.json. It's also not easy to debug, as the default block styles are still loaded, and then overloaded by the Global Styles of the theme.

What is your proposed solution?

Blocks should use the same styling mechanism as themes do. And that is Global Styles.

Because every attribute under the styles key could be used for blocks as well. There's no reason for example why a block would need to use CSS for margins, if Global Styles could be used.

The benefits are two-fold:

  1. This would be a great dogfooding exercise for block authors. Because if they can't style their blocks the way they want it using Global Styles, how are theme developers supposed to do it?
  2. This would get rid of unnecessary CSS being enqueued. WordPress would take the default styles, merge in the theme styles, and then output that final result.
  3. This is a cleaner API, and more future proof. If themes move towards theme.json, then blocks as the building pieces of themes need to do the same. This would also prevent future bugs between default styles and theme styles, as both are handled through the same mechanism.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant