As a reader, it frustrates me when I come across a good article — you can tell there’s real value in it from the introduction — but it’s hard to find the most important points. This is especially frustrating when I’m doing research. I end up having to scroll through paragraph after paragraph of information I’m not really interested in, just to find the specific details I need. While some of the information I skip may be useful to others, I think there should be an easier way for readers to quickly skip over parts that aren’t relevant to them and focus on what they really need.
As a blogger, this really concerns me. If you’re a blogger as well, you might be thinking about it too.
Luckily, if you’re using WordPress and Gutenberg, the solution is simple: use the Details block. Let me show you how this can improve your blog post’s user experience and help readers skim your content more easily.
Details Block
Essentially, a Details Block is a collapsible block in Gutenberg that lets you hide content. To view the hidden details, readers just need to click or tap on the title, which usually gives a brief summary of the content inside.
More Information
If you’re not familiar with the Details block, you can check out its official documentation on wordpress.org.
Use Cases of the Details Block in Gutenberg
The details block can be really handy for packing in extra info without making an article too long to scroll through.
It helps readers find the important parts faster and makes it easier for you, as the author, to highlight the ideas you really want to get across. Using it is a win-win, and it’s a shame that not everyone with a WordPress site makes good use of it.
The documentation mentions several use cases for the Details block, like spoiler alerts, code reveals, audio transcripts, and toggleable FAQ lists.
But there’s more! You can also add images, videos, embeds, and other content that readers might find helpful or interesting. This keeps the blog post from feeling cluttered while still including extra details.
For example, you can use it for long lists of examples, fun facts, quick references, menus, instructions, and more.
The Details block can also help keep the flow of a discussion or story smooth. How?
Let’s say you want to add tips or extra insights in the middle of your content, but they aren’t super important and might distract the reader. Putting them in a Details block lets you keep things clear while still giving readers the option to check them out if they’re interested.
Designing Details Block
One thing I don’t like about the Details block is that it looks plain, and changing its design, like adding a custom marker or basic styling, requires editing the code of your WordPress theme, as the official documentation suggests.
I don’t want to mess with code because, in my experience, it’s hard to maintain in the long run. More importantly, I’m here to create better content and serve my audience.
Anything outside of that isn’t worth my time. That said, you can still change the appearance of the Details block by adjusting the settings under the style tab in its settings panel.
You can also customize it further by wrapping the Details block with a Group block or Stack block and adjusting the appearance of that block, which will serve as the background for the Details block. This approach can be used to create an FAQ list, where each Details block acts as a question and answer within one group.
Usually, you don’t need to use the group block anymore. Instead, you can just tweak the style settings in the details block.
For example, I only adjust the background color and margins.
I change the background color to make the details block stand out from paragraph or text blocks. I set the margin to 1em to give the design a cleaner look. By adjusting the margin, I can create space between the text and the edges of the details block.
If you want your details block to stand out more, you can add a border and make it thicker with a different color to grab attention.
Using Other Plugins as Alternative
If you’re looking for a more customizable option for your details block, you can try installing plugins like Kadence Blocks. I use it on my other site, WanderInEurope.
Kadence Blocks has an accordion block, which works like a details block but offers more design options and flexible features, like multiple expandable sections. The best part is that you can set the title of each section as a heading, from H2 to H6.
However, for faster page loading and a lightweight design, I decided not to use it in Explore to Thrive.
More Design Tips
For more tips on making your blog posts more engaging and user-friendly, check out my discussion on designing engaging blog posts in WordPress using Gutenberg.
Love this? Pin it and share it with your friends!
