Add Details/summary block #45055
Merged
Add Details/summary block #45055
Conversation
This file contains 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
|
|
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
spacedmonkey,
ajitbohra,
ryanwelcher,
juanmaguitar and
fabiankaegy
as code owners
carolinan
changed the title
ramonjd
added
[Type] Enhancement
|
@carolinan This is a great block. It seems to work so well! Yesterday, I had fun testing it and the use of design tools (background, typography, and dimensions) worked as expected. It's a great addition to the array of core blocks! |
talldan
approved these changes
Apr 5, 2023
| @@ -0,0 +1,3 @@ | |||
| .wp-block-details-summary { | |||
| cursor: pointer; | |||
There was a problem hiding this comment.
I'm not seeing this style when testing in the frontend. Not sure why 🤔
There was a problem hiding this comment.
I tested on MacOS in Safari, Chrome, and Firefox, and I can see the pointer on the front 🤔
There was a problem hiding this comment.
It's working for me now too!
It's strange, I'd even inspected the element and could see there was no cursor style.
Oh well, nothing to worry about then.
Comment on lines
+28
to
+33
| "__experimentalBorder": { | ||
| "radius": true, | ||
| "color": true, | ||
| "width": true, | ||
| "style": true | ||
| }, |
There was a problem hiding this comment.
There's a small disparity between the editor and frontend when using border radius:
Editor
Frontend
It's something that can be fixed in a follow-up and shouldn't block merging.
There was a problem hiding this comment.
I am trying to reproduce this.
I am using Twenty Twenty-Three.
- I added a border with border-radius on the Details.
- Padding, preset 1 , on the summary and content.
- A background color on the summary.
I do not see the clipping on macOS, in Firefox, Safari, or Chrome
There was a problem hiding this comment.
This seems to work now too:
Very strange. I tried switching between a few different themes and couldn't reproduce.
Maybe it was an issue with my local environment. Both this and the previous issue could have been due to styles not loading properly on the frontend.
There was a problem hiding this comment.
that is a relief, thank you for double checking
talldan
added
New Block
|
Thank you! |
t-hamano
added
the
[Block] Details
bph
added
[Type] Feature
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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