Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Content Strategists like Karen McGrane make a distinction between CMS implementations that store content in large, unstructured “blobs” and those which store finely grained, structured “chunks.” WordPress is often accused of being on #teamblob but with appropriate use of custom post types, post meta, taxonomies, and term meta, can be an excellent example of #teamchunk.

Now enter project Gutenberg, with inline block creation, block templates, block types, shared blocks and dynamic blocks.

Is this a return to #teamblob? If you create a block for, as an example, staff profiles, will you end up with hardcoded staff phone numbers in different blocks on different pages? Will you have to rewrite the staff directory to be a dynamic block? What’s all this about storing the content as html comments?

This talk will not be a deep dive into the code of Gutenberg, but will explain how Gutenberg’s approach fits into the debate about structured content versus unstructured content, and how you can best leverage the new WordPress editor without going all blobby.

John Eckman

July 21, 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 B O S TO N 2 0 1 8

    View Slide

  2. 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/
    John Eckman • @jeckman • #wcbos

    View Slide

  3. 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/
    John Eckman • @jeckman • #wcbos

    View Slide

  4. John Eckman • @jeckman • #wcbos
    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 field
    • Mix presentation and structure
    • Make reuse difficult
    • Faster to create

    • Chunks:
    • Content broken down into small,
    structured components
    • Separate presentation & structure
    • Facilitate reuse
    • Require more planning
    https://wordpress.tv/2014/01/05/john-eckman-beyond-posts-and-pages-getting-chunky-with-wordpress/
    John Eckman • @jeckman • #wcbos

    View Slide

  5. John Eckman • @jeckman • #wcbos
    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 • #wcbos

    View Slide

  6. John Eckman • @jeckman • #wcbos
    “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 • #wcbos

    View Slide

  7. John Eckman • @jeckman • #wcbos
    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 • #wcbos

    View Slide


  8. Verse Block


    Write poetry and other literary
    expressions honoring all spaces and line-breaks.


    Table Block





    Row 1 Column 1
    Row 1 Column 2


    Row 2 Column 1
    Row 2 Column 2


    Row 3 Column 1
    Row 3 Column 2





    Separator Block


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

    View Slide



  9. Row 3 Column 1
    Row 3 Column 2





    Separator Block





    Spacer Block





    Categories Block



    Latest Posts Block


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

    View Slide


  10. Twitter Embed Block



    https://twitter.com/MKBHD/status/
    993606431126548481



    YouTube Embed Block



    https://www.youtube.com/watch?v=V-Ma40uyo-I



    Facebook Embed Block


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

    View Slide

  11. 993606431126548481","type":"rich","providerNameSl
    ug":"twitter"} -->

    https://twitter.com/MKBHD/status/
    993606431126548481



    YouTube Embed Block



    https://www.youtube.com/watch?v=V-Ma40uyo-I



    Facebook Embed Block



    https://www.facebook.com/groups/macpowerusers/


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

    View Slide

  12. John Eckman • @jeckman • #wcbos
    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
    John Eckman • @jeckman • #wcbos

    View Slide

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

    View Slide

  14. John Eckman • @jeckman • #wcbos
    M E TA DATA

    View Slide

  15. John Eckman • @jeckman • #wcbos
    M E TA DATA
    • Album
    • Artist
    • Title
    • Cover Image
    • Label
    • Release Year
    • Categories

    View Slide

  16. John Eckman • @jeckman • #wcbos
    M E TA DATA
    • Review
    • Author
    • Date
    • Score
    • Subhead / Deck

    View Slide

  17. John Eckman • @jeckman • #wcbos
    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!

    View Slide

  18. John Eckman • @jeckman • #wcbos
    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

    View Slide

  19. John Eckman • @jeckman • #wcbos
    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

    View Slide

  20. John Eckman • @jeckman • #wcbos
    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

    View Slide

  21. John Eckman • @jeckman • #wcbos
    CHALLENGE: MULTIPLE
    ALBUMS IN A REVIEW?

    View Slide

  22. John Eckman • @jeckman • #wcbos
    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

    View Slide

  23. John Eckman • @jeckman • #wcbos
    ENTER GUTENBERG

    View Slide

  24. John Eckman • @jeckman • #wcbos
    ENTER GUTENBERG

    View Slide

  25. John Eckman • @jeckman • #wcbos
    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?

    View Slide

  26. John Eckman • @jeckman • #wcbos
    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)

    View Slide

  27. John Eckman • @jeckman • #wcbos
    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

    View Slide

  28. John Eckman • @jeckman • #wcbos
    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

    View Slide

  29. John Eckman • @jeckman • #wcbos
    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)

    View Slide

  30. John Eckman • @jeckman • #wcbos
    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 • #wcbos

    View Slide

  31. John Eckman • @jeckman • #wcbos
    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

    View Slide

  32. View Slide

  33. John Eckman • @jeckman • #wcbos
    Thank You!
    Feedback Welcome: @jeckman or [email protected]

    View Slide