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

[aezazshekh]

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

[aezazshekh]

Screenshot of Issue

[aezazshekh]

added patch

[aezazshekh]

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

[krupalpanchal]

Created Patch

[multidots1896]

Applied patch for the issue

Reference #56083

Can someone check this PR and give a comment?

[kajalgohel]

patch added

[sabernhardt]

#56377 was marked as a duplicate.

[sabernhardt]

#60807 was marked as a duplicate.

[sabernhardt]

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

[sabernhardt]

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;
   }
   

[karmatosed]

Before patch applied

[karmatosed]

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.

It's worth noting this also impacts ordered lists as per my screenshots attached for both list types.

Thank you everyone.

[sabernhardt]

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

[karmatosed]

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.

[karmatosed]

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.