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

July 16, 2020
Tweet

More Decks by Michelle Schulp

Other Decks in Design

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
    [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 Slide