Columns Block: Try adding a "negative margins" block style

[kjellr]

This was an idea I had to achieve a couple of the block styles in #50.

Image underlapping text box	Two overlapping blocks of text

The PR adds a "Overlap" block style to the columns block that applies a negative margin to each second column. It looks really weird in the preview:

But you can do some interesting things with it:

It also lets you achieve something similar to #277, but by using single image blocks and spacers:

In general, it seems a little hacky to me, but I like the effect, so I'm curious what others think.

[melchoyce]

Looks cool, fun to play around with 👍

I wonder if this should also be a style on the Media & Text block?

[kjellr]

I wonder if this should also be a style on the Media & Text block?

It definitely could be. I'll give it a try tomorrow.

[kjellr]

I wonder if this should also be a style on the Media & Text block?

@melchoyce I tried a quick version of this, but I think it's a little less suited for that block for a couple reasons:

• The block uses a CSS grid which is defined inline. So in order to replace that grid rule with a grid that allows for overlap, I need to use an !important rule. Unfortunately, an !important rule prevents the image area from being resized properly.
• Even though the block can't be resized with this implementation, the control is still present, and it overlaps the overlapping content. 😄

[carolinan]

I like these column effects, can you share some screenshots of the responsive view?

[kjellr]

can you share some screenshots of the responsive view?

By default, the columns block stacks its columns below ~600px wide, and this PR doesn't change that. So these new styles only apply on screens larger than that.

Mobile	760px	1024px	1400px

(at 760px wide, you'll notice there's no vertical margin between the two images. That's default columns block behavior and is not modified by this PR)

---

I had a good chat with @jasmussen earlier about this PR and #277. He had some great input and helped me solidify my thoughts about these two PRs:

• This PR is pretty solid, and the code is really simple (3 CSS rules!). As noted above, it allows us to achieve the stacked images pattern, as well as most of the other pending block patterns too. Given the options we have available, it seems like the simplest way to achieve what we're aiming to achieve.
• Try: Overlapping Gallery Block Pattern #277 is complicated, and I worry that it's fragile too. The gallery block may soon shift to use standard image inner blocks, which will possibly complicate things. The columns block seems comparatively stable and simple code-wise.
• It's definitely weird and unreadable to have the overlap in the preview, and in general when users don't add a background color to their text. We could set defaults to avoid this (for example: we could manually give all text-based blocks a background color and padding), but this seems like something we could explore in a followup PR.

So in general, my recommendation is:

• We merge this and iterate on it.
• I close Try: Overlapping Gallery Block Pattern #277, and reproduce that block pattern using this overlapping columns block and single images instead.

How do folks feel about that?

[kjellr]

A short addendum to the comment above:

We could set defaults to avoid this (for example: we could manually give all text-based blocks a background color and padding), but this seems like something we could explore in a followup PR.

I added this in 9850f6f, and it works pretty well to ensure that text in the second column is readable by default. Users are still able to modify colors using the standard Gutenberg color controls. And it's only for direct children.

[carolinan]

I think this will be great and that it can be merged.

[kjellr]

Thanks, all! I'll open some followup PRs for block patterns that use this.