Add alignment controls to grid layout

[tellthemachines]

Flex layouts such as used in Row and Stack blocks come with justification and alignment options for their content:

It would be good if Grid had something similar. The implementation should be very much like flex, the main thing I guess is to determine whether they should be toolbar or sidebar controls (flex is a bit awkward right now in that it has a mix of both).

Cc @luminuu who asked about this in a hallway hangout. Feel free to add to the issue if I left anything out!

[luminuu]

Thanks for opening the issue! I think this has to be separted into two parts: aligning the contents of the grid with justify-items and align-items, as well as aligning the rows and columns of the grid with justify-content and align-content.

To go even further, I think it should also be discussed if a child element can be positioned separately with justify-self and align-self.

[tellthemachines]

as well as aligning the rows and columns of the grid with justify-content and align-content

I don't think justify-content will work with our current grid setup, because in both manual and auto the grid tracks occupy the full width of their container. align-content could be used in conjunction with min-height on a Grid block, but I'm not sure there's a use case for it that wouldn't also be covered by separating gap controls to be able to set vertical and horizontal gap to different values, or using padding. Did you have any specific designs in mind?

I think it should also be discussed if a child element can be positioned separately with justify-self and align-self.

This I think would be useful and worth looking into! It could be added to the child controls.

[tellthemachines]

@WordPress/gutenberg-design would you folks be able to help with design for these controls? We're looking at:

• For blocks with Grid layout: justification and alignment controls, similar to the Flex layout ones (can we just reuse those? Will the layout panel look too busy with these in addition to the current Grid controls? It might be time to look into LayoutPanel: Switch to using the ToolsPanel #44560)

• For child blocks of a Grid layout: self-justification and self-alignment controls. I think it would make sense for these to be close to the current child layout controls (Column and Row span for Grids) but semantically it's weird to have justification and alignment under Dimensions. This means it's probably time to give consideration to something like Unify layout-related controls under the same panel #47902.

[richtabor]

I don’t think we should not wait on #44560 or #47902.

Could the matrix potentially work here, in the toolbar? As a way to change justification and align together.

[jasmussen]

The missing piece in the matrix is the space-between properties, though perhaps we can still start with just the basic matrix without space-between, because space-between is both complex (therefore secondary and possibly a thing for the inspector), and could potentially be built into the block spacing control itself, to benefit both grid and flex based blocks.