Content strategists distinguish between storing content in unstructured “blobs” and storing content in structured “chunks.” Where do Gutenberg “blocks” fit in? How is Gutenberg-edited content stored, and how do we get the benefits of blocks without going all blobby?
3. John Eckman • @jeckman • #wcmsp
B LO B S V S C H U N K S
• Blobs:
• Content all mashed together into a
single big field
• Mix presentation and structure
• Make reuse difficult
• Faster to create
• “Web Publishing System”
• Chunks:
• Content broken down into small,
structured components
• Separate presentation & structure
• Facilitate reuse
• Require more planning
• “Content Management System”
https://wordpress.tv/2014/01/05/john-eckman-beyond-posts-and-pages-getting-chunky-with-wordpress/
John Eckman • @jeckman • #wcmsp
4. John Eckman • @jeckman • #wcmsp
E N T E R G U T E N B E R G
https://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
John Eckman • @jeckman • #wcmsp
5. John Eckman • @jeckman • #wcmsp
E N T E R G U T E N B E R G
https://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
John Eckman • @jeckman • #wcmsp
https://twitter.com/jeckman/status/1021092249885659136
6. John Eckman • @jeckman • #wcmsp
“The Gutenberg editor uses blocks to create all types of content,
replacing a half-dozen inconsistent ways of customizing WordPress,
bringing it in line with modern coding standards, and aligning with
open web initiatives. These content blocks transform how users,
developers, and hosts interact with WordPress to make building rich
web content easier and more intuitive, democratizing publishing —
and work — for everyone, regardless of technical ability.”
E N T E R G U T E N B E R G
https://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
John Eckman • @jeckman • #wcmsp
7. John Eckman • @jeckman • #wcmsp
A R E B LO C K S B LO B BY, O R C H U N KY ?
Photo by Bruno Martins on Unsplashhttps://unsplash.com/photos/OhJmwB4XWLE
John Eckman • @jeckman • #wcmsp
12. John Eckman • @jeckman • #wcmsp
A R E B LO C K S B LO B BY, O R C H U N KY ?
• Blocks can have structure and can store metadata
• Blocks get stored inside the post content, in a semi-structured way
• Is a block just a chunk stored inside a blob?
• Block editing works on the structured data, reconstructs rendering
• How can we get the benefits of blocks (user experience, flexibility,
previewability) while preserving the value of structured content (reuse,
extensibility, future-proofing, presentation independence)?
• How can we transition to blocks without going all blobby?
Photo by Joanna Kosinska on Unsplash
https://unsplash.com/photos/xFTNsGW1isI
John Eckman • @jeckman • #wcmsp
15. John Eckman • @jeckman • #wcmsp
• Review
• Author
• Date
• Score / flag
• Subhead / Deck
M E TA DATA
16. John Eckman • @jeckman • #wcmsp
• Review
• Author
• Date
• Score / flag
• Subhead / Deck
M E TA DATA
• Album
• Artist
• Title
• Cover Image
• Label
• Release Year
17. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E
• WYSIWYG editor in content
• Very blobby
• No real reuse
• No real consistency
• Very very fast and simple
• Blobbiest of blobs
• Don’t do this!
18. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E
• WYSIWYG editor in content
• Very blobby
• No real reuse
• No real consistency
• Very very fast and simple
• Blobbiest of blobs
• Don’t do this!
19. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E
• WYSIWYG editor in content
• Very blobby
• No real reuse
• No real consistency
• Very very fast and simple
• Blobbiest of blobs
• Don’t do this!
20. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E
• WYSIWYG editor in content
• Very blobby
• No real reuse
• No real consistency
• Very very fast and simple
• Blobbiest of blobs
• Don’t do this!
21. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E ( B )
• Shortcode to insert Album bit
• Structures the data slightly
• Use shortcode UI (shortcake)
• Still pretty blobby
• Hard to access data inside
the shortcode
• Hard to track relationship of
shortcode to posts using it
22. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E ( B )
• Shortcode to insert Album bit
• Structures the data slightly
• Use shortcode UI (shortcake)
• Still pretty blobby
• Hard to access data inside
the shortcode
• Hard to track relationship of
shortcode to posts using it
23. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E ( B )
• Shortcode to insert Album bit
• Structures the data slightly
• Use shortcode UI (shortcake)
• Still pretty blobby
• Hard to access data inside
the shortcode
• Hard to track relationship of
shortcode to posts using it
24. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E ( B )
• Shortcode to insert Album bit
• Structures the data slightly
• Use shortcode UI (shortcake)
• Still pretty blobby
• Hard to access data inside
the shortcode
• Hard to track relationship of
shortcode to posts using it
25. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E ( B )
• Shortcode to insert Album bit
• Structures the data slightly
• Use shortcode UI (shortcake)
• Still pretty blobby
• Hard to access data inside
the shortcode
• Hard to track relationship of
shortcode to posts using it
26. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E ( B )
• Shortcode to insert Album bit
• Structures the data slightly
• Use shortcode UI (shortcake)
• Still pretty blobby
• Hard to access data inside
the shortcode
• Hard to track relationship of
shortcode to posts using it
27. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D O N E ( B )
• Shortcode to insert Album bit
• Structures the data slightly
• Use shortcode UI (shortcake)
• Still pretty blobby
• Hard to access data inside
the shortcode
• Hard to track relationship of
shortcode to posts using it
28. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D T WO
• Review CPT, with specific
post meta and taxonomy
• Template for CPT
• More consistency
(templated layout, structured
input)
• More reuse: reviews of other
albums by this artist, from
this label, in this category
become taxonomy lookups
29. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D T WO
• Review CPT, with specific
post meta and taxonomy
• Template for CPT
• More consistency
(templated layout, structured
input)
• More reuse: reviews of other
albums by this artist, from
this label, in this category
become taxonomy lookups
30. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D T WO
• Review CPT, with specific
post meta and taxonomy
• Template for CPT
• More consistency
(templated layout, structured
input)
• More reuse: reviews of other
albums by this artist, from
this label, in this category
become taxonomy lookups
31. John Eckman • @jeckman • #wcmsp
P R E - G U T E N B E R G , R O U N D T H R E E
• Review & Album CPTs, w/
relationship
• Artist or Label as CPT or
Taxonomy
• Enables reuse: show other
albums by this artist, other
reviews of this album
• Editing process more complex/
abstract - create album first
then the review of it
33. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D O N E
• WYSIWYG blocks for
albums
• Editors can put it anywhere
• No real reuse
• No real consistency
• Better than the blobby old
way?
34. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D O N E
• WYSIWYG blocks for
albums
• Editors can put it anywhere
• No real reuse
• No real consistency
• Better than the blobby old
way?
35. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D O N E
• WYSIWYG blocks for
albums
• Editors can put it anywhere
• No real reuse
• No real consistency
• Better than the blobby old
way?
36. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D O N E
• WYSIWYG blocks for
albums
• Editors can put it anywhere
• No real reuse
• No real consistency
• Better than the blobby old
way?
37. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T WO
• Reviews CPT & block template
• Consistency of layout, structure
- but not necessarily content
• Some reuse of reviews
(taxonomies on review CPT)
• But not really reuse of albums
independent of reviews
• Could set post-meta on review
that really “belongs” to album
(artist, genre)
38. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T WO
• Reviews CPT & block template
• Consistency of layout, structure
- but not necessarily content
• Some reuse of reviews
(taxonomies on review CPT)
• But not really reuse of albums
independent of reviews
• Could set post-meta on review
that really “belongs” to album
(artist, genre)
39. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T WO
• Reviews CPT & block template
• Consistency of layout, structure
- but not necessarily content
• Some reuse of reviews
(taxonomies on review CPT)
• But not really reuse of albums
independent of reviews
• Could set post-meta on review
that really “belongs” to album
(artist, genre)
40. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T WO
• Reviews CPT & block template
• Consistency of layout, structure
- but not necessarily content
• Some reuse of reviews
(taxonomies on review CPT)
• But not really reuse of albums
independent of reviews
• Could set post-meta on review
that really “belongs” to album
(artist, genre)
41. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T WO ( B )
• Albums as “reusable” / “saved”
/ “shared” blocks
• Underneath the hood, saved
blocks are just a CPT with
block content
• Not easy to see if they exist
already
• Still pretty blobby
• Weak “global” blocks
implementation
42. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T WO ( B )
• Albums as “reusable” / “saved”
/ “shared” blocks
• Underneath the hood, saved
blocks are just a CPT with
block content
• Not easy to see if they exist
already
• Still pretty blobby
• Weak “global” blocks
implementation
43. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T WO ( B )
• Albums as “reusable” / “saved”
/ “shared” blocks
• Underneath the hood, saved
blocks are just a CPT with
block content
• Not easy to see if they exist
already
• Still pretty blobby
• Weak “global” blocks
implementation
44. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T WO ( B )
• Albums as “reusable” / “saved”
/ “shared” blocks
• Underneath the hood, saved
blocks are just a CPT with
block content
• Not easy to see if they exist
already
• Still pretty blobby
• Weak “global” blocks
implementation
45. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T WO ( B )
• Albums as “reusable” / “saved”
/ “shared” blocks
• Underneath the hood, saved
blocks are just a CPT with
block content
• Not easy to see if they exist
already
• Still pretty blobby
• Weak “global” blocks
implementation
46. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T WO ( B )
• Albums as “reusable” / “saved”
/ “shared” blocks
• Underneath the hood, saved
blocks are just a CPT with
block content
• Not easy to see if they exist
already
• Still pretty blobby
• Weak “global” blocks
implementation
47. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T H R E E
• Reviews & Albums as CPTs, each
with Post Meta & Taxonomy
• Custom block to pulls in an
existing Album CPT into a
Review (store in post meta)
• Album CPT could still use a
block template for editing
• Set taxonomies on review based
on Album CPT pulled in?
• Decent reuse
48. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T H R E E
• Reviews & Albums as CPTs, each
with Post Meta & Taxonomy
• Custom block to pulls in an
existing Album CPT into a
Review (store in post meta)
• Album CPT could still use a
block template for editing
• Set taxonomies on review based
on Album CPT pulled in?
• Decent reuse
49. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T H R E E
• Reviews & Albums as CPTs, each
with Post Meta & Taxonomy
• Custom block to pulls in an
existing Album CPT into a
Review (store in post meta)
• Album CPT could still use a
block template for editing
• Set taxonomies on review based
on Album CPT pulled in?
• Decent reuse
50. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T H R E E
• Reviews & Albums as CPTs, each
with Post Meta & Taxonomy
• Custom block to pulls in an
existing Album CPT into a
Review (store in post meta)
• Album CPT could still use a
block template for editing
• Set taxonomies on review based
on Album CPT pulled in?
• Decent reuse
51. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D T H R E E
• Reviews & Albums as CPTs, each
with Post Meta & Taxonomy
• Custom block to pulls in an
existing Album CPT into a
Review (store in post meta)
• Album CPT could still use a
block template for editing
• Set taxonomies on review based
on Album CPT pulled in?
• Decent reuse
53. John Eckman • @jeckman • #wcmsp
G U T E N B E R G , R O U N D F O U R
• Reviews & Albums as CPTs
• If Album doesn’t exist, create inside the
editing window for the Review
• Set taxonomies and relationships on album
save - enable editing as a block but saving
to CPT
• Goal:
• Get the editing experience of a blobby
system (where you are editing in a more
wysiwyg model, with a preview of what
you will get)
• Preserve the structured content utility of
a chunky system (in terms of how data
gets stored and can be reused)
54. John Eckman • @jeckman • #wcmsp
W H Y C H U N K ?
• Future Proofing:
• What happens when new devices
get introduced & necessitate
different combinations of output?
• New features (e.g. link all reviews
to spotify version of album if
available)
• Consistency
• Single record for each object
• Enable Relationships:
• Show other albums by this artist
(for which we have reviews)
• Show other albums on this label or
in this category
• Show other reviews of this album
• Other Albums to which this artist
contributed?
https://wordpress.tv/2014/01/05/john-eckman-beyond-posts-and-pages-getting-chunky-with-wordpress/
John Eckman • @jeckman • #wcmsp
55. John Eckman • @jeckman • #wcmsp
C O N C LU S I O N S
• Block-based editing can improve experience
• Closer representation to the thing being edited
• More flexibility to move blocks within a page/post
• Block-based editing can make WP blobby
• Mixing presentation and structure in post content
• Structured blocks inside blobby post containers
• Proper content modeling and planning required
• You can still leverage many benefits of blocks
• More complex “save” events and block interfaces Photo by Markus Spiske on Unsplash
https://unsplash.com/photos/OO89_95aUC0
56.
57. John Eckman • @jeckman • #wcmsp
Thank You!
Feedback Welcome: @jeckman or john.eckman@10up.com
https://wapu.us/wapuu/gutenpuu/