.wp-element-caption class incorrectly applied to Quote block <cite> element in Editor

[justintadlock]

Description

Since the addition of the toggle button to show/hide the Quote citation in the editor in Gutenberg 18.1, it has applied the .wp-element-caption class to the <cite> element: #59073

It creates inconsistent styling between the editor and front end because of the addition of the class, which means that it picks up caption styling (it should only have cite styling in both places)

Step-by-step reproduction instructions

1. Add a Quote block with a citation.
2. Test on WordPress/Gutenberg pre-18.1.
3. Test on Gutenberg 18.1 or newer and see the addition of the .wp-element-caption class on the editor side.

Screenshots, screen recording, code snippet

Editor:

Front end:

Environment info

• WordPress trunk
• Gutenberg 18.5 RC1

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

[aatanasovdev]

For the <cite> element, the Quote block relies on a utility component called Caption, which is used by other blocks such as Video, Gallery, etc. It was prepared in this pull request.

The front end doesn't have the .wp-element-caption because the save method doesn't use __experimentalGetElementClassName( 'caption' ) as it is done for the other blocks.

Based on that, we have the following approaches:

1. If we need to reuse the existing Caption utility component, it is better if we use the .wp-element-caption class in the Editor and on the front end.
2. We create a new component for the <cite> element.

The second option will be appropriate if we don't consider the citation as a caption and then reuse the new component for other <cite> related places in the future. Otherwise, the first option makes sense for better consistency.

[justintadlock]

If we need to reuse the existing Caption utility component, it is better if we use the .wp-element-caption class in the Editor and on the front end.

This option would also create back-compatibility styling issues for themes. But I'd consider it a non-starter because citations and captions are two different things that serve different purposes

We create a new component for the <cite> element.

Is a new component needed or just the ability to overrule the class of the existing component? I'd be OK with either direction.

[aatanasovdev]

@justintadlock , thank you for the feedback. I've prepared a PR (my first one) following the overrule approach.

In the future, if we end up adding too many options/rules to the utility components, we can think of organizing and standardizing them for better consitency.

[talldan]

Fixed by #62485