Advanced Margin and Padding Editing for Block

[orionp13]

Currently, the management of internal (padding) and external (margin) spacing for blocks in Gutenberg is limited and not very intuitive. Adding an advanced interface similar to Elementor would allow users to have precise control over block spacing without needing custom CSS.

Ideally, each block should have a dedicated section in its settings to manage individual margins and padding for each side (top, bottom, left, right). A linking option to apply the same margin or padding to all sides, along with configurable units (px, %, em, rem, etc.), would significantly enhance the user experience.

Real-time preview of spacing adjustments would save time and eliminate the need for blind testing. This improvement would give users better control over their layouts while making Gutenberg more competitive with visual page builders.

[hanneslsm]

Not sure if I get it but everything is already possible.
You can individually set the padding and margin for top, right, bottom and left (click on the chain icon) and you can also define different units in the theme.json even not so common ones like dvh or dvw.

[orionp13]

can we do this in EVERY BLOCK ?

[hanneslsm]

yes, for most. here is an overview: #43243

[t-hamano]

Can we close this issue as a duplicate of #43243? Is there something missing in the current margin/padding UI itself?

[kyle-charlton]

Could we get the ability to use clamp in the advanced options?
Clamp would give developers way more control over responsive spacing which would help eliminate the need to override spacing with media queries in the custom CSS.

[t-hamano]

Clamp would give developers way more control over responsive spacing which would help eliminate the need to override spacing with media queries in the custom CSS.

I think this is certainly useful, so we might leave this issue open.

FWIW, I also think the suggestions regarding responsive design are worth noting.

• Responsive blocks & intrinsic web design #34641
• Responsive previewing and device-specific editing #19909

[hanneslsm]

Could we get the ability to use clamp in the advanced options?
Clamp would give developers way more control over responsive spacing which would help eliminate the need to override spacing with media queries in the custom CSS.

I am using clamp in my spacing variables in the theme.json already. So it does work already, it's only that the interface doesn't support it yet.

[coder-rancho]

I am using clamp in my spacing variables in the theme.json already. So it does work already, it's only that the interface doesn't support it yet.

Yes, we can define spacing variables but clamp() would give the ability to set responsive spacing for individual block.

I was looking into the codebase. I find out that in order to implement this feature we need to modify style-engine codebase along with BoxControl component. The codebase seems highly cohesive and we need to loop in someone who has worked on these components.