Title: Details block
Author: Carolina Nymark
Published: August 8, 2023
Last modified: March 30, 2026

---

# Details block

## In this article

 * [Add a Details block](https://wordpress.org/documentation/article/details-block/?output_format=md#add-a-details-block)
 * [Block toolbar](https://wordpress.org/documentation/article/details-block/?output_format=md#block-toolbar)
    - [Transform to](https://wordpress.org/documentation/article/details-block/?output_format=md#transform-to)
    - [Drag](https://wordpress.org/documentation/article/details-block/?output_format=md#drag)
    - [Move](https://wordpress.org/documentation/article/details-block/?output_format=md#move)
    - [Change alignment](https://wordpress.org/documentation/article/details-block/?output_format=md#change-alignment)
    - [More rich text options](https://wordpress.org/documentation/article/details-block/?output_format=md#more-rich-text-options)
    - [More options](https://wordpress.org/documentation/article/details-block/?output_format=md#more-options)
 * [Block settings](https://wordpress.org/documentation/article/details-block/?output_format=md#block-settings)
    - [Open by default](https://wordpress.org/documentation/article/details-block/?output_format=md#open-by-default)
    - [Advanced](https://wordpress.org/documentation/article/details-block/?output_format=md#advanced)
 * [Styles](https://wordpress.org/documentation/article/details-block/?output_format=md#styles)
    - [Color](https://wordpress.org/documentation/article/details-block/?output_format=md#color)
    - [Typography](https://wordpress.org/documentation/article/details-block/?output_format=md#typography)
    - [Dimensions](https://wordpress.org/documentation/article/details-block/?output_format=md#dimensions)
    - [Border](https://wordpress.org/documentation/article/details-block/?output_format=md#border)
 * [Changelog](https://wordpress.org/documentation/article/details-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/details-block/?output_format=md#wp--skip-link--target)

[Go to the list of Blocks](https://wordpress.org/documentation/article/blocks/)

The Details block displays a text summary and an arrow button: When you click on
the text or the button, the block opens and reveals additional content on the page.

This block provides a way to show or hide content on your site. This can be useful
on faq pages, showing /hiding detailed event information etc.

The** **Summary is customizable by selecting the “Write summary…” placeholder text
and adding your own text. By default, the block uses the summary content as its 
label, similar to how the Heading block works.

The additional content blocks that you place inside the Details block that are hidden
until you click on the summary text or the button. Because the content is hidden
until you open the block, it is referred to as “hidden content”.

**Closed state:**

![The details block is closed and the icon in the arrow button points towards the
summary text.](https://wordpress.org/documentation/files/2023/07/63-summary-closed.
png)

**Open state:**

![The details block is open and the arrow icon points towards the content  below
the summary,](https://wordpress.org/documentation/files/2023/07/63-summary-open.
png)

## 󠀁[Add a Details block](https://wordpress.org/documentation/article/details-block/?output_format=md#add-a-details-block)󠁿

To add a Details block, click on the **Block Inserter** (+)  and select the Details
block.
You can also type /details and hit enter in a new paragraph block to add 
one quickly.

![Using the slash inserter to type /details](https://wordpress.org/documentation/
files/2023/07/63-details-slash-inserter.png)

Using the slash inserter

## 󠀁[Block toolbar](https://wordpress.org/documentation/article/details-block/?output_format=md#block-toolbar)󠁿

Every block comes with unique toolbar icons and block-specific user controls that
allow you to manipulate the block right in the editor.

The Details block shows five buttons in the block toolbar:

 * Transform to
 * Drag icon
 * Move arrows
 * Change alignment
 * More rich text controls
 * More options

![block toolbar](https://wordpress.org/documentation/files/2023/08/Details-block-
toolbar.png)

### 󠀁[Transform to](https://wordpress.org/documentation/article/details-block/?output_format=md#transform-to)󠁿

![block toolbar transform menu ](https://wordpress.org/documentation/files/2023/
08/Details-transform-menu.png)

Click on the transform button to place the block inside a group or columns block.

### 󠀁[Drag](https://wordpress.org/documentation/article/details-block/?output_format=md#drag)󠁿

![block toolbar drag handles](https://wordpress.org/documentation/files/2023/08/
Details-drag-.png)

To drag and drop the block to a new location on the page template, click and hold
the rectangle of dots, then drag to the new location. The blue separator line indicates
where the block will be placed. Release the left mouse button when you find the 
new location to place the block.

### 󠀁[Move](https://wordpress.org/documentation/article/details-block/?output_format=md#move)󠁿

![block toolbar move arrows](https://wordpress.org/documentation/files/2023/08/Details-
move.png)

The up and down arrow icons can be used to move the block up and down on the page.

[Get more information about moving a block within the Editor.](https://wordpress.org/documentation/article/site-logo-block/)

### 󠀁[Change alignment](https://wordpress.org/documentation/article/details-block/?output_format=md#change-alignment)󠁿

![block toolbar alignment options](https://wordpress.org/documentation/files/2023/
08/Details-alignment.png)

Change the alignment of the block to none, wide, or full width.

### 󠀁[More rich text options](https://wordpress.org/documentation/article/details-block/?output_format=md#more-rich-text-options)󠁿

The drop-down menu to the left of the [More options menu](https://wordpress.org/documentation/article/more-options/)
contains a range of additional rich text editing options such as highlighting, inline
code, strikethrough, and more.

[Read about more rich text editing options.](https://wordpress.org/documentation/article/more-text-editing-overview/)

### 󠀁[More options](https://wordpress.org/documentation/article/details-block/?output_format=md#more-options)󠁿

The [More Options menu](https://wordpress.org/documentation/article/more-options)
represented by three vertical dots on the far right of the toolbar gives you more
features such as the ability to duplicate or remove your block.

[Read about these and other settings.](https://wordpress.org/documentation/article/more-options/)

## 󠀁[Block settings](https://wordpress.org/documentation/article/details-block/?output_format=md#block-settings)󠁿

The block settings panel contains customization options specific to the block. To
open it, select the block and click the Settings button next to the Publish or Save
button.

![The Details block settings sidebar.](https://wordpress.org/documentation/files/
2023/08/Screenshot-2026-02-17-at-4.10.31-PM.png)

### 󠀁[Open by default](https://wordpress.org/documentation/article/details-block/?output_format=md#open-by-default)󠁿

Enabling this option keeps the block open and the hidden content will be disaplay
until closed.

### 󠀁[Advanced](https://wordpress.org/documentation/article/details-block/?output_format=md#advanced)󠁿

![Advanced tab with HTML anchor, additional CSS Classes, name attribute, and allowed
blocks settings](https://wordpress.org/documentation/files/2023/08/Screenshot-2026-
02-17-at-4.15.44-PM-565x1024.png)

#### 󠀁[HTML anchor](https://wordpress.org/documentation/article/details-block/?output_format=md#html-anchor)󠁿

This settings let you make a unique anchor text for the Details block and link it
to another web page. For more detail, refer to [Page Jumps](https://wordpress.org/documentation/article/page-jumps/).

#### 󠀁[Additional CSS class(es)](https://wordpress.org/documentation/article/details-block/?output_format=md#additional-css-classes)󠁿

It enables you to write custom CSS class(es) to the Details block, so you can style
the block as you see fit.

#### 󠀁[Name attribute](https://wordpress.org/documentation/article/details-block/?output_format=md#name-attribute)󠁿

This attribute gives the name of the group of related details elements that the 
element is a member of. Opening one member of this group causes other members of
the group to close. If the attribute is specified, its value must not be the empty
string.

In below example, Summay1 and Summary2 have the same name value, and Summary3 has
another one. Both Summary1 and Summary2 are synched, but Summary3 is not.

#### 󠀁[Allowed blocks](https://wordpress.org/documentation/article/details-block/?output_format=md#allowed-blocks)󠁿

To limit the blocks inside of a Details block, click on the Manage allowed blocks
button and deselect blocks you do not wish to utilize in the modal, then click on
the Apply button.

![Manage allowed blocks modal that shows List as unchecked](https://wordpress.org/
documentation/files/2023/08/Screenshot-2026-02-17-at-4.25.08-PM-1024x687.png)

## 󠀁[Styles](https://wordpress.org/documentation/article/details-block/?output_format=md#styles)󠁿

![The styles tab in the Details block settings sidebar.](https://wordpress.org/documentation/
files/2023/07/63-details-sidebar-styles.png)

### 󠀁[Color](https://wordpress.org/documentation/article/details-block/?output_format=md#color)󠁿

The block provides dimension settings options to add text, background, and link 
color.

[See this guide for more information about changing colors.](https://wordpress.org/documentation/article/colors-settings-overview/)

### 󠀁[Typography](https://wordpress.org/documentation/article/details-block/?output_format=md#typography)󠁿

The block provides typography settings to change the font family, appearance, line
height, letter spacing, decoration, letter case, and font size.

[Get more details about changing typography settings.](https://wordpress.org/documentation/article/typography-settings-overview/)

### 󠀁[Dimensions](https://wordpress.org/documentation/article/details-block/?output_format=md#dimensions)󠁿

The** **block provides dimension settings options to add padding and margin.

For details refer to this support article: [Dimension settings overview](https://wordpress.org/documentation/article/dimension-controls-overview/)

### 󠀁[Border](https://wordpress.org/documentation/article/details-block/?output_format=md#border)󠁿

The block provides border settings options to add border color, style, width, and
radius.

For details refer to this support article: [Border settings overview](https://wordpress.org/documentation/article/border-settings-overview/)

## 󠀁[Changelog](https://wordpress.org/documentation/article/details-block/?output_format=md#changelog)󠁿

 * 2026-02-17 (props to @awetz583)
    - Added heading for add a block
    - Updated advanced screenshots and added information for Manage allowed blocks
      setting
    - Updated heading case and size
 * 2025-12-02
    - Added rich text options for 6.9. Props @annezazu.
 * 2024-07-05
    - Added name attribute in advanced settings for 6.8
 * 2024-06-13 Updated video to 6.5 version
 * 2023-12-05 Headings case resolved
 * Created 2023-08-08

## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/details-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Fdetails-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

August 8, 2023

Last updated

March 30, 2026