Building Blocks: Atomic Design in a Gutenberg World

E195ae45320d9202eaa01c9f1d31a416?s=47 Michelle Schulp
September 15, 2018

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.

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

September 15, 2018
Tweet

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