Add options to offset block margins.

[alaczek]

Is your feature request related to a problem? Please describe.

Here's a fairly popular pattern I've been trying to accomplish:

This is mostly possible with image and paragraph blocks (here nested inside a columns block), but there's no way to overlap the paragraph/heading with an image.

For comparison here's what I was able to put together in the editor right now:

(also, in addition to margin controls, we would need a way to limit block width)

I'm not sure what would be the best way to implement this - having an option of setting margins including a negative one maybe?

[ellatrix]

Hm, interesting. If a pattern were a block, you'd be able to add some styles specific for this block. But since it's just a pattern (and has no wrapper block), this is not possible. Adding margin attributes to every block etc. seems a bit like overkill. Maybe each block should have advanced CSS attributes? Or in this case, a custom block would be better? Cc @youknowriad @mtias

[youknowriad]

I don't think margin for every block is overkill personally but an advanced feature (opt-in potentially).

That said a "custom CSS" per block can also be a similarly good advanced feature. (I recall this being discussed in the past too).

[alaczek]

Or in this case, a custom block would be better?

Not sure this is the way to go. Overlapping images with text is just one of the use cases. Ideally, we could overlap any two blocks. I do agree this would be a more advanced feature and I like the idea of "custom CSS". We could then build patterns to make those more advanced designs accessible to anyone.

[LevinMedia]

I don't think margin for every block is overkill personally but an advanced feature (opt-in potentially).

I agree @youknowriad. However, I would say it's not opt in, it's just there in the sidebar settings for a block if you want to use it. I've been looking at the columns block, and the child column blocks recently, and I came to the same conclusion: adding margin and padding controls to all blocks would be very useful. In particular, when you start using Gutenberg to build templates and template parts, or edit complex layouts, that level of control is necessary. IMO Having having to rely on custom CSS to get that level of control defeats the purpose of visual editing.

@alaczek I think what you're trying to do could be done if both the image block, and the paragraph block had margin and padding controls.

The image block could be set to have no margin. The paragraph block would have a background color + padding applied, to create the size of the box you want around the text. Negative top margin would get it to overlay the image above. I think you'd also need a z-index control to get the text to sit above the image. The margin and padding controls for the paragraph box might look something like this (using the box control component)

[iamtakashi]

I came to the same conclusion: adding margin and padding controls to all blocks would be very useful. In particular, when you start using Gutenberg to build templates and template parts, or edit complex layouts, that level of control is necessary. IMO Having having to rely on custom CSS to get that level of control defeats the purpose of visual editing.

+1 👍👍👍

[ramonjd]

By removing the min attribute in the margin control box (essentially setting inputProps={ { min: undefined } }) we can allow negative margins:

The above effect uses a group block (is there another, more suitable block?), but note that I had to add position relative to create a new stacking context in order that it appears over its sibling elements.