Thanks for mentioning this. I've been away from Wordpress for the past six months and am catching up with recent developments before I start updating a client's site. Negative margins will be very handy - this is something I usually achieve with a bit of CSS, so it's nice to have it out of the box now.
To never forget what padding and margin are, use your hand! When you open or close it, that's padding, and if you move it up, down, left, or right, that's margin. 😁
The challenge is when to use negative margins and when not to. There are certain instances when they're critical, but some of these examples are better suited to different techniques for various reasons. The inline overlaps of content over images, for example, are much better handled with grid. Unfortunately, I don't think Gutenberg supports the necessary grid controls to use grid in this way, forcing you to use an inferior styling technique. And as @wpmarkuk noted, without responsive controls this conversation is misleading. So much of what was shown can't be undone properly on mobile devices to make it functional and responsive. These are HUGE reasons why the block editor is still not ready for prime time.
Thanks, Jamie. It was in the summary of Gutenberg 18.3 but your video makes all the difference in helping us think of the possibilities, the key of education
I love it❣️ Thanks Jamie for this explanation and demo. I’ve been wanting this feature for several years. It’s true we’ll need to be careful about the effect on mobile, maybe using CSS until they add breakpoint controls. But I was already using CSS workarounds anyway to get negative margins where I needed them. This is an awesome leap forward. Here’s hoping the FSE developers soon iron out the remaining kinks.
@@jamiewp Another subtlety here is easy to under-appreciate: As I recall, in the original versions of Gutenberg full-site editing, many blocks didn't even support margins of zero! I was having to use CSS to get blocks to remain adjacent, never mind overlapping. Thank God we've matured to the point where we can make blocks touch, rather than repel one another because some developer arbitrarily chose to make them so. Zero margins are probably a more common use-case than negative ones -- and those don't adversely affect mobile.
Nice to see them available, but without responsive controls for margin they are pretty useless. You wouldn't want a negative margin in the example you showed for example and I wouldn't expect a user to have to use CSS to fix it on mobile.
I rarely use negative margin, but if you can create a negative margin in REM on desktop and also on mobile, then you can surely clamp the values in between for responsiveness...?
Thanks for the great video. So far I managed to achieve overlap with extra css, which still gives more control, especially for the responsive part. I note that the paragraph overlap only works if the image is in the first column and otherwise you need to increase the z-index for the column with an additional css class to ensure that the text and background in the left column is above the image.
We're finally there! This is like Apple allowing us to move icons where we want on the homescreen compared to Andorid where this was possible 10 years ago.
@@jamiewp One could go even further with the idea. A small image that has been "cut out" with a transparent background, could be overlaid on a larger image used as background. And maybe animation?
Jamie how to change the media queries for the header, for column wrapping and other elements. Currently the default768 is entered everywhere. Is there any global way to change media queries?
Just started to build my own site on the 2024 theme. I have had so many questions, few that you have answered. My gripe with all this is the clear lack of usability of options in the settings. I don't understand why all the options are not readily shown to the user. For ex, the padding or margins don't show all options like Top/Bottom, Left/Right or individual sides all at once. Instead the user has to click the icon and then choose which option they want which just doesn't make any sense to me. Or with the Typography section. Why not show all the options like Font, style etc along with the size all the time? And even with the negative margin, how is one even to know about it? Unless one is a developer and closely follows release notes, there is no way they get to know this can be done. WHy not change the slider to be in the middle so as soon as one sees it, they know it can do negative values as well. Is there a way to suggest UI/UX changes to the wordpress gutenberg develoeprs?
I literally need this so bad. When did it get released? I was literally trying to do this on something like 3 weeks ago. I have noticed you can't affect the margin on all blocks.
Some things amazing how long it takes WP to bring aboard but hey all that matters is now forward 🎉 Curious James have you ever heard of Nectar Blocks from beloved Themenectar?
but still they have not added breakpoints for desktop, mobile and tablet. if i add negative margin that might not look good on mobile and there is no control for different breakpoints yet.
Oooh! So we can have easily overlapping images - sans code! Does the code go really janky on mobile? I'd like to keep some overlapping, albeit a lesser amount
Same here. I tried this with rows and column blocks, it doesn't work for horizontal layouts for me. I can do it with rows vertically. Maybe it's something in the theme..
Just tried this, works great if the image is on the left but when the image is on the right, the text goes behind the image, need some way to reverse the z-index
@@jamiewp got it to work with a bit of CSS : give the overlapping sections different classes .overlap-right{position:relative; z-index: 9999; margin-right: -100px;} .overlap-left{margin-left: -100px;} @media (max-width: 768px) { .overlap-left { margin-left: 0;} .overlap-right { margin-right: 0; }
@@FlorentClaude it was a technical limitation for a long time. Gutenberg's margin implementation kind of prevented it. It would break the functionality of a lot of other things inside the editor. For example being able to select elements that overlap each other. It's similar to Framer, they struggled with this too, but it might be implemented by now.
So,Im abroad on holidays and watching Jamie Marsland on a tablet and I'm a tad confused. I have wp 6.5 do i still have to install gutenberberg plug in? Also Caxton plug in, is that still worth installing in 6.5 or the upcoming 6.6 please @JamieMarsland
Hi, at the moment if you want this feature you'll need the Gutenberg plugin, but hopefully this will come to core WordPress when version 6.6 is released in July. Re Caxton , that is one of my plugins that adds extra options (eg shape dividers) into the block editor, so it depends whether you want those extra features 👍
Whoah!!!!
😃
Short and to the point: another brilliant video to encourage us all to use the site builder & Gutenberg plugin. Thanks Jamie!
Thank you Michelle 🙏
Can't stop loving the cat
That's what my family say as well 🙃
Thanks for mentioning this. I've been away from Wordpress for the past six months and am catching up with recent developments before I start updating a client's site. Negative margins will be very handy - this is something I usually achieve with a bit of CSS, so it's nice to have it out of the box now.
👍
Yowser! That is VERY COOL.. That's sure gonna make things a tad easier. And explained so well in less than 4 min! Bookmarking this one, TY, Jamie.
theres something very soothing aand calming about your videos. please never stop making these tutorials :)
Thank you, I'm going to tell my family your kind words 😃
It’s about time! I use negative margins a lot in my non-Wordpress sites. Looking forward to this. Thanks for sharing!
👍
To never forget what padding and margin are, use your hand! When you open or close it, that's padding, and if you move it up, down, left, or right, that's margin. 😁
👍
The challenge is when to use negative margins and when not to. There are certain instances when they're critical, but some of these examples are better suited to different techniques for various reasons. The inline overlaps of content over images, for example, are much better handled with grid. Unfortunately, I don't think Gutenberg supports the necessary grid controls to use grid in this way, forcing you to use an inferior styling technique.
And as @wpmarkuk noted, without responsive controls this conversation is misleading. So much of what was shown can't be undone properly on mobile devices to make it functional and responsive. These are HUGE reasons why the block editor is still not ready for prime time.
Yes, making it responsive is painful.
exactly
@@codingtostopprocrastinatio9748 yes sir pain is a very mild word for that
Thanks, Jamie. It was in the summary of Gutenberg 18.3 but your video makes all the difference in helping us think of the possibilities, the key of education
Thanks Ben 👍
I was looking for css to overlap image and paragraph last night. You’re kinda my hero.
I'll take that 🙏
Clear concise and to the point! Thanks Jamie.
Thanks for watching Ahsan 👍
I love it❣️ Thanks Jamie for this explanation and demo. I’ve been wanting this feature for several years. It’s true we’ll need to be careful about the effect on mobile, maybe using CSS until they add breakpoint controls. But I was already using CSS workarounds anyway to get negative margins where I needed them. This is an awesome leap forward. Here’s hoping the FSE developers soon iron out the remaining kinks.
Great points Gary - it does make things easier, and this is just the first step.
@@jamiewp Another subtlety here is easy to under-appreciate: As I recall, in the original versions of Gutenberg full-site editing, many blocks didn't even support margins of zero! I was having to use CSS to get blocks to remain adjacent, never mind overlapping. Thank God we've matured to the point where we can make blocks touch, rather than repel one another because some developer arbitrarily chose to make them so. Zero margins are probably a more common use-case than negative ones -- and those don't adversely affect mobile.
@@GaryMatthews great points 👍
Nice to see them available, but without responsive controls for margin they are pretty useless. You wouldn't want a negative margin in the example you showed for example and I wouldn't expect a user to have to use CSS to fix it on mobile.
Great point.
Yup as I explained in the video you need to be careful how it's used 👍
The biggest omission from FSE and modern WordPress, such a shame because FSE would be in decent shape if they just added that.
I rarely use negative margin, but if you can create a negative margin in REM on desktop and also on mobile, then you can surely clamp the values in between for responsiveness...?
@@rg-web-design That's not always an appropriate solution and I'm not even sure if the block editor supports clamp values. Pretty sure it doesn't.
This is so basic und absolut needed! Thanks for showing this feature.
Thanks for watching 👍
Thanks for the great video. So far I managed to achieve overlap with extra css, which still gives more control, especially for the responsive part. I note that the paragraph overlap only works if the image is in the first column and otherwise you need to increase the z-index for the column with an additional css class to ensure that the text and background in the left column is above the image.
Oh that's a great spot Pieter - thanks for sharing 👍
Thanks for your video!
thanks for watching :)
We're finally there! This is like Apple allowing us to move icons where we want on the homescreen compared to Andorid where this was possible 10 years ago.
Who needs icons?? Just use search, its faster
Thanks Jamie. From the examples you show, it looks as if text with a transparent background could be overlaid on images using the negative margin?
Yup great idea Paul
@@jamiewp One could go even further with the idea. A small image that has been "cut out" with a transparent background, could be overlaid on a larger image used as background. And maybe animation?
Jamie how to change the media queries for the header, for column wrapping and other elements. Currently the default768 is entered everywhere. Is there any global way to change media queries?
Thanks for the update! If i use the custom builder on Wordpress it generates inline CSS in the HTML code. Is there a way to avoid this?
Hi Jamie,
How does the css for mobile reset use the square brackets ?
[style*="margin-top:-"] { margin-top: 0 !important }
I always assumed WP had this feature. When I found it didn't, I was shocked!
Yup it's great it's finally here
Just started to build my own site on the 2024 theme. I have had so many questions, few that you have answered. My gripe with all this is the clear lack of usability of options in the settings. I don't understand why all the options are not readily shown to the user. For ex, the padding or margins don't show all options like Top/Bottom, Left/Right or individual sides all at once. Instead the user has to click the icon and then choose which option they want which just doesn't make any sense to me. Or with the Typography section. Why not show all the options like Font, style etc along with the size all the time?
And even with the negative margin, how is one even to know about it? Unless one is a developer and closely follows release notes, there is no way they get to know this can be done. WHy not change the slider to be in the middle so as soon as one sees it, they know it can do negative values as well.
Is there a way to suggest UI/UX changes to the wordpress gutenberg develoeprs?
SO VERY DOPE!!!!
Hi Kai, hope life is good - tks for watching
I literally need this so bad. When did it get released? I was literally trying to do this on something like 3 weeks ago.
I have noticed you can't affect the margin on all blocks.
Hey Jesse, for now you’ll need the Gutenberg plugin- but it should be in core for 6.6 in July
awesome!
Thanks Juri 👍
Some things amazing how long it takes WP to bring aboard but hey all that matters is now forward 🎉
Curious James have you ever heard of Nectar Blocks from beloved Themenectar?
I haven't heard of Nector Blocks nope
but still they have not added breakpoints for desktop, mobile and tablet.
if i add negative margin that might not look good on mobile and there is no control for different breakpoints yet.
yeah they suck, years waiting for that
LETS GOOOOOO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Oooh! So we can have easily overlapping images - sans code! Does the code go really janky on mobile? I'd like to keep some overlapping, albeit a lesser amount
If you use the columns block and tell it not to stack (column settings) in mobile that will work 👍
@@jamiewp Thanks! I'll be trying that out ✌🏽
@@yvieormsby 👍
Hoorayyyyy! At last. Now I'll want to start tweaking my website that I've only recently tweaked, dammit!
Great (and sorry)
@@jamiewp No trouble!
I've been doing negative margins, using CSS. I hadn't tried it with WordPress though.
👍
if i set the margin to overlap the image, it looks fine before publishing it.. as soon as i publish the tekst dissapears behind the image..
Same here. I tried this with rows and column blocks, it doesn't work for horizontal layouts for me. I can do it with rows vertically. Maybe it's something in the theme..
Just tried this, works great if the image is on the left but when the image is on the right, the text goes behind the image, need some way to reverse the z-index
Interesting- im going to do some digging. Thanks for the heads up !
@@jamiewp got it to work with a bit of CSS : give the overlapping sections different classes
.overlap-right{position:relative; z-index: 9999; margin-right: -100px;}
.overlap-left{margin-left: -100px;}
@media (max-width: 768px) {
.overlap-left {
margin-left: 0;}
.overlap-right {
margin-right: 0;
}
It's good, but I still can't understand why they don't implement margin and padding for Block Image ? Why it always need to be cover Block ?
I believe the plan is to add them.
Awesome
This should have been in there for so long now i don't understand why it was restricted
Does anyone know why by the way?
It's been available for a while for theme developers, but now the UI has been added in the Gutenberg plugin for end users.
@@FlorentClaude Perhaps because the value type is "number". We already have `calc()` in css but they live in last senture...
@@FlorentClaude it was a technical limitation for a long time. Gutenberg's margin implementation kind of prevented it.
It would break the functionality of a lot of other things inside the editor. For example being able to select elements that overlap each other.
It's similar to Framer, they struggled with this too, but it might be implemented by now.
@@FalkoJoseph this makes sense
wtf I don't have that option?????? 🤔 (margin slider)
This is coming in WordPress 6.6 (or if you install the free Gutenberg plugin today)
Now we wait another 8 years for responsive controls 😂
So,Im abroad on holidays and watching Jamie Marsland on a tablet and I'm a tad confused. I have wp 6.5 do i still have to install gutenberberg plug in? Also Caxton plug in, is that still worth installing in 6.5 or the upcoming 6.6 please @JamieMarsland
Hi, at the moment if you want this feature you'll need the Gutenberg plugin, but hopefully this will come to core WordPress when version 6.6 is released in July. Re Caxton , that is one of my plugins that adds extra options (eg shape dividers) into the block editor, so it depends whether you want those extra features 👍
@@jamiewp thanks