Make WordPress Core

Opened 5 months ago

Last modified 6 days ago

#63557 new defect (bug)

List Block Indentation Issue in Twenty Fifteen & Twenty Sixteen Themes (Editor Side)

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: dev-feedback 2nd-opinion needs-testing needs-patch
Focuses: ui, css, tests Cc:

Description

Hello Team,

I have noticed that the List block (both ordered and unordered) is not properly indented in the block editor when using the Twenty Fifteen and Twenty Sixteen themes. The indentation appears misaligned or too shallow compared to expected formatting, which may affect readability and visual consistency.

I believe the indentation should be consistent across both the editor and front-end for a better editing experience.

Please review this behavior and consider adjusting the editor styles.

Thank you!

Attachments (18)

Edit-Page-“Test-Page”-‹-wp-contribution-—-WordPress-06-11-2025_05_47_PM.png (255.5 KB) - added by viralsampat 5 months ago.
Twenty Fifteen Editor
Test-Page-–-wp-contribution--06-11-2025_05_48_PM.png (111.6 KB) - added by viralsampat 5 months ago.
Twenty Fifteen Front-end
twenty-fifteen-list-block-editor-ordered.png (177.8 KB) - added by viralsampat 5 months ago.
Twenty Fifteen Editor Ordered
twenty-fifteen-list-block-front-end-ordered.png (196.6 KB) - added by viralsampat 5 months ago.
Twenty Fifteen Front-end Ordered
twenty-sixteen-list-block-editor.png (174.0 KB) - added by viralsampat 5 months ago.
Twenty sixteen Editor
twenty-sixteen-list-block-front-end.png (145.2 KB) - added by viralsampat 5 months ago.
Twenty Sixteen Front-end
twenty-sixteen-list-block-editor-order.png (140.2 KB) - added by viralsampat 5 months ago.
Twenty sixteen Editor Ordered
twenty-sixteen-list-block-front-end-ordered.png (169.2 KB) - added by viralsampat 5 months ago.
Twenty sixteen Front-end Ordered
63557-twenty-fifteen.patch (981 bytes) - added by viralsampat 5 months 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-twenty-fifteen-list-block-editor.png (175.6 KB) - added by viralsampat 5 months ago.
After resolved twenty fifteen editor:
after-resolved-twenty-fifteen-list-block-front-end.png (178.2 KB) - added by viralsampat 5 months ago.
After resolved twenty fifteen front-end:
after-resolved-twenty-fifteen-list-block-editor-ordered.png (178.0 KB) - added by viralsampat 5 months ago.
After resolved twenty fifteen editor ordered:
after-resolved-twenty-fifteen-list-block-front-end-ordered.png (167.9 KB) - added by viralsampat 5 months ago.
After resolved twenty fifteen front-end ordered:
63557-twenty-sixteen.patch (959 bytes) - added by viralsampat 5 months ago.
I have checked above mentioned issue and I have resolved it for twenty sixteen theme and added patch. Also, I have attached screenshot after resolved this issue.
after-resolved-twenty-sixteen-list-block-editor.png (172.2 KB) - added by viralsampat 5 months ago.
After resolved twenty sixteen editor:
after-resolved-twenty-sixteen-list-block-front-end.png (145.3 KB) - added by viralsampat 5 months ago.
After resolved twenty sixteen front-end:
after-resolved-twenty-sixteen-list-block-editor-ordered.png (174.5 KB) - added by viralsampat 5 months ago.
After resolved twenty sixteen editor ordered:
after-resolved-twenty-sixteen-list-block-front-end-ordered.png (146.8 KB) - added by viralsampat 5 months ago.
After resolved twenty sixteen front-end ordered:

Change History (21)

@viralsampat
5 months ago

Twenty Fifteen Editor Ordered

@viralsampat
5 months ago

Twenty Fifteen Front-end Ordered

@viralsampat
5 months ago

Twenty sixteen Editor

@viralsampat
5 months ago

Twenty Sixteen Front-end

@viralsampat
5 months ago

Twenty sixteen Editor Ordered

@viralsampat
5 months ago

Twenty sixteen Front-end Ordered

@viralsampat
5 months 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
5 months ago

After resolved twenty fifteen editor:

@viralsampat
5 months ago

After resolved twenty fifteen front-end:

@viralsampat
5 months ago

After resolved twenty fifteen editor ordered:

@viralsampat
5 months ago

After resolved twenty fifteen front-end ordered:

@viralsampat
5 months ago

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

@viralsampat
5 months ago

After resolved twenty sixteen editor:

@viralsampat
5 months ago

After resolved twenty sixteen front-end:

@viralsampat
5 months ago

After resolved twenty sixteen editor ordered:

@viralsampat
5 months ago

After resolved twenty sixteen front-end ordered:

#1 @karthikeya01
5 months ago

Hi @viralsampat

Thank you for raising the ticket. I see a similar issue in Gutenberg https://github.com/WordPress/gutenberg/issues/69503

#2 @noruzzaman
7 days ago

  • Focuses accessibility tests added
  • Keywords needs-patch added; has-patch removed

Bug Report

Description

I can reproduce the list block indentation problem in the Twenty Fifteen theme (editor side).

Environment

  • WordPress: 7.0-alpha-61215-src
  • PHP: 8.2.29
  • Server: nginx/1.29.3
  • Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
  • Browser: Chrome 142.0.0.0
  • OS: macOS
  • Theme: Twenty Fifteen 4.0
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.1

Steps to reproduce

  • Activate Twenty Fifteen.
  • Create a new post and insert a List block.
  • Add a few nested items (1–2 levels).
  • Compare indentation in the editor (and optionally the front-end).

Actual Results

  • In the editor, list items (ordered and unordered) are insufficiently indented; nested levels appear nearly flush with the left edge, reducing readability and not matching typical list spacing.
  • Front-end spacing is different from the editor, leading to inconsistency.

Expected result

  • List items should have consistent and readable indentation in the editor, aligned with the theme’s front-end styles.

Screenshots

Editor Frontend
https://i.ibb.co.com/sJNP0Vqq/list-editor2015.png https://i.ibb.co.com/Qj8HWVxF/list-frontend2015.png

#3 @joedolson
6 days ago

  • Focuses accessibility removed
Note: See TracTickets for help on using tickets.