Add alignment controls to grid layout

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.

https://wordpress.org/gutenberg/

Other

10.5k stars 4.19k forks source link

Add alignment controls to grid layout #62895

Open tellthemachines opened 4 months ago

tellthemachines commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

@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 #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 #47902.

richtabor commented 3 months ago

I don’t think we should not wait on https://github.com/WordPress/gutenberg/issues/44560 or https://github.com/WordPress/gutenberg/issues/47902.

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