-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Use Global Styles or theme.json to style individual blocks #33977
Copy link
Copy link
Closed
Labels
Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonNeeds DecisionNeeds a decision to be actionable or relevantNeeds a decision to be actionable or relevantNeeds Design FeedbackNeeds general design feedback.Needs general design feedback.Needs Technical FeedbackNeeds testing from a developer perspective.Needs testing from a developer perspective.[Type] DiscussionFor issues that are high-level and not yet ready to implement.For issues that are high-level and not yet ready to implement.[Type] EnhancementA suggestion for improvement.A suggestion for improvement.
Metadata
Metadata
Assignees
Labels
Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonNeeds DecisionNeeds a decision to be actionable or relevantNeeds a decision to be actionable or relevantNeeds Design FeedbackNeeds general design feedback.Needs general design feedback.Needs Technical FeedbackNeeds testing from a developer perspective.Needs testing from a developer perspective.[Type] DiscussionFor issues that are high-level and not yet ready to implement.For issues that are high-level and not yet ready to implement.[Type] EnhancementA suggestion for improvement.A suggestion for improvement.
Type
Fields
Give feedbackNo fields configured for issues without a type.
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:
Full-site editing introduces the
theme.jsonfile, 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
styleskey 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:
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.