Image caption alignment in wrong position.

[paaljoachim]

Describe the bug
Default alignment for image. Add caption. It shows up in the wrong place.

To Reproduce
Steps to reproduce the behavior:

1. Add an image.
2. Add a caption.
3. See if it aligns correctly with the image or if is aligns with the white image block space area.
4. Also check the frontend.

Expected behavior
Video embed caption code is now finally aligning captions correctly.
#11441

Screenshots
Backend Gutenberg:

Aligns to the white image block space and not the image.

I wrote caption centered. For the caption is centered to the white image block space and not the image itself.

Frontend

Desktop (please complete the following information):
Mac OSX 10.13.6
Chrome
Gutenberg version 4.9.

@youknowriad

[draganescu]

Hi @paaljoachim I was able to reproduce this only when selecting "Image Size" from the inspector.

If I resize using the handles the caption remains centered to the image:

Is this how you did it, using the Inspector "Image Size" dropdown or manually resized the image?

Also, the yep, misalignment is visible on frontend too.

[paaljoachim]

Hey @draganescu

I just checked. Image has default alignment and the image is in full size mode.

Backend:

Frontend:

When I select Wide Width alignment then it looks correct.

[draganescu]

Apparently this is as intended. The image block has a figure with two children and img and a figcaption. When the image is smaller than the block's box, but not floated (default align) the figure is displayed as block, thus the figcaption will be centered to the larger box, the figure, not the image.

When the image is floated (not default align) or resized, then:

• the image's figure element gets a div wrapper
• the figure and the figcaption elements are displayed as table and table caption respectively
• this makes the caption align to the image's size

Maybe @jasmussen could chime in with some advice as to why we don't display the figure as table by default and the figcaption as table-caption by default, but only when the wrapper is present:

	.alignleft,
	.alignright,
	.aligncenter,
	&.is-resized {
		display: table;

		// The figure is born with left and right margin.
		// We remove this by default, and then customize it for left, right, and center.
		margin-left: 0;
		margin-right: 0;

		> figcaption {
			display: table-caption;
			caption-side: bottom;
		}
	}

Both in the editor and the front end using the table display for the figure and the figcaption elements by default, aligned or not aligned, resized or not resized, seems to work ok, but I am unsure yet if it yields other problems.

[jasmussen]

Okay had to walk down memory lane to find the reasons for this.

Turns out we tried it, and punted it. #7721 (comment)

The pertinent bit:

In general we use a display: table; trick to get the caption to size itself according to the image. This works because of the unique rules of the table. However if an unfloated image follows a floated image, this means the unfloated image can size itself down to "fit in the available space", which is not what we want.

As I mention in the comment there, it is worth revisiting. But it may not be as simple as just applying the table property to the image block across the board. So for any PRs you make, please be sure to try a multitude of different image size & float configuations. Notably:

[small image, floated, with big caption]
[small image, not floated, with big caption]

And be sure to compare before and after.

[paaljoachim]

I retested this by using various image alignments and the caption is now aligning correctly in Gutenberg and on the frontend. I will go ahead and close this issue.

[paaljoachim]

Resizing the image directly using the handlebars automatically adjusts the caption area. Resizing the image using medium or thumbnail does not adjust the caption.
I will add a new issue for this specific bug.
#17162

[sparkbold]

experienced the same issue.