Rename "caption" element to "figcaption"

[huubl]

What problem does this address?

The current implementation in theme.json utilizes the caption key in elements to target <figcaption> . However, in HTML, figcaption is specifically designed for captions of figures, while caption is designated for table captions.

I think it's beter to have both keys available in elements, but right now there's no place for a new "caption" element, since this key is used for "figcaption".

What is your proposed solution?

I proprose adding both elements: "caption" and "figcaption" to theme.json, or at least renaming "caption" to "figcaption" for now. This future-proofs the codebase to allow separately targeting the elements base styles, and it aligns with HTML semantics.

It would be best to include this in upcoming theme.json version 3 if possible.

[richtabor]

Why shouldn't caption and figcaption utilize the same styling?

Also, at least currently, the table does use a figure + figcaption:

[huubl]

Indeed, while the table block currently uses <figcaption>, it should use <caption> instead. Also see: https://github.com/WordPress/gutenberg/pull/47984#issuecomment-1434555024

The distinction between <caption> and <figcaption> is crucial, as they serve different purposes in HTML. This article on Medium lists the difference between the two tags.

Therfore, it seems logical to allow configuring different base styles for caption and figcaption in elements.

In my opinion element naming in theme.json should follow HTML standards if possible.

[jasmussen]

Caption vs. figcaption is important semantically. But in a visual editor, those semantics should be automatically handled for you, you shouldn't be able to create incorrect HTML. To that end, I don't see why the "caption" term should be renamed in the UI, as it's a much clearer term for someone using the visual editor to understand, compared to the figcaption portmanteau.

If I'm missing any nuance, let me know!

[huubl]

I agree that the post editor UI should use "caption" in both cases for clarity. However, I propose the possibility to set <caption> and <figcaption> separately in the elements section of the theme.json file(and in global styles UI). Why?

• Styles for <caption> are typically structured and formal to reflect its role as a table's title or heading, while <figcaption> often has more flexible and descriptive styling. Furthermore, the table <caption> tag must be inserted immediately after the <table> tag (MDN Documentation). The visual position can be set with the CSS caption-side property, which can't be applied to <figcaption>. Therefore, I think theme.json should allow different styling for image and table captions.

• Setting table captions and figure captions styles via "style.elements.[caption/figcaption]" makes it possible to globally target both core and third-party blocks, allowing them to inherit the defined styles.

• In a broader vision, I think the theme.json elements should match HTML elements and be used to set base styling, following existing standards. See my other: GitHub Issue.

What are your thoughts on balancing user simplicity with theme developer flexibility this way?

[jasmussen]

No strong opinions on the theme.json structure, happy to defer to developers in this area, I'm mainly thinking UI, iconography, verbiage, etc. That said, it's still not clear to me what the benefit would be, of differentiating the property in theme.json only.