WordPress.org

Make WordPress Core

Opened 8 months ago

Closed 7 months ago

#52412 closed defect (bug) (fixed)

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

Reported by: poena Owned by: 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 8 months ago.
List style type changed for nested ul. Now frontend and editor style are same.
52412.2.diff (398 bytes) - added by tejwanihemant 7 months ago.
Applied correct css for nested ul
52412.3.diff (2.2 KB) - added by mahfuz01 7 months ago.
Uploading a new patch covered both ol and ul on .scss file.

Download all attachments as: .zip

Change History (8)

#1 @mukesh27
8 months 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
8 months ago

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

@tejwanihemant
7 months ago

Applied correct css for nested ul

#2 @tejwanihemant
7 months ago

  • Keywords has-patch added

#3 @poena
7 months 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
7 months ago

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

#4 @poena
7 months ago

  • Keywords commit added; needs-refresh removed

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

#5 @peterwilsoncc
7 months 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.