Skip to content

Global styles interface with styling for v1 #20367

@karmatosed

Description

@karmatosed

This issue builds on from #19255 and focuses on moving to a PR for this. As part of this I am going to list what is likely to be the defaults and for the paragraph block (as starting with that makes a lot of sense).

Plugin activation and sidebar

For v1 this is going to appear as a sidebar, activated by clicking. When this happens the sidebar becomes the global styles interface. You are now in global styles and once click again, you come out.

2020-02-21 19 23 42

To style all of a type of block, you simply click that block and all 'select'. Notice, there is no toolbar as we aren't editing here. The sidebar will change to show block specific global styles.

All the way along you can 'reset', 'undo/redo' and save. Save sets any change live, it's the publish state. You can also close using 'x' or click the icon to come out of global styles.

This version has some noticeable existing styling over the iterations to color picker. This is on purpose, to focus and iterate once the experience can be used. Iterating components can and will happen in the near future.

Default global styles

By default, the following are my suggestions for being available:

Text:

  • Scale: a simple range control
  • Alignment: this applies across all text and includes justified (with a warning for accessibility)

Color:

  • Background
  • Text

Paragraph styles

As you can see in the gif posted, once you click in you get options that are just for the paragraph. Anything done here applies to all. Noticeably this includes line-height, see #20339. Also, the drop-cap wouldn't show as that really is per block, changing all paragraphs to drop-cap is a rare instance.

Next steps

Ideally, we can move into iterating the current PR work here. I am going to loop @ItsJonQ in to activate that. As far as feedback goes, that is of course welcome. The idea here though is to move this into prototype (actual interface) and then see what this feels like for everyone.

I plan to close out the long issue where the interface was explored so we can now focus. Thanks, everyone that has helped to get global styles as far as it's come. It's going to be great to experience this. The icon to activate is up for debate on this too, if anyone has ideas around that.

This is also part of the bigger checklist tasks you can find for global styles here #20331

Metadata

Metadata

Assignees

Labels

Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonNeeds DevReady for, and needs developer efforts

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions