Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Presented at FlyFest 2020

Michelle Schulp Hunt

July 16, 2020
Tweet

More Decks by Michelle Schulp Hunt

Other Decks in Design

Transcript

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

    View full-size 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 full-size slide

  3. @marktimemedia
    WHAT THIS TALK
    WILL NOT BE

    View full-size slide

  4. @marktimemedia
    VISUAL
    DESIGN
    LESSONS

    View full-size slide

  5. @marktimemedia
    THEME
    CODING
    LESSONS

    View full-size slide

  6. @marktimemedia
    WHAT THIS TALK
    WILL BE

    View full-size slide

  7. @marktimemedia
    HOW TO
    PLAN FOR THE
    UNKNOWN

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  14. @marktimemedia
    LIMITATIONS
    of traditional themes

    View full-size slide

  15. @marktimemedia
    CONTENT IS
    DYNAMIC AND
    INTERACTIVE

    View full-size slide

  16. @marktimemedia
    UNIQUE CONTENT
    CAN BE SMALLER
    THAN PAGES

    View full-size slide

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

    View full-size slide

  18. @marktimemedia
    EXPERIENCES
    SHOULD BE
    CUSTOMIZABLE

    View full-size slide

  19. @marktimemedia
    Patterns
    Systems
    Iterating
    Prototyping
    Maintaining
    Scaling

    View full-size slide

  20. @marktimemedia
    THE IDEA

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. @marktimemedia
    Seamless functional and
    stylistic integration

    View full-size slide

  25. @marktimemedia

    View full-size slide

  26. @marktimemedia
    EMBRACE THE
    CASCADE

    View full-size slide

  27. @marktimemedia
    Style cascade:
    LEVERAGING CSS

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  31. @marktimemedia
    Structural cascade:
    LEVERAGING
    ATOMIC DESIGN

    View full-size slide

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

    View full-size slide

  33. @marktimemedia
    ATOMIC DESIGN
    BRAD FROST

    View full-size slide

  34. @marktimemedia

    View full-size slide

  35. @marktimemedia
    ATOMS
    THE SMALLEST BUILDING BLOCKS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. @marktimemedia
    MOLECULES
    UNIQUE COMBINATIONS
    OF ATOMS

    View full-size slide

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

    View full-size slide

  40. @marktimemedia
    ORGANISMS
    MOLECULES COMING TOGETHER
    ALLOW ACTION

    View full-size slide

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

    View full-size slide

  42. @marktimemedia
    TEMPLATES
    ORGANISMS TOGETHER BECOME
    LAYOUTS

    View full-size slide

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

    View full-size slide

  44. @marktimemedia
    PAGES
    TEMPLATES WITH SPECIFIC
    CONTENT

    View full-size slide

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

    View full-size slide

  46. @marktimemedia

    View full-size slide

  47. @marktimemedia
    GUTENBERG
    & The Block Model

    View full-size slide

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

    View full-size slide

  49. @marktimemedia

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. @marktimemedia
    ORGANISMS
    Gallery
    Media + Text

    View full-size slide

  58. @marktimemedia
    ORGANISMS
    Groups
    Columns
    Cover
    Images

    View full-size slide

  59. @marktimemedia
    ORGANISMS
    Dynamic Blocks
    Reusable Blocks
    Custom Blocks

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. @marktimemedia
    THE
    FUTURE
    of block editing

    View full-size slide

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

    View full-size slide

  64. @marktimemedia

    View full-size slide

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

    View full-size slide

  66. @marktimemedia
    Gutenberg
    Experiments

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. @marktimemedia
    Global styling
    for core blocks
    and content

    View full-size slide

  70. @marktimemedia
    Curating Block
    Editor options

    View full-size slide

  71. @marktimemedia
    Including
    block patterns
    & templates

    View full-size slide

  72. @marktimemedia
    Detailed
    styling to
    target specific
    plugins

    View full-size slide

  73. @marktimemedia
    Support
    recommended
    block libraries

    View full-size slide

  74. @marktimemedia
    RESOURCES

    View full-size 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 full-size 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 full-size 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 full-size slide

  78. @marktimemedia
    QUESTIONS?
    Here’s how to
    get in touch:
    Michelle Schulp
    [email protected]
    @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 full-size slide