Details Block

The Details block adds a list of vertically stacked topics that reveal more details when clicked on – it’s “accordion” functionality. When a Details block is added to the page, it presents two fields:

1. Write Summary…
2. Type / to add a hidden block.

The following is an image of these two fields and the associated toolbar that displays when the Details block is added to the Content Area of the block editor:

How to Add Content

• In the Write Summary field, enter the topic name. The text can be one word or more than one word. For example it could say  “Controls” or “Export Controls Policy”.
• In the “Type / to add a hidden block”, add any type of block and multiple blocks into the hidden content area. For example, a heading block, paragraph block, an image block, countdown block, card grid block…etc. can be added to the hidden block field. You must click into the “Type / to add a hidden block” field to add this content. When content is added to the hidden fields it becomes grouped under that topic.
• To add another topic and hidden field pairing, add another Details block.

Shortcuts to Adding Blocks

There are some shortcuts to adding blocks. When you click into the “hidden block” you can:

1. Start typing your text or paste text into the field and the text will default to a paragraph block.
2. Type a backslash and a pop-up will display a list of commonly used blocks (but not every block!)
3. Click on the Block Inserter (blue square with plus sign) in the top toolbar of the block editor, and a panel with all the blocks will display. Click on the block you want to add and it will be added to the hidden block, grouped under your topic.

Adding more Topics

Tip: As you add Detail blocks to the block editor, if you need to collapse a topic, just click outside of the block.

• To add a second topic with hidden text, add another Details block. For example this image shows a Heading block and two Detail blocks:

• Make sure each Details block is not grouped under the first Details block or other Details blocks. Click Document Overview in the Top Toolbar (icon with 3 lines) to review the grouping of your Details blocks. If the second Details block is grouped under the first Details block, drag it to the left so that it is aligned with the first Details block. By making sure each Details block is aligned with the other (and not grouped under another block, your content will displayed as it should.

In this screenshot the Topic 1 and Topic 2 Detail blocks are appropriately stacked and aligned left in the Document Overview. When the page is Previewed (before Saving/Publishing), the Admin/Editor will be able to click on either Topic 1 or Topic 2 and the Topic will open to display the hidden content.

Additional Formatting Options

• When the Details block is used, there are additional formatting options on the right sidebar of the block editor. The formatting options include a toggle option between Settings and Style.

• Under Settings the editor can change the Details Block to “Open by default”, which means all the topics would appear open to the user by default.
• Please do not use any of the Style formatting options for Color and Typography as the Boise State WordPress Theme manages these styles in accordance with Brand standards.

 

Additional Information

Additional information is available about using the Details block in WordPress.