[wp-trac] [WordPress Trac] #55581: Twenty Twenty: Aligned images cannot be resized or are properly displayed

[WordPress Trac]

#55581: Twenty Twenty: Aligned images cannot be resized or are properly displayed
------------------------------------------------+--------------------------
 Reporter:  robertghetau                        |       Owner:  (none)
     Type:  defect (bug)                        |      Status:  new
 Priority:  normal                              |   Milestone:  Awaiting
                                                |  Review
Component:  Bundled Theme                       |     Version:  5.9.3
 Severity:  normal                              |  Resolution:
 Keywords:  close dev-feedback has-screenshots  |     Focuses:
------------------------------------------------+--------------------------
Changes (by gaisma22):

 * keywords:  needs-testing => close dev-feedback has-screenshots


Comment:

 == 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

 [[Image(https://i.ibb.co/C3cm0StX/01-editor-image-aligned-right.png)]]

 [[Image(https://i.ibb.co/6RQFJp0n/02-frontend-image-aligned-right.png)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55581#comment:7>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform