Block Library: Add caption alignment to the image block.

[epiqueras]

Closes #19975

Description

This PR adds text alignment to the Image block's caption.

How has this been tested?

It was verified that setting the text alignment on the Image block's caption works as expected.

Screenshots

Editor

Front End

Types of Changes

New Feature: You can now align the captions in Image blocks.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[paaljoachim]

It is awesome that caption alignment is being added!

I thought that caption alignment would be a part of the bottom caption toolbar?
As having it in the top image toolbar might be a bit confusing. The caption toolbar contain various formatting that has to do with the caption, and it seems alignment also would belong in it.

[epiqueras]

If it’s at the bottom you won’t see it until you select the caption.

[mapk]

Glad to see this getting in too! I agree with @paaljoachim that we should add this to the Captions toolbar though. Using it on the block toolbar alludes that everything within the block would be aligned a particular way.

If it’s at the bottom you won’t see it until you select the caption.

This is okay. Once you're typing a caption, it appears.

[paaljoachim]

1. • preadded caption -
     If one has added an caption earlier with the image in the Media Library then it will show up below the image. If the user does not click into the caption the user will not notice the caption toolbar and the various formatting one can do with a caption.
2. • Has not preadded a caption. -
     If the user has not earlier added a caption then they will click into the caption area and notice the caption toolbar.

If a user wants to do something that affects the caption it seems natural based on clicking into any block to affect it that they will also click into the caption area and then notice the caption toolbar.

[epiqueras]

It’s pretty clear that this only affects text from the icon and label. The other issue with having it in the caption toolbar besides it not being as discoverable is that the caption toolbar is not a block toolbar. It is the rich text component’s format toolbar. Adding a block-level, non-inline control there would be a first and go against the general pattern already established in the editor and API. If we absolutely require the alignment control there then perhaps we should differentiate it from the rich text formats somehow.

[phpbits]

@epiqueras Would it be better to add separate classnames? I'm using caption-align-left caption-align-center and caption-align-right on EditorsKit plugin. Thanks!

[epiqueras]

No, we need to follow the standard to support theming.

[phpbits]

@epiqueras I would love to check the theming standard, do you have the link for the classnames standard? Using has-text-align- works on this PR but when you add this caption alignment globally on other blocks that has caption you'll have a conflict. For example, the Table Block has caption as well and if you add has-text-align-center class on it all the text in the table will be aligned center. I hope this makes sense.

I know it might sound like I just want backward compatibility with EditorsKit because I'm using caption-align-{align} but I hope you'll reconsider.

Thanks!

[epiqueras]

For example, the Table Block has caption as well and if you add has-text-align-center class on it all the text in the table will be aligned center. I hope this makes sense.

The class is applied to the caption, not the entire block.

I would love to check the theming standard, do you have the link for the classnames standard?

@jorgefilipecosta Do we have documentation for this somewhere?

[phpbits]

The class is applied to the caption, not the entire block.

Oh! Sorry, forgot about that. I think it should be okay then. Thanks!

[mapk]

There was a good discussion about this in today's core-editor chat.

As a user, when realigning on the block-level, I expect everything in the block to realign. For example, take a look at the Paragraph block with an inline image. Everything realigns even though the icon is "text" alignment.

Adding this to the block-level toolbar gives the perception that everything in the Image block, including the image, will realign. For this reason, it's important to add this to the caption toolbar because this alignment ONLY applies to the caption.

While this may be technically different from the other caption controls, it's no different to the user. If alignment only changes the caption, but is located in the block-level toolbar, why isn't the Bold, Italic, etc. options? These all apply to the same thing from a user's perspective. Having them separate will cause some confusion.

[shaunandrews]

it's important to add this to the caption toolbar because this alignment ONLY applies to the caption.

Agreed here. If I think of the caption as a "Caption" child block of the Image block, then this makes even more sense.

[epiqueras]

I don't think it's any more confusing than mixing inline rich text formats with a block-level caption alignment option.

Maybe "Change caption alignment." is clearer?

I suggest we ship this until RichText supports something like what you are suggesting. Otherwise, I'll close this for now.

[mapk]

I believe the disconnect between the caption controls is too confusing. I'm in favor of holding off on this until we can get the alignment controls in the Caption toolbar next to the other caption-specific controls.

@epiqueras I really appreciate your work here! Thank you!

[paaljoachim]

I went ahead and added some more information to the issue: #19975 (comment)