Twenty Twenty: Latest Posts block set to 2 columns displays single column in editor

[smit08]

I am using the Twenty-twenty theme and added the latest posts block. Set the latest block in grid view and set the column settings as 2. but on the editor side, it is only displaying the posts list in a single column instead of two-column. On the front side, it is displayed in 2 columns. So it is working on the front side but not properly displaying on the editor side. The front and editor sides both should have the same view so users will not get confused.

Steps to reproduce:

1. Activate the Twenty-twenty theme.
2. Add the Latest Posts block.
3. Set the grid view.
4. Set the columns to 2.
5. Now you can see the issue. On the editor side, it is displayed in a single column instead of 2 columns.

Attaching a video link for better understanding.
Issue video link: ​https://www.loom.com/share/56f58ff9b8e54923a2eaf65ab8728915

[mukesh27]

Hi there!

I reproduce the same issue in post block. It's a margin property issue for ​https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css#L1008-L1014 If we adjust it to `13px' from right then it adjusts in two columns.

Set 6.1 milestone for visibility.

[smit08]

Reduce the margin right to 13px as mukesh patel sir told.

[sabernhardt]

The value would need to be less than 12 pixels (perhaps 10) to stay in two columns at widths just wider than the 600px breakpoint.

Another possibility is using :where() in the selector for margins so when the editor changes the right margin to zero for li elements in the last column, it still applies. Then it could use the 'em' values defined for the front end.

.editor-styles-wrapper ul.wp-block-latest-posts:where(.is-grid) li` {
  margin: 0 1.25em 1.25em 0;
}

Also note: the RTL stylesheet needs to be compiled and updated before committing.

[smit08]

As per the sabernhardt comment the margin right should be less than 12px (approx value 10). So I added the margin right 10px, and it is working fine. Also added the changes in rtl file.

[multidots1896]

added patch

[audrasjb]

front end

[audrasjb]

Before patch

[audrasjb]

After patch: yeepee !

[audrasjb]

Good to go!

[audrasjb]

In 54166:

Twenty Twenty: Ensure Latest Posts block set to 2 columns displays accordingly in the Editor.

This brings consistency between block editor and front-end rendering.

Props smit08, mukesh27, sabernhardt, multidots1896.
Fixes #56175.