Building Blocks: Atomic Design in a Gutenberg World

Gutenberg may be the latest and greatest in WordPress content building, but the concept of modular design isn’t new. WordPress templates and themes are robust and feature filled, but building truly dynamic web pages is limited by the old concept of static pages and posts. 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. Page builders, custom fields, drag and drop interfaces, and bespoke solutions have all tried their hand at solving the problem of separating the technical/design components from the content itself. But what is modular design, and what does it have to do with WordPress?

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 and other similar tools as a web designer.

Transcript

1. BUILDING BLOCKS ATOMIC IN A GUTENBERG WORLD DESIGN
2. @marktimemedia I Design & Build THINGS. USUALLY WITH WORDPRESS. HI, I’M MICHELLE.
3. @marktimemedia THE INTERWEBS A VERY BRIEF HISTORY
4. @marktimemedia IN THE BEGINNING…
5. @marktimemedia THE “WEB PAGE” PARADIGM
6. @marktimemedia STATIC CONTENT ONE-WAY MESSAGE HAND-CODED
7. @marktimemedia THE AGE OF CONTENT MANAGEMENT
8. @marktimemedia WEBSITES ARE DYNAMIC
9. @marktimemedia RELATIONSHIPS CONDITIONALS DATABASES INTERACTIONS
10. @marktimemedia WEBSITES ARE MODULAR
11. @marktimemedia SYSTEMS COMPONENTS SINGLE-USE
12. @marktimemedia ATOMIC DESIGN BRAD FROST
13. @marktimemedia ATOMS THE SMALLEST BUILDING BLOCKS
14. @marktimemedia http://zqsmm.qiniucdn.com/data/20110511083224/index.html
15. @marktimemedia MOLECULES UNIQUE COMBINATIONS OF ATOMS
16. @marktimemedia
17. @marktimemedia ORGANISMS MOLECULES COMING TOGETHER ALLOW ACTION
18. @marktimemedia
19. @marktimemedia TEMPLATES ORGANISMS TOGETHER BECOME LAYOUTS
20. @marktimemedia
21. @marktimemedia PAGES TEMPLATES WITH SPECIFIC CONTENT
22. @marktimemedia
23. @marktimemedia THE EVOLUTION OF WORDPRESS
24. @marktimemedia the_content()
25. @marktimemedia the_content()
26. THE IDEAL CONTENT MANAGEMENT EXPERIENCE ACCESSIBLE BALANCED CONSISTENT DYNAMIC EXTENSIBLE FLEXIBLE
27. @marktimemedia HOW DO WE BUILD DYNAMIC, MODULAR CONTENT IN WORDPRESS?
28. @marktimemedia CHAPTER 1: EXTENDING THE CONTENT
29. @marktimemedia EDITING HTML
30. @marktimemedia SHORTCODE CHAOS
31. @marktimemedia (SHORT-LIVED) SHORTCAKE UI
32. @marktimemedia HIDDEN SETTINGS: widgetized pages, theme options, extra menus, & the customizer
33. @marktimemedia EXTENDING THE EDITOR https://make.wordpress.org/core/2017/04/07/editor-experience-survey-results/
34. FIRST ATTEMPTS • “Wild West” of solutions: inconsistent, hacky, counterintuitive • Requires code or pseudocode knowledge • Learning curve, hidden elements • Easy to make mistakes • Mixing content with structure ! ACCESSIBLE ! BALANCED ! CONSISTENT ◦ DYNAMIC ◦ EXTENSIBLE ◦ FLEXIBLE
35. @marktimemedia CHAPTER 2: CHANGING THE USER INTERFACE
36. @marktimemedia PAGE BUILDERS
37. @marktimemedia
38. @marktimemedia
39. @marktimemedia
40. PAGE BUILDERS: PROS • Create static and dynamic content • Not necessary to write code to build or use the tool • Drag and drop interface, sometimes WYSIWYG and/or front-end • Some tackle entire theme (not just content) ◦ ACCESSIBLE ! BALANCED ! CONSISTENT # DYNAMIC ◦ EXTENSIBLE # FLEXIBLE
41. PAGE BUILDERS: CONS • Complex, inconsistent UI • Non-native, non-intuitive • Hidden settings and content • Too many options • Extra code/performance bloat • Mixing design with structure ◦ ACCESSIBLE ! BALANCED ! CONSISTENT # DYNAMIC ◦ EXTENSIBLE # FLEXIBLE
42. @marktimemedia CUSTOM FIELDS
43. @marktimemedia
44. @marktimemedia
45. @marktimemedia
46. @marktimemedia
47. @marktimemedia
48. CUSTOM FIELDS: PROS • Extensible and customizable • Static and Dynamic content • Separating design and structure • Can address complex content in consistent manner • Can follow Atomic Design model ◦ ACCESSIBLE # BALANCED ◦ CONSISTENT # DYNAMIC # EXTENSIBLE # FLEXIBLE
49. CUSTOM FIELDS: CONS • Blocky, somewhat unwieldy aesthetic • Not necessary to write code to use the tool, but necessary to create new fields • More data entry than WYSIWYG • Saving content in metadata • Doesn’t address additional hidden content areas ◦ ACCESSIBLE # BALANCED ◦ CONSISTENT # DYNAMIC # EXTENSIBLE # FLEXIBLE
50. @marktimemedia CHAPTER 3: THE GUTENBERG CONTENT EDITOR
51. @marktimemedia HELLO, GUTENBERG
52. @marktimemedia CORE BLOCKS: atoms & molecules & organisms (oh my!)
53. @marktimemedia
54. @marktimemedia
55. @marktimemedia REUSABLE BLOCKS
56. @marktimemedia Reusable blocks REUSABLE BLOCKS
57. @marktimemedia CUSTOM BLOCKS: building static & dynamic content
58. @marktimemedia FUTURE BLOCKS: Nested? Repeatable? Conditional?
59. GUTENBERG: PROS • Extensible and customizable • Native/core functionality and aesthetic • Follows Atomic Design model • Close to WYSIWYG • Separation of design and structure • Balance of decisions and options • Lives within The Content ◦ ACCESSIBLE # BALANCED # CONSISTENT # DYNAMIC # EXTENSIBLE # FLEXIBLE
60. GUTENBERG: CONS • Feature plugin: not quite ready yet • Backwards compatibility issues for existing solutions • Still not many dynamic options built into core • New development tools/platforms ◦ ACCESSIBLE # BALANCED # CONSISTENT # DYNAMIC # EXTENSIBLE # FLEXIBLE
61. @marktimemedia CHAPTER 4: BEYOND THE CONTENT
62. @marktimemedia GUTENBERG AS A DESIGN PARADIGM
63. @marktimemedia A BLOCK PARTY FOR YOUR ENTIRE SITE
64. @marktimemedia PERSONAL MODULAR CONTENT
65. @marktimemedia NON-VISUAL CONTENT DELIVERY
66. @marktimemedia FURTHER READING
67. ON MODULAR DESIGN • https://medium.com/5000-things/learning-from-lego-a-step- forward-in-modular-web-design-d8ff953f45a8 • http://atomicdesign.bradfrost.com/ • https://patternlab.io/ • https://www.toptal.com/designers/ux/getting-started-with- modular-front-end-development • https://room34.com/philosophy/modular-design/
68. ON GUTENBERG • https://wordpress.org/gutenberg/ • https://gogutenberg.com/blocks/ • https://torquemag.io/2018/07/gutenberg-wordpress-editor-review-roundup/ • https://www.dreamhost.com/blog/wordpress-gutenberg-for-designers/ • https://yoast.com/what-is-gutenberg/ • https://www.smashingmagazine.com/2018/08/complete-anatomy-gutenberg- wordpress-editor/ • https://crowdfavorite.com/wordpress-gutenberg-enterprise/ • https://www.wpbeaverbuilder.com/future-web-gutenberg-facebook-wordpress- myspace/
69. FREE STUFF (MY WORK) • https://github.com/marktimemedia my base theme and ACF extension plugins (plus other stuff) • http://pinkspring.marktimedev.com/ Live demo of aforementioned theme and plugins
70. @marktimemedia QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/atomic-gutenberg