Homepage Posts: fix column spacing and add control

[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:

This PR tackles a couple changes to how the column spacing works with the Homepage Posts block:

• It fixes an issue with the columns no longer filling the whole space (Homepage Posts: Gap to the right of the blocks #1213)
• It fixes an issue with the last item wrapping when pairing the grid and border settings in the editor (Homepage Posts: Grid + Borders causes wrapping in the editor #1233)
• The columns used to be spaced out a a bit haphazardly by using justify-content: space-between; this PR updates the default gap to be 32px to match the columns block; it also adds an option to reduce the gap if needed (Homepage Posts: Inconsistency with Columns block when using the grid style #638).

Closes #1233, #1213 and #638.

How to test the changes in this Pull Request:

1. Switch your site to the default Newspack theme -- this makes it easiest to see if the columns span the full space, because the accent header fills the whole space.
2. Create a post and add an assortment of Homepage Posts blocks to the editor -- you'll want to include all of the different column settings (2-6) with and without borders. You can also copy the following example blocks and paste them into the code view of the editor (it also includes some Homepage Posts in columns to compare the spacing):

Example Homepage Posts blocks

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"postLayout":"grid","columns":2,"postsToShow":2,"typeScale":3,"sectionHeader":"Two Column via Block Settings"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"postLayout":"grid","columns":2,"typeScale":3,"sectionHeader":"Two Column -  via Block Settings"} /-->

<!-- wp:newspack-blocks/homepage-articles {"className":"is-style-borders","showExcerpt":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"typeScale":3,"sectionHeader":"Two Column - via Block Settings"} /-->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:heading {"className":"accent-header"} -->
<h2 class="accent-header">Two Columns in Columns</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"postsToShow":1,"typeScale":3} /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAvatar":false,"showCategory":true,"postsToShow":1,"typeScale":3} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"is-style-borders"} -->
<div class="wp-block-columns is-style-borders"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"postsToShow":1,"typeScale":3} /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAvatar":false,"showCategory":true,"postsToShow":1,"typeScale":3} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","typeScale":3,"sectionHeader":"Three Column -  via Block Settings"} /-->

<!-- wp:newspack-blocks/homepage-articles {"className":"is-style-borders","showExcerpt":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","typeScale":3,"sectionHeader":"Three Column -  via Block Settings"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":4,"postsToShow":4,"typeScale":3,"sectionHeader":"Four Column"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"postLayout":"grid","columns":4,"postsToShow":6,"typeScale":3,"sectionHeader":"Four Column"} /-->

<!-- wp:newspack-blocks/homepage-articles {"className":"is-style-borders","showExcerpt":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":4,"postsToShow":4,"typeScale":3,"sectionHeader":"Four Column - Via Block Settings"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAvatar":false,"postLayout":"grid","columns":5,"postsToShow":5,"typeScale":2,"sectionHeader":"Five Column - Via Column Settings "} /-->

<!-- wp:newspack-blocks/homepage-articles {"className":"is-style-borders","showExcerpt":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":5,"postsToShow":5,"typeScale":2,"sectionHeader":"Five Column - Via Column Settings "} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":6,"postsToShow":6,"typeScale":2,"sectionHeader":"six Column"} /-->

<!-- wp:newspack-blocks/homepage-articles {"className":"is-style-borders","showExcerpt":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":6,"postsToShow":6,"typeScale":2,"sectionHeader":"six Column"} /-->

3. Note how the last post in each row of block with borders wraps to a new line in editor:

4. Publish the page and view on the front end -- note that the posts don't quite fill all of the horizontal space, and that the borders are not evenly spaced:

5. Compare the Homepage Posts grid display to Homepage Posts in the columns block; note that the spacing is not the same:

Columns:

Homepage Posts Block settings:

6. Apply the PR and run npm run build.
7. Refresh the page; confirm that the blocks now fill the available horizontal space, and the borders are evenly distributed:

8. Confirm that the gap between the posts in the Homepage Posts block matches the gap in the Columns block:

Columns:

Homepage Posts with grid setting:

9. Test at different screen sizes and confirm things look okay.
10. Edit the page and confirm the post-wrapping-when-grid-is-on issue is resolved:

11. Review the posts in the editor and confirm there are no display issues.
12. In the right sidebar, under the Columns number control, confirm that there's now an option to change the Column Gap, and it's defaulted to 'L' (32px). If you switch the block from Grid to Block layout, this option should go away:

13. Edit your block so you have at least one block with an without borders set to the large gap size, at least one block with an without borders set to the medium gap size, and at least one block with an without borders set to the small gap size.
14. Test the blocks in the editor and on the front end, at different break points; make sure things display as expected:

Large

Medium

Small

Note: The 'image behind' placement, grid layout and border style don't work together, with or without this PR. I've filed a separate issue for this (#1246).

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?

[dkoo]

Looking much better, and the new column gap feature works great. 👍

[laurelfulford]

Thanks @dkoo! 🙌

[matticbot]

🎉 This PR is included in version 1.57.0-alpha.2 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.57.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀