Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Negative margin in dimension controls #32644

Closed
carolinan opened this issue Jun 12, 2021 · 71 comments · Fixed by #40464 or #60347
Closed

Negative margin in dimension controls #32644

carolinan opened this issue Jun 12, 2021 · 71 comments · Fixed by #40464 or #60347
Assignees
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Layout Layout block support, its UI controls, and style output. Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Comments

@carolinan
Copy link
Contributor

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.

@carolinan carolinan added the [Type] Enhancement A suggestion for improvement. label Jun 12, 2021
@thirumani02
Copy link

thirumani02 commented Aug 10, 2021

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
Copy link

timsinc commented Jan 17, 2022

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
Copy link
Member

aurooba commented Jan 23, 2022

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
Copy link
Contributor Author

I am not sure how this would affect the blockgap?

@mrfoxtalbot
Copy link

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

@timsinc
Copy link

timsinc commented Feb 7, 2022

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
Copy link
Contributor

daviedR commented Feb 8, 2022

+1

Negative margin is essential for design and layout building

@samxmunoz
Copy link

+1

Negative margin allowing for overlapping elements is essential.

@rolf-yoast
Copy link

+1

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

@aristath
Copy link
Member

Reopening this one because #40464 is getting reverted.

@AdsonCicilioti
Copy link

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

@jonathanelmgren
Copy link

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

@peiche
Copy link

peiche commented Jun 28, 2022

+1
Negative values are essential for building layouts.

@diegosomar
Copy link

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

@nendeb
Copy link

nendeb commented Aug 28, 2022

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

@namithj
Copy link

namithj commented Sep 5, 2022

+1

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

@carolinan
Copy link
Contributor Author

+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
Copy link

nendeb commented Sep 8, 2022

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

Where can I find the specific code?

@carolinan
Copy link
Contributor Author

#41527

@nendeb
Copy link

nendeb commented Sep 8, 2022

#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
Copy link

rxnlabs commented Sep 11, 2022

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
Copy link

Pacicio commented Jul 3, 2023

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

Fake-negative-margin

@nicmare
Copy link

nicmare commented Jul 3, 2023

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

Fake-negative-margin

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
Copy link

Plus one for this.

@itsjustdj
Copy link

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
Copy link

+1

@ohiawins
Copy link

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

@thomasnuggets
Copy link

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
Copy link

nicmare commented Sep 1, 2023

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
Copy link

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
Copy link

wiinf commented Sep 5, 2023

+1

It would realy be very helpful!!

@alexisreau
Copy link

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

@JiveDig
Copy link

JiveDig commented Sep 14, 2023

+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
Copy link

ouw-jvt commented Sep 28, 2023

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
Copy link

madfcat commented Dec 20, 2023

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

@curiousduck-dev
Copy link

+1!

Is there an update on this for 2024?

@flabernardez
Copy link

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

@alperta
Copy link

alperta commented Feb 10, 2024

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

@wpsoul
Copy link

wpsoul commented Feb 27, 2024

OMG, it still doesn't have negative margin?

@DevAndreyBilchenko
Copy link

+1 topic started from 2021

@richtabor richtabor changed the title Feature request: Allow negative margins in controls Negative margin in dimension controls Mar 21, 2024
@SH4LIN
Copy link
Contributor

SH4LIN commented Mar 28, 2024

+1

2 similar comments
@lunule
Copy link

lunule commented Mar 28, 2024

+1

@cloudcreationsjess
Copy link

+1

@annezazu
Copy link
Contributor

annezazu commented Apr 3, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Layout Layout block support, its UI controls, and style output. Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
Status: Done