Make WordPress Core

Opened 17 months ago

Last modified 10 days ago

#57195 new defect (bug)

Twenty Eleven: Padding issue in Media & Text Block

Reported by: kajalgohel's profile kajalgohel Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 6.1.1
Component: Bundled Theme Keywords: has-testing-info has-screenshots has-patch
Focuses: ui, css Cc:

Description

In Twenty Eleven Theme, when we add Media & Text Block block on the editor side and add the Image and multiple texts then the padding issue occurs.

Steps to replicate:
1: Activate the Twenty Eleven Theme
2: Add Media & Text Block
3: Add Image
4: Crop the Image
5: Add multiple line Text
6: Add button block
7: Select background color
8: View the page/post at editor side
9: Save Page/Post
10: View the page/post at the front side

For better understanding, I provide a video attachment link.
Video link: https://share.cleanshot.com/GPXVlqF9TjaouNqYEMJ5

Thanks

Attachments (4)

57195.patch (450 bytes) - added by nidhidhandhukiya 17 months ago.
57195.1.patch (444 bytes) - added by sabernhardt 17 months ago.
changing editor styles to match first element's top margin on front end
57195.diff (1.4 KB) - added by costdev 17 months ago.
Remove margin-top. Add padding-top: 1.5em and padding-bottom: 1.5em.
57195-before-after-margin-top-padding-top-and-bottom.png (816.7 KB) - added by costdev 17 months ago.

Download all attachments as: .zip

Change History (10)

This ticket was mentioned in Slack in #core-test by ironprogrammer. View the logs.


17 months ago

#2 @ironprogrammer
17 months ago

  • Keywords has-testing-info has-screenshots added

Thank you for the patch, @kajalgohel! Would you be able to open a PR for this patch against Twenty Eleven's `blocks.css` file? That file includes existing rules for .wp-block-media-text.

Props sabernhardt for pointing this out in today's #core-test triage.

#3 @sabernhardt
17 months ago

  • Keywords has-patch added; needs-patch removed

Because the last content element has no bottom margin in the editor or on the front end, I think setting the top margin to zero in the editor would be more appropriate than changing the public view.

Twenty Ten also has a discrepancy with the top margin between editor and front end. However, it does not have the zero bottom margin added to other themes in r44152.

@sabernhardt
17 months ago

changing editor styles to match first element's top margin on front end

#4 @costdev
17 months ago

IMO, removing the top margin as @sabernhardt suggests, then adding top and bottom padding to the text, seems to produce the nicest result when both changes are made in the editor and frontend.

Attaching a patch with these changes and a before/after image in the editor and frontend.

@costdev
17 months ago

Remove margin-top. Add padding-top: 1.5em and padding-bottom: 1.5em.

#5 @ironprogrammer
17 months ago

Thanks for the successive patch improvements -- great collaboration! This LGTM!

Test Report

Patch tested: attachment:57195.diff 👍🏻

Environment

  • Hardware: MacBook Pro Apple M1 Pro
  • OS: macOS 12.6.1
  • Browser: Safari 16.1
  • Server: nginx/1.23.2
  • PHP: 7.4.33
  • WordPress: 6.2-alpha-54642-src
  • Theme: twentyeleven v4.2

Actual Results

  • ✅ Padding of the Media & Text block in both the editor and frontend is resolved with patch.

Supplemental Artifacts

Before Patch

Editor Frontend
https://cldup.com/yhF-U_CAdb.png https://cldup.com/_kB5C3gjUf.png

After Patch

Editor Frontend
https://cldup.com/Z6GcCbLBYJ.png https://cldup.com/Z0_juoI3rb.png

#6 @karmatosed
10 days ago

  • Milestone changed from Awaiting Review to Future Release
Note: See TracTickets for help on using tickets.