Enhance Details Block to Separate Summary from Content

[eric-michel]

What problem does this address?

There have been a couple threads about the details block and its somewhat unintuitive styling: #54549, #57970

The problem is that the <summary> tag is simply a RichText control within the block, and the hidden content is contained in the InnerBlocks. So any top level styles will apply to everything since those styles are applied to the <details> tag as a whole. The hidden content can be wrapped in a group block for styling purposes, but it feels less intuitive for novice users who expect to be able to style the summary content separately.

What is your proposed solution?

Refactor the block into a container with two child blocks: core/details-summary and core/details-content that can then be independently styled.

In summary, the core/details block would be split into:

• core/details: Acts like a columns block in that it is simply a container for its two child blocks. Would contain one of each of core/details-summary and core/details-content in its block template and template lock would be turned on to prevent removing or adding to those child blocks. Would still have its own styling options that apply to all children, along with top-level attributes like showContent to determine if the details element is open on load.
• core/details-summary: Acts like a core/heading block and gets wrapped in the <summary> tag. Should include the HeadingLevelDropdown component to optionally wrap the content within the <summary> tag in a heading tag since that is now valid.
• core/details-content: Acts like a core/column block for easy styling of the hidden content of the details element.

[t-hamano]

Thanks for the report.

When this block was first added, it seems to have been divided into three blocks: details, details-summary, and details-content. After that, it seems that they were merged into one block by #49808.

cc @richtabor @carolinan

[eric-michel]

Thank you! I totally missed that. I see there was a lot of discussion leading to the current setup. If the ultimate decision is that it needs to stay the way it is for simplicity, I think it would at least be beneficial to have a heading level selector available to wrap the content within the summary tag in h1, h2, h3, etc.

I do think the original structure is more intuitive, though.