Rethinking Themes: Embracing Atomic Design with Gutenberg

E195ae45320d9202eaa01c9f1d31a416?s=47 Michelle Schulp
February 07, 2020

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.

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

February 07, 2020
Tweet

Transcript

  1. RETHINKING Embracing Atomic THEMES Design W ith Gutenberg

  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. learning to like coffee Ambassador
  3. @marktimemedia HOW WE GOT HERE A brief history

  4. @marktimemedia PAGES WERE THE SOURCE OF KNOWLEDGE

  5. @marktimemedia THE “WEB PAGE” PARADIGM

  6. @marktimemedia TEMPLATES, DATABSES, & CONTENT MANAGEMENT

  7. @marktimemedia DYNAMIC DATA: LOGIC & CONNECTIONS

  8. @marktimemedia Themes Plugins Metadata Relationships One-to-one One-to-many

  9. @marktimemedia LIMITATIONS of the page model

  10. @marktimemedia CONTENT IS DYNAMIC AND INTERACTIVE

  11. @marktimemedia UNIQUE CONTENT CAN BE SMALLER THAN PAGES

  12. @marktimemedia HOW IT WORKS IS NOT DEPENDENT ON WHAT IT

    SAYS
  13. @marktimemedia EXPERIENCES SHOULD BE CUSTOMIZABLE

  14. @marktimemedia Patterns Systems Iterating Prototyping Maintaining Scaling

  15. @marktimemedia ATOMIC DESIGN BRAD FROST “Let’s get modular!”

  16. @marktimemedia THE IDEA

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

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

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

  20. @marktimemedia Seamless functional and stylistic integration

  21. @marktimemedia THE STRUCTURE

  22. @marktimemedia The Single Use Principle & DRY

  23. @marktimemedia Modular File Structure

  24. @marktimemedia RELATED CONCEPTS

  25. @marktimemedia Component Libraries

  26. @marktimemedia Design Systems

  27. @marktimemedia Style Guides

  28. @marktimemedia BUILDING WITH ATOMIC DESIGN

  29. @marktimemedia

  30. @marktimemedia ATOMS THE SMALLEST BUILDING BLOCKS

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

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

  33. @marktimemedia MOLECULES UNIQUE, REPEATABLE COMBINATIONS OF ATOMS

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

  35. @marktimemedia ORGANISMS MOLECULES COMING TOGETHER ALLOW ACTION

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

  37. @marktimemedia TEMPLATES ORGANISMS TOGETHER BECOME LAYOUTS

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

  39. @marktimemedia PAGES TEMPLATES WITH SPECIFIC CONTENT

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

  41. @marktimemedia

  42. @marktimemedia GUTENBERG & The Block Model

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

  44. @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
  45. @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
  46. @marktimemedia THE IDEA

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

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

  49. @marktimemedia THE STRUCTURE

  50. @marktimemedia Blocks from Core and Plugins

  51. @marktimemedia Controlled: theme style Malleable: block options

  52. @marktimemedia

  53. @marktimemedia ATOMIC DESIGN + GUTENBERG

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

    Colors
  55. @marktimemedia MOLECULES Ordered & Unordered Lists Tables, Headers, & Footers

    Quote + Citation Image + Captions
  56. @marktimemedia MOLECULES Image + Captions Video, Audio More, Page Break

    Navigation
  57. @marktimemedia ORGANISMS Gallery Media + Text

  58. @marktimemedia ORGANISMS Groups Columns Cover Images

  59. @marktimemedia ORGANISMS Dynamic Blocks Reusable Blocks Custom Blocks

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

    WordPress templates
  61. @marktimemedia THE FUTURE of block editing

  62. @marktimemedia Gutenberg Experiments

  63. @marktimemedia Page Content Templates https://github.com/WordPress/gutenberg/pull/18052

  64. @marktimemedia Block Templates https://developer.wordpress.org/block- editor/developers/themes/block-based-themes/

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

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

  67. @marktimemedia Global styling for core blocks and content

  68. @marktimemedia Curating Block Editor options

  69. @marktimemedia Block & Page Templates

  70. @marktimemedia Detailed styling to target specific plugins

  71. @marktimemedia Support recommended block libraries

  72. @marktimemedia DESIGNING WITH ATOMIC DESIGN

  73. @marktimemedia BE CONSISTENT NOT UNIFORM

  74. @marktimemedia BUILD SYSTEMS NOT PAGES

  75. @marktimemedia CONTENT AUDITS TO FIND PATTERNS

  76. @marktimemedia DEFINE YOUR BRAND: VISUAL ATOMS

  77. @marktimemedia DEFINE YOUR BLOCKS: MOLECULES & ORGANISMS

  78. @marktimemedia MAP THESE BLOCKS TO CORE & CUSTOM

  79. @marktimemedia MAKE A PLAN FOR BLOCK OPTIONS

  80. @marktimemedia LIMITATIONS of atomic design

  81. @marktimemedia Styling elements relative to the page

  82. @marktimemedia DRY -> DTM “do too much”

  83. @marktimemedia Ambiguity about molecules, organisms, & utilities/helpers

  84. @marktimemedia Prescriptive vs. Descriptive Systems

  85. @marktimemedia RESOURCES

  86. @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
  87. @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
  88. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp

    michelle@marktimemedia.com @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 ________?