Grid: Adjustments to look like @SaxonF's mockup

[noisysocks]

There are some details in @SaxonF's mockup, shared here that we haven't implemented.

grid-details.mp4

• Cells should have blue fill with dotted outline.
• Highlighted cells should have translucent fill and thicker blue outline.
• Insert a paragraph block straight away instead of opening the inserter.
• Drag and drop along multiple empty cells to insert a block. (Happy to punt this.)

[talldan]

Cells should have blue fill

I remember the Alignment Visualizer thing I tried to get working in the past had a similar design, but it really means the visualizer has to be behind/underneath the blocks, otherwise everything will have a blue tint. 😄

The way I did it was to render the Visualizer inline before the block. I found Popover wasn't great for this. There's some code in there that makes it render in a slot inside a block list. It's also maybe a bit overkill. I made an Underlay component: https://github.com/WordPress/gutenberg/pull/45056/files#diff-40fc8e42f36df5f6d2b0b4cd0bea83df25f1e63bc4ff4420a158862cf30197e1R22-R77

Also considering everything might be rendered in the iframed canvas, any components being used won't have any style as the css isn't available in the iframe (might be an issue for the appenders in particular). It'll mean reimplementing some styles. I think it's also worth being careful about the visualizer css leaking out into the canvas, so I used shadow dom to isolate everything: https://github.com/WordPress/gutenberg/pull/45056/files#diff-b5448b5925f4ca2afee57e57ab58a56150c293108098c5e0829b29cbb2b4a3b4R7-R19

If it's only a nice to have, I'd consider punting the blue background color, as it'll mean pretty big changes for quite a small aspect of the grid experience (though I'm not a designer, so I might not be the best to judge how important it is). Or maybe there's an easier way that I haven't considered 😄

[noisysocks]

Underlay! That's cool.

I'll move this item to be further down the priority list.

[talldan]

Are the designs here (with the blue color) mostly intended for manual mode? In the video it was mentioned "In this case the grid block is in manual mode ... the cells are blue to indicate they can be interacted with."

In auto mode the cells can't be interacted with, so perhaps there's less emphasis (blue fill) of the cells in auto mode.

Also something I've noticed in use is there isn't a great deal of visual distinction between the two modes, yet they work so differently, so I think it might be helpful to users if there were more visual distinction to provide cues for how to interact with the different modes.

[talldan]

I tried a little experiment here to see what issues there'd be - #64321

[noisysocks]

Good question, I'm not sure if Saxon intended the modes to be different. It's not a bad idea though to only have the blue tint in Manual mode. Like you say, cells aren't interactive in Auto mode.

[talldan]

Good question, I'm not sure if Saxon intended the modes to be different. It's not a bad idea though to only have the blue tint in Manual mode. Like you say, cells aren't interactive in Auto mode.

I missed that this is mentioned later in the video (around 2:38), yep they are grey instead of blue in auto mode 😄

[talldan]

Something I think we should be careful of is creating an inconsistency with other similar UI in the editor. For example columns and row have similar outlined indicators (there might also be some other blocks):

So we might want to either make manual grid match, or bring some simple style changes over to those other blocks. It'd be great to get some thoughts from @WordPress/gutenberg-design on that (the manual mode is shown from around 2:38 in the above video. The main differences I see is a grey-ish background and a fainter dotted outline). Grid being a lot busier with more cells is a factor to consider. Here's a screenshot from the video:

[richtabor]

I'm all for reusing existing UI styles when possible. Colors and border styles aren't so important for grid at the moment; ensuring clarity on the paradigm and cleaning up the UX is.