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

[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.

[karmatosed]

Looks like this now has approved changes so I am going to go ahead and see about progressing this to a commit and see what happens from there in testing. Thank you everyone.

[karmatosed]

I am still seeing line-height issues and I feel like we should get that fixed in this issue but happy to be wrong. I also am not seeing such a difference currently in testing without the PR. I would like further testing to confirm states outside of just me.

[sabernhardt]

I suggested addressing the line-height on a separate ticket, and #63549 has ​PR 8940 for that (it's also linked to this ticket).

The line-height issue technically is bigger because it affects more blocks, though I would not mind combining both pull requests into one testing process and/or one commit.

[SirLouen]

Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/60196/60196.patch

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.29.0
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-One 2.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Testing Instructions

1. Following exact instructions provided by OP
2. 🐞 The line spacing is massive in the editor. But the fun thing is that it not line spacing between list elements but margins between data-blocks.

Expected Results

• No margins between data-blocks

Actual Results

1. ✅ Issue resolved with patch.

Additional Comments

• I think there has been a little confusion here and I also had a hard time identifying the differences, but as @sabernhardt this is affecting many other blocks and you might be doing so screenshots and comparing side by side because differences are extremely subtle. Although they have decided to move into #63549 because technically this is another. I will be posting the corresponding test report there.

• But focusing on this specific patch I'm testing here, judging by the screenshots I'm providing, I think the problem with lists is pretty clear, data-block top and bottom margins for each element of the list is very disastrous in the editor (while not affecting the front end)

Supplemental Artifacts

Lists without patch

Lists with patch

[karmatosed]

In 60366:

Twenty Twenty-One: Fixes List Item Block Margin.

The margin was different depending on the front or back of the editor. This patch is a companion to the next commit incoming from issue 63549. That issue resolves the line-height inconsistency, and this one does not.

Props nidhidhandhukiya, ugyensupport, sandeepdahiya, rishabhwp, mleraygp, SirLouen, sabernhardt.
Fixes #60196.

[karmatosed]

I had some issues with tests and this patch. The more I consider this the more I air on the fact I would prefer to have both issues merged together for at least ease. It's very complicated to commit as it closes out the other one mentioning which isn't optimal. If we can get that done I will happily merge the new commit.

Ultimately the tests were breaking for other reasons - maybe because it is a Monday. However, the complexity did not help in working things out. For that reason alone we should simplify.

[SirLouen]

Replying to karmatosed:

Ultimately the tests were breaking for other reasons - maybe because it is a Monday. However, the complexity did not help in working things out. For that reason alone we should simplify.

The problem is that this CSS has been added to the end of the file. And not added a new line after that, hence its failing the test.

[skithund]

@karmatosed the change should go into SASS/.scss files too.

Tests are failing because CSS built from SASS differs from committed CSS change.

[karmatosed]

For now, I stand by the revert but thank you for feedback. I was being light about the reason as needed to also diagnose myself and just get a revert in meantime. It's going to be better to merge into one for ease as we are going across two tickets and it most likely will break as a result in doing that also. Let's get this merged then we can happily commit a version that fixes throughout.

[rishabhwp]

Attaching a refreshed patch for #60196. The necessary changes were made to the .scss file, and the corresponding .css file was regenerated using the build process.

[sabernhardt]

@rishabhwp Could you combine PRs 8895 and 8940 (not the .patch files) into one pull request so it runs GitHub tests on both the margin and line-height changes together?

Then we can be more confident whether all six files are ready to commit:

• assets/sass/05-blocks/utilities/_editor.scss
• assets/sass/06-components/editor.scss
• assets/css/style-editor.css
• assets/css/ie-editor.css
• assets/css/style-editor.css.map
• assets/css/ie-editor.css.map

[rishabhwp]

@sabernhardt I’ve created a new combined PR with the changes from both PRs 8895 and 8940. The updates were made to the SCSS files, and then the build command was run to generate the respective CSS and map files. All six files listed above have been created as expected.

[sabernhardt]

Your PR 8895 replaced the existing [data-block] with [data-block]:where(:not(.wp-block-list-item)), which was better than setting all margins to zero.

For my sites, I tend to add bottom padding to li elements in the content area, but it would be good to honor similar custom styles for anyone who uses margin instead.

[rishabhwp]

Thanks for the feedback, @sabernhardt!

I've made the requested changes. I removed the rule that set margins to zero for list items and updated the selector to exclude .wp-block-list-item from receiving vertical margins. This should better respect any custom styles applied to list items.

Let me know if anything else needs adjustment.