Gallery Block: Allow the number of columns to be maintained on mobile devices

[Azragh]

What problem does this address?

When I create a gallery with 3 images, sometimes I just want to keep it like this on mobile, because the images open in a lightbox anyway (and need too much space otherwise). Unfortunately, the editor on default defines width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)/2) on the items. The user defined width is only assigned after @media (min-width: 600px).

This turns this quite pleasant looking layout

into this:

goal would be that:

What is your proposed solution?

Adding an option to keep the number of columns across all devices.

[annezazu]

Noting a somewhat related issue on controlling when the breakpoint happens: #40870

[Azragh]

Also related: #35848

I like the proposed solution in #40870, the only concern I have is the amount of CSS which gets generated if then every block creates an inline style (it's really much already, and I think users tend to overuse that slider and set a new breakpoint for every block). A class based approach would be much better in my opinion. Something about as discussed here: #38719.

I would prefer to be able to define a preset of breakpoints in theme.json, from which I can choose one via dropdown or similar. The settings could look something like this maybe: #16911 (comment). If this could then also be set or extended at block level, I could add or remove breakpoints as I like (and ideally choose if I'd like to use px or em) and the issue would be gone.

Kinda related too: #40486, #41760

[ricjcs]

I believe an option to choose the number of columns would be best. For example an 8 column gallery for desktop version would probably not look good on the phone.

[bradhogan]

Per @annezazu's recommendation, I'm adding this here. I'd love to see the option to make the "stack on mobile" have a 50% breakpoint. This would be a big design improvement on mobile. Thank you!