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

[justintadlock]

The Details/Summary block 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

[justintadlock]

Alternate PR with a different take on the block: WordPress/gutenberg#49808

[justintadlock]

Idea for using for code blocks:

[justintadlock]

Idea for a FAQs pattern:

[justintadlock]

Spoiler style:

CSS code (note this may need to be updated):

.wp-block-details.is-style-spoiler {
	border-left: 5px solid #fcb900b8;
}

.wp-block-details.is-style-spoiler summary {
	padding: 1rem;
	font-weight: bold;
	background: #fcb90029;
}

.wp-block-details.is-style-spoiler summary::marker {
	content: "⚠️ "
}

.wp-block-details.is-style-spoiler .wp-block-details-content {
	padding-left: 1rem;
}

[zzap]

This can also be used for highlighting content in warning/info/note manner.

[bph]

Conversation locked. Please continue discussion on the issue.

• Tutorial on building patterns and block styles with Details/Summary block #127

[justintadlock]

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