Categories
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.

Categories
Web Technology

Featured Image As Featured Block

The other day while fooling around with WordPress, I started realizing that while it was getting better and better in some areas, other areas still need to be radically reinvented, such as the concept of a Featured Image for posts.

How I came to this conclusion, was that I was remembering people in the past indicating how when Gutenberg and Blocks become mainstream, there would no longer be a need for Post Formats at all. However, when I started browsing some masonry grid themes over on Tumblr and pondered how I could replicate them on WordPress, even if I just used a non-Masonry layout, I realized I couldn’t.

Why? Because WordPress only allows for Featured Images, which are the only visual object to be displayed in the blog list view. Post Formats previously allowed you to have different visual objects in in the blog list view but they’ve been pretty much phased out now in WordPress 6. So the only way to emulate these Post Formats in WordPress currently is if they added functionality that made it possible to “feature” any block, not just an “image”.

In doing some searching, I found one person suggesting just such a thing on the WordPress forums but they got little to no feedback. Digging deeper, I then found a GitHub WordPress Gutenberg thread entitled Rethink “Featured Image” In The Context of Blocks which touched upon it more so but without really any visual action, other than to possibly see about switching the Feature Image option to an Image/Cover Block.

Hopefully if the do decide to do that, it’ll become self-evident in developing it to make many different other blocks have the option of being “featured” in the blog list view as well. Let’s hope! Maybe by next year, we could see at least a few blocks beside an image block have this capability.

Categories
Web Technology

Upcoming Changes to WordPress 6.1

While skimming through the latest WordPress 6.1 Product Walk-Through Recap, I noticed some really amazing features finally being added to WordPress.

I actually remember manually coding some of these features myself on Movable Type many, many years ago when that web platform used to be all the rage. Specifically the ability to customize the template for a specific category (8:55) or even a specific post (8:35) is pretty amazing.

I was also highly interested in hearing what Nicholas Diego (37:00) had to say as the Editor Triage Lead for WordPress 6.1. The reason for this is that I find the usability experience for Editor user interface to be severely lacking still, with the key issue being they are overloading the non-techie end user (but even the techie designers & developers as well) with too much functionality at once in the same place. Instead they should be creating different focused context modes that the end user can switch to (similar to Squarespace Version 5 over a decade ago), so they don’t get confused and overwhelmed.

At the very least, if they don’t do this, they should make specific areas of the interface context specific, similar to how they are almost doing it now. For example, the Structure mode area is primarily on the left side of the interface, showing the nested layout of the blocks, whereas the Style mode area is on the right hand side of the interface.

But they need to go beyond this and make the interface function much more consistently within the different modes. For example, right now when you’re using the left hand Structure area and you press a block on the page, the corresponding block within the left nested layout of blocks gets highlighted as well which is nice.

The same thing should happen with the right hand Style area as well though (when it’s open) in that when you press on a block on the page, the corresponding style editing settings for that block should automatically be shown, so you can adjust it immediately. Again because there are no focused contextual modes but rather just these panels, it can become overwhelming for the end user to figure out where to look, especially when playing with the Editor for the first time.

But as it stands right now, the specific block style areas are buried under a couple of submenus which is just crazy. Instead all block styles options should be shown by default when you open the Style panel, yet the default Body and Heading settings for the entire site should be listed at the top of the entire Style list. Then below that, each specific block type should be linked by default to either the Body or Heading style setting but with the option to specifically customize it further if the end user so wishes. This would make the Style area far more user friendly for the new user, creating a cascading style logic that they can understand.

All said and done, I’m still excited and interested in trying out WordPress 6.1 when it’s released. Oh and for those who want to see more of Nicholas Diego’s work on the Editor (aka Full Site Editing), he has a bunch of videos on WordPress.TV you can check out as well.