-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Global styles interface with styling for v1 #20367
Description
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.
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
