Negative margin in dimension controls

[carolinan]

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.

[thirumani02]

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

[timsinc]

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.

[aurooba]

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.

[carolinan]

I am not sure how this would affect the blockgap?

[mrfoxtalbot]

+1 to adding negative margins. I just found a case in the wild where this would have been very useful.

[timsinc]

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.

[daviedR]

+1

Negative margin is essential for design and layout building

[samxmunoz]

+1

Negative margin allowing for overlapping elements is essential.

[rolf-yoast]

+1

I need it for a design I'm currently building.

[aristath]

Reopening this one because #40464 is getting reverted.

[AdsonCicilioti]

+1
Negative values for spacing fields. Essential for layout building.

[jonathanelmgren]

+1
Negative values for spacing fields. Essential for layout building.

[peiche]

+1
Negative values are essential for building layouts.

[diegosomar]

+1
Negative values are essential for building layouts (with z-index in the blocks).

[nendeb]

+1
Instead of allowing unlimited, how about allowing -20?

[namithj]

+1

The is essential to designing layouts, the recent revert broke a few sites of mine.

[carolinan]

+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.

[nendeb]

This might be possible by using "spacing presets" in theme.json. I have not tested it.

Where can I find the specific code?

[carolinan]

#41527

[nendeb]

#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

[rxnlabs]

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

[Pacicio]

+1 for negative margins, however I found a workaround to make a "fake" negative margin using a gradient background. It's only applicable to some cases but it's better than nothing if you don't want to use custom CSS.

[nicmare]

+1 for negative margins, however I found a workaround to make a "fake" negative margin using a gradient background. It's only applicable to some cases but it's better than nothing if you don't want to use custom CSS.

That’s how I do it. You could also combine it with the 2nd Color 0% opacity and a cover block (nested) to create interesting effects with images. But there is sometime a glitch of 1 pixel.

[adamghorne]

Plus one for this.

[itsjustdj]

Plus one for this issue. I needed to use negative margins on a recent client project and had to revert to customize.php to add custom CSS and make it work. It would be nice if you could just enter a negative margin in the site editor.

[metabreakr]

+1

[ohiawins]

+1 soooohoohooho many people are gonna be totally stoked when this comes out.

[thomasnuggets]

I write a snippets to put in your "custm snippets" plugin :

add_action('admin_footer', 'remove_min_value_inline_script');

function remove_min_value_inline_script() {
    echo '<script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.addedNodes.length) {
                        mutation.addedNodes.forEach(function(node) {
                            if (node.querySelectorAll) {
                                node.querySelectorAll("input[min=\'0\']").forEach(function(input) {
                                    input.removeAttribute("min");
                                });
                            }
                        });
                    }
                });
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    </script>';
}

And It's work perfectly :)

[nicmare]

I write a snippets to put in your "custm snippets" plugin :

add_action('admin_footer', 'remove_min_value_inline_script');

function remove_min_value_inline_script() {
    echo '<script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.addedNodes.length) {
                        mutation.addedNodes.forEach(function(node) {
                            if (node.querySelectorAll) {
                                node.querySelectorAll("input[min=\'0\']").forEach(function(input) {
                                    input.removeAttribute("min");
                                });
                            }
                        });
                    }
                });
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    </script>';
}

And It's work perfectly :)

thats a very very generic code. i would at least add this to the selector:
querySelectorAll(".spacing-sizes-control input[min=\'0\']")

[thomasnuggets]

I adapted the code :

add_action('admin_footer', 'remove_min_value_inline_script');

function remove_min_value_inline_script() {
    echo '<script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.addedNodes.length) {
                        mutation.addedNodes.forEach(function(node) {
                            if (node.querySelectorAll) {
                                node.querySelectorAll(".spacing-sizes-control input[min=\'0\']").forEach(function(input) {
                                    input.removeAttribute("min");
                                });
                            }
                        });
                    }
                });
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    </script>';
}

[wiinf]

+1

It would realy be very helpful!!

[alexisreau]

+1
Valeurs négatives pour les champs d'espacement. Indispensable pour la construction d’agencements.

[JiveDig]

+1

Adding a note that fixed (px, em, etc.) values shouldn't be the only option. I'd like to see the spacing scale allow for negative clamp/min/max values as well.

From Andrews screenshots you can see how the padding on the red Group block could have a value that uses clamp from the spacing scale. Adding a set px/em value for negative margin will not scale accordingly along with the Group and very likely cause unintended overlap issues.

We've used custom margin settings for a while (before they were in core) with this approach and it's proven to work fairly well.

[ouw-jvt]

Big +1 to this.

Reviewing a client design right now and I really could use this functionality. I will probably wind up home-baking something

[madfcat]

We need this asap! Why it is not implemented by default though?

[curiousduck-dev]

+1!

Is there an update on this for 2024?

[flabernardez]

Need it! Please! Now I'm adding it with a css class 😔

[alperta]

+1 so that we don't need to write custom css classes.

[wpsoul]

OMG, it still doesn't have negative margin?

[DevAndreyBilchenko]

+1 topic started from 2021

[SH4LIN]

+1

[lunule]

+1

[cloudcreationsjess]

+1

[annezazu]

As this is being explored in this initial PR (#60347), I want to share some UX considerations. Specifically, I want to note that there needs to be a pause/stop point before going to negative values when using either the slider or the ability to drag up/down to change controls as shown below:

negative.margin.mp4

Right now, with the current PR that is meant to be a small start towards solving this, you can quickly slide past the 0 and it would go a long way to have a "sticky" point at 0 as it's a common action to try to 0 out values to reset something. I'm aware, I can go to the three dot menu to reset but this would keep the more visible options useful to reset while also allowing new functionality.