Tutorial on building patterns and block styles with Details/Summary block

[bph]

Discussed in https://github.com/WordPress/developer-blog-content/discussions/104

^{Originally posted by **justintadlock** April 26, 2023} The [Details/Summary block](https://github.com/WordPress/gutenberg/pull/45055) is still experimental, but I wanted to start playing around with some ideas on what this block could be used for and whether it's worth exploring as tutorial content. The block would offer a browser-native way to build out features like an accordion (no JS needed). I could see this working well as a "create a pattern" tutorial and potentially even some use cases for custom block style variations or a combination of both. Here's a really quick preview of using Details/Summary to build out an accordion (**Edit:** note that an "accordion" might not be the best option for a11y---needs research---just an example exploration): [details-summary-accordion.webm](https://user-images.githubusercontent.com/1816309/234683178-50a2d923-4a2f-4485-903f-b4185a2983c4.webm)

[justintadlock]

Working on this here: https://docs.google.com/document/d/1f_igHotxcjYOq2IxjZDbQRnRimxSFUq7kevGcDs1G84/edit?usp=sharing

[justintadlock]

This draft for this is now finished and ready for review: https://docs.google.com/document/d/1f_igHotxcjYOq2IxjZDbQRnRimxSFUq7kevGcDs1G84/edit?usp=sharing

[marybaum]

On it!

[justintadlock]

Thanks, @marybaum. Maybe it all makes sense. I wrote this entire thing while hopped up on cough syrup. 🤧

[justintadlock]

It's really nice working with you again, @marybaum. I feel like you always have a good feel for what I'm trying to say but can somehow make it better. :)

Should I move this to 2nd review status? I wasn't sure if you were through with the doc yet.

[marybaum]

Thank you very much!I have a little more to do. May I have an hour?... from my phoneOn Nov 30, 2023, at 10:51 AM, Justin Tadlock @.***> wrote: It's really nice working with you again, @marybaum. I feel like you always have a good feel for what I'm trying to say but can somehow make it better. :) Should I move this to 2nd review status? I wasn't sure if you were through with the doc yet.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[justintadlock]

No problem with timing. Use as much as you need.

[marybaum]

Done!

[bph]

2nd review on Google Docs done with minimal suggestions. Great fun indeed! I have an opinion for the first screenshot being too white and not showing the object more prominently:-)

Just for convenience, here are the checklist to get the article published.

Pre-publishing checklist:

• [x] Post Title in Sentence case
• [x] Use "Center Column" template
• [x] Are Category or Categories selected?
• [x] Are Tags identifies?
• [x] Is there an explicit Excerpt?
• [x] Do all images have an alt-text?
• [x] Assign or upload a featured image
• [x] Props added? (See Guidelines) 🙌 Publish! 📗

Post-publishing checklist

• [x] add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
• [x] add copy for a social post as comment to this issue (example)
• [x] close the issue with a comment to link to the published post
• [x] close the accompanying discussion with the link to the published post.

[ndiego]

I just read through it as well. Great article Justin. 💪

[justintadlock]

Published!

Social copy:

Learn how to take the Details block to the next level in your themes by adding custom styles, patterns, and more!

https://developer.wordpress.org/news/2023/12/styles-patterns-and-more-with-the-details-block/