Twenty Twenty: Aligned images cannot be resized or are properly displayed

[robertghetau]

Steps to replicate:

1. Create a new page
2. Add content to it and make sure you have a paragraph block and an image block.
3. Align the block to the right and modify its size.

Two things will happen:

1. The size of the image is not respected.
2. The alignment is not the same(editor vs frontend)

This happens with the latest version of WordPress(5.9.3) and Twenty Twenty(1.9)

[hilayt24]

Hi @robertghetau,

I can reproduce this issue. And by looking deeper I found that the position absolute is the p[roblem. By removing that the images will be visible the same in front and back.

But somehow I can't able to reproduce the first issue.

[hilayt24]

Remove the position absolute from the below class.

@media (min-width: 1000px)
.entry-content > .alignleft, .entry-content > p .alignleft, .entry-content > .wp-block-image .alignleft {
    position: absolute;
}

[mrfoxtalbot]

I am still able to reproduce this.

To clarify, making the floated image small does work but there seems to be a limit on how big the image can be made. I'm going to add a link to a screenshot for clarity:

​https://mrfoxtestingsite.files.wordpress.com/2022/06/screen-capture-on-2022-06-22-at-12-52-41.mp4

[mrfoxtalbot]

I have opened a matching issue to track this bug for Twenty Twenty-One: https://core.trac.wordpress.org/ticket/56038

[gaisma22]

Reproduction Report

Environment

• WordPress: 7.0-beta3-61849-src
• PHP: 8.3.30
• Server: nginx/1.29.5
• Database: MySQL 8.4.8
• Browser: Brave
• OS: Ubuntu
• Theme: Twenty Twenty (twentytwenty)
• MU Plugins: None
• Plugins: None (first test), Hello Dolly 1.7.2 (second test)

Steps taken

1. Activated Twenty Twenty theme.
2. Created a new page titled "Image Alignment Test".
3. Added a paragraph block with dummy text.
4. Added an image block and uploaded an image.
5. Aligned the image block to the right.
6. Resized the image by dragging the corner handle inward. Final width: 117px.
7. Confirmed text wrapped around the right-aligned image in the editor.
8. Published the page and visited the frontend.
9. Compared editor vs frontend. Image size and alignment were consistent in both views.
10. Inspected the page source and searched for the CSS rule reported as the root cause:

.entry-content > .alignleft, .entry-content > .alignright { position: absolute; }
It was not present anywhere in the stylesheet.

Result: ❌ Bug is not occurring

Expected behavior

Based on the ticket, aligning an image block to the right and resizing it should
produce inconsistent results between the editor and frontend. The image size should
not be respected and the alignment should differ between views. The root cause was
a position: absolute rule applied to .alignleft and .alignright inside .entry-content
in Twenty Twenty's stylesheet.

Additional Notes

1. Tested first in a clean environment with no plugins active.
2. Environment was reset and the test was repeated with Hello Dolly 1.7.2 active.
3. The CSS rule identified as the root cause in the original report is gone from the current version of Twenty Twenty. It was present in Twenty Twenty 1.9 and has since been removed.
4. Both tests produced the same result. No reproduction in either scenario.
5. Removing needs-testing as the bug does not reproduce in WordPress 7.0-beta3-61849-src. Adding close - the CSS rule identified as the root cause is gone from the current Twenty Twenty stylesheet. Leaving open in case another tester wants to run a second test.

Screenshots/Screencast with results

[sabernhardt]

comment:3 combined parts of two rulesets, which are still present for screens wider than 1000 pixels, only on the front end:

	.entry-content > .alignleft,
	.entry-content > p .alignleft,
	.entry-content > .wp-block-image .alignleft {
		position: absolute;

		/*rtl:ignore*/
		right: calc((100vw - 58rem) / 2 + 58rem + 2rem);
		max-width: calc((100% - 58rem) / 2 - 6rem);
	}

	.entry-content > .alignright,
	.entry-content > p .alignright,
	.entry-content > .wp-block-image .alignright,
	[class*="__inner-container"] > .alignright {
		position: absolute;

		/*rtl:ignore*/
		left: calc((100vw - 58rem) / 2 + 58rem + 2rem);
		max-width: calc((100% - 58rem) / 2 - 6rem);
	}

The left, right and max-width values also change at wider breakpoints.

Some tickets, such as #48718, have identified problems that can occur with the absolute positioning. However, anyone using the six-year-old theme more likely wants their content to display the same as when it was created.

The editor styles could be updated to reflect the absolute positioning and limited width on larger screens (using 10px instead of 1rem).