Enhancement: Added individual column and row gap controls.

[patil-vipul]

What?

Fixes #61298

Why?

Limitations in the current Post Template block, inability to independently adjust column gaps without affecting row gaps, thus proposing an enhancement for more precise customization.

How?

Implemented 'sides' property in block.json to enable independent adjustment of column gaps within 'blockGap' spacing support for Post Template block.

Testing Instructions

1. Next create a new post and add the Query Loop block.
2. Select Start Blank pattern, then choose Title & Date template.
3. Select the Post Template block from Document Overview to toggle the block controls.
4. Choose the Grid View from the block controls.
5. Goto styles tab in the block controls sidebar.
6. You'll see separate controls for Row and Column gap.

Testing Instructions for Keyboard

N/A

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @realthemes, @davewhitley.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: realthemes, davewhitley.

Co-authored-by: patil-vipul <[email protected]>
Co-authored-by: creativecoder <[email protected]>
Co-authored-by: andrewserong <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @patil-vipul! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[creativecoder]

Thanks for this PR!

Testing this with the Post Template block, I see that the Block Spacing controls now have both horizontal and vertical gap controls. However the behavior depends upon which view the block is set to use

• Grid view: horizontal and vertical block spacing can be set independently ✅
• List view: block spacing controls behave unexpectedly ❌

Screen.Recording.2024-05-31.at.13.05.58.mov

It seems that we need to dynamically change which block gap controls are available based on layout.

cc @andrewserong (who updated blockGap documentation not too long ago), in case I'm missing an easy solution here.

[andrewserong]

Thanks for working on this @patil-vipul and for the ping @creativecoder.

List view: block spacing controls behave unexpectedly ❌

Yes, this issue appears to be similar to the request for separate vertical and horizontal spacing in the Group (Row) block over in: #60643

Until there's a layout-aware way for us to control which sides are visible (and the output of the gap rules), I don't believe we can enable this feature, unfortunately.