Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#52412 closed defect (bug) (fixed)

Twenty Twenty-One: list bullets have different styles in the editor and front

Reported by: poena's profile poena Owned by: peterwilsoncc's profile peterwilsoncc
Milestone: 5.7 Priority: lowest
Severity: trivial Version: 5.6
Component: Bundled Theme Keywords: good-first-bug has-patch commit
Focuses: css Cc:

Description

In the block editor, lists have the disc bullet, while nested list items have circles:

.editor-styles-wrapper ul {
    list-style-type: disc;
}

.editor-styles-wrapper ol ul, .editor-styles-wrapper ul ul {
    list-style-type: circle;
}

On the front, the theme uses the disc for both, it has no bullet style for the nested lists, so
the editor and front does not match.

Attachments (3)

52412.diff (1.7 KB) - added by mahfuz01 4 years ago.
List style type changed for nested ul. Now frontend and editor style are same.
52412.2.diff (398 bytes) - added by tejwanihemant 4 years ago.
Applied correct css for nested ul
52412.3.diff (2.2 KB) - added by mahfuz01 4 years ago.
Uploading a new patch covered both ol and ul on .scss file.

Download all attachments as: .zip

Change History (8)

#1 @mukesh27
4 years ago

If you're doing a first-time contribution then check these links in order to create a valid patch in Trac.
https://make.wordpress.org/core/handbook/tutorials/working-with-patches/ https://make.wordpress.org/core/handbook/best-practices/writing-patches/

If you're familiar with code and git, you can use the wordpress-develop Github repository to easily contribute to WordPress: https://make.wordpress.org/core/handbook/contribute/git/

@mahfuz01
4 years ago

List style type changed for nested ul. Now frontend and editor style are same.

@tejwanihemant
4 years ago

Applied correct css for nested ul

#2 @tejwanihemant
4 years ago

  • Keywords has-patch added

#3 @poena
4 years ago

  • Keywords needs-refresh added

Hi and thank you for the patches @mahfuz01 and @tejwanihemant.

Twenty Twenty-One uses sass, changes need to be made in the .scss file, like in patch 52412.diff.

Please consider refreshing the patch to update the .scss file and cover both ol and ul.

@mahfuz01
4 years ago

Uploading a new patch covered both ol and ul on .scss file.

#4 @poena
4 years ago

  • Keywords commit added; needs-refresh removed

Patch 52412.3.diff works well for me, the editor and front matches.

#5 @peterwilsoncc
4 years ago

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

In 50350:

Twenty Twenty-One: Match bullets between editor and frontend.

Change bullet style on frontend nested unordered lists to circle to match the editor styles.

Props poena, mukesh27, mahfuz01, tejwanihemant.
Fixes #52412.

Note: See TracTickets for help on using tickets.