Proposal: extend formatting controls to allow applying them to individual block components

[eric-michel]

What problem does this address?

I recently submitted #59384 regarding the Details block and confusion surrounding its formatting tools. The <summary> element is a RichText component, and the remainder of the <details> content is built from InnerBlocks. Structurally, this makes a ton of sense, because there will always be a singular <summary> element, but the remainder of the content can be variable.

The problem arises when trying to apply formatting to only the <summary> element. The user will expect to click on the <summary> element and select formatting options like color, font size, etc, and have those formatting selections apply only to the <summary> element. But in reality, those formatting tools apply to the whole block.

Take a common use case: applying a larger font size to the <summary> element so that it stands out. The user will expect they can click on that <summary> element, pick a larger font size, and move on. In reality, they have to:

• select a larger font size for the whole block (which applies to all of the content)
• wrap the InnerBlocks within a group block
• give the normal font size to the group block in order to override the larger font size.

That's extremely clunky, and not at all obvious to novice users.

Note that this exact same issue applies to the Quote block as well.

What is your proposed solution?

In #59384 I suggested supplementing core/details with core/details-summary and core/details-content blocks, each with their own independent formatting settings. But it seems that idea was actually abandoned back when the block was first developed (#49808).

Instead, it might make more sense to enhance formatting controls so that they can be easily applied to individual components. I imagine that would unfortunately be extremely complicated, but as of now I'm not aware of an easily-implemented way for block developers to include multiple components into a block and make them independently stylable.

To flesh the idea out a bit, from an interface standpoint it would be ideal if it was possible to make components like RichText effectively act like independent blocks: selectable and with their own panel of formatting options.

[cbirdsong]

I don’t have links to PRs handy, but as I recall, Summary (and also all other portions of Details) was first implemented as an inner block with distinct formatting options and someone mixed that version and it was then redone in its current form. That code could perhaps be a starting point for a more flexible version of the Details block?

[eric-michel]

@cbirdsong that's exactly right - you can find the relevant info in @t-hamano's comment here: #59384 (comment)