Block editor: Extra margins around List block items with Gutenberg 14.0.0 on some themes

[thekingsprojects]

Description

In Gutenberg 14.0.0, when using a Classic/Customizer theme such as Twenty Twenty, items in a List block seem to have a lot of extra space around them when viewed in the editor. This space is not present when viewing the list on the live site.

At a glance, it looks like there are some margins being added above and below each item. For example:

.editor-styles-wrapper [data-block] {
  margin-top: 32px;
  margin-bottom: 32px;
}

That might well be intentional given the recent update to inner blocks, but thought I'd mention it since 32px seems to match the amount of extra space that's appearing.

(Not sure if this is related to the issue involving the width of content in the editor on Classic themes: #43752 I was asked to open this report separately just in case!)

Step-by-step reproduction instructions

1. Install the latest version of Gutenberg (v14.0.0).
2. Install and activate a Classic theme (Twenty Twenty, for example)
3. Go to Posts → Add New.
4. Add a List block to the page and start adding items to the list.
5. Each new list item has a lot of additional space above and below it.
6. Preview the page, or save and view it, and see that there is no additional space surrounding each item.

Screenshots, screen recording, code snippet

Screenshots taken with the WordPress.com Classic/Customizer theme Hever:

How the list looks in the editor :

How the list looks on the live test site:

Environment info

• WordPress 6.0.2
• Gutenberg 14.0.0
• MacOS 12.5.1
• Firefox 103.0.2

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

[ricjcs]

I also have the same problem using the Aquene theme. The spacing between list items is the same as the spacing between paragraphs.

This is happening with several classic themes. Two more examples: Dynamico theme and Donovan theme.

[syhussaini]

I just played into this ticket and wanted to check-in here for updates.
5522063-zen

[anuguywp]

Just played into this ticket 5514682-zen and wanted to check-in here for updates.

[t-hamano]

Thank you for your contribution.

I believe this issue should be resolved on the theme side.

The margins between blocks are probably implemented with a low level of detail, which is often the case. So, for example, the following CSS can be used to cancel the margins:

editor-styles-wrapper [data-type="core/list-item"] {
    margin: 0;
}

Some default themes are affected by this, and I think these should be addressed separately as needed.

[ellatrix]

See also #42526

[jordesign]

I'm included to close this in favour of #42526 (mentioned above) which would also resolve this.