Make WordPress Core

Opened 23 months ago

Closed 8 weeks ago

Last modified 8 weeks ago

#56083 closed defect (bug) (fixed)

Twenty Twenty: The design of the ordered lists on the backend side is deteriorating

Reported by: aezazshekh's profile aezazshekh Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch commit
Focuses: css Cc:

Description

When you set the ordered list style in the list style block and the list style number is more than 2 digits, the design of the text of the list on the backend side is deteriorating.

To understand more, I have added a video link of the issue below.
https://share.cleanshot.com/SNNV2FjnfkxQp5e92rf7

Attachments (11)

CleanShot 2022-06-28 at 12.43.30@2x.png (799.6 KB) - added by aezazshekh 23 months ago.
Screenshot of Issue
56083.diff (1.8 KB) - added by aezazshekh 23 months ago.
added patch
CleanShot 2022-06-28 at 12.46.50@2x.png (883.7 KB) - added by aezazshekh 23 months ago.
After adding the patch now the ordered lists design looks like this
56083.2.diff (1.2 KB) - added by krupalpanchal 23 months ago.
Created Patch
56083.3.patch (1.4 KB) - added by multidots1896 23 months ago.
Applied patch for the issue
#56083.patch (617 bytes) - added by kajalgohel 21 months ago.
patch added
56083.5.diff (2.1 KB) - added by sabernhardt 8 weeks ago.
edits padding rule so it does not apply to lists with a background, adds top margin to all list items in List blocks, and adds side margin rule for List Item blocks
SCR-20240328-mfct.png (22.3 KB) - added by karmatosed 8 weeks ago.
Before patch applied
SCR-20240328-ltjb.png (30.3 KB) - added by karmatosed 8 weeks ago.
SCR-20240328-onll.png (71.9 KB) - added by karmatosed 8 weeks ago.
SCR-20240328-onzc.png (77.4 KB) - added by karmatosed 8 weeks ago.

Download all attachments as: .zip

Change History (21)

@aezazshekh
23 months ago

Screenshot of Issue

@aezazshekh
23 months ago

added patch

#1 @aezazshekh
23 months ago

  • Keywords has-patch added; needs-patch removed

@aezazshekh
23 months ago

After adding the patch now the ordered lists design looks like this

@krupalpanchal
23 months ago

Created Patch

@multidots1896
23 months ago

Applied patch for the issue

This ticket was mentioned in PR #2932 on WordPress/wordpress-develop by thejaydip.


23 months ago
#2

Reference #56083

krupal-panchal commented on PR #2932:


23 months ago
#3

Can someone check this PR and give a comment?

@kajalgohel
21 months ago

patch added

#4 @sabernhardt
8 weeks ago

#56377 was marked as a duplicate.

#5 @sabernhardt
8 weeks ago

#60807 was marked as a duplicate.

@sabernhardt
8 weeks ago

edits padding rule so it does not apply to lists with a background, adds top margin to all list items in List blocks, and adds side margin rule for List Item blocks

#6 @sabernhardt
8 weeks ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.6
  1. The 1.3em padding does not fit a List block that has a background, so I used the :not() selector to remove it in that case (added within :where() to keep the same specificity).
  2. List items need the top margin to match the front, and I targeted the List block so it would not apply to list-based blocks such as Archives or Latest Comments.
  3. The side margin overrides the margin in edit-post/classic.css, which has a less specific selector in the plugin this week than the rule below. I targeted only List Item blocks that are immediately inside the List block with a background (not nested lists).
    .editor-styles-wrapper .wp-block {
      margin-left: auto;
      margin-right: auto;
    }
    
Last edited 8 weeks ago by sabernhardt (previous) (diff)

@karmatosed
8 weeks ago

Before patch applied

#7 @karmatosed
8 weeks ago

  • Keywords commit added; needs-testing removed

I just tested the latest patch and can confirm that it does fit a background and also it fixes the issue. Based on this, I think adding makes sense.

The concern I have in adding this just to be clear is that others might have workarounds in their child themes but I think we can safely say this is a positive bug fix and something needed so add it. I am going to on that basis add the commit keyword after proving above the patch works in testing. Thank you everyone.

Version 1, edited 8 weeks ago by karmatosed (previous) (next) (diff)

#8 @sabernhardt
8 weeks ago

I created a set of blocks to compare the lists to the Paragraph block alignment and to show nested lists.

#9 @karmatosed
8 weeks ago

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

In 57895:

Twenty Twenty: Fixes The design of the ordered and unordered lists within editor.

There wasn't enough padding and the spacing was deteriorating the more depth there was. This reflects the front now and respects background coloring. Impacts both types of lists although original reporting was just on one.

Props aezazshekh, krupalpanchal, multidots1896, kajalgohel, sabernhardt.
Fixes #56083.

#10 @karmatosed
8 weeks ago

Thank you @sabernhardt I agree this is a good fix and have added the commit for this. Thank you also for sharing that set of blocks it was really helpful to myself and others to see the full impact of nested lists.

Note: See TracTickets for help on using tickets.