Make WordPress Core

Opened 2 years ago

Closed 3 months ago

Last modified 3 months 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 2 years ago.
Screenshot of Issue
56083.diff (1.8 KB) - added by aezazshekh 2 years ago.
added patch
CleanShot 2022-06-28 at 12.46.50@2x.png (883.7 KB) - added by aezazshekh 2 years ago.
After adding the patch now the ordered lists design looks like this
56083.2.diff (1.2 KB) - added by krupalpanchal 2 years ago.
Created Patch
56083.3.patch (1.4 KB) - added by multidots1896 2 years ago.
Applied patch for the issue
#56083.patch (617 bytes) - added by kajalgohel 22 months ago.
patch added
56083.5.diff (2.1 KB) - added by sabernhardt 3 months 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 3 months ago.
Before patch applied
SCR-20240328-ltjb.png (30.3 KB) - added by karmatosed 3 months ago.
SCR-20240328-onll.png (71.9 KB) - added by karmatosed 3 months ago.
SCR-20240328-onzc.png (77.4 KB) - added by karmatosed 3 months ago.

Download all attachments as: .zip

Change History (21)

@aezazshekh
2 years ago

Screenshot of Issue

@aezazshekh
2 years ago

added patch

#1 @aezazshekh
2 years ago

  • Keywords has-patch added; needs-patch removed

@aezazshekh
2 years ago

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

@krupalpanchal
2 years ago

Created Patch

@multidots1896
2 years ago

Applied patch for the issue

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


2 years ago
#2

Reference #56083

krupal-panchal commented on PR #2932:


2 years ago
#3

Can someone check this PR and give a comment?

@kajalgohel
22 months ago

patch added

#4 @sabernhardt
3 months ago

#56377 was marked as a duplicate.

#5 @sabernhardt
3 months ago

#60807 was marked as a duplicate.

@sabernhardt
3 months 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
3 months 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 3 months ago by sabernhardt (previous) (diff)

@karmatosed
3 months ago

Before patch applied

#7 @karmatosed
3 months 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 commit it after proving above the patch works in testing. Thank you everyone.

Version 0, edited 3 months ago by karmatosed (next)

#8 @sabernhardt
3 months ago

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

#9 @karmatosed
3 months 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
3 months 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.