$30 off During Our Annual Pro Sale. View Details »

The Blob, the Chunk, & the Block: Structured Co...

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

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?

John Eckman

August 25, 2018
Tweet

More Decks by John Eckman

Other Decks in Technology

Transcript

  1. THE BLOB, THE CHUNK, & THE BLOCK: STRUCTURED CONTENT IN

    THE AGE OF GUTENBERG WO R D C A M P M I N N E A P O L I S 2 0 1 8
  2. John Eckman • @jeckman • #wcmsp C H U N

    K S V S B LO B S John Eckman • @jeckman • #wcmsp
  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 Unsplash https://unsplash.com/photos/OhJmwB4XWLE John Eckman • @jeckman • #wcmsp
  8. <!-- wp:heading --> <h2>Verse Block</h2> <!-- /wp:heading --> <!-- wp:verse

    --> <pre class="wp-block-verse">Write poetry and other literary expressions honoring all spaces and line-breaks.</pre> <!-- /wp:verse --> <!-- wp:heading --> <h2>Table Block</h2> <!-- /wp:heading --> <!-- wp:table --> <table class="wp-block-table"> <tbody> <tr style="height:45px"> <td style="height:45px">Row 1 Column 1</td> <td style="height:45px">Row 1 Column 2</td> </tr> <tr style="height:45px"> <td style="height:45px">Row 2 Column 1</td> <td style="height:45px">Row 2 Column 2</td> </tr> <tr style="height:45px"> <td style="height:45px">Row 3 Column 1</td> <td style="height:45px">Row 3 Column 2</td> </tr> </tbody> </table> <!-- /wp:table --> <!-- wp:heading --> <h2>Separator Block</h2> <!-- /wp:heading --> <!-- wp:separator --> https://sridharkatakam.com/dummy-content-for-gutenberg/ John Eckman • @jeckman • #wcmsp
  9. </tr> <tr style="height:45px"> <td style="height:45px">Row 3 Column 1</td> <td style="height:45px">Row

    3 Column 2</td> </tr> </tbody> </table> <!-- /wp:table --> <!-- wp:heading --> <h2>Separator Block</h2> <!-- /wp:heading --> <!-- wp:separator --> <hr class="wp-block-separator" /> <!-- /wp:separator --> <!-- wp:heading {"className":"has-top-margin"} --> <h2 class="has-top-margin">Spacer Block</h2> <!-- /wp:heading --> <!-- wp:spacer --> <div style="height:100px" aria-hidden="true" class="wp- block-spacer"></div> <!-- /wp:spacer --> <!-- wp:heading --> <h2>Categories Block</h2> <!-- /wp:heading --> <!-- wp:categories /--> <!-- wp:heading --> <h2>Latest Posts Block</h2> <!-- /wp:heading --> <!-- wp:latest-posts /--> https://sridharkatakam.com/dummy-content-for-gutenberg/ John Eckman • @jeckman • #wcmsp
  10. <!-- wp:heading --> <h2>Twitter Embed Block</h2> <!-- /wp:heading --> <!--

    wp:core-embed/twitter {"url":"https:// twitter.com/MKBHD/status/ 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> <!-- /wp:core-embed/twitter --> <!-- wp:heading --> <h2>YouTube Embed Block</h2> <!-- /wp:heading --> <!-- wp:core-embed/youtube {"url":"https:// www.youtube.com/watch?v=V-Ma40uyo- I","type":"video","providerNameSlug":"youtube"} --> <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> <!-- /wp:core-embed/youtube --> <!-- wp:heading --> <h2>Facebook Embed Block</h2> <!-- /wp:heading --> <!-- wp:core-embed/facebook {"url":"https:// www.facebook.com/groups/ macpowerusers/","providerNameSlug":"embed- handler"} --> https://sridharkatakam.com/dummy-content-for-gutenberg/ John Eckman • @jeckman • #wcmsp
  11. 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> <!-- /wp:core-embed/twitter --> <!-- wp:heading --> <h2>YouTube Embed Block</h2> <!-- /wp:heading --> <!-- wp:core-embed/youtube {"url":"https:// www.youtube.com/watch?v=V-Ma40uyo- I","type":"video","providerNameSlug":"youtube"} --> <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> <!-- /wp:core-embed/youtube --> <!-- wp:heading --> <h2>Facebook Embed Block</h2> <!-- /wp:heading --> <!-- wp:core-embed/facebook {"url":"https:// www.facebook.com/groups/ macpowerusers/","providerNameSlug":"embed- handler"} --> <figure class="wp-block-embed-facebook wp-block- embed is-provider-embed-handler"> https://www.facebook.com/groups/macpowerusers/ </figure> <!-- /wp:core-embed/facebook --> https://sridharkatakam.com/dummy-content-for-gutenberg/ 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
  13. John Eckman • @jeckman • #wcmsp ( H Y P

    OT H E T I C A L ) C AS E S T U DY
  14. John Eckman • @jeckman • #wcmsp ( H Y P

    OT H E T I C A L ) C AS E S T U DY
  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
  32. 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?
  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 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)
  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 ( 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
  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 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
  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 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)
  52. 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
  53. 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