I have a confession: I’m stumped by something that should be simple.
All I want to do is add a microformats2 u-photo (for indie web and webmention goodness) to my post’s featured image within my blog’s h-entry, but I’m using a modern WordPress block-based theme, and it just doesn’t want to work.
Table of Contents
What I Want
I want to add the u-photo class to the <img> tag for the featured image of my posts. This makes my content more discoverable for IndieWeb tools, webmentions, and federated networks. It’s also the “right” way according to the microformats2 spec.
What Actually Happens
If you use the Block Editor (Gutenberg) today and try to add a custom class to the featured image block, here’s what you get:
<figure class="u-photo wp-block-post-featured-image">
<img src="..." class="wp-post-image" />
</figure>Notice how u-photo is only on the <figure> and not on the <img>? This matters, because IndieWeb validators (like indiewebify.me) and microformats parsers look for u-photo specifically on the <img> tag.
Result: My blog post’s image isn’t recognized as my u-photo at all.
What I Tried
- Adding a custom class in the block settings (goes on <figure>, not <img>)
- Looking for a block setting or “advanced” toggle (none for the image itself)
- Shortcodes, global CSS hacks, custom block plugins, dynamic PHP block, either they hide the image, lose the markup, or don’t play well with the Block Editor UI
Why Does It Have To Be So Difficult?
- Block themes and Gutenberg are great for UX, but not for semantic, machine-readable HTML
- The block editor assumes you only want block-level class changes, not fine-grained control of output
- Most tutorials and validators expect the static/classic template output
Where I’m Stuck
Right now, I can’t get a valid, visible <img class=”u-photo” …> inside my h-entry using just the default blocks.
If I hack it in with a shortcode or custom block, I can’t style it or place it naturally in the block flow.
If I make the image “hidden” for bots only, microformats parsers ignore it.
I just want one image to do double-duty:
- Show as my featured image for readers
- Be marked up as u-photo for IndieWeb
But unless I write a custom PHP block or deeply customize my theme, it feels impossible in pure block themes today.
If You’re Also Stuck…
You’re not alone! This really is an unsolved problem for block themes right now. If you’ve found a clean solution, please let me know (or DM me if you have a cool method that actually works with indiewebify.me!).
Until then, my microformats dreams (for h-entry) remain… a work in progress. Time to keep tinkering!
Comment