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.