the words the big reveal in large white text appear in an open suitcase

The “new” Details Block

Back in the day (a few years ago), I built a website that needed a show/reveal section for information.

Below photos of individual instructors there was a Bio link that, when clicked, revealed text showing the biography of that particular instructor.

It wasn’t hard to do, but it involved writing some JavaScript and enqueuing the script so that everything worked.

WordPress 6.4 just made it easier to add show/reveal areas to your site if you don’t know how to code or don’t have time to learn.

The Details block solves this because you don’t need to know code to control the visibility of sections of your site. You can quickly add sections to your site that only appear on the page when the parent element is clicked.

I’m calling the Details block new but it isn’t really. An experimental version was launched earlier this year and other block plugins offer this feature. It’s just officially become part of WordPress Core blocks so that’s why I’m calling it new.

In a post from April, WP Tavern recommended it as a block you can use to hide text transcripts for video blocks on your website or for spoiler alerts.

You’ll find it in the Block Editor under the Text section.

Here’s what I mean by its show/reveal aspects.

If you click See more below, you’ll see my hidden paragraph and the rest of this blog post. You have to be careful how you add text to the block (as the proverb goes, the devil is in the details) or you may hide more than you expected to!

See more

here are the details

That said, you do need to know tricks on how to style it because if you change the text colour, this affects both your title and your hidden paragraph. So you’ll probably want to know some CSS to make it look better.

It’s not obvious how you style the arrow or change it.

But it’s a useful block and a welcome addition to the core blocks WordPress offers.

Leave a comment