Make WordPress Core

Opened 20 months ago

Closed 7 weeks ago

#57195 closed defect (bug) (fixed)

Twenty Eleven: Padding issue in Media & Text Block

Reported by: kajalgohel's profile kajalgohel Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: normal Version: 6.1.1
Component: Bundled Theme Keywords: has-testing-info has-screenshots has-patch needs-testing commit
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 20 months ago.
57195.1.patch (444 bytes) - added by sabernhardt 20 months ago.
changing editor styles to match first element's top margin on front end
57195.diff (1.4 KB) - added by costdev 20 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 20 months ago.

Download all attachments as: .zip

Change History (15)

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


20 months ago

#2 @ironprogrammer
20 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
20 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
20 months ago

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

#4 @costdev
20 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
20 months ago

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

#5 @ironprogrammer
20 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
3 months ago

  • Milestone changed from Awaiting Review to Future Release

#7 @karmatosed
7 weeks ago

  • Keywords needs-testing added
  • Milestone changed from Future Release to 6.6

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.

#8 @huzaifaalmesbah
7 weeks ago

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
https://i.ibb.co/LZsyY4F/Huzaifa-20240528200551.png https://i.ibb.co/j33QLgM/Huzaifa-20240528200604.png

After Apply Patch

Editor Frontend
https://i.ibb.co/0fTvFdB/Huzaifa-20240528201140.png https://i.ibb.co/jHtJ9Cx/Huzaifa-20240528201156.png

#9 @hmbashar
7 weeks ago

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
https://i.ibb.co/K50XkcZ/Before-Backend.png https://i.ibb.co/MhpL7Wf/Before-Frontend.png

After

Editor Frontend
https://i.ibb.co/W63SJfC/After-Backend.png https://i.ibb.co/3My8NH6/After-Frontend.png
Last edited 7 weeks ago by hmbashar (previous) (diff)

#10 @karmatosed
7 weeks ago

  • Keywords commit added

#11 @karmatosed
7 weeks ago

  • Owner set to karmatosed
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.