Global styles the story so far

Transcript

1. Global Styles:
   What’s in the Works
   Tammie Lister
   

   View Slide

2. 1. Why?
   

   View Slide

3. “I have this vision, but I
   don’t know CSS”
   So many people
   

   View Slide

4. View Slide

5. View Slide

6. “I want to allow block
   styling from my theme”
   Theme creators
   

   View Slide

7. 2. How?
   

   View Slide

8. Put screenshot here
   Starting with some flows
   

   View Slide

9. Put screenshot here
   What is the experience of the theme also?
   

   View Slide

10. C
    v
    v
    

    View Slide

11. yvz8y.csb.app/#/v2/post
    

    View Slide

12. yvz8y.csb.app/#/i2
    

    View Slide

13. View Slide

14. What could this look like?
    

    View Slide

15. View Slide

16. View Slide

17. 3. The story so far
    

    View Slide

18. “It all starts with the block”
    A Gutenberg mantra
    

    View Slide

19. Line height
    github.com/WordPress/gutenberg/issues/20339
    

    View Slide

20. Exposing our need for better design tools
    Label ‘Design tools’
    

    View Slide

21. Theme exploration by Kjell
    themeshaper.com/2020/03/20/exploring-global-styles
    

    View Slide

22. Follow along
    github.com/WordPress/gutenberg/issues/20331
    github.com/WordPress/gutenberg/projects/40
    

    View Slide

23. 3. Coming soon
    

    View Slide

24. v1: sidebar
    font/text families | base font/style | link styling
    

    View Slide

25. View Slide

26. Heading and text families
    github.com/WordPress/gutenberg/issues/21028
    

    View Slide

27. View Slide

28. Link styling
    github.com/WordPress/gutenberg/issues/21032
    

    View Slide

29. View Slide

30. Base font size and scale
    github.com/WordPress/gutenberg/issues/21030
    

    View Slide

31. View Slide

32. Let’s have a demo!
    github.com/WordPress/gutenberg/pull/20530
    

    View Slide

33. View Slide

34. 4. The future
    

    View Slide

35. Custom CSS
    

    View Slide

36. View all global styling
    

    View Slide

37. Mosaic view for global styles
    github.com/WordPress/gutenberg/issues/20477
    

    View Slide

38. Personal thoughts, hopes
    and dreams…
    None of these are set or certain
    

    View Slide

39. Beyond the sidebar
    github.com/WordPress/gutenberg/issues/20212
    

    View Slide

40. Beyond the sidebar
    

    View Slide

41. View Slide

42. Importing & exporting
    

    View Slide

43. “Everything starts with
    the block…”
    By improving blocks, we can see what should be global
    

    View Slide

44. Color picker
    github.com/WordPress/gutenberg/issues/19785
    

    View Slide

45. Iterate the block
    

    View Slide

46. Bring to the block, if right
    

    View Slide

47. What will you make?
    Collaborate, explore and share
    

    View Slide

48. Thank you
    speakerdeck.com/tammielis/global-styles-the-story-so-far
    

    View Slide