List block list-style-type issue

[viralsampat-multidots]

Description

Hello Team,

I have worked on the Gutenberg List block and found that the list block list-style-type is not working as expected in different themes.

When we are trying to change its NUMBERING STYLE, it's not working as expected. Also, the selected NUMBERING STYLE is not selected when we refresh the page; it always displays the first option. So, I think that it should be fixed.

Here, I have provided its video:
Issue Video

Please review it and let me know your feedback for the same.

Thanks,

Step-by-step reproduction instructions

• Type / to choose a List block
• Add list items
• Also, we can add sub-items for list items.
• Select Ordered from components-toolbar-group box
• Then change the NUMBERING STYLE dropdown option based on the requirement from the block setting right side.
• Save the changes and publish the page.
• Then open page Preview in the new tab

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress version: 6.2.2, Gutenberg 16.2.1, Theme active: Twenty Twenty, Twenty Twenty-Two, Twenty Twenty-Three,
• Browser: Google chrome, Version 114.0.5735.198 (Official Build) (arm64)
• Device: MacBook Air M1
• OS: macOS Ventura 13.4.1

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

Yes

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

Yes

[t-hamano]

Thanks for the review.

The problem appears to be affected by the following two CSS files that are loaded into the iframe editor instance in certain themes.

• common.css
• reset.css

As shown below, these styles override the attributes of the ol element.

Curiously, these two stylesheets are not loaded in the block themes (Twenty Twenty Three, Twenty Twenty Two). Below are the stylesheets that are loaded in the head tag of the iframe editor instance in the four default themes.

Twenty Twenty Three

<link rel="stylesheet" id="dashicons-css" href="http://localhost:8888/wp-includes/css/dashicons.css?ver=6.3-RC1" media="all">
<link rel="stylesheet" id="wp-components-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/components/style.css?ver=1689945413" media="all">
<link rel="stylesheet" id="wp-block-library-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1689945413" media="all">
<link rel="stylesheet" id="wp-reusable-blocks-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/reusable-blocks/style.css?ver=1689945413" media="all">
<link rel="stylesheet" id="wp-block-editor-content-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/content.css?ver=1689945413" media="all">
<link rel="stylesheet" id="wp-edit-blocks-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/editor.css?ver=1689945413" media="all">

Twenty Twenty Two

<link rel="stylesheet" id="dashicons-css" href="http://localhost:8888/wp-includes/css/dashicons.css?ver=6.3-RC1" media="all">
<link rel="stylesheet" id="wp-components-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/components/style.css?ver=1689945444" media="all">
<link rel="stylesheet" id="wp-block-library-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1689945444" media="all">
<link rel="stylesheet" id="wp-reusable-blocks-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/reusable-blocks/style.css?ver=1689945444" media="all">
<link rel="stylesheet" id="wp-block-editor-content-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/content.css?ver=1689945444" media="all">
<link rel="stylesheet" id="wp-edit-blocks-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/editor.css?ver=1689945444" media="all">
<link rel="stylesheet" id="wp-block-library-theme-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/theme.css?ver=1689945444" media="all">

Twenty Twenty One

<link rel="stylesheet" id="dashicons-css" href="http://localhost:8888/wp-includes/css/dashicons.css?ver=6.3-RC1" media="all">
<link rel="stylesheet" id="wp-components-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/components/style.css?ver=1689945478" media="all">
<link rel="stylesheet" id="common-css" href="http://localhost:8888/wp-admin/css/common.css?ver=6.3-RC1" media="all">
<link rel="stylesheet" id="forms-css" href="http://localhost:8888/wp-admin/css/forms.css?ver=6.3-RC1" media="all">
<link rel="stylesheet" id="wp-reset-editor-styles-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/reset.css?ver=1689945478" media="all">
<link rel="stylesheet" id="wp-block-library-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1689945478" media="all">
<link rel="stylesheet" id="wp-reusable-blocks-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/reusable-blocks/style.css?ver=1689945478" media="all">
<link rel="stylesheet" id="wp-block-editor-content-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/content.css?ver=1689945478" media="all">
<link rel="stylesheet" id="wp-editor-classic-layout-styles-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/edit-post/classic.css?ver=1689945478" media="all">
<link rel="stylesheet" id="wp-edit-blocks-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/editor.css?ver=1689945478" media="all">
<link rel="stylesheet" id="wp-block-library-theme-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/theme.css?ver=1689945478" media="all">

Twenty Twenty

<link rel="stylesheet" id="dashicons-css" href="http://localhost:8888/wp-includes/css/dashicons.css?ver=6.3-RC1" media="all">
<link rel="stylesheet" id="wp-components-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/components/style.css?ver=1689945511" media="all">
<link rel="stylesheet" id="common-css" href="http://localhost:8888/wp-admin/css/common.css?ver=6.3-RC1" media="all">
<link rel="stylesheet" id="forms-css" href="http://localhost:8888/wp-admin/css/forms.css?ver=6.3-RC1" media="all">
<link rel="stylesheet" id="wp-reset-editor-styles-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/reset.css?ver=1689945511" media="all">
<link rel="stylesheet" id="wp-block-library-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1689945511" media="all">
<link rel="stylesheet" id="wp-reusable-blocks-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/reusable-blocks/style.css?ver=1689945511" media="all">
<link rel="stylesheet" id="wp-block-editor-content-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/content.css?ver=1689945511" media="all">
<link rel="stylesheet" id="wp-editor-classic-layout-styles-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/edit-post/classic.css?ver=1689945511" media="all">
<link rel="stylesheet" id="wp-edit-blocks-css" href="http://localhost:8888/wp-content/plugins/gutenberg/build/block-library/editor.css?ver=1689945511" media="all">
<link rel="stylesheet" id="twentytwenty-block-editor-styles-css" href="http://localhost:8888/wp-content/themes/twentytwenty/assets/css/editor-style-block.css?ver=2.2" media="all"></head>

[annezazu]

cc @ellatrix for both iframe and list block related items.

[t-hamano]

I have found that this problem also occurs when the editor is NOT an iframe. In other words, when custom fields are turned on, the editor is no longer an iframe, and this problem occurs.

1299c8c285613f78774217d927fbabda.mp4