also sometimes called an “Accordion” block

The Details block is handy for FAQs, and other “open to read more information” scenarios.

Here is a simple example.

Click to read more

This is the additional text, which is hidden until the heading is clicked.

Previously, we might have had to add a plugin or use a more sophisticated page builder to achieve this “accordion” type action, but the details block allows us to add this kind of content very simply.

Adding and Styling the Details Block

How do I add a Details block?

Click to add a new block. Then just search for details.

Or find the Details block icon in the Text group of blocks.

Multiple paragraphs, even images or other blocks, can be included in the “hidden” section of content. Take care to ensure that you are adding content where you want it to be – either within the details block, or a separate section thereafter. If necessary,

How can I change the appearance of the Details block?

Site developers can use theme.json or or theme styling to set the default styling for the block.

---

Styling is a little tricky – any styles are applied to the whole block. So if you want the questions to be larger than usual font, for example, you must style the whole block to have larger font, then apply another style to the hidden answer to revert to normal font size. So, not ideal yet. But hopefully future versions will improve and at least we now have this as a native block to work with.

Be sure to use the post breadcrumbs or other methods to check whether you are editing a paragraph within the Details block or outside of it.

More Information

For detail about images and the block editor, see Block Editor – Image Block and Block Editor – Cover Images.

For our introduction to the block editor, see Beginning with the Block Editor and also Page Layout with the Block Editor.