Twenty Twenty-One: List Item blocks have extra margin in editor

[nidhidhandhukiya]

Steps to reproduce the issue.

1. Activate Twenty Twenty one theme.
2. Choose List block.
3. Add some data into list.
4. Apply some background color.

Now check both the side you can able to see there is a difference in editor and front end in spacing.
Editor side there is more spacing compare to front side.

I have attached video for better understanding.
Video URL :- ​https://share.cleanshot.com/ZmNJlFXhGPj4bpJNNP4C

[ugyensupport]

Twenty Twenty One :- List block having issue with spacing in editor side.

Description

Editor side there is more spacing compare to front side.

Environment

• WordPress: 6.4.2
• PHP: 8.0.0
• Server: Apache/2.4.10 (Debian)
• Database: mysqli (Server: 5.5.59-MariaDB-1~wheezy / Client: 5.5.62)
• Browser: Chrome 120.0.0.0 (macOS)
• Theme: Twenty Twenty-One 2.0
• MU-Plugins: None activated
• Plugins:
  • Gutenberg 17.4.1
  • WordPress Beta Tester 3.5.5

Steps to Reproduce

1. Activate Twenty Twenty-one theme.
2. Choose List block.
3. Add some data to list.
4. Apply some background color.
5. 🐞 Now check both side you can see there is a difference in the editor and front end in spacing. Editor side there is more spacing compared to the front side.

Expected Results

1. ✅ Fix front-end listing

Actual Results

1. [Before Patch]​https://s3.filebin.net/filebin/ceb092d29d93c8c812645eed0d37946495501502b2c2b6f8dd6a82ade9d4bd9a/5e7f814cc890bcd7fae39a928c4c7fbf2b8b5424e0ec0991773d71b9e5e14964?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=7pMj6hGeoKewqmMQILjm%2F20240105%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240105T104214Z&X-Amz-Expires=30&X-Amz-SignedHeaders=host&response-cache-control=max-age%3D30&response-content-disposition=filename%3D%22Before_Front-end.png%22&response-content-type=image%2Fpng&X-Amz-Signature=59beedbb7afda2fd6ea5bd09602b89b2bdd6eeb5779fa9f871b9fda2ab85b99b

2[Patch]​https://s3.filebin.net/filebin/ceb092d29d93c8c812645eed0d37946495501502b2c2b6f8dd6a82ade9d4bd9a/d91b381be63f6b6adf895010383090b724f05ce1eef03b333c2ebee27aa6c62c?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=7pMj6hGeoKewqmMQILjm%2F20240105%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240105T104450Z&X-Amz-Expires=30&X-Amz-SignedHeaders=host&response-cache-control=max-age%3D30&response-content-disposition=filename%3D%22Patch.png%22&response-content-type=image%2Fpng&X-Amz-Signature=5138b6bc7340417eca5ccae2d36643b1158d9137db6951ec3d14596c07bba14a

3. [ After Patch]​https://s3.filebin.net/filebin/ceb092d29d93c8c812645eed0d37946495501502b2c2b6f8dd6a82ade9d4bd9a/0d05dcacafb1e3f412ae18324211467ab769d4ebaaecaac4350de347bba4d29f?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=7pMj6hGeoKewqmMQILjm%2F20240105%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240105T104338Z&X-Amz-Expires=30&X-Amz-SignedHeaders=host&response-cache-control=max-age%3D30&response-content-disposition=filename%3D%22After.png%22&response-content-type=image%2Fpng&X-Amz-Signature=81e2fbeeea08b2f29b08b6230eac9686e213dd9d6f7bfde76cdb26779530fba0

Working smoothly and fixed successfully ✅

[sabernhardt]

The inner blocks (List Item) added in 6.1 get the default top and bottom margin.

Twenty Twenty-One uses SASS, so the edits belong in assets/sass/05-blocks/list/_editor.scss, which then would be compiled to the CSS files.

The Navigation styles use revert and Social Icons styles set only the top and bottom margins to zero in the editor.

[karmatosed]

@nidhidhandhukiya this could do with a refresh are you able to review that? @sabernhardt has left some awesome feedback it would be great to get into the patch.

[sandeepdahiya]

#63526 was marked as a duplicate.

Trac ticket: https://core.trac.wordpress.org/ticket/60196

This PR addresses a visual inconsistency in the Twenty Twenty-One theme where list items in the block editor (List block) display additional vertical spacing not present on the frontend.

## Before

​https://github.com/user-attachments/assets/a9f2e447-9e32-478d-9b2c-cc4941f33058

## After

​https://github.com/user-attachments/assets/a5c17aa0-801e-414d-b379-5f881b1ce0c9

[sabernhardt]

@rishabhwp The patch should include changes to the .scss files and then compile those to the CSS files.

If you use the revert method, as [55101] did for the Navigation block, the List block ruleset would belong in assets\sass\05-blocks\list\_editor.scss.

Another option is to edit the selector in assets\sass\05-blocks\utilities\_editor.scss from [data-block] to [data-block]:where(:not(.wp-block-list-item)). Then it would honor a custom style like li {margin-bottom: 0.25em;} in Additional CSS, and the specificity level would remain the same.

[rishabhwp]

Replying to sabernhardt:

@rishabhwp The patch should include changes to the .scss files and then compile those to the CSS files.

If you use the revert method, as [55101] did for the Navigation block, the List block ruleset would belong in assets\sass\05-blocks\list\_editor.scss.

Another option is to edit the selector in assets\sass\05-blocks\utilities\_editor.scss from [data-block] to [data-block]:where(:not(.wp-block-list-item)). Then it would honor a custom style like li {margin-bottom: 0.25em;} in Additional CSS, and the specificity level would remain the same.

Thanks for the guidance! I've updated my PR accordingly and committed the changes. Please let me know if anything else needs adjustment.

[mleraygp]

From testing on Playground, it seems that the margins are still different. Now there is a bit more spacing in the frontend than in the editor.

[sabernhardt]

From testing on Playground, it seems that the margins are still different. Now there is a bit more spacing in the frontend than in the editor.

The spacing is still different because the ​editor styles sets the line-height on html and the ​reset styles assign a line-height of normal on the iframe <body>—or a container <div> in the widget editor—using html :where(.editor-styles-wrapper).

I think the theme could set the line-height on both html and body in its editor stylesheets, but that discussion probably belongs on a separate ticket.

Hey @sabernhardt,
I'm new to core contributions. I have implemented the changes you suggested on Trac. Could you please review the PR or tag someone who can take a look? Thanks a lot!

Trac ticket:

This PR addresses a line-height inconsistency between the editor and the frontend. It follows up on [Trac ticket #60196](https://core.trac.wordpress.org/ticket/60196), which resolved margin issues but left a spacing difference due to how line-height is applied in the editor iframe.