Global Styles:What’s in the WorksTammie Lister
View Slide
1. Why?
“I have this vision, but Idon’t know CSS”So many people
“I want to allow blockstyling from my theme”Theme creators
2. How?
Put screenshot hereStarting with some flows
Put screenshot hereWhat is the experience of the theme also?
Cvv
yvz8y.csb.app/#/v2/post
yvz8y.csb.app/#/i2
What could this look like?
3. The story so far
“It all starts with the block”A Gutenberg mantra
Line heightgithub.com/WordPress/gutenberg/issues/20339
Exposing our need for better design toolsLabel ‘Design tools’
Theme exploration by Kjellthemeshaper.com/2020/03/20/exploring-global-styles
Follow alonggithub.com/WordPress/gutenberg/issues/20331github.com/WordPress/gutenberg/projects/40
3. Coming soon
v1: sidebarfont/text families | base font/style | link styling
Heading and text familiesgithub.com/WordPress/gutenberg/issues/21028
Link stylinggithub.com/WordPress/gutenberg/issues/21032
Base font size and scalegithub.com/WordPress/gutenberg/issues/21030
Let’s have a demo!github.com/WordPress/gutenberg/pull/20530
4. The future
Custom CSS
View all global styling
Mosaic view for global stylesgithub.com/WordPress/gutenberg/issues/20477
Personal thoughts, hopesand dreams…None of these are set or certain
Beyond the sidebargithub.com/WordPress/gutenberg/issues/20212
Beyond the sidebar
Importing & exporting
“Everything starts withthe block…”By improving blocks, we can see what should be global
Color pickergithub.com/WordPress/gutenberg/issues/19785
Iterate the block
Bring to the block, if right
What will you make?Collaborate, explore and share
Thank youspeakerdeck.com/tammielis/global-styles-the-story-so-far