Bug: Image block selecting medium or thumbnail does not relocate caption - caption centered in relation to boundry box.

[paaljoachim]

Describe the bug
Resizing image by selecting image size drop down does not relocate caption when selecting thumbnail or medium.

Btw I also tested the 25%, 50% etc and these worked nicely. Except when it resets back to medium or thumbnail default image size.

To reproduce
Steps to reproduce the behavior:

1. Select an image block.
2. Add image.
3. Select thumbnail or medium image size in the drop down.
4. Notice that the caption does not show directly under the image.

Expected behavior
That the caption would show directly under the image also on thumbnail and medium size image.

Chrome.
Using Desktop Server.
Mac OS 10.13.6

[phpbits]

@paaljoachim Just checked and it seems to be theme-specific. For instance, if you are using TwentyTwenty theme with the default caption aligned to the left, you won't have this issue. Perhaps the solution is to define caption alignment on theme_support?

I'm not really sure what's the best solution but I'm working on Caption Alignment for EditorsKit - https://wordpress.org/plugins/block-options/ and I'm sure it'll help for user-specific solution. Here's what I have for alignment toolbar so far :

[paaljoachim]

That is good to hear Jeffrey! That means we can close this issue. Do you agree?

I tested using Twenty Nineteen and that has the error still there. I believe this is something @kjellr will need to adjust later on.

[tellthemachines]

I can reproduce this issue on any small image, without resizing. It would be good to fix this issue in the editor rather than forcing themes to adopt specific styling as a workaround. Some context here which should be taken into account.

[paaljoachim]

@tellthemachines As this is also affecting the new default theme Twenty Twenty One.
A fix should be backported to WP 5.6.

This is what it looks like:

The caption is aligned to the bounding/border box surrounding the image. It needs to be aligned directly to the image.

[tellthemachines]

@paaljoachim unfortunately this is not a 5.6 regression, so it doesn't qualify for inclusion during RC stage. Agree we should fix it soon and make sure it's ready for 5.7.

[paaljoachim]

Hi Isabel @tellthemachines
What can perhaps be done it getting a fix for this into a 5.6.1 release.

[paaljoachim]

@noisysocks Robert.
This is an important user interface adjustment that we should get either into 5.6.1 or 5.7 "Must haves".
Thanks.

I look forward to being able to center captions below the image. Today too many captions are off centered.

[noisysocks]

Thanks for flagging.

[paaljoachim]

Related issues:
Missing text-align for image caption
#19975

Introduce explicit caption positioning
#12997
Inline alignment caption toolbar. Which would give the user the option into where the caption should be placed.

Image caption styles global styles support
#27480

[talldan]

This issue seems like a duplicate of #11719

[paaljoachim]

Hey Dan @talldan
This issue is a duplicate of #11719 . I closed the other issue so that we can focus on this issue which has been added the 5.7 project board.

Bottom line is that is looks like we need to rework the Image block, as multiple issues needs to be addressed.
Here is another issue: #21836

[mtias]

@paaljoachim these issues don't require reworking the image block!

[paaljoachim]

Can we keep the image centered within the boundary box, so that the caption is always centered below the image?
@tellthemachines @jasmussen

[paaljoachim]

It would be nice to get this fix into WP 5.9.
I am hoping someone is able to take a closer look.
Thanks!

We are getting additional reports on this.

Additional associated/duplicate issues:
Image alignment is left by default but it displays center as default
#33349

Images are centered in editor and aligned left in preview
#31011

I made a quick fix through the CSS to one of my customer sites. Which shows the caption centered below the image independent of the size on the frontend. Backend still shows the caption centered to the boundry box.

wp-block-image {
margin-bottom: 1.2em;
display: inline-block;
justify-content: center;
}

@Mamaduka

This seems like one solution. (PR has stalled)
Image block: try caption as inner block
#31823

[paaljoachim]

There seems bigger fixes needed related to the PR which was suggested by @jasmussen
#31823 (comment)

Can we create a step between? With focus on improving the current caption alignment problem. A fix that can also later be incorporated into the PR by @ellatrix

[antpb]

Is it possible the solution for this could be making the caption respect the alignment of the image? For instance, the image currently initializes left aligned. The caption initializes centered. Is there a reason they aren't the same alignment? It would greatly improve the experience if I added an image block with everything matching the default alignment.

More often than not when I add an image block, the first thing I do is click center so it matches the alignment of the caption. That seems to be the core problem. Folks want to unify that button with the content of the image block which currently has alignment settings.

[glendaviesnz]

Potential fix for this at #35787

[paaljoachim]

A big thank you to @glendaviesnz and @andrewserong !