The Details and Summary Elements

Written by Tinjure WP Posted on

Note: This post of understanding newly added WordPress Site Editor features on WordPress 6.3. This learning post is still in active development and updated regularly.

Gutenberg 15.8 introduced the details/summary block that allows to toggle the visibility of content, a feature similar to an accordion block in the WordPress core. A good example use case of accordion block is the Block Editor Settings sidebar sections and this Codepen demonstration.

This GitHub ticket explains its structure of the <details> block, which contents two inner blocks:

  • Details summary: The <summary>: Uses richText. Its text defaults to “Details”. Activating or clicking on this element expands and closes the content.
  • Details content: The content that is hidden and shown depending on whether the details are open is inside a <div> below the <summary>. The <div> contains a placeholder paragraph.

This example shows the HTML structure of a simple <details> element with a <summary> element.

<details>
  <summary>Hello World!</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

The above HTML structure shows two blocks elements: <details> as parent block and a <summary> as its nested child element. The original, two-block structure, as shown above, allows you to edit and style the summary and the content separately.

Screenshot showing creating details block with the block editor

The current details block (shown above) is scaled-back version that does not allow to customize the <summary> element with the Global Style design tools available. It requires the use of custom CSS instead.

Screenshot showing closed state (left) and Open state (right)

As shown in the above screenshot, the details block has open and closed feature.

  • In the editor, the details block default can be set as open / expanded.
  • The default behavior of opening and closing the details with click, Space end Enter keys is disabled in the editor.
Styling Details/Summary Block

The current details block (shown above) is scaled-back version that does not allow to customize the <summary> element with the Global Style design tools available. It requires the use of custom CSS instead.

This MDN doc explains how to style the details and summary elements using custom CSS.

Additional Readings