Make WordPress Core

Opened 2 years ago

Closed 21 months ago

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

Download all attachments as: .zip

Change History (13)

#1 @desrosj
2 years 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
2 years 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
2 years ago

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

#3 @smit08
2 years ago

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

#4 @sabernhardt
2 years 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
2 years 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
2 years ago

added patch

@audrasjb
21 months ago

After patch: yeepee !

#5 @audrasjb
21 months ago

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

Good to go!

#6 @audrasjb
21 months ago

  • Keywords has-screenshots added

#7 @audrasjb
21 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.