WordPress.org
Get WordPress

Make WordPress Core

Opened 6 weeks ago

Last modified 5 days ago

#62657 new defect (bug)

Twenty Sixteen: Latest Posts block with a background color has padding in the editor but not on front

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.3
Component: Bundled Theme Keywords: has-patch has-testing-info needs-design-feedback
Focuses: css Cc:

Description

Hello Team,

I have checked "Latest Post Block" and I have found some spacing issue on front-end side when we change its background color.

I think that there should be some space when we change block background color, Same like editor.

Here, I have provided its screenshots for references.

Thanks,

Attachments (8)

twentysixteen-latestpost.png​ (384.2 KB) - added by viralsampat 6 weeks ago.
Back-end:
twentysixteen-latestpost-front-end.png​ (318.2 KB) - added by viralsampat 6 weeks ago.
Front-end:
62657.patch​ (540 bytes) - added by viralsampat 6 weeks ago.
I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.
after-resolved-twentysixteen-latestpost-editor-end.png​ (417.7 KB) - added by viralsampat 6 weeks ago.
After resolved issue Back-end:
after-resolved-twentysixteen-latestpost-frone-end.png​ (326.4 KB) - added by viralsampat 6 weeks ago.
After resolved issue front-end:
62657.1.patch​ (521 bytes) - added by sabernhardt 6 days ago.
updates selectors to use .wp-block-list
pageViewAfterPatch62657.png​ (271.8 KB) - added by mai21 5 days ago.
pageViewBeforePatch.png​ (271.7 KB) - added by mai21 5 days ago.

Download all attachments as: .zip

Change History (16)

@viralsampat
6 weeks ago

Back-end:

@viralsampat
6 weeks ago

Front-end:

#1 @sainathpoojary
6 weeks ago

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

  • WordPress: 6.7.1
  • PHP: 8.1.29
  • Server: nginx/1.16.0
  • Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
  • Browser: Chrome 131.0.0.0
  • OS: macOS
  • Theme: Twenty Sixteen 3.4
  • MU Plugins: None activated
  • Plugins: Test Reports 1.2.0

Actual Results

✅ Error condition occurs.

Supplemental Artifacts

https://utfs.io/f/PL8E4NiPUWyOX4jgwReCihSp8qN7F5mY1za0TyZAwxIXkeRt

@viralsampat
6 weeks ago

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

@viralsampat
6 weeks ago

After resolved issue Back-end:

@viralsampat
6 weeks ago

After resolved issue front-end:

#2 follow-up: @sainathpoojary
6 weeks ago

Hi @viralsampat,

I’ve investigated this issue further and identified the root cause. The problem stems from changeset 55966, which introduced extra padding in the editor for the “List block” when a background color is applied.

The proposed patch works well, bringing consistent padding and improving visual alignment. However, it’s worth noting that the padding in the editor might not have been intentional—it appears to be a side effect of the changes made to the List Block.

#3 @yogeshbhutkar
6 weeks ago

  • Keywords has-patch added; dev-feedback needs-patch removed

#4 in reply to: ↑ 2 @sabernhardt
6 days ago

  • Summary changed from Twenty Sixteen: Facing spacing issue in the latest post block while we change its background. to Twenty Sixteen: Latest Posts block with a background color has padding in the editor but not on front
  • Version changed from 6.7.1 to 6.3

the padding in the editor might not have been intentional—it appears to be a side effect of the changes made to the List Block.

Yes, the Latest Posts padding would be a side effect of changes for List blocks in [55966]. A discrepancy existed in WordPress 6.3, but it was less noticeable when the front end had padding on three sides.

Since ​GB63537, the front-end block padding only applies to List blocks with a background. Twenty Sixteen editor-blocks.css probably should reflect that decision by using the .wp-block-list class instead of the element selectors.

@sabernhardt
6 days ago

updates selectors to use .wp-block-list

#5 @sabernhardt
6 days ago

62657.1.patch​ keeps the specificity of 0-2-1, which overrides the zero padding from .edit-post-visual-editor ul:not(.wp-block-gallery) in the non-framed editor of older WordPress versions.

#6 @mai21
5 days ago

  • Keywords has-testing-info added

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

  • WordPress: 6.8-alpha-59593
  • PHP: 8.3.14
  • Server: nginx/1.26.2
  • Database: mysqli (Server: 10.5.27-MariaDB-ubu2004-log / Client: mysqlnd 8.3.14)
  • Browser: Chrome 131.0.0.0
  • OS: Linux
  • Theme: Twenty Sixteen 3.4
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0
    • WordPress Beta Tester 3.6.2

Actual Results

  1. ✅ Error condition occurs (reproduced).

Additional Notes

Steps:
1- Active theme is 2016
2- Add a page , add text and latest posts
3- Set background color for text and latest posts
4- View the page and compare to page edit view => padding removed from latest posts

Supplemental Artifacts

Add as Attachment

#7 @mai21
5 days ago

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/62657/62657.patch

Environment

  • WordPress: 6.8-alpha-59593
  • PHP: 8.3.14
  • Server: nginx/1.26.2
  • Database: mysqli (Server: 10.5.27-MariaDB-ubu2004-log / Client: mysqlnd 8.3.14)
  • Browser: Chrome 131.0.0.0
  • OS: Linux
  • Theme: Twenty Sixteen 3.4
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0
    • WordPress Beta Tester 3.6.2

Actual Results

  1. ✅ Issue resolved with patch.

Additional Notes

Supplemental Artifacts

Add as Attachment

Last edited 5 days ago by mai21 (previous) (diff)

@mai21
5 days ago

@mai21
5 days ago

#8 @mai21
5 days ago

  • Keywords needs-design-feedback added
Note: See TracTickets for help on using tickets.