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.

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 ________?