Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

John Eckman • @jeckman • #wcmsp C H U N K S V S B LO B S John Eckman • @jeckman • #wcmsp

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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 • #wcmsp

Slide 9

Slide 9 text

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 • #wcmsp

Slide 10

Slide 10 text

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 • #wcmsp

Slide 11

Slide 11 text

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 • #wcmsp

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

John Eckman • @jeckman • #wcmsp • Review • Author • Date • Score / flag • Subhead / Deck M E TA DATA

Slide 16

Slide 16 text

John Eckman • @jeckman • #wcmsp • Review • Author • Date • Score / flag • Subhead / Deck M E TA DATA • Album • Artist • Title • Cover Image • Label • Release Year

Slide 17

Slide 17 text

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!

Slide 18

Slide 18 text

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!

Slide 19

Slide 19 text

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!

Slide 20

Slide 20 text

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!

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

John Eckman • @jeckman • #wcmsp ENTER GUTENBERG

Slide 33

Slide 33 text

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?

Slide 34

Slide 34 text

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?

Slide 35

Slide 35 text

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?

Slide 36

Slide 36 text

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?

Slide 37

Slide 37 text

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)

Slide 38

Slide 38 text

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)

Slide 39

Slide 39 text

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)

Slide 40

Slide 40 text

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)

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

John Eckman • @jeckman • #wcmsp

Slide 53

Slide 53 text

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)

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

John Eckman • @jeckman • #wcmsp Thank You! Feedback Welcome: @jeckman or [email protected] https://wapu.us/wapuu/gutenpuu/