Slide 1
Slide 1 text
BUILDING BLOCKS
ATOMIC IN A
GUTENBERG
WORLD
DESIGN
Slide 2
Slide 2 text
@marktimemedia
I
Design
&
Build THINGS.
USUALLY WITH
WORDPRESS.
HI, I’M
MICHELLE.
Slide 3
Slide 3 text
@marktimemedia
THE INTERWEBS
A VERY BRIEF HISTORY
Slide 4
Slide 4 text
@marktimemedia
IN THE BEGINNING…
Slide 5
Slide 5 text
@marktimemedia
THE
“WEB PAGE”
PARADIGM
Slide 6
Slide 6 text
@marktimemedia
STATIC CONTENT
ONE-WAY MESSAGE
HAND-CODED
Slide 7
Slide 7 text
@marktimemedia
THE AGE OF
CONTENT MANAGEMENT
Slide 8
Slide 8 text
@marktimemedia
WEBSITES ARE
DYNAMIC
Slide 9
Slide 9 text
@marktimemedia
RELATIONSHIPS
CONDITIONALS
DATABASES
INTERACTIONS
Slide 10
Slide 10 text
@marktimemedia
WEBSITES ARE
MODULAR
Slide 11
Slide 11 text
@marktimemedia
SYSTEMS
COMPONENTS
SINGLE-USE
Slide 12
Slide 12 text
@marktimemedia
ATOMIC DESIGN
BRAD FROST
Slide 13
Slide 13 text
@marktimemedia
ATOMS
THE SMALLEST BUILDING BLOCKS
Slide 14
Slide 14 text
@marktimemedia
http://zqsmm.qiniucdn.com/data/20110511083224/index.html
Slide 15
Slide 15 text
@marktimemedia
MOLECULES
UNIQUE COMBINATIONS
OF ATOMS
Slide 16
Slide 16 text
@marktimemedia
Slide 17
Slide 17 text
@marktimemedia
ORGANISMS
MOLECULES COMING TOGETHER
ALLOW ACTION
Slide 18
Slide 18 text
@marktimemedia
Slide 19
Slide 19 text
@marktimemedia
TEMPLATES
ORGANISMS TOGETHER BECOME
LAYOUTS
Slide 20
Slide 20 text
@marktimemedia
Slide 21
Slide 21 text
@marktimemedia
PAGES
TEMPLATES WITH SPECIFIC
CONTENT
Slide 22
Slide 22 text
@marktimemedia
Slide 23
Slide 23 text
@marktimemedia
THE
EVOLUTION
OF
WORDPRESS
Slide 24
Slide 24 text
@marktimemedia
the_content()
Slide 25
Slide 25 text
@marktimemedia
the_content()
Slide 26
Slide 26 text
THE IDEAL CONTENT MANAGEMENT
EXPERIENCE
ACCESSIBLE BALANCED CONSISTENT
DYNAMIC EXTENSIBLE FLEXIBLE
Slide 27
Slide 27 text
@marktimemedia
HOW DO WE
BUILD DYNAMIC,
MODULAR
CONTENT IN
WORDPRESS?
Slide 28
Slide 28 text
@marktimemedia
CHAPTER 1:
EXTENDING
THE CONTENT
Slide 29
Slide 29 text
@marktimemedia
EDITING HTML
Slide 30
Slide 30 text
@marktimemedia
SHORTCODE CHAOS
Slide 31
Slide 31 text
@marktimemedia
(SHORT-LIVED)
SHORTCAKE UI
Slide 32
Slide 32 text
@marktimemedia
HIDDEN
SETTINGS:
widgetized pages, theme options,
extra menus, & the customizer
Slide 33
Slide 33 text
@marktimemedia
EXTENDING THE EDITOR
https://make.wordpress.org/core/2017/04/07/editor-experience-survey-results/
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
@marktimemedia
CHAPTER 2:
CHANGING THE
USER INTERFACE
Slide 36
Slide 36 text
@marktimemedia
PAGE BUILDERS
Slide 37
Slide 37 text
@marktimemedia
Slide 38
Slide 38 text
@marktimemedia
Slide 39
Slide 39 text
@marktimemedia
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
@marktimemedia
CUSTOM FIELDS
Slide 43
Slide 43 text
@marktimemedia
Slide 44
Slide 44 text
@marktimemedia
Slide 45
Slide 45 text
@marktimemedia
Slide 46
Slide 46 text
@marktimemedia
Slide 47
Slide 47 text
@marktimemedia
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
@marktimemedia
CHAPTER 3:
THE GUTENBERG
CONTENT EDITOR
Slide 51
Slide 51 text
@marktimemedia
HELLO,
GUTENBERG
Slide 52
Slide 52 text
@marktimemedia
CORE
BLOCKS:
atoms
& molecules
& organisms
(oh my!)
Slide 53
Slide 53 text
@marktimemedia
Slide 54
Slide 54 text
@marktimemedia
Slide 55
Slide 55 text
@marktimemedia
REUSABLE BLOCKS
Slide 56
Slide 56 text
@marktimemedia
Reusable blocks
REUSABLE BLOCKS
Slide 57
Slide 57 text
@marktimemedia
CUSTOM
BLOCKS:
building static &
dynamic content
Slide 58
Slide 58 text
@marktimemedia
FUTURE
BLOCKS:
Nested?
Repeatable?
Conditional?
Slide 59
Slide 59 text
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
Slide 60
Slide 60 text
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
Slide 61
Slide 61 text
@marktimemedia
CHAPTER 4:
BEYOND
THE CONTENT
Slide 62
Slide 62 text
@marktimemedia
GUTENBERG
AS A DESIGN PARADIGM
Slide 63
Slide 63 text
@marktimemedia
A BLOCK PARTY
FOR YOUR
ENTIRE
SITE
Slide 64
Slide 64 text
@marktimemedia
PERSONAL
MODULAR
CONTENT
Slide 65
Slide 65 text
@marktimemedia
NON-VISUAL
CONTENT
DELIVERY
Slide 66
Slide 66 text
@marktimemedia
FURTHER
READING
Slide 67
Slide 67 text
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/
Slide 68
Slide 68 text
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/
Slide 69
Slide 69 text
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
Slide 70
Slide 70 text
@marktimemedia
QUESTIONS?
Michelle Schulp
[email protected]
@marktimemedia
bit.ly/atomic-gutenberg