Make WordPress Core

#56175 closed defect (bug) (fixed)

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

Reported by: smit08's profile smit08 Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-testing-info has-patch commit has-screenshots
Focuses: css Cc:

Description

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

Attachments (6)

56175.patch (495 bytes) - added by smit08 17 months ago.
Reduce the margin right to 13px as mukesh patel sir told.
56175.1.patch (1002 bytes) - added by smit08 17 months ago.
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.
56175.2.patch (1.6 KB) - added by multidots1896 17 months ago.
added patch
Capture d’écran 2022-09-14 à 23.10.27.png (154.3 KB) - added by audrasjb 15 months ago.
front end
Capture d’écran 2022-09-14 à 23.08.55.png (269.1 KB) - added by audrasjb 15 months ago.
Before patch
Capture d’écran 2022-09-14 à 23.10.07.png (269.9 KB) - added by audrasjb 15 months ago.
After patch: yeepee !

Download all attachments as: .zip

Change History (13)

#1 @desrosj
17 months ago

  • Summary changed from In Twenty-twenty theme using latest posts block, columns setting set to 2. In editor side it is displaying in single column only. to Twenty-twenty: column blocks set to 2 displays single column in editor

#2 @mukesh27
17 months ago

  • Milestone changed from Awaiting Review to 6.1

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
17 months ago

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

#3 @smit08
17 months ago

  • Keywords has-patch dev-feedback added; needs-patch removed

#4 @sabernhardt
17 months ago

  • Focuses css added
  • Keywords needs-refresh added; dev-feedback removed
  • Summary changed from Twenty-twenty: column blocks set to 2 displays single column in editor to Twenty Twenty: Latest Posts block set to 2 columns displays single column in editor

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
17 months ago

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
17 months ago

added patch

@audrasjb
15 months ago

After patch: yeepee !

#5 @audrasjb
15 months ago

  • Keywords commit added; needs-refresh removed
  • Owner set to audrasjb
  • Status changed from new to accepted

Good to go!

#6 @audrasjb
15 months ago

  • Keywords has-screenshots added

#7 @audrasjb
15 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.