Query Loop Columns CSS Should use blockGap for Widths

[mrwweb]

Description

The Query Loops uses a hard-coded width to ensure columns work. Here's an example from the two column CSS:

.wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
.wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
    width: calc(50% - .625em);
}

However, this assumes that the gap between the columns will always be 1.25em. That means that any blockGap greater than 1.25em will break the expected number of columns.

These styles should use blockGap since that value can be dynamically set:

.wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
.wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
	width: calc(50% - var(--wp--style--block-gap) / 2);
}

Step-by-step reproduction instructions

1. Set settings.spacing.blockGap to any value greater than 1.25em
2. Insert a query loop with at least two columns

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.0
• Custom Theme
• Gutenberg Plugin not installed

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[mrwweb]

I got very turned around, and I think I misunderstood this issue despite testing a fair amount. Closing for now and will reopen if needed.