Category: WordPress

A lot of the third-party activity around blocks these days is centered on putting together sets of blocks, and one of the more widely used sets out there is Kadence blocks, which has a free and a pro option. For a recent project I spent quite a bit of time working with the Kadence Pro Blocks set. So I have some views on the Kadence block set itself, but it also brought me to some realizations about the state of WordPress blocks in general.

The takeaway is that Kadence blocks are mostly good at what they do, though a couple of the fancier blocks have some rough edges that gave me fits trying to bend them to a particular design I’d been given. I’m going to tackle my discussion of the world of Kadence this in three parts. (Previous looks at other block sets are here and here.)

In this post, I’m going to talk as much about why you want to move beyond the core blocks that WordPress installs with and why block sets like Kadence’s include “copies” that seem to do roughly the same chores, like adding headers and images. In the second, I’ll drill down on some of the blocks in the set that are common in the world of “fancy” blocks, like testimonial sliders and masonry displays of blog post titles. In the third, I’ll look at some of the blocks that, while they may not be unique to Kadence Blocks, are nevertheless not as common (and we’ll look into whether they’re worth the trouble or not).

Replacing the core blocks with Kadence blocks

One great thing about Kadence blocks is that the free version has all the same blocks as the pro version, as far as I can tell. If you bump yourself up to Pro, some of the blocks do more complex things. For example, the Advanced Text block will give you the ability to add text from dynamic sources.

As with other collections of blocks, Kadence has a group of blocks that are improved versions of things that come stock with WordPress, but it also has a group of blocks that are more the sort of thing you get with pre-block-editor page builders. In the first group are things like Advanced Text and Advanced Image. In the second group is a Testimonial block, some options for displaying blog posts in masonry format, and other odds and ends like a Timeline block.

In the project I mentioned above, I needed to match an agency created design fairly closely, so exact font sizes and content widths and so on became issues. While I have in the past been somewhat suspicious of block sets that seem to duplicate much of what the native WordPress blocks provide, the need for better blocks was something that the project hammered home for me.

Group and Section and Full-Width Designs

Let’s talk just about organizing basic layout issues. If you’re trying to do something even remotely better than just dumping blog posts down the middle of the page, you are almost immediately pushed out of the supposedly no-code WordPress block editor. So here’s a Canva website template:

It’s an image with some text and a button laid over it. If you swing a dead firefox on the internet, you’ll hit a page that has this.

Now, that’s a full-width image. To get a full-width image in native WordPress blocks, the simplest approach is to insert an image block and use the menu to set the block to full width.

That’s easy peasy, though the block editor doesn’t really show you the full-width result (there’s a way to make it look more like the finished widescreen result, but I’ll save that for another post):

Now, you probably already realize that we’re stuck here. You can’t overlay text blocks on Image blocks. So you want to do something like put this image inside a Group block as the background of the Group. Alas, you can set the color of the background, but you can’t use an image.

Cover Block, anyone?

You’re already thinking to yourself: There is a native block designed for this sort of thing: the Cover block. With the Cover block we can put the picture in the background and put items such as columns and text as an overlay to the picture. The block throws in a couple of extras as well. You can, for instance, have a color that overlays the picture. In this example, I’ve got a black color overlay at around 40% opacity:

This isn’t quite right, compared to the original, though it’s close-ish. The button in particular is wrong compared to the original. And the original button, to my eye, is way better looking.

There’s also the matter of the fonts not matching the design. In this particular example, the main text is a fairly generic sans font, so the default sans font in the WP theme I’m using is a reasonable substitute. The company name in the upper left doesn’t grate too much, either, but it’s wrong if you look at all closely.

In a situation like this, the solution lies in setting the right default fonts for the theme, which has nothing to do with either native or Kadence blocks. But there are certainly times when you need to throw in a one-off font – maybe a special landing page that uses entirely different fonts, or you need a crazy display font for the heading of an article. You can set a specific font for a specific block instance using either the native or the Kadence Advanced Text block, but the Kadence block makes it vastly simpler, largely because it gives you a dropdown of all the Google fonts, which is fine for an awful lot of use cases.

There’s another important thing wrong here that you can’t fix with native blocks, at least not in a no-code way, and that’s the spacing of the columns across the image. Note that in the original, the company name text slightly overlaps the main text below. My block version has the main text considerably further to the right. (It occurred to me as I was writing this that there’s a more accurate way to do this with native blocks where you use only two columns and align the company text left, but center the main text, both in the left-hand column. But that works more because it just happens to in this case, not because you actually have fine control over it.)

My point is that it would be nice to have some ability to drag the column widths. Thus: enter the Kadence Row Layout block. It does what the Column block does, but with considerably more finesse. We can go full-width with it and we can adjust the width of the columns on the fly.

But before we really get into it, here’s a nice example of things that are going to frustrate the crap out of people just plunging into the block editor, particularly if they used to use third-party page builders…

Let’s say that I want to keep some organization in place for the different parts of the page. To do this, I might decide to throw this piece of the page inside a Group block. So I insert a Group block and use the toolbar that appears atop the block to pick the full-width option.

Maybe I want a background picture for this area. Well, all the Group block does, really, is put a <DIV> wrapper around everything nested within the Group. That’s handy if you’re going manipulate the area using CSS classes. But we don’t want to do that, because we’re after a no-code editing experience.

Well, I can get a background image if I nest a Section block within the Group block, because the Section block supports it. The thing is, Section doesn’t inherit the full-width setting. Instead, it uses the inner content width for the theme. To my way of thinking, that’s not what you’d intuitively expect and you can’t set the Section block to full-width the way you can with other blocks.

Ultimately, this isn’t a problem, because we don’t actually need the Section block to get our background image in place, but it’s the sort of “one block does it but another doesn’t” aspect of blocks that can be pretty aggravating at times.

I said you didn’t need the Section block. You can instead use the Kadence Row Layout block, which you can set to full width and set up with a background image. Row Layout works like the native Column block, but has some bells and whistles. One really great addition is that you can drag the columns wider and narrower in five percent increments.

But ach, here’s another inconsistency: that dragging and resizing thing only works up through three columns. Bump it up to four columns and you’re locked into the default split. The Kadence documentation doesn’t spell this out, though there’s a new feature request that explains it. I was mystified as to when I could drag column widths and when I couldn’t.

For the sample page we’ve been working on, it actually made more sense to just have two columns, but I did drag the “person” part of the image wider so the text sat a little further to the left.

Space control in Kadence blocks (and elsewhere)

What separates the native blocks from sets like the Kadence blocks is some frilly blocks that do countdowns and the like, sure, but the thing that you really need better blocks for is margin and padding controls, plain and simple.

Consider a situation like this:

Some clever designer has placed a logo such that it overlaps the three-column block just below it. On the plus side, you can use the Advanced Image block Kadence provides and adjust the margin values so that the left margin is pushed far over to the right and the top margin so that it’s negative and pushes the image down into the next block’s space. In fact, the screen shot above is what it looked like in the editor after I had done that.

There are situations where this works just fine, but actually this isn’t one of them. That’s because Kadence wraps the <IMG> tag inside a <DIV> where it sets some of the classes it uses to set up default behavior in CSS. Without belaboring the details, it looks like this when published:

I thought, hey, no problem, I can just set the Advanced Image to align right. But that results in an image the size of a pinhead. There are ways to handle this sort of thing using the CSS translate/transform combo, but again, I’m trying to avoid having to muck around in the CSS.

Or, honestly, what I’m doing is manipulating the CSS directly whenever something tricky needs to get done. And that’s how it’s going to be for the near term and, who knows, maybe forever. CSS is the tool that’s built for these sorts of tasks.

Consistency needed

Right now, though, I think the issue is consistency across blocks. Is it Kadence’s fault if one of their blocks doesn’t handle stuff like negative margins? Well, yes and no. Probably there are things they could do to make the experience more seamless. But at the end of the day, there’s always (well, almost always—not in the advanced button control) an “advanced” section of controls that lets you type in a custom CSS class name, letting you tweak the block from CSS. Kadence makes it very easy to add custom CSS for a page or the site, in fact.

Specifically for relocating blocks relative to each other, though, I’d prefer if Kadence gave me direct control over the CSS transform property from within the GUI. Divi, quirky and old-school though it is in many ways, does this cleanly and even fairly intuitively.

But despite my first example being one that doesn’t actually work, having finer grained control over things like margins and space between lines in text and image overlays and so forth—all this is powerful stuff and once you find a block that does it the way you want, you’ll have trouble using many of the core blocks again. That’s the main point here: you can’t really do design work unless you control margins and padding on a block-by-block basis.

I have quibbles, but Kadence gives you that control, whether in pixels, ems, rems, or percentages. It also gives you a number of useful specialty blocks—a testimonial carousel, for instance—but we’ll tackle the good and the bad in these fancier blocks next time.

Let’s check out some more WordPress blocks. Third-party blocks.

On our last outing we looked at blocks that work together for a specialized purpose—JetFormBuilder, which is a forms package that builds forms using a block for each field.  

The people that make the widely used Astra theme have built (and continue to expand) a set of blocks that help you build fancier, prettier pages than you can if you restrict yourself solely to the blocks that are native to WordPress. Initially, this set of blocks was called Ultimate Addons for Gutenberg (or UAG), but now it’s been renamed as Spectra.

By my count, there are presently 30 blocks in the package. Some of them are blocks that duplicate blocks in other third party collections (not surprisingly), but there are quite a few that are pretty interesting and that I haven’t yet seen elsewhere.

The time of your life

One block that lets you get a something pretty onto a page that would otherwise take a lot of work is the timeline block. I found it a tiny bit quirky, but it works just fine on the page. You add each date over in the context sidebar and then directly type your descriptive text within the block. You wind up with a series of stacked blocks connected by a vertical rule that fills with color as you scroll down through the timeline. It’s nice, and all the colors and backgrounds are configurable.

There’s a “search” block that inserts exactly what you think it would, except that it’s a somewhat different design than the native block – it seems clear that an important aspect of many third-party blocks is going to be that they duplicate the basic function of a native block, but with some desirable design differences.

Heads up

Another block that I like a lot and that shows, I think, how blocks will add “behind the scenes” functionality without a lot of fuss and bother is the “Inline Notice” block. At one level, it’s just a design element that let’s you visually identify things like warnings and notices. And just for that it’s pretty useful and highly configurable. But an additional touch is that you can allow users to dismiss the notice by clicking on an X icon, plus you can cause this action to set a cookie to track how many days have passed since the notice was dismissed. If you set it for, say, three days, then the notice will reappear after three days. So you can let a user effectively say, sure, I got that, but when they come back six months later, you may think it’s prudent to show them the notice again as a reminder.

A table of contents block generates a box that contains links to all the header tags on the page (though you can set it to pay attention only to higher-level headers, H1 through H3, for example). You can configure the table to initial display collapsed, which is how I’d be inclined to use it. I’ve had to implement this sort of thing with plugins in the past and this certainly seems easier to drop where I want it without a fuss.

Schema

A final thing I want to mention is that there are three blocks that facilitate the addition of structured data to your pages. There’s a FAQ block that lets you build an accordion of the sort one sees everywhere, but it also adds structured data to the page meta as you build. I’m still going to charge extra for that, of course.

Another block lets you build a “How To” page that adds the structured data Google will be looking for—this is really a nice thing for those creating content that can take advantage of it. A similar block for product reviews makes sure you’ve added all the necessary schema components like SKU and brand and that you’ve included a product picture. If you’re bothering to do reviews, you should bother to do this. Which suddenly makes me think that these walkthroughs are, frankly, reviews. So I should use this block.

Mix and match

One thing I’d forgotten and been reminded of as I’ve started my world tour of the block-a-verse is that one of the big points of Gutenberg was to create a standard way for third-parties to create interoperable blocks. And I mention this to say that in this new era, it will be totally normal for website creators to decide to use a few blocks from this set, plus another block over here, and so on. And a nice feature that a couple of the blocksets out there have added (including this one) is the ability to turn off the blocks you don’t want to use. Love it.

Final point: this group of blocks is put together by the people who make the Astra theme. They’ve sort of built on this by creating a direct interface to drop in fully designed page templates from the block editor. The world up there in the top bar of the editor may well become hopelessly cluttered over time, but I still kind of like that you can grab a page so effortlessly, then make all the changes you want to make it yours. That’s one of the things that I’ve liked about the Divi page builder—I like it here too.