Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything

Presented at FlyFest 2020

Transcript

1. TEMPLATES &
   PLUGINS &
   BLOCKS, Oh my!
   Creating The Theme That
   Thinks Of Everything
   

   View Slide

2. @marktimemedia
   I Design
   &
   Build DIGITAL
   INTERFACES
   HI, I’M
   MICHELLE.
   Rockstar at saying stuff.
   Adorable badass.
   Carefully curated spontaneity.
   Master suitcase packer.
   Accidental fitness buff.
   likely not coffee
   

   View Slide

3. @marktimemedia
   WHAT THIS TALK
   WILL NOT BE
   

   View Slide

4. @marktimemedia
   VISUAL
   DESIGN
   LESSONS
   

   View Slide

5. @marktimemedia
   THEME
   CODING
   LESSONS
   

   View Slide

6. @marktimemedia
   WHAT THIS TALK
   WILL BE
   

   View Slide

7. @marktimemedia
   HOW TO
   PLAN FOR THE
   UNKNOWN
   

   View Slide

8. @marktimemedia
   HOW TO STYLE
   THE MOST CONTENT
   WITH THE LEAST
   WORK
   

   View Slide

9. @marktimemedia
   WHAT IS THE PURPOSE
   OF A THEME?
   

   View Slide

10. @marktimemedia
    SUPPORT ALL
    CONTENT
    Content is meant to change
    Content will never be perfect
    Themes should account for any
    future decision that is possible
    

    View Slide

11. @marktimemedia
    SUPPORT ALL
    DEVICES
    Design breakpoints/context changes
    based on screen size, not device
    Keep accessibility in mind (contrast,
    resizing, navigation, focus, semantics, etc)
    

    View Slide

12. @marktimemedia
    SUPPORT ALL
    ELEMENTS
    All semantic HTML should be styled
    All WordPress content types should be styled
    All added elements should be styled
    

    View Slide

13. @marktimemedia
    Post Types
    Metadata
    Plugins & Functions
    Third-Party Integrations
    One-to-one Relationships
    One-to-many Relationships
    

    View Slide

14. @marktimemedia
    LIMITATIONS
    of traditional themes
    

    View Slide

15. @marktimemedia
    CONTENT IS
    DYNAMIC AND
    INTERACTIVE
    

    View Slide

16. @marktimemedia
    UNIQUE CONTENT
    CAN BE SMALLER
    THAN PAGES
    

    View Slide

17. @marktimemedia
    HOW IT WORKS
    IS NOT DEPENDENT
    ON WHAT IT SAYS
    

    View Slide

18. @marktimemedia
    EXPERIENCES
    SHOULD BE
    CUSTOMIZABLE
    

    View Slide

19. @marktimemedia
    Patterns
    Systems
    Iterating
    Prototyping
    Maintaining
    Scaling
    

    View Slide

20. @marktimemedia
    THE IDEA
    

    View Slide

21. @marktimemedia
    Reorderable, reusable
    elements that combine to
    build unique content
    

    View Slide

22. @marktimemedia
    Content dictates layout
    rather than layout
    dictating content
    

    View Slide

23. @marktimemedia
    Elements can exist within
    any context or location
    

    View Slide

24. @marktimemedia
    Seamless functional and
    stylistic integration
    

    View Slide

25. @marktimemedia
    

    View Slide

26. @marktimemedia
    EMBRACE THE
    CASCADE
    

    View Slide

27. @marktimemedia
    Style cascade:
    LEVERAGING CSS
    

    View Slide

28. @marktimemedia
    Abstract your
    styling for the
    broadest use
    case
    

    View Slide

29. @marktimemedia
    ITCSS
    https://www.creativebloq.com/web-design/
    manage-large-css-projects-itcss-101517528
    https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
    

    View Slide

30. @marktimemedia
    reset >
    global variables >
    html elements >
    utility classes >
    block-level classes >
    template-level classes >
    overrides
    

    View Slide

31. @marktimemedia
    Structural cascade:
    LEVERAGING
    ATOMIC DESIGN
    

    View Slide

32. @marktimemedia
    Abstract your
    structure for
    the broadest
    use case
    

    View Slide

33. @marktimemedia
    ATOMIC DESIGN
    BRAD FROST
    

    View Slide

34. @marktimemedia
    

    View Slide

35. @marktimemedia
    ATOMS
    THE SMALLEST BUILDING BLOCKS
    

    View Slide

36. @marktimemedia
    http://zqsmm.qiniucdn.com/data/20110511083224/index.html
    

    View Slide

37. @marktimemedia
    http://demo.patternlab.io
    

    View Slide

38. @marktimemedia
    MOLECULES
    UNIQUE COMBINATIONS
    OF ATOMS
    

    View Slide

39. @marktimemedia
    http://demo.patternlab.io
    

    View Slide

40. @marktimemedia
    ORGANISMS
    MOLECULES COMING TOGETHER
    ALLOW ACTION
    

    View Slide

41. @marktimemedia
    http://demo.patternlab.io
    

    View Slide

42. @marktimemedia
    TEMPLATES
    ORGANISMS TOGETHER BECOME
    LAYOUTS
    

    View Slide

43. @marktimemedia
    http://demo.patternlab.io
    

    View Slide

44. @marktimemedia
    PAGES
    TEMPLATES WITH SPECIFIC
    CONTENT
    

    View Slide

45. @marktimemedia
    http://demo.patternlab.io
    

    View Slide

46. @marktimemedia
    

    View Slide

47. @marktimemedia
    GUTENBERG
    & The Block Model
    

    View Slide

48. @marktimemedia
    the_content()
    From the blob
    to the block
    

    View Slide

49. @marktimemedia
    

    View Slide

50. @marktimemedia
    At the core of Gutenberg lies the concept
    of the block. From a technical point of
    view, blocks both raise the level of
    abstraction from a single document to a
    collection of meaningful elements, and
    they replace ambiguity—inherent in
    HTML—with explicit structure.
    developer.wordpress.org
    

    View Slide

51. @marktimemedia
    From a user perspective, blocks allow any
    kind of content, media, or functionality
    to be directly added to their site in a
    more consistent and usable way.
    The “add block” button gives the user
    access to an entire library of options all in
    one place.
    developer.wordpress.org
    

    View Slide

52. @marktimemedia
    HTML elements >
    block & template parts >
    single blocks >
    block patterns >
    block templates >
    core/custom templates
    

    View Slide

53. @marktimemedia
    ATOMS
    h1-h6
    Paragraphs
    Links
    Code, Pre
    Separators
    Buttons
    

    View Slide

54. @marktimemedia
    ATOMS
    Settings
    Colors
    Gradients
    Font Sizes
    Image Sizes
    

    View Slide

55. @marktimemedia
    MOLECULES
    Ordered & Unordered
    Lists
    Tables, Headers,
    & Footers
    Quote + Citation
    Image + Captions
    

    View Slide

56. @marktimemedia
    MOLECULES
    Image + Captions
    Video, Audio
    More, Page Break
    Navigation
    Button Groups
    

    View Slide

57. @marktimemedia
    ORGANISMS
    Gallery
    Media + Text
    

    View Slide

58. @marktimemedia
    ORGANISMS
    Groups
    Columns
    Cover
    Images
    

    View Slide

59. @marktimemedia
    ORGANISMS
    Dynamic Blocks
    Reusable Blocks
    Custom Blocks
    

    View Slide

60. @marktimemedia
    TEMPLATES
    Post Type block
    templates
    Standard Page
    templates
    Standard
    WordPress
    templates
    

    View Slide

61. @marktimemedia
    TEMPLATES
    Post Type block
    templates
    Standard Page
    templates
    Standard
    WordPress
    templates
    

    View Slide

62. @marktimemedia
    THE
    FUTURE
    of block editing
    

    View Slide

63. @marktimemedia
    Block
    Patterns
    https://developer.wordpress.org/
    block-editor/developers/block-api/block-patterns/
    

    View Slide

64. @marktimemedia
    

    View Slide

65. @marktimemedia
    Block
    Template
    Parts
    https://developer.wordpress.org/block-editor/developers/
    themes/block-based-themes/
    

    View Slide

66. @marktimemedia
    Gutenberg
    Experiments
    

    View Slide

67. @marktimemedia
    Whole
    Site Editor
    https://wptavern.com/themes-of-the-future-a-design-framework-and-
    a-master-theme
    

    View Slide

68. @marktimemedia
    WHAT IS A THEME
    IN THE AGE OF BLOCKS?
    

    View Slide

69. @marktimemedia
    Global styling
    for core blocks
    and content
    

    View Slide

70. @marktimemedia
    Curating Block
    Editor options
    

    View Slide

71. @marktimemedia
    Including
    block patterns
    & templates
    

    View Slide

72. @marktimemedia
    Detailed
    styling to
    target specific
    plugins
    

    View Slide

73. @marktimemedia
    Support
    recommended
    block libraries
    

    View Slide

74. @marktimemedia
    RESOURCES
    

    View Slide

75. @marktimemedia
    Resources
    • Block Editor https://developer.wordpress.org/block-editor/
    • Atomic Design http://atomicdesign.bradfrost.com/
    • Style Guides http://styleguides.io/tools.html
    • Style Prototype http://sparkbox.github.io/style-prototype/
    • “Ish” variable viewport tool http://bradfrost.com/demo/ish/
    • HTML Elements
    http://zqsmm.qiniucdn.com/data/20110511083224/index.html
    • My block plugin:
    https://github.com/marktimemedia/mtm-blocks
    

    View Slide

76. @marktimemedia
    Modular design
    • https://www.toptal.com/designers/ux/getting-started-with-modular-front-end-
    development
    • https://room34.com/philosophy/modular-design/
    • https://www.crema.us/blog/atomic-design-systems
    • https://ethanmarcotte.com/wrote/pattern-patter/
    • http://alistapart.com/article/language-of-modular-design
    • https://airbnb.design/building-a-visual-language/
    • https://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/
    • https://blog.alexdevero.com/atomic-design-scalable-modular-css-sass/
    • https://blog.prototypr.io/atomic-design-in-practice-does-it-work-9655bacb49d7
    

    View Slide

77. @marktimemedia
    The future of themes
    • https://make.wordpress.org/themes/2020/03/18/block-based-themes-meeting-
    notes/?mc_cid=8b1c91717b&mc_eid=ad2f6116f3
    • https://wptavern.com/where-gutenberg-went-wrong-theme-developer-edition
    • https://wptavern.com/key-takeaways-from-the-first-future-of-themes-meeting
    • https://twitter.com/carolinapoena/status/1255324873137762306
    • https://matiasventura.com/post/thoughts-on-themes/
    • https://richtabor.com/block-patterns/
    

    View Slide

78. @marktimemedia
    QUESTIONS?
    Here’s how to
    get in touch:
    Michelle Schulp
    michelle@marktimemedia.com
    @marktimemedia
    michelleschulp.pink
    bit.ly/themes-plugins-blocks-2020
    WHERE TO FIND ME NEXT:
    NOW:
    General Q&A
    Twitter & WP Slack
    ONLINE:
    Fitness & Freelance,
    Meetups,
    WordCamp MSP
    IN PERSON:
    Maybe someday?
    

    View Slide