Update Column Block styles for WordPress 5.9.

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

In the Newspack Blocks suite, we have some column block styles that:

1. Update the default column block styles, to not wrap until they hit the mobile breakpoint.
2. Allow you to add borders to the columns.
3. Allow you to reorder the columns on desktop.

Changes coming in WP 5.9 to add the option to not wrap columns on mobile have overridden some of our own styles. This PR hopefully sorts them out and gets them working again, without causing issues in 5.8.

Closes #1018 and #1019

How to test the changes in this Pull Request:

This will be easiest to test if you can work with two test sites and compare them: one running WordPress 5.8.X, and the other running the 5.9 RC.

1. In the test site running 5.9 RC, copy this test content to the editor, or add a bunch of column blocks with different settings. Change the page you test to use the one column wide template.
2. In the test site running 5.8.X, copy this test content to the editor, or add a bunch of column blocks with different settings. Change the page you test to use the one column wide template.
3. Apply this PR to both sites and run npm run build.
4. Apply this theme PR to both sites and run npm run build - it updates a couple styles in the theme: Update Column Block styles for WordPress 5.9. newspack-theme#1670
5. View and compare both posts at different breakpoints. Things to look for include:

• Making sure the columns block doesn't wrap on mobile when its set not to on the 5.9 site.
• That the columns styles and spacing look consistent between the different sections.
• That the border styles and spacing look consistent between the different sections.

Here are some examples of how things should look:

WordPress 5.9

Regular columns:

"Don't stack on mobile" setting (the first column doesn't have this checked, and the second one does)

Reordered blocks:

Columns blocks with borders:

WordPress 5.8

Regular columns:

Reordered columns:

Columns with borders:

6. Review things in the editor and make sure things look fairly consistent between the two versions.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[miguelpeixe]

I can still see some significant differences between 5.9 and 5.8, here's what I've identified:

EDIT: The screenshots below are from an instance with Gutenberg's current trunk and do not reflect the current release on 5.9 RC2.

5.9 RC2	5.8	Comment
		Grid is not behaving the same on equal viewport
		Difference in grid also causing a border out of place
		Flex gap disrupting border alignment
		Column containers have bigger margin between them, which doesn't occur on 5.8

[dkoo]

I'm not seeing the same thing as @miguelpeixe. I found it difficult to compare apples to apples with two different sets of content, so what I did was to paste both sets of content into a single post on both 5.8 and 5.9 sites.

• 5.9 test site
• 5.8 test site

With both sites using the same content, it's easier to see that the styles match well across both WP versions. The main differences I see are:

• The "Don't stack on mobile" columns do stack in WP 5.8 (as expected, since this is a new feature in 5.9)
• Slight differences in spacing in the editor, but not on the front-end

@miguelpeixe can you review these two test sites and let us know what you see?

[miguelpeixe]

I'm sorry about that! I was not on 5.9 RC2's Gutenberg. I now can confirm that the columns are behaving as expected!

[laurelfulford]

Thank you @miguelpeixe and @dkoo! 🙌

[matticbot]

🎉 This PR is included in version 1.45.0-alpha.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀