Make WordPress Core

Opened 10 months ago

Last modified 5 months 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
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 10 months ago.
Twenty Fifteen Editor
Test-Page-–-wp-contribution--06-11-2025_05_48_PM.png (111.6 KB) - added by viralsampat 10 months ago.
Twenty Fifteen Front-end
twenty-fifteen-list-block-editor-ordered.png (177.8 KB) - added by viralsampat 10 months ago.
Twenty Fifteen Editor Ordered
twenty-fifteen-list-block-front-end-ordered.png (196.6 KB) - added by viralsampat 10 months ago.
Twenty Fifteen Front-end Ordered
twenty-sixteen-list-block-editor.png (174.0 KB) - added by viralsampat 10 months ago.
Twenty sixteen Editor
twenty-sixteen-list-block-front-end.png (145.2 KB) - added by viralsampat 10 months ago.
Twenty Sixteen Front-end
twenty-sixteen-list-block-editor-order.png (140.2 KB) - added by viralsampat 10 months ago.
Twenty sixteen Editor Ordered
twenty-sixteen-list-block-front-end-ordered.png (169.2 KB) - added by viralsampat 10 months ago.
Twenty sixteen Front-end Ordered
63557-twenty-fifteen.patch (981 bytes) - added by viralsampat 10 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 10 months ago.
After resolved twenty fifteen editor:
after-resolved-twenty-fifteen-list-block-front-end.png (178.2 KB) - added by viralsampat 10 months ago.
After resolved twenty fifteen front-end:
after-resolved-twenty-fifteen-list-block-editor-ordered.png (178.0 KB) - added by viralsampat 10 months ago.
After resolved twenty fifteen editor ordered:
after-resolved-twenty-fifteen-list-block-front-end-ordered.png (167.9 KB) - added by viralsampat 10 months ago.
After resolved twenty fifteen front-end ordered:
63557-twenty-sixteen.patch (959 bytes) - added by viralsampat 10 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 10 months ago.
After resolved twenty sixteen editor:
after-resolved-twenty-sixteen-list-block-front-end.png (145.3 KB) - added by viralsampat 10 months ago.
After resolved twenty sixteen front-end:
after-resolved-twenty-sixteen-list-block-editor-ordered.png (174.5 KB) - added by viralsampat 10 months ago.
After resolved twenty sixteen editor ordered:
after-resolved-twenty-sixteen-list-block-front-end-ordered.png (146.8 KB) - added by viralsampat 10 months ago.
After resolved twenty sixteen front-end ordered:

Change History (22)

@viralsampat
10 months ago

Twenty Fifteen Editor Ordered

@viralsampat
10 months ago

Twenty Fifteen Front-end Ordered

@viralsampat
10 months ago

Twenty sixteen Editor

@viralsampat
10 months ago

Twenty Sixteen Front-end

@viralsampat
10 months ago

Twenty sixteen Editor Ordered

@viralsampat
10 months ago

Twenty sixteen Front-end Ordered

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

After resolved twenty fifteen editor:

@viralsampat
10 months ago

After resolved twenty fifteen front-end:

@viralsampat
10 months ago

After resolved twenty fifteen editor ordered:

@viralsampat
10 months ago

After resolved twenty fifteen front-end ordered:

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

After resolved twenty sixteen editor:

@viralsampat
10 months ago

After resolved twenty sixteen front-end:

@viralsampat
10 months ago

After resolved twenty sixteen editor ordered:

@viralsampat
10 months ago

After resolved twenty sixteen front-end ordered:

#1 @karthikeya01
10 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
5 months 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
5 months ago

  • Focuses accessibility removed

#4 @SirLouen
5 months ago

  • Keywords 2nd-opinion needs-testing needs-patch removed
Note: See TracTickets for help on using tickets.