Product Collection: Add product spacing

[bgardner]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

I was recently prompted to update to this block from the Query Post block. It would be great to include support for Block Spacing, so that folks can adjust the gap spacing in between their columns and rows in the same way Query Post block does. Otherwise, we’re forced into using the following opinionated css:

.wc-block-product-template.is-flex-container {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25em;
}

Expected behavior

Have access to Block Spacing in sidebar.

Actual behavior

No access to Block Spacing.

Steps to reproduce

1. Go to Site Editor > Templates > Product Catalog and insert Product Collection block.
2. See lack of option for Block Spacing.

WordPress Environment

WordPress 6.4.2, WooCommerce 8.5 RC1

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

[kmanijak]

Thanks for the feedback! I'm moving this to Product Collection backlog and we should tackle this in upcoming weeks!

[sunyatasattva]

Related discussion: #47437

[kmanijak]

Goals for this issue:

• Layout controls include block spacing (or product spacing) control
• Merchants can manually set fixed number of columns
• Merchants can set number of columns to responsive mode. In that case:
  • they can set minimum column width
  • they can set maximum number of columns

[ObliviousHarmony]

After the discussion I've started working on a compatibility layer so that we can implement an upstream change that adds support for defining a maximum column. This works by replacing the layout support style generation on the server and the client with one that runs custom code when using the collection block. It will then fall back to the current implementation available in WordPress (or Gutenberg, whichever has priority) for all other blocks.