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
Possibly the block won't be registered in the test, as You could try defining gutenberg/test/integration/full-content/full-content.test.js Lines 66 to 71 in ac2d3fe If that doesn't work, I think it'd be fine to remove the fixtures. |
|
@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 |
fullofcaffeine
pushed a commit
to fullofcaffeine/gutenberg
that referenced
this pull request
Apr 20, 2023
* Add "details" block * Add variation, fix stylesheet loading on front, change font size * Remove the link option from the summary heading, update aria label * Update edit.js * Keep the details open in the editor * Add toolbar control for collapsing and expanding the details, remove border * Update fixtures * Update style.scss * re-add the font size for the heading * Remove font size limitations * Update cursor to pointer. * Add aria label that announces the expanded or collapsed state * Remove transcript variation, add keywords * Open the details when the block is selected * Update edit.js * Add a basic unwrap * Update edit.js * Try using separate blocks * Update summary text, descriptions and fixtures * Update edit.js * remove transform and editor style. * update icons. * Limit the inner blocks to one inside the Details block * Remove the alignments from the inner blocks, and prevent them from being used as reusable blocks. * Update index.js * Add the icon * Try to apply font size to the heading inside summary * Update fixtures * Remove the allowed formatting from the RichText * Try the experimentalSelector and skipSerialization again * Remove heading from Summary * Rename the block, update CSS. * Update style.scss * Change the category to text * Remove unsupported marker CSS * fix background clipping and update description * Replace inner div with View primitive * Remove View from save.js * Remove translation from save.js * Make the block opt-in, available from the Experiments page. * remove fixtures
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