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

Rethinking Themes: Embracing Atomic Design with Gutenberg

Rethinking Themes: Embracing Atomic Design with Gutenberg

When designing WordPress themes, one of the biggest challenges stems from a core component of WordPress itself: the ability for site owners to change, modify, and build new content themselves. After all, modern web content needs to be flexible and evolving, but not everyone is a developer who can build custom layouts to fit each use case.

As content and functionality become even more modular thanks to advances like the Gutenberg editor, theme designers will have to accommodate even more flexible ways of visualizing and presenting information. How do we anticipate and accommodate the needs of a constantly evolving website while providing visual solutions that are clean, thoughtful, and consistent?

In this talk, we’ll discuss the principles of Atomic Design, how to stop thinking of your content as “pages” and “posts” in favor of the concept of “building blocks,” and how to extend this mindset to utilize the potential of Gutenberg as it is now, and where it might be going in the future.

Michelle Schulp Hunt

February 07, 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. learning to like coffee Ambassador
  2. @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
  3. @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
  4. @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
  5. @marktimemedia Articles • 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
  6. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp

    [email protected] @marktimemedia michelleschulp.pink bit.ly/theme-gutenberg WHERE TO FIND ME NEXT: NOW: SiteGround booth, sessions, Hallway track, afterparty, exercising ONLINE: Fitness & Freelance Twitter – DMs open! Podcast? Happy to talk! IN PERSON: WordCamp Atlanta WordCamp DC WordCamp ________?