Twenty Eleven: Padding issue in Media & Text Block

[kajalgohel]

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

[ironprogrammer]

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.

[sabernhardt]

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]

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

[costdev]

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]

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

[ironprogrammer]

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

After Patch

Editor	Frontend

[karmatosed]

As this has testing and a patch let's move to this release to get eyes on a final round of testing because it was a little time ago. Then we can move this into commit.

[huzaifaalmesbah]

Test Report

Description

Patch tested: 57195.diff​

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.6
• Server: nginx/1.25.5
• Database: mysqli (Server: 11.3.2-MariaDB / Client: mysqlnd 8.3.6)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Eleven 4.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Screenshots

Before Apply Patch

Editor	Frontend

After Apply Patch

Editor	Frontend

[hmbashar]

Test Report

Patch tested: 57195.diff​

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.7
• Server: nginx/1.25.4
• Database: mysqli (Server: 8.3.0 / Client: mysqlnd 8.3.7)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Eleven 4.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Before

Editor	Frontend

After

Editor	Frontend

[karmatosed]

In 58238:

Twenty Eleven: Resolves padding for media and text block.

The media and test block had misaligned padding. This changes styles to match margins.

Props kajalgohel, nidhidhandhukiya, ironprogrammer, sabernhardt, costdev, huzaifaalmesbah, hmbashar.
Fixes #57195.