Building a Block-Based Microblog

So, as promised, a blog post on how to—or rather, one way to—set up IndieBlocks. (I will eventually move this site to WordPress proper, and a block theme, and so on. Maybe I should’ve done that instead. Anyway, this is quicker.)

Configuring WordPress

Okay, so I’ve set up the build.boddez.net subdomain and installed WordPress core. I also installed IndieBlocks, and I’m using Twenty Twenty-Three as a theme.

I then went and created a “Home,” an “About,” and an “Articles” page. The former will be my “static” homepage (where I can, like, introduce my business or something), the latter the actual blog page. (See why I said this is but one way of setting up a WordPress [micro]blog?)

The new site’s “Reading” settings, where I’ve set custom home and blog pages.

Either way, I visited Settings > Reading and set home and blog page as mentioned.

Permalinks

The site’s “Permalinks” settings. I’ve set a custom permalink structure.

I like a bit of consistency—who doesn’t?—so I went and changed my permalink structure to /articles/%postname%/. This way, /articles/ will bring up the main blog page, and /articles/hello-world/ the (single) blog post titled “Hello World.”

Made it so far, great! (Anyone somewhat familiar with setting up a WordPress site should recognize most of the above.)

Configuring IndieBlocks

The first thing I do is head over to Settings > IndieBlocks and enable both blocks and microformats.

IndieBlocks’ blocks and microformats settings.

The former will give me access, in WordPress’ block editor, to certain custom blocks.

Microformats are small bits of HTML; metadata, really. By enabling this feature, IndieBlocks will add them to a number of WordPress’ built-in “theme blocks,” like, e.g., the Post Author block, or the Post Date block.

On their own, microformats don’t do much, but when paired with Webmention (which we’ll get to in a minute), they become quite powerful.

Custom Post Types

I want my site to support not just regular posts (“articles,” in IndieWeb jargon), but “notes” and “likes,” too. So I enable ’em (on the Post Types tab).

IndieBlocks’ post type settings. I’ve enabled most, but not all, precisely because I’m keeping notes and likes separate from regular “posts” (instead of going “full tumblelog”).

I also choose to add notes (but not likes) to my site’s “main” feed (which lives at, well, /feed/).

But, because of how I’ve set up my permalinks, IndieBlocks will also create a new, articles-only feed at /articles/feed/. So I can still offer my readers a feed that isn’t cluttered with notes! [Amazing, right?])

Because notes and likes are custom post types, WordPress will auto-generate archives for them at /notes/ and /likes/, respectively. And feeds at /notes/feed/ and /likes/feed/.

I could opt to include notes on the “main” blog page—which I’ve moved to /articles/, remember?—but I won’t. For this site, I’m keeping the microblog separate. And the likes section … even more separate.

I’ve also enabled date-based archives—one of IndieBlocks’ more experimental features—so that, in case someone stumbles upon, e.g., /notes/2023/05/, they don’t run into surprises.

Oh, and I’ve brought the permalink format—the single setting covers both notes and likes—in line with what I set up above.

Webmention

I’ve enabled nearly everything here. I’m both sending (when applicable) and accepting webmentions for posts, notes, and likes. I’ve set a slight delay and have enabled webmention avatars.

IndieBlocks’ Webmention settings. I’ve enabled nearly everything, and also set a slight delay.

The facepile option may not be too clear: what it does is filter out (i.e., remove) likes, bookmarks, and reposts from the “normal” list of comments. (Why would I want that? Well, because I’m going to instead add a Facepile block to Twenty Twenty-Three’s Comments template part. In, you’ve guessed it, a follow-up post.)

(There’s a whole reason as to why IndieBlocks ships with its own Webmention implementation rather than require the standalone Webmention plugin; they should work together, for the most part.)

There’s also a tab with “miscellaneous” settings, we’ll cover that one some other time. Let’s leave it as is for now.

The Site Editor

Set up a couple pages, and the IndieBlocks plugin. Now, let’s actually build something!

(This section does lack screenshots, but … don’t want to turn this into a Site Editor course, either. I’ll likely add at least some over time.)

Archive

I’m about to start with the Archive template, but I first open the actual site and head over to /notes/. Don’t quite like how it says “Archive: Notes” and had rather it read just “Notes.”

I head over to Appearance > Editor and start with the Archive template. Select the heading—the Archive Title block, really—and disable “Show archive type in title.” Then click save. That’s all, for now! (We’ll add Post Author, Categories, and maybe more blocks—and thereby … microformats!—some other time.)

Home

On the main site, I head over to /articles/. (Believe it or not, but it’s the Home template that is used for this page.)

Simultaneously, in the Site Editor, I head over to the … Home template!

I changed the Heading block into something more meaningful and deleted the Columns block just above the footer. I’m really only keeping the Heading and the Query Loop block.

Meanwhile, I couldn’t help but notice how on the main site, the margin is off. With respect to the Notes section, that is. So I select the Group block—you’ll really want the List View open by now—and then, in the block sidebar, the Styles tab. I look for Dimensions > Margin, and “unlink” the four sides. And reduce the top margin a bit. Much better!

Again, we’ll come back to this template later on, but let’s leave it at this, for now.

Site Navigation

Last bit for the day! The Site Navigation block has never been the Site Editor’s forte, unfortunately. Nevertheless, I manage to add a number of “custom” links, to the homepage, the “Articles” page—our post archive, really—and the notes archive. (Didn’t “classic” WordPress support things like “home,” or custom post type archives?).

Bonus

Let’s add a last thing. A first note! Let’s … make it (the IndieWeb post type of) a bookmark. Of this very article!

I go to Notes > New Note, and click the placeholder Paragraph block. I type /bookmark and select the Bookmark block. In its URL field, I copy-and-paste, well, this page’s URL. I hit Enter and watch the page’s title and author metadata—this page’s title and author metadata appear in the sidebar. Type a quick note below. That’s it!

If all goes well, WordPress’ll even fire off a webmention to … that other site. This site.

Likes, Bookmarks, and Reposts

  • Anonymous
  • john

4 responses to “Building a Block-Based Microblog”

  1. Amanda CAARSON

    … commented on this.

  2. Jan Boddez

    Pushed v0.7.0 of IndieBlocks. I’ll write a little something over on the IndieBlocks blog later this week. Main change is the (very basic) Location block, which will of very little use to … almost everybody. Plus smaller tweaks all over the codebase. Wrote a quick “tutorial,” too, on how I set up a simple, webmention-enabled microblog using nothing but WordPress core and IndieBlocks.

  3. Jan Boddez

    I’ve previously written about https://build.boddez.net, where I set up, using as few plugins as possible, an “IndieWeb-compatible” microblog.
    Back then, I used WordPress’ own Twenty Twenty-Three. These last few days, though, I’ve been adapting TT3 to reflect my actual site. TL;DR: I created a new, minimalist block theme! It can be found, for now, at https://github.com/janboddez/janboddez. (I know, shouldn’t have used my GitHub username, but, well, naming things is hard!)

  4. www.blogpocket.com Avatar

    … commented on this.