Grid Experiments: Testing feedback

[ndiego]

Here's some feedback from my testing of the new Grid experiments introduced in https://github.com/WordPress/gutenberg/pull/61025. The video has the full walkthrough, but here are the highlights:

1. Overall, looks pretty good. I was skeptical about overlapping in Manual mode, but it's more intuitive than I expected.
2. There is an issue where all the row heights increase when the item in one row becomes taller. Seems like all rows are locked into being the same height, which is not what you would expect.

3. Overlapping Image blocks does not work as expected in the Editor. The Image appears above the text content when it should be below. The front end is fine.

Editor	Frontend

5. The row/column indicators overlap in tablet/mobile mode

   

6. While I know this will be tricky, we really need some sort of mobile control for Manual mode.

Video Walkthrough

https://github.com/WordPress/gutenberg/assets/4832319/d8821f8a-cbea-47a2-a41c-c7599dcaa09d

cc @tellthemachines @noisysocks @jasmussen

[tellthemachines]

Thanks for giving this a test run @ndiego!

There is an issue where all the row heights increase when the item in one row becomes taller. Seems like all rows are locked into being the same height, which is not what you would expect.

Hmm, were you expecting more of a masonry layout? There seems to be some appetite for that, so it would be good to consider adding it as an option. The main technical obstacle is that it's not yet possible to implement with CSS only, and having to add JS in the front end it might make more sense to add it to specific blocks as interactivity, rather than a layout type.

I wouldn't expect a grid to behave like masonry, but more like a table, in which the tallest cell will determine the height of the rest of the row. That said, it might be good to look into a way of setting max/min row height! I think in this case both max and min settings could be useful.

Overlapping Image blocks does not work as expected in the Editor. The Image appears above the text content when it should be below. The front end is fine.

This sounds like a bug; front end and editor should match. I'll look into it!

The row/column indicators overlap in tablet/mobile mode

Oh well spotted! I suspect that's due to the visualizer being a popover outside the editor canvas. Adding it to the bug list 😅

While I know this will be tricky, we really need some sort of mobile control for Manual mode.

I'm looking into combining the Columns and Minimum column width settings to make responsive grids with a max column number in #62777, which hopefully will solve that problem!

[tellthemachines]

There is an issue where all the row heights increase when the item in one row becomes taller

Oh wait I think I see what you mean! Every row is the same height, correct?

Update: I pushed a fix to #62777. In that PR, rows are now the height of their tallest block:

[tellthemachines]

Overlapping Image blocks does not work as expected in the Editor. The Image appears above the text content when it should be below. The front end is fine.

This sounds like a bug; front end and editor should match. I'll look into it!

I'm struggling to reproduce this; resizing the right hand text block to the left always results in it overlapping the image:

Might you at any point have moved the blocks around in list view? That would have reordered the markup without changing their visual position, so it could result in a bug like that. (The list view behaviour is on the list of things to be worked on btw!)

[ndiego]

Oh wait I think I see what you mean! Every row is the same height, correct? Update: I pushed a fix to https://github.com/WordPress/gutenberg/pull/62777. In that PR, rows are now the height of their tallest block:

Yeah exactly, not masonry. Thanks!

Might you at any point have moved the blocks around in list view? That would have reordered the markup without changing their visual position, so it could result in a bug like that.

Yeah, that must have been what happened.

[jasmussen]

Casting a broader net here, @WordPress/gutenberg-design. Note that we do want mobile controls, but we want to build that in a generic-for-all-blocks way, not unique to this block. It's been time for a while, and I'm happy to work on it, just important we don't build more per-block code.

Separately, that text-labels-only mode for the block toolbar, do we have a tracking issue for legibility of those strings yet? I doubt half of that is legible on mobile.

[tellthemachines]

Note that we do want mobile controls, but we want to build that in a generic-for-all-blocks way, not unique to this block.

If we allow users to set both minimum column width and a max column count in either mode, they can control the point at which the grid columns reflow. This won't replace mobile controls altogether, but until we have those controls (and I agree they should be generic, not block-specific), we can add a little baseline responsive behaviour to grid by taking advantage of its unique properties.

Separately, that text-labels-only mode for the block toolbar, do we have a tracking issue for legibility of those strings yet? I doubt half of that is legible on mobile.

It's actually not terrible 😅 because the toolbar scrolls, so all buttons are reachable:

The main things you can't do in mobile mode are selecting the parent block and dragging and dropping. #25237 could potentially help with the drag and drop but that's unrelated to labels.

The text label toolbar is actually worse on smaller desktop screens, because it can be partially hidden so its right hand side becomes inaccessible unless you're using the keyboard, in which case you can reach the Options button but it looks really broken: