Skip to content

Note and Like Microformats

This seems (and it is) not terribly important, but I’ve spent a bit too much time pondering note and like microformats. (Some context: I’m working on new IndieBlocks blocks, and am rethinking some custom post type, uh, things.)

An Example

Currently, IndieBlocks’ Context block produces more or less the following markup (this particular example would be for a “like”):

<div class="wp-block-indieblocks-context">
  <i>Likes <a class="u-like-of" href=""></a>.</i>

Which works just fine.

But if you wanted a richer “like context,” you’d need something like (using “h-cite”):

<div class="wp-block-indieblocks-like u-like-of h-cite">
  <i>Likes <a class="u-url p-name" href="">WordPress and YAML</a>
  by <span class="p-author">Jan Boddez</span>.</i>

A bit more difficult to generate in JavaScript, but not too bad.

Next up: e-content.


If you just use the block as-is, and nothing else, your microformats-compatible theme (or IndieBlocks’ theme functionality) will likely wrap the entire post in, e.g., <div class="e-content"></div>. That works.

We could also opt, however, to move our “like context,” whether a “h-cite” or the simpler example at the beginning of this post, outside of e-content, by defining it explicitly:

<div class="wp-block-indieblocks-like u-like-of h-cite">
  <i>Likes <a class="u-url p-name" href="">">WordPress and YAML</a>
  by <span class="p-author">Jan Boddez</span>.</i>
<div class="e-content"><p>Cowabunga!</p></div>

Now, whether this’ll work is going to depend on your theme. (IndieBlocks’ theme functions will pick up the “inner” e-content and no longer add the class to the post as a whole.)

Note that I’ve purposely omitted the <article class="h-entry"></article> or similar tags that this bit of HTML would be wrapped in, still. Same goes for the other examples.

Me, myself, I rarely add any “content” to likes at all, so I usually leave this out. (And then my theme will add an e-content class to the post regardless; I can live with that, even if it isn’t entirely consistent with my notes.)


My “notes” (I use the term broadly) come in two flavors: there’s “plain-text,” actual notes, and then there’s replies and such. Plain-text notes don’t get an explicit e-content; I have my theme deal with them as described above.

Replies look a little like this (and do make that distinction between “reply context” and e-content):

<div class="wp-block-indieblocks-context">
  <i>In reply to <a class="u-in-reply-to" href=""></a>.</i>
<div class="is-layout-flow wp-block-group e-content">
  <p>Dude, nobody cares.</p>

My “note” custom post type, in fact, comes with a “block template” that pre-adds that Group block for me, including the e-content class. (But the “like” custom post type does not, because I never add content to likes. And if you were to move blocks around, or add a Context block elsewhere, well, who knows what you end up with. That’s why I always have Gutenberg’s List View open. I need to know what’s happening.)


Reposts are a bit different, still, and should probably look like so:

<div class="wp-block-indieblocks-repost u-repost-of h-cite">
  <i>Reposted <a class="u-url" href="">a note</a>
  by <span class="p-author">Jan Boddez</span>.</i>
  <blockquote class="wp-block-quote e-content">
    <p>Yay! Another Gutenberg issue that's existed for years.</p>
    <p>Context: I want to lock down IndieBlocks' like, but allow (any) `InnerBlocks` inside the new "like" block. This would allow me to add the necessary `.h-cite` and `.e-content` classes in _just_ the right spots, while allowing users to add as many paragraphs, blockquotes, images, and whatnot without mucking up the post's microformats.</p>

Count the differences (besides the missing p-name on the—titleless—note)? The e-content class is now applied to a blockquote (and a WordPress Quote block at that) that sits inside our h-cite!

There’s no way we can do this using only the current Context block and a block template. (It would likely take a combination of Group, Quote and Custom HTML blocks.)

But we can use a new block entirely, and leverage Gutenberg’s InnerBlocks.

Come to think of it, there may be scenarios in which you’ll find it useful to have certain images outside a post’s e-content. Could be a reason to not lock down certain post types too much.

In Conclusion

Where I’m going with all of this? You tell me.

No, seriously, I think what I’m trying to say is microformats are darn simple, but not easy. And that building intuitive interfaces that allows users to add them to short bits of text is even more difficult. There’s just so many variables!

Anyhow, here’s two (or three) final remarks:

  1. I’ll probably drop the custom post type templates altogether. If you know what you’re doing, and want to, you yourself are going to be able to add that “e-content” group in just the right spot. If not, you’re theme will deal with it. Things might look a bit different in certain “h-feed readers” (which hardly anyone uses), but will otherwise continue to work just fine. This would get rid of the inconsistencies between notes and likes, too.
  2. I may slowly be adding new blocks that work slightly differently from the Context block. Slowly, because you can’t just change a block’s output markup without either confusing users (even more) or very convoluted workarounds.
  3. Notes were supposed to be the equivalent of Tweets: mostly plain-text, short bits of text. Not a thought exercise in and of itself. (Which is why limiting any new blocks’ “allowed InnerBlocks” is probably a good thing.)


  1. James' Coffee Blog on

    … bookmarked this!

  2. Jan Boddez on

    I should anyway drop the note CPT’s block template; most actual notes don’t need a Context block.
    I might not lock down InnerBlocks after all so that users are still able to add, e.g., a Markdown block, should they want to.
    Makes sense to start work on a Repost block; reposts, in my experience, are somewhat rare, and they would “benefit” most from the h-cite-plus-inner-e-content approach.

  3. on

    … liked this!