WordPress Negative Margins are Awesome!

[@dennis_woo]

Whoah!!!!

[@jamiewp]

😃

[@MichelleBullochCH]

Short and to the point: another brilliant video to encourage us all to use the site builder & Gutenberg plugin. Thanks Jamie!

[@jamiewp]

Thank you Michelle 🙏

[@jdccool]

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.

[@tjsayers5428]

It’s about time! I use negative margins a lot in my non-Wordpress sites. Looking forward to this. Thanks for sharing!

[@jamiewp]

👍

[@yvonned2781]

Can't stop loving the cat

[@jamiewp]

That's what my family say as well 🙃

[@AshishBanerjee]

theres something very soothing aand calming about your videos. please never stop making these tutorials :)

[@jamiewp]

Thank you, I'm going to tell my family your kind words 😃

[@MysticOblong]

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.

[@jamiewp]

👍

[@Gearyco]

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.

[@codingtostopprocrastinatio9748]

Yes, making it responsive is painful.

[@yannickmichel2566]

exactly

[@yannickmichel2566]

@@codingtostopprocrastinatio9748 yes sir pain is a very mild word for that

[@goatcheeta]

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

[@jamiewp]

Thanks Ben 👍

[@ultraspy5474]

I was looking for css to overlap image and paragraph last night. You’re kinda my hero.

[@jamiewp]

I'll take that 🙏

[@GaryMatthews]

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]

Great points Gary - it does make things easier, and this is just the first step.

[@GaryMatthews]

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

[@jamiewp]

@@GaryMatthews great points 👍

[@AhsanParwez]

Clear concise and to the point! Thanks Jamie.

[@jamiewp]

Thanks for watching Ahsan 👍

[@vertimaron]

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

[@jamiewp]

👍

[@TrailRunningPodcast]

This is so basic und absolut needed! Thanks for showing this feature.

[@jamiewp]

Thanks for watching 👍

[@pieter-bakker]

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.

[@jamiewp]

Oh that's a great spot Pieter - thanks for sharing 👍

[@wpmarkuk]

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.

[@Gearyco]

Great point.

[@jamiewp]

Yup as I explained in the video you need to be careful how it's used 👍

[@CampanellaFoto]

The biggest omission from FSE and modern WordPress, such a shame because FSE would be in decent shape if they just added that.

[@rg-web-design]

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

[@Gearyco]

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

[@SingaporeMathsAcademyUK]

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.

[@aijokker]

Who needs icons?? Just use search, its faster

[@streakstrength]

Hi there, thanks so much for the awesome and informative video! Of the many Wordpress tutorials I've watched, this was a good cut above the rest with its conciseness. Just checking - I can't seem to get the negative horizontal margin applied to a group, column or stack. I can only apply it to paragraphs - which is tough because I would like to have an overlapping box with some text information and a CTA within. Is this a problem with my theme or is it to do with Gutenberg in general? Thanks!

[@visualmodo]

Thanks for your video!

[@jamiewp]

thanks for watching :)

[@waynoswaynos]

Thanks man.. I spent some hours trying to work this out and had begun to use cuss words when I found your tutorial. I had tried changing margin-bottom: in CSS but it was doing nothing in 6.6.2 in 2024 theme.

[@sjf29]

I always assumed WP had this feature. When I found it didn't, I was shocked!

[@jamiewp]

Yup it's great it's finally here

[@aabb-xe2mz]

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?

[@Whatreally123]

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?

[@stimulated631]

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?

[@donallong2369]

Hi Jamie, How does the css for mobile reset use the square brackets ? [style*="margin-top:-"] { margin-top: 0 !important }

[@KaiBuskirk]

SO VERY DOPE!!!!

[@jamiewp]

Hi Kai, hope life is good - tks for watching

[@royprins6650]

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

[@bloohair99]

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

[@MegaModyx]

What about the margin on the page itself, I am creating a block that has columns in it and the first element sets far from the left I want to make it shift to the left to have 4 images side by side which are little bit big

[@jamiewp]

If you put it in a group block , then you'll be able to add margin or padding to that group - let me know if that works for you.

[@MegaModyx]

@@jamiewp Thank you for your reply, but I believe that the page itself has margin to the left and right and I can only create within leaving a lot of unutilized while space.

[@jamiewp]

@@MegaModyx what theme are you using?

[@MegaModyx]

@@jamiewp No theme at all. I guess! not super sure, can the margin be manipulated without coding? sorry I am new to this.

[@jamiewp]

@@MegaModyx hi, it's not possible to 'not have a theme' . Could you go to appearance/themes - you'll see it there

[@paulroos8517]

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?

[@jamiewp]

Yup great idea Paul

[@paulroos8517]

@@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?

[@carltongordon]

LETS GOOOOOO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@professor7583]

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.

[@jamiewp]

Hey Jesse, for now you’ll need the Gutenberg plugin- but it should be in core for 6.6 in July

[@imraan_alam]

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.

[@pomade34]

yeah they suck, years waiting for that

[@UeharaKeitaro上原恵太郎]

awesome!

[@jamiewp]

Thanks Juri 👍

[@Sonya_Makepeace]

I've been doing negative margins, using CSS. I hadn't tried it with WordPress though.

[@jamiewp]

👍

[@tigmarsh13]

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]

Interesting- im going to do some digging. Thanks for the heads up !

[@tigmarsh13]

@@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; }

[@yvieormsby]

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

[@jamiewp]

If you use the columns block and tell it not to stack (column settings) in mobile that will work 👍

[@yvieormsby]

@@jamiewp Thanks! I'll be trying that out ✌🏽

[@jamiewp]

@@yvieormsby 👍

[@thewebstylist]

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?

[@jamiewp]

I haven't heard of Nector Blocks nope

[@bloohair99]

Hoorayyyyy! At last. Now I'll want to start tweaking my website that I've only recently tweaked, dammit!

[@jamiewp]

Great (and sorry)

[@bloohair99]

@@jamiewp No trouble!

[@Black1991Star]

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 ?

[@jamiewp]

I believe the plan is to add them.

[@adelakunoluwatobi8930]

Awesome

[@letterpool]

wtf I don't have that option?????? 🤔 (margin slider)

[@jamiewp]

This is coming in WordPress 6.6 (or if you install the free Gutenberg plugin today)

[@carltongordon]

This should have been in there for so long now i don't understand why it was restricted

[@FlorentClaude]

Does anyone know why by the way?

[@jamiewp]

It's been available for a while for theme developers, but now the UI has been added in the Gutenberg plugin for end users.

[@Black1991Star]

@@FlorentClaude Perhaps because the value type is "number". We already have `calc()` in css but they live in last senture...

[@FalkoJoseph]

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

[@carltongordon]

@@FalkoJoseph this makes sense

[@alexandersamokhin]

Now we wait another 8 years for responsive controls 😂

[@boydriver2978]

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

[@jamiewp]

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 👍

[@boydriver2978]

@@jamiewp thanks