Skip to content

Global styles: add text styles to blocks #20773

@karmatosed

Description

@karmatosed

Being able to set to the font style on all the contents of a block and all instances of that block when in global styles, is useful. This opens up more granular control of everything on the block over having to select which is the current state.

I took some time to explore what that could look like and began with the paragraph block as that has a lot of text options already. It's worth noting, this is when in global styles for now. This work builds on the new UI explorations of @pablohoneyhoney, @jasmussen and @mtias - so credit goes there for taking this into the global styles work I have been doing.

This is a simple addition to the paragraph block, nothing major here or that different from what we have now.

paragraph block

VIewing in global styles

Version one shows just adding text styling dropdown to any place we have text, for example when viewing the paragraph block in global styles.

global

Moving further into the future with the ideas in font pairing, perhaps this could then come in where we show text and heading fonts - maybe even letting themes set these. This is further on work, the proposal in this issue is just to add a font style option.

future

Feedback

Right now, it would be great to explore if the time is right to bring this in or we wait. Beyond that general feedback would be great. I feel that having this as an option on these blocks makes sense for global styles:

  • Button
  • Paragraph (whilst I demonstrated the edge case of bolding all, likely this would be useful for weights)
  • Heading
  • Quote

Here are some points to spring into feedback from:

  • What other blocks could benefit from this?
  • Should it only be on global styles or in some blocks by default? For example, paragraph block could benefit from this perhaps.
  • As different fonts have different text styles, do we have a baseline we offer?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonNeeds Design FeedbackNeeds general design feedback.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions