Twenty Twenty-Four: Increase padding for List block (when it has a border or background)

[viralsampat]

Hello Team,

I have reviewed the "List" block in the Twenty Twenty-Four theme and noticed an issue: when switching the list style to "Ordered" and applying a border, the content overlaps.

It seems this could be resolved with some padding to improve spacing and layout consistency.

For better understanding, Here I have attached its video:

Thanks,

[viralsampat]

Issue video:

[sabernhardt]

​PR 348 intentionally reduced the padding for a List block from --wp--preset--spacing--70 to --wp--preset--spacing--10 (1rem) "so the list items align nicely with the heading." With the small value, the bullets of an unordered list align with surrounding content better than the numbers of an ordered list would, especially when the numbers have multiple digits and/or the list has its own border or background. Maybe the theme could increase padding slightly for any List block, using the --wp--preset--spacing--20 value.

However, users can insert a List block inside a Group block and then assign the exact padding, border, and/or background color they desire on the Group instead. The theme does not need to correct the List block padding, and people who already use the theme could prefer to keep the existing --wp--preset--spacing--10 value.

When applying border to list items in twenty twenty four theme, the border overlaps in the left side. Kindly refer the original Trac Ticket.

Trac ticket: https://core.trac.wordpress.org/ticket/63530

Before Patch:

After Patch:

[ravigadhiyawp]

Combine Reproduction & Test Report

Description

This report documents both the reproduction of the issue and the validation of the provided patch.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/8900.diff

Environment

• WordPress: 6.8.1
• PHP: 8.2.23
• Server: nginx/1.26.1
• Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.23)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Four 1.3
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).
2. ✅ Issue resolved with patch.

Additional Notes

Steps to reproduce the issue:

1. Install the Twenty Twenty-Four theme
2. Create a new post
3. Add a list and convert it to an ordered list
4. Add a border to the list
5. Observe that the border overlaps with the list number

Patch Observation:

• The patch resolves the border overlapping issue.

Supplemental Artifacts

Reproduction Screenshot: ​https://prnt.sc/LqLhieEv-Cks

After Patch Screenshot: ​https://prnt.sc/UyD6VTHg3Zzg