Layout Grid: Allow overlapping of layers

[melchoyce]

Would be cool if we could use this block to create something like this design:

[johngodley]

I'm not sure if this kind of design is possible without a big rewrite of the block. @jasmussen do you have any thoughts?

[jasmussen]

When I first saw this ticket, I thought yes — this is a cool benefit and an obvious improvement. I imagined that it was a matter of simply adjusting the column spans and the overlap would happen naturally.

And... that does seem to be possible actually:

It appears to be even simpler than that GIF, if I apply position: relative; z-index: 1; on one of the columns, it naturally floats above adjacent columns without collapsing the parent container (which position: absolute; does). So it seems like it might not need a total rewrite — for starters we could experiment with a toggle that simply elevates the z-index of a single column, and see how that fares in the branch.

I'm sure it's not quite as simple, UI wise — I believe John that you've built in some resizing smarts into the UI that would probably need to be toggled off for the column that's chosen to "float".

Implicitly this is also still the inherent limitation that we are only using columns at the time, so you couldn't actually create what's shown in Mel's mockup with an item that's vertically centered above text... or well maybe. But it's not quite as freeform.

But it seems worth trying as a small prototype in a PR and then decide the next step. What do you think John?

[johngodley]

I've been working on something unrelated and I think it might end up being useful here. The unrelated change moves from using grid offsets to grid starts (i.e move from relative to absolute grid positioning). For the end user this shouldn't have any effect, but it would make overlapping layers easier as two columns could have the same absolute grid position.

With this in mind, it seems worth thinking a bit more about what is involved.

From the above experiment it seems it's technically possible to overlap a grid column using CSS. We should do some cross-browser tests to confirm this is expected behaviour and not some side-effect.

In terms of UI we could allow a column to be 'unlocked'. This would remove it from the existing grid validation, and allow the user to change the start value to anything. If we detect an overlap then we apply the grid float.

I imagine we could combine this with drag-and-drop so the column can be dragged around the grid.

Would we need any kind of z ordering features - send to back, bring to front etc? With multiple unlocked columns you'll probably need some kind of control.

Could we wrap this up with variations? That is, like with the column block, we present some pre-defined layouts, some of which can include overlapped columns.

Would we want to be able to set opacity on a column? Or would this be something for the block inside the column?

Are there other useful features from other grid blocks that could be included as part of this?

[jasmussen]

The unrelated change moves from using grid offsets to grid starts (i.e move from relative to absolute grid positioning).

This sounds amazing.

In terms of UI we could allow a column to be 'unlocked'. This would remove it from the existing grid validation, and allow the user to change the start value to anything. If we detect an overlap then we apply the grid float.

This was my followup question, and I do love this idea.

I imagine we could combine this with drag-and-drop so the column can be dragged around the grid.

:whoa-gif:

Would we need any kind of z ordering features - send to back, bring to front etc? With multiple unlocked columns you'll probably need some kind of control.

We do need an elevated z index on any layer that is to overlap. And if you wanted to overlap more than one layer, then it would probably be nice to control that layering. I would imagine just a single "send to front" button, and a z-index range that goes only as long as how many overlapping layers you have. I.e. if overlap one layer, it has z-index 1, if you overlap another, it has z index 2, if you overlap a 3rd it has z index 3 and so on. The "send to front" button could then simply swap out the highest number, i.e. if you have 3 and press "send to top" on 1, then that gets 3 and the previous 3 gets 2, and the previous 2 gets 1.

However as you can tell the above is slightly complex codewise for something that may end up being nichy, and overlapping even just one layer would be such a great feature, that I feel it would be fine to not do any z index management at all for the first couple of versions, and then add it when it becomes clear people want it.

Could we wrap this up with variations? That is, like with the column block, we present some pre-defined layouts, some of which can include overlapped columns.

(⊃｡•́‿•̀｡)⊃━☆ﾟ.*･｡ﾟ

We could, we definitely could. We could even have it in the placeholder/setup state.

                    +-------------------------------+
                    |                               |
                    |            XXXXXX             |
                    |            XX   XX            |
                    |            X     X      X     |
+-------------------+--------+   XXXXXXX     XXX    |
|                            |             XX   XX  |
|                            |            XX     XXX|
|    This is overlapping     |           XX         |
|                            |    X     XX          |
|                            |    XX   X            |
|                            |   XXXXXXX            |
+-------------------+--------+   X  XX              |
                    |           XX   XXX            |
                    |          XX      XX           |
                    |         XX        XX          |
                    |        XX          XX         |
                    |      XXX            X         |
                    +------X------------------------+

Would we want to be able to set opacity on a column? Or would this be something for the block inside the column?

Depends — we wouldn't want to set an opacity, but it would probably be nice to have an opacity slider for the background color that the column can have. But this is a bit of a mouthful, because we'd have to refactor the background color feature to use a pseudo element, or we can't easily do it. So this would be another cool feature to add after the fact.

Are there other useful features from other grid blocks that could be included as part of this?

There's one thing that would be lovely — also as a followup — the ability to "draw cells on a grid". Imagine you have a 12x12 grid of cells. You click and drag to draw a square — that's a new column/cell. Then you click and drag, overlap or not, that's another cell.

We don't currently consider height as part of this block, but we might need to start to do that, because you might want a layout such as this:

         +------------+------------+
         |            |            |
         |            |            |
+--------+-----+      |            |
|              |      |            |
| Sits on top  |      |            |
|              |      |            |
+--------+-----+      |            |
         |            |            |
         |            |            |
         | This column|            |
         | scales     |            |
         | vertically |            |
         |            |            |
         |            |            |
         |            |            |
         |            |            |
         |            |            |
         |            |            |
         |            |            |
         |            |            |
         |            |            |
         |            |            |
         |            |            |
         |            |            |
         |            |            |
         +------------+------------+

That is — you want the overlapping cell to sit "2 units from the top", but otherwise not be vertically centered. I don't know how best to do this, but it's something to noodle on.