Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grid Experiments: Testing feedback #62928

Closed
ndiego opened this issue Jun 27, 2024 · 7 comments
Closed

Grid Experiments: Testing feedback #62928

ndiego opened this issue Jun 27, 2024 · 7 comments
Labels
[Block] Group Affects the Group Block [Feature] Layout Layout block support, its UI controls, and style output. [Type] Feedback Issues that relate purely to feedback on a feature that isn't necessarily actionable

Comments

@ndiego
Copy link
Member

ndiego commented Jun 27, 2024

Here's some feedback from my testing of the new Grid experiments introduced in #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.
image 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
image image
  1. The row/column indicators overlap in tablet/mobile mode
image
  1. While I know this will be tricky, we really need some sort of mobile control for Manual mode.

Video Walkthrough

grid-experiments-testing.mp4

cc @tellthemachines @noisysocks @jasmussen

@ndiego ndiego added [Type] Feedback Issues that relate purely to feedback on a feature that isn't necessarily actionable [Block] Group Affects the Group Block labels Jun 27, 2024
@tellthemachines
Copy link
Contributor

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
Copy link
Contributor

tellthemachines commented Jun 28, 2024

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:

Screenshot 2024-06-28 at 2 35 05 PM

@tellthemachines tellthemachines added the [Feature] Layout Layout block support, its UI controls, and style output. label Jun 28, 2024
@tellthemachines
Copy link
Contributor

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:

Screenshot 2024-06-28 at 3 01 33 PM

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
Copy link
Member Author

ndiego commented Jun 28, 2024

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:

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
Copy link
Contributor

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
Copy link
Contributor

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:

Screenshot 2024-07-02 at 10 28 07 AM Screenshot 2024-07-02 at 10 46 02 AM

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:

Screenshot 2024-07-02 at 10 41 10 AM Screenshot 2024-07-02 at 10 44 27 AM

@tellthemachines
Copy link
Contributor

Thanks for the feedback folks! I'm going to go ahead and close this issue now, as the reported bugs have been addressed, except for the visualizer being visible outside of the editor canvas. There's now a dedicated issue for that one, as it also overlaps the sidebars in mobile: #63275.

The toolbar situation has been somewhat improved in #63394, though it can still benefit from further improvement, but that's not so much a grid specific issue so I think it can be addressed separately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Group Affects the Group Block [Feature] Layout Layout block support, its UI controls, and style output. [Type] Feedback Issues that relate purely to feedback on a feature that isn't necessarily actionable
Projects
None yet
Development

No branches or pull requests

3 participants