Mobile spacing issues

[bradhogan]

What problem does this address?

Most blocks have some sort of spacing options in the Dimensions panel (margin, padding, blockgap). The problem is setting these values for desktop makes things pretty wonky in mobile.

What is your proposed solution?

Option 1 - allow clamp() to be used or some sort of min,max.
Option 2 - when switching Preview from Desktop to Tablet (or Mobile), allow the values to be edited just for those screensizes
Option 3 - add a per block option so any block with spacing options has a desktop and a mobile version of the input values

[Azragh]

In my opinion the usage of max() could be nice too.

Suggested here: #40344

[Humanify-nl]

From a developer perspective, I'd like a predefined set of values for spacing, same as we have for font-sizes now.

Letting clients push in values for spacing is asking for inconsistent design and going back to stone ages of having to manually input values in websites that are really hard to maintain / reset or override, and as an added bonus gives all us devs carpal tunnel in the long run.

Let us specify 1-5 sizes and maintain through css variables or even theme.json. Developers can choose to define these variables in their own CSS to manage breakpoint scaling (or add clamp, whatever taste).

[bradhogan]

Any updates on this? This is a big issue as there is not currently a good UI solution for adjusting spacing between desktop and mobile so sites look super wonky on mobile. For instance, a two column layout with the right column having 10vw spacing on desktop then has way too much spacing on mobile.

[Azragh]

I am also waiting quite impatiently for a solution. It just feels wrong to use the Gutenberg editor, but still have to assign spacing classes to the individual elements in order to get a clean responsive layout. In my opinion, the aim and purpose of the editor is somewhat missed if I, as a developer, have to pre-design all possible content or create various templates and explain to customers that the native settings are not sufficient and that they should not create any new content themselves unless they copy existing blocks and modify them.

As @Humanify-nl suggested, a dropdown or similar in the spacing section, where you can choose from predefined spacing classes, would also be the best (and probably easiest) solution in my opinion. These could be added and described by developers via theme.json. In this way, already existing, specially created utility classes for spacing can be very easily integrated into the editor. Since the mobile previews have been loaded in an iframe for some time now, custom media queries of the theme integrate quite well already, so it should not be a problem to leave the assignment of classes and their description for users to the developer and his theme.

But min(), max() and clamp() would still be a nice addition, just to say.

[cbirdsong]

From a developer perspective, I'd like a predefined set of values for spacing, same as we have for font-sizes now.

This is in the works:

• Extend theme.json to provide spacing size presets #39371

[RCNeil]

I think a combination of theme.json parameters/boundaries and offering a toggle for mobile/desktop is a good solution.

Hubspot has a intuitive editing experience for this. When adjusting the spacing, just toggle the desktop icon or the mobile icon, and provide the values. Many clients have inherently figured it out without me directing them.

Use theme.json to set boundaries, default spacing units, values, etc.

This should be default for any blocks that take padding/margin/height/block-spacing values.