Web Technology

Emulating Featured Blocks in WordPress

Over the last day or so, I heavily modified my current Twenty Twenty WordPress theme to see if I could emulate Featured Block functionality that I’d like to see added to WordPress in a future update (probably as a “Make Featured Block” checkbox in compatible blocks).

This arose out of my thoughts the other day where I believed WordPress needed to go beyond Featured Images and shift to Featured Blocks, especially if it wants to be able to emulate old Post Format features that are comparable to features on other platforms.

Basically the first part of emulating this was easy by defining a specific block as Featured Block by just adding a class within the Advanced area of the block and calling it “featured”.

It got trickier though because you need to allow the Featured Block to be displayed on the blog list view but without the rest of the post content. Thus to achieve this, every post that you create has to have a “More” Block within it that the Featured Block has to be above, thus allowing it to be shown on the blog list view, with the rest of the post content below it, so it remains hidden in the blog list view.

After achieving these two things, the hardest part of all is then getting the Featured Block to be shown and stylized in the right way utilizing a Grid Card style (which I was easily able to activate using the Twentig plugin for the Twenty Twenty WordPress theme). Trying to get the Featured Block to move to the top of each card post was way too difficult to do using CSS alone, so I decided to use jQuery to move it there.

And last but not least, a butt load of CSS was finally done to stylize each specific Featured Block type I decided to use (i.e. Pullquote, Cover, etc).

All said and done, I’m pretty amazed I achieved this in such a short amount of time. Going forward, I’ll see if I can stylize and optimize it further.

Best of all though, this new theme layout finally allows me to feel comfortable writing in both short form and long form because the blog list view of the theme emulates Twitter’s card format. So if I want to write a short thought of a sentence or two, it looks great on the blog list view. Although I need some small simple visual indicator icon on the card that indicates if there is more to read, so that the reader knows if there is more content inside the card or not.

By Nollind Whachell

Questing to translate Joseph Campbell's Hero’s Journey into The Player’s Handbook for the roleplaying game called Life, thus making vertical (leadership) development an accessible, epic framework for everyone.

Leave a Reply