Details Block - Enable styles for the visible portion only, the hidden portion only, or both

[DanSoschin]

What problem does this address?

When working with the DETAILS BLOCK, you have style options that only apply to the entire block. However, there are common use cases where you might want to style the visible portion differently from the hidden portion, such as a Q&A section, where the questions are bold and the answers are hidden and plain text.

What is your proposed solution?

Enable users to style the HIDDEN portion of the block separately from the VISIBLE portion. Perhaps having a toggle that says "apply to all OR apply to visible only OR apply to hidden only" ... and if visible or hidden only are selected, a 2nd set of styles opens for that portion of the block.

[richtabor]

However, there are common use cases where you might want to style the visible portion differently from the hidden portion, such as a Q&A section, where the questions are bold and the answers are hidden and plain text.

The suggested method is to wrap the contents in a group block, and style that.

[coreyworrell]

@richtabor I think a better, more expected flow, would be for all those block styling options to only apply to the summary by default. Then there would be no need to manually apply everything to a group block just to get back to your site's defaults.

Example: set Appearance as Bold.. Now your expanded content is all bold too. Probably never going to be what you actually wanted. So now you have to wrap your content in a group block and set the Appearance of that block back to whatever your site's default weight is, which now you have to know and/or remember, and that will now be disconnected if you ever change the site's default Appearance weight, so you'll have to go through every single Details block and change that Appearance again.

[burnuser]

The problem is evident in Theme Twenty Twenty-Four FAQ: https://2024.wordpress.net/index.php/faqs/
The questions (= visible Summary section) and answers (= invisible Details section) have different styles.

In the moment, to achieve this behaviour, you have to style each Details section manually. => Very bad workflow!

And now imagine a separate style only for the Summary section, maybe only once configured in the Website editor - Styles - Blocks - Details
=> Workflow without any need for manual styling of blocks in Details section!

[ricjcs]

I would also like to be able to define the visible part as bold and other types of formatting, and the hidden part with a different formatting/style.

[jeremyfelt]

Chiming in with what I think is a related limitation...

In theme.json, I'd like to set a default style that targets the summary element separately from any other elements inside details.

Two that may solve this but don't seem possible right now:

1. Add support for summary to the allowed elements in theme.json.
2. Add support for nested blocks in theme.json.

With the first, I could use "core/details": { "elements": { "summary": .... to target all summary elements within the details block.

With the second, I could use "core/details": { "nested": { "core/paragraph": { "typography".... to target all paragraphs within a core/details block.

Alternatively, and it may be too late for this, but a core/details-summary block could be a useful way to also provide style options in the editor.

[lukecarbis]

Supporting summary as an element seems like a great idea to me. I could have used that today.