Add Details/summary block #45055
Merged
Add Details/summary block #45055
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +1.03 kB (0%) Total Size: 1.35 MB
ℹ️ View Unchanged
|
Member
|
Worth noting that this has been attempted in #23940. Not sure why it was closed in the end. |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
carolinan
requested review from
ajitbohra,
fabiankaegy,
juanmaguitar,
ryanwelcher and
spacedmonkey
as code owners
carolinan
changed the title
ramonjd
added
[Type] Enhancement
talldan
added
New Block
Contributor
Author
|
Thank you! |
t-hamano
added
the
[Block] Details
bph
added
[Type] Feature
Member
I wouldn't consider that the primary/likely case, though it would still be possible to do most of this while also gaining the benefits of a simpler block experience. Here's a PR I put together to lean in that direction: #49808 |
12 tasks
This was referenced Jul 19, 2023
6 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
20 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Adds a new
<details>block that can be used to toggle the visibility of content.Two inner blocks: Details Summary and Details Content.
<summary>: Uses richText. Its text defaults to "Details". Activating or clicking on this element is what expands and closes the content.<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:
Testing Instructions
In the block editor:
/detailsto add the block.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:
/detailsto add the block.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 arrowto edit the text inside the<summary>Press
down arrowagain to select the details content "container" block.Press
down arrowagain 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