List type style (list bullet) is different when nested inside another list

[carolinan]

Description

WordPress does not set the list type style for the list block or on blocks that uses a list element. These blocks uses the browser default styles, and uses disc, followed by circle and then square for the nested lists.

This means that when the block is nested inside another list, the list type style starts from the circle, not the disc, and this makes the design inconsistent.

The list block is nested when it is previewed:

• In the query/ post template + post content block
• In the latest post block

This issue needs testing to learn which other blocks that are affected.

Step-by-step reproduction instructions

I tested this on a blank theme created with "Create block theme" to make sure there were no theme styles.

Create a new post. Add a list block. Example:

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>One: disc<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>nested: circle<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>two levels: square<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>three levels: square</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

Save. Add a latest posts block. Enable the post content option, and select "show full post". Set the number of items to 1. Confirm that the list types styles are not the same.

Screenshots, screen recording, code snippet

The first block is the list. The second is the latest post block. The bullet styles do not match.

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• [X] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [X] Yes

[Rishit30G]

Hey @carolinan Thanks for sharing the issue, I could recreate it by reading your instructions 🙌🏻
As per my testing I could only find the issue in 'Latest Post' Block, I could also find a possible fix for the same, sharing the link of the PR: https://github.com/WordPress/gutenberg/pull/63622

[github-actions[bot]]

Hi, This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps. Thanks for helping out.