Changed the columns per row from 2 two 3

[antonis]

Fixes wordpress-mobile/gutenberg-mobile#2384

Related PRs:

gutenberg WordPress/gutenberg#23314
gutenberg-mobile wordpress-mobile/gutenberg-mobile#2408

Description

This fix changes the number of blocks per line from two to three.
When more than two block rows are rendered we need to change the justify content of the parent block-list component to align the blocks at the beginning of the row.

How has this been tested?

Two columns

• Create a columns block with columns columns
• Make sure that you see two blocks in the row sharing the available space

Three columns

• Create a columns block with more three columns
• Make sure that you see three blocks in the row

Four columns

• Create a columns block with more four columns
• Make sure that you see three blocks in the first row and one in the second one aligned at the start

Generic Test Case

• Create a columns block with more than two columns
• Make sure that you see three blocks three blocks per full row and the remaining blocks are aligned at the start of the last row

Screenshots

PR submission checklist:

• I have considered adding unit tests where possible.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading it from AppCenter here with build number: 30461. IPA is available here. If you need access to this, you can ask a maintainer to add you.

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[iamthomasbishop]

Hey @antonis 👋 I took a look at the iOS test build and there is something wonky going on where the columns don't always line up properly if you start a new post/page in any breakpoint larger than the narrow single-column view (not sure what our exact breakpoint values are).

To reproduce this, create a new post or page in wider viewport (landscape iPhone or iPad) and note that you see 2 columns in a row, and the third column pushed to the next row.

Here is what I'm initially seeing when opening first on a wider viewport:

iPad	iPhone (landscape)

However, if you rotate iPhone to portrait or adjust the iPad split-view to narrow and then back, the columns will have adjusted to the expected size. In other words:

• ✅ Open in narrow shows 1 column (👍) => adjust to wider and see 3 columns per row (👍)
• ❌ Open in wider shows misaligned columns (👎) => adjust to narrow and see 1 column (👍) => adjust back to wide and see 3 columns per row (👍)

[antonis]

Hello @iamthomasbishop 👋. Thank you for the quick feedback on this 😊.
I will investigate the reported behavior and get back to you. The wrong rendering when starting in large breakpoint is probably already fixed by WordPress/gutenberg#23305

[iamthomasbishop]

The wrong rendering when starting in large breakpoint is probably already fixed by WordPress/gutenberg#23305

Ah okay, good to know!

[antonis]

Hello @iamthomasbishop 👋
Sorry for the late response on this. I was hoping to provide you a build but this was delayed due to the monorepo update.
Fortunately the bugs you reported seem to be fixed now by WordPress/gutenberg#23305

I'm attaching some screenshots depicting how the columns block renders in large breakpoint. Let me know if this is the expected way.

A. Large breakpoint with two columns

B. Large breakpoint with three columns

C. Large breakpoint with four columns

D. Large breakpoint with five columns

Regarding D and in general when we have two columns after the first row an alternative would be the one bellow.

E. Alternative layout for large break point with five columns

We can probably also split the space evenly between the columns but extra implementation is needed for this.

Wdyt?

[iamthomasbishop]

@antonis This is closely related to the other work we're doing (with @lukewalczak) on Columns, so perfect timing! I think all of the layouts you showed in your screenshots look correct up to D -- which looks correct for five columns.

[antonis]

Gutenberg PR merged WordPress/gutenberg#23314