gutenberg
gutenberg copied to clipboard
WordPress
Feature request: Allow negative margins in controls
What problem does this address?
It is not possible to use negative margins in the margin control.
What is your proposed solution?
If negative margins were allowed, designers could overlap blocks easier without having to create custom block styles. This would also open up for more varied block patterns -the block pattern directory can not use custom block styles.
Actually you can do it by passing min prop.
for ex.
<BoxControl
label={__('Margin')}
onChange={(value) => console.log(value)}
inputProps={{ min: -300 }}
/>
It is not explained in Readme but i can able to find it when searching inside core files
Does anyone know if there are plans to implement this? Negative margins are a very common and useful layout tool that seems should be enabled by default for the core margin control.
Hallo! Trying to work with FSE and this is a serious serious oversight. We need to be able to set negative margins, it's a very common technique.
+1 to adding negative margins. I just found a case in the wild where this would have been very useful.
I am not sure how this would affect the blockgap?
I believe a negative margin value would affect the blockgap just like a positive margin does and override the blockgap css for that particular block.
+1 Negative values for spacing fields. Essential for layout building.
+1 Negative values for spacing fields. Essential for layout building.
+1 Negative values are essential for building layouts (with z-index in the blocks).
+1
The is essential to designing layouts, the recent revert broke a few sites of mine.
+1 Instead of allowing unlimited, how about allowing -20?
This might be possible by using "spacing presets" in theme.json. I have not tested it.
This might be possible by using "spacing presets" in theme.json. I have not tested it.
Where can I find the specific code?
#41527
Thanks. This is supposed to define a negative set value.
--wp-priset--spacing-size--minus1: -1 --wp-priset--spacing-size--minus2: -2 --wp-priset--spacing-size--minus3: -3 . . .
Before testing. I don't think this is a very good way to do it if
This is definitely needed. I was trying to show a client how to add margins to a block and could not add negative margins when they asked about overlapping a block on top of another. This is a limitation for block themes in being able to achieve certain layouts
@nendeb that will work, however the scale is also applied to padding. We really need support for negative values on margin inputs, it's a huge limitation for designers.
There is a workaround to allow negative margins, but without responsive controls they may not be the answer.
Please see https://github.com/WordPress/gutenberg/pull/40464#issuecomment-1260263890
+1 for negative margins I built a block that sometimes needs to overlap the block below it or above it for the design, yet after implementing I have found that it doesn't support negative. We will have to build a manual workaround which is not ideal.
Hard to believe we're approaching this issue being 2 years old, and it still isn't implemented yet. It's an essential feature.
