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:


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:


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.

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.

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 👍🏻


  • 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

After Patch

Editor Frontend

#6 @karmatosed
10 days ago

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