Details Block: typography changes to summary should be separate from "answer" [open] blocks

[bradhogan]

Description

Right now, you cannot adjust the typography of the summary (e.g. question) of the details block. A change to the type options for the summary get applied throughout the "answer" portion of the block too.

Step-by-step reproduction instructions

1. add details block
2. add summary text
3. add a few sentences / paragraphs to the answer portion
4. try to change the font size for the summary and note that those sizes are used in the answer portion too

Screenshots, screen recording, code snippet

No response

Environment info

• wp 6.6.2
• gutenberg 19.6.0-rc.2
• chrome
• mac

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[yogeshbhutkar]

@bradhogan, I followed the above mentioned steps, I believe the font size being applied to the answer ( the hidden block ) can be conveniently changed by selecting the block and applying a different font size to it. Here's a screencast for the same.

Screen.Recording.2024-11-06.at.8.26.47.PM.mov

Please let me know if this was what you were looking for or if there's something else that I overlooked while going through the issue description.

Thank You.

Gutenberg Plugin Info: Version 19.6.0-rc.3
WordPress Version: 6.8-alpha

Testing Update: Also tested on WordPress Version 6.6.2 and it's working as expected.

[bradhogan]

Yes, what you are saying does work but that is a bug imo. The behavior shouldn't be that the answer (child blocks) take on the style of the parent (question).

[carolinan]

I disagree with this opinion.
The inner blocks inherit their style from the parent and this is intentional.
If you place a paragraph inside a group and adjust the font size of the group. the paragraph size is changed.
If you change the size on the individual inner blocks, that style overrides the parent.

Without this feature, a user who wants all inner blocks to have the same size, would need to select each individual block and change them one by one.

[bradhogan]

@carolinan I get what you're saying, but from a use-case scenario a designer is almost never going to design a toggle / FAQ style design to have the "question" the same style as the "answer." The Details Block is also listed in the TEXT section in the Blocks panel so it shouldn't be considered a Group Block (or should be moved). I think of this more like the Quote / Pullquote blocks. Maybe the summary needs to be a H2 with the "large" font size set similar to how the initial state of the cover block sets the H2 to a large font size.

[carolinan]

There is a lot of historic context to why the summary is not a heading.
#49808
https://core.trac.wordpress.org/ticket/60335

The quote block works the same way. If you change the font size on the quote block itself, the inner blocks change size.

[bradhogan]

The quote block change makes sense because all of the inner blocks are on the same hierarchy (e.g. multiple paragraphs inside a quote block) vs. the details block has a summary and then a separate section to add blocks - more inline with the pullquote block (blockquote and cite). At the end of the day, the current ux of the details block does not make sense. The summary should be separate from changes that happen to the non-summary blocks. Any modern design would generally have at least some subtle difference between the "summary" and the internal blocks (i.e. answer). It is not intuitive that a user would add mods to the summary text (font weight, size, etc.) then go into the inner blocks to manual force default font styles.