Caption utility component: Allow the main CSS Class Name to be excluded from the markup. #62485

aatanasovdev · 2024-06-11T15:26:06Z

What?

Extending the Caption utility component by allowing the main CSS Class Name to be excluded from the HTML Markup using a prop called excludeElementClassName. Also, the Quote block was modified to use the prop.

Why?

This update is related to this issue: 62208

The new prop allows us to reuse the existing Caption component in places where its main CSS Class Name (.wp-element-caption) isn't needed.

How?

It addresses the issue by adding a prop to the Caption component, which excludes the main CSS Class Name when needed.

Testing Instructions

Insert a Quote block with a citation.
Inspect the HTML markup of the block.
The wp-element-caption CSS Class Name shouldn't exist in the <cite> element.
Insert a Gallery block with some images and add captions to them.
Inspect the HTML markup of an image caption.
The wp-element-caption CSS Class Name should exist in the <figcaption> element.

…excluded in the HTML markup

github-actions · 2024-06-11T15:26:23Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: aatanasovdev <aatanasov@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2024-06-11T15:26:29Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @aatanasovdev! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

aatanasovdev · 2024-06-11T17:41:57Z

Regarding the failed tests:

Enforce labels on Pull Request: I missed adding the necessary labels: [Block] Quote and [Type] Bug
React Native E2E Tests (Android) / Unit Tests / JavaScript (Node.js 22) 2/4 Reviewing the details, it appears the errors aren't related to the PR code itself, and I'm not sure if any actions should be done for these two in this PR.

talldan

Thanks for working on this change!

The code looks good to me, but I think the prop naming could be simplified a little.

It doesn't really affect the functionality though, so I'll approve it.

talldan · 2024-06-13T06:52:14Z

packages/block-library/src/utils/caption.js

@@ -32,6 +32,7 @@ export function Caption( {
 	placeholder = __( 'Add caption' ),
 	label = __( 'Caption text' ),
 	showToolbarButton = true,
+	excludeMainElementClassName,


I think the naming of the prop could be simplified:

Suggested change

excludeMainElementClassName,

excludeElementClassName,

…e for excluding the Element CSS Class Name

aatanasovdev · 2024-06-16T18:44:53Z

@talldan, thank you for approving the change and suggesting a simplified prop name.

I've pushed a new commit with the simplified name.

talldan · 2024-06-17T04:07:23Z

Thanks @aatanasovdev for your contribution.

There's a unit test failure related to the caniuse dependency being outdated, but this is happening in trunk too, so I'll go ahead and merge the PR and look to fix those failures separately (fixed in #62611).

…ed from the markup. (WordPress#62485) * Allow the main CSS class name of the Caption utility component to be excluded in the HTML markup * Caption utility component: change the name of the property responsible for excluding the Element CSS Class Name ---- Co-authored-by: aatanasovdev <aatanasov@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org>

…ed from the markup. (#62485) * Allow the main CSS class name of the Caption utility component to be excluded in the HTML markup * Caption utility component: change the name of the property responsible for excluding the Element CSS Class Name ---- Co-authored-by: aatanasovdev <aatanasov@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org>

ellatrix · 2024-06-18T07:32:24Z

I just cherry-picked this PR to the wp/6.6-beta-3 branch to get it included in the next release: b6178b7

…ed from the markup. (#62485) * Allow the main CSS class name of the Caption utility component to be excluded in the HTML markup * Caption utility component: change the name of the property responsible for excluding the Element CSS Class Name ---- Co-authored-by: aatanasovdev <aatanasov@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org>

Allow the main CSS class name of the Caption utility component to be …

5ef0ef2

…excluded in the HTML markup

aatanasovdev requested a review from ajitbohra as a code owner June 11, 2024 15:26

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jun 11, 2024

aatanasovdev changed the title ~~Allow the main CSS class name of the Caption utility component to be …~~ Caption utility component: Allow the main CSS Class Name to be excluded from the markup. Jun 11, 2024

aatanasovdev mentioned this pull request Jun 11, 2024

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

Closed

talldan approved these changes Jun 13, 2024

View reviewed changes

talldan added [Type] Bug An existing feature does not function as intended [Block] Quote Affects the Quote Block labels Jun 13, 2024

talldan assigned aatanasovdev Jun 13, 2024

Caption utility component: change the name of the property responsibl…

43b5633

…e for excluding the Element CSS Class Name

talldan added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jun 17, 2024

talldan merged commit 11390a8 into WordPress:trunk Jun 17, 2024
54 of 62 checks passed

github-actions bot added this to the Gutenberg 18.7 milestone Jun 17, 2024

ellatrix added Backported to WP Core Pull request that has been successfully merged into WP Core and removed Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Jun 18, 2024

justintadlock mentioned this pull request Jun 22, 2024

[Quote] Gutenberg 18.1 breaks Quote citations in editor x3p0-dev/x3p0-ideas#13

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Caption utility component: Allow the main CSS Class Name to be excluded from the markup. #62485

Caption utility component: Allow the main CSS Class Name to be excluded from the markup. #62485

aatanasovdev commented Jun 11, 2024 •

edited

Loading

github-actions bot commented Jun 11, 2024 •

edited

Loading

github-actions bot commented Jun 11, 2024

aatanasovdev commented Jun 11, 2024

talldan left a comment

talldan Jun 13, 2024

aatanasovdev commented Jun 16, 2024

talldan commented Jun 17, 2024 •

edited

Loading

ellatrix commented Jun 18, 2024

Caption utility component: Allow the main CSS Class Name to be excluded from the markup. #62485

Caption utility component: Allow the main CSS Class Name to be excluded from the markup. #62485

Conversation

aatanasovdev commented Jun 11, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

github-actions bot commented Jun 11, 2024 • edited Loading

github-actions bot commented Jun 11, 2024

aatanasovdev commented Jun 11, 2024

talldan left a comment

Choose a reason for hiding this comment

talldan Jun 13, 2024

Choose a reason for hiding this comment

aatanasovdev commented Jun 16, 2024

talldan commented Jun 17, 2024 • edited Loading

ellatrix commented Jun 18, 2024

aatanasovdev commented Jun 11, 2024 •

edited

Loading

github-actions bot commented Jun 11, 2024 •

edited

Loading

talldan commented Jun 17, 2024 •

edited

Loading