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

More Decks by Michelle Schulp Hunt

Other Decks in Design


  1. @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
  2. @marktimemedia SUPPORT ALL CONTENT Content is meant to change Content

    will never be perfect Themes should account for any future decision that is possible
  3. @marktimemedia SUPPORT ALL DEVICES Design breakpoints/context changes based on screen

    size, not device Keep accessibility in mind (contrast, resizing, navigation, focus, semantics, etc)
  4. @marktimemedia SUPPORT ALL ELEMENTS All semantic HTML should be styled

    All WordPress content types should be styled All added elements should be styled
  5. @marktimemedia reset > global variables > html elements > utility

    classes > block-level classes > template-level classes > overrides
  6. @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
  7. @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
  8. @marktimemedia HTML elements > block & template parts > single

    blocks > block patterns > block templates > core/custom templates
  9. @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
  10. @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
  11. @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/
  12. @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?