Make WordPress Core

Opened 3 months ago

Last modified 3 months ago

#60196 new defect (bug)

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

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 6.1
Component: Bundled Theme Keywords: has-patch changes-requested
Focuses: css Cc:

Description

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

Attachments (1)

60196.patch (537 bytes) - added by nidhidhandhukiya 3 months ago.

Download all attachments as: .zip

Change History (3)

#1 @ugyensupport
3 months ago

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

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

Last edited 3 months ago by ugyensupport (previous) (diff)

#2 @sabernhardt
3 months ago

  • Focuses css added
  • Keywords has-patch changes-requested added
  • Summary changed from Twenty Twenty One :- List block having issue with spacing in editor side. to Twenty Twenty-One: List Item blocks have extra margin in editor
  • Version changed from 6.4.2 to 6.1

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.

Note: See TracTickets for help on using tickets.