The Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg

THE BLOB, THE CHUNK,
& THE BLOCK:
STRUCTURED CONTENT IN
THE AGE OF GUTENBERG
WO R D C A M P B O S TO N 2 0 1 8

John Eckman • @jeckman • #wcbos
W E ’ V E B E E N H E R E B E F O R E
https://wordpress.tv/2014/01/05/john-eckman-beyond-posts-and-pages-getting-chunky-with-wordpress/

W E ’ V E B E E N H E R E B E F O R E
• Blobs:
• Content all mashed together into a
single big ﬁeld
• Mix presentation and structure
• Make reuse diﬃcult
• Faster to create 
• Chunks:
• Content broken down into small,
structured components
• Separate presentation & structure
• Facilitate reuse
• Require more planning

E N T E R G U T E N B E R G
https://en.wikipedia.org/wiki/File:Metal_movable_type.jpg

“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

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

<h2>Verse Block</h2>


<pre class="wp-block-verse">Write poetry and other literary
expressions honoring all spaces and line-breaks.</pre>


<h2>Table Block</h2>

<table class="wp-block-table">
<tbody>
<tr style="height:45px">
<td style="height:45px">Row 1 Column 1</td>
</tr>
</tr>
</tr>
</tbody>
</table>


<h2>Separator Block</h2>

https://sridharkatakam.com/dummy-content-for-gutenberg/ John Eckman • @jeckman • #wcbos

</tr>
</tr>
</tbody>
</table>


<h2>Separator Block</h2>

<hr class="wp-block-separator" />


<h2 class="has-top-margin">Spacer Block</h2>

<div style="height:100px" aria-hidden="true" class="wp-
block-spacer"></div>


<h2>Categories Block</h2>


<h2>Latest Posts Block</h2>

<h2>Twitter Embed Block</h2>

<figure class="wp-block-embed-twitter wp-block-
embed is-type-rich is-provider-twitter">
https://twitter.com/MKBHD/status/
993606431126548481
</figure>


<h2>YouTube Embed Block</h2>

<figure class="wp-block-embed-youtube wp-block-
embed is-type-video is-provider-youtube">
https://www.youtube.com/watch?v=V-Ma40uyo-I
</figure>


<h2>Facebook Embed Block</h2>

993606431126548481","type":"rich","providerNameSl
ug":"twitter"} -->
<figure class="wp-block-embed-twitter wp-block-
embed is-type-rich is-provider-twitter">
https://twitter.com/MKBHD/status/
993606431126548481
</figure>


<h2>YouTube Embed Block</h2>

<figure class="wp-block-embed-youtube wp-block-
embed is-type-video is-provider-youtube">
https://www.youtube.com/watch?v=V-Ma40uyo-I
</figure>


<h2>Facebook Embed Block</h2>

<figure class="wp-block-embed-facebook wp-block-
embed is-provider-embed-handler">
https://www.facebook.com/groups/macpowerusers/
</figure>

A R E B LO C K S B LO B BY, O R C H U N KY ?
• Blocks have structure.
• Blocks get stored inside the post content, but in a structured way
• Is a block just a chunk stored inside a blob?
• Block editing works on structured data
• 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

( H Y P OT H E T I C A L ) C AS E S T U DY

M E TA DATA

M E TA DATA
• Album
• Artist
• Title
• Cover Image
• Label
• Release Year
• Categories

M E TA DATA
• Review
• Author
• Date
• Score
• Subhead / Deck

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
• Not so much reuse
• Not so much consistency
• Very very fast and simple
• Blobbiest of blobs
• Don’t do this!

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

P R E - G U T E N B E R G , R O U N D T WO
• Review CPT, with speciﬁc 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

CHALLENGE: MULTIPLE
ALBUMS IN A REVIEW?

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 ﬁrst then the
review of it

ENTER GUTENBERG

G U T E N B E R G , R O U N D O N E
• Custom block for albums
• Editors can put it anywhere
• But: inconsistency
• But: no reuse
• Better than the blobby old way?

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)

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

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
• Album CPT could still use a block
template for editing
• Set taxonomies on review based on
Album CPT pulled in?
• Decent reuse

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)

W H Y C H U N K ?
• Future Prooﬁng:
• What happens when new devices
get introduced & necessitate
diﬀerent 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?

C O N C LU S I O N S
• Block-based editing can improve experience
• Closer representation to the thing being edited
• More ﬂexibility 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 beneﬁts of blocks
• More complex “save” events and block interfaces Photo by Markus Spiske on Unsplash
https://unsplash.com/photos/OO89_95aUC0

Thank You!
Feedback Welcome: @jeckman or john.eckman@10up.com

The Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de John Eckman

Mais de John Eckman (20)

Último

Último (20)

The Blob, the Chunk, & the Block: Structured Content in the Age of Gutenberg