What?

Adds a new <details> block that can be used to toggle the visibility of content.
Two inner blocks: Details Summary and Details Content.

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

Closes 44539

Why?

One use case is to include text transcripts for video blocks, that are visually hidden until requested (toggled/opened).

How?

Some implementation notes:

• The block is open / expanded by default in the editor.
• The default behavior of opening and closing the details with click, Space end Enter keys is disabled in the editor.

Testing Instructions

In the block editor:

1. Create a new post or page.
2. Use either the block inserter or the shortcut /details to add the block.
3. Select the Details Summary inner block and add your summary text.
4. Select the Details Content block and add a text in the paragraph or add new blocks.
5. Next, please test all the block settings:

• Change styles of all 3 blocks. When changing the parent, but not the inner blocks, the inner blocks should inherit all the style options from the parent.
• Change block alignment and width settings on the parent block (Details)
• View the front of the website and confirm that the block settings are working and that the block looks correct.
• A block that is closed in the editor should also be closed on the front.

Confirm that the details summary and details content are locked and can not be deleted or moved up or down, and that the block can not have multiple summaries or content blocks.

Please also test the global styles:

1. Open the Site Editor
2. Use either the block inserter or the shortcut /details to add the block.
3. Open the Styles sidebar.
4. Locate and update the style settings on all 3 blocks.
5. Confirm that the style is correct in the Site Editor.
6. Save and view the front. Confirm that the style is correct.
7. Return to the block editor. Add a new details block and confirm that:

• The newly added block uses the global styles
• The previous block that you have styled uses its individual style, not the global styles.

Finally please reset the global styles in the Site Editor, and test styling the block with theme.json.
The styles added to theme.json should show correctly in the editors and the front.

Accessibility

Editing the block with they keyboard in the editor

Navigate to the block.
With the block selected, press down arrow to edit the text inside the <summary>
Press down arrow again to select the details content "container" block.
Press down arrow again to select the first block inside the details content.

Screen readers

Tested with Voiceover on Mac.
With the block selected in the block editor, Voiceover announces "Block details, document".
With the rich text in the summary selected, Voiceover announces: "Add summary, edit text (text content), Insertion at end of text. Block details summary, document."
With the inner block below the summary selected, Voiceover announces the block name.

Screenshots or screencast

The video shows adding inner blocks and styling the summary block:
https://user-images.githubusercontent.com/7422055/222384524-36f8e74c-d03f-4b58-93d1-72b61b7f4c18.mp4