Grid System for Gutenberg #16271
Currently, Gutenberg does not include a visual grid for those site/page builders who wish to align their layouts perfectly. Our system for resizing items is arbitrary and imperfect.
A grid system can help resolve this.
With the excitement around snapping images to a grid which was demoed at WCEU 2019 in Matt's keynote, let's get this conversation started.
While many of these questions can be worked out in individual PRs as we begin working a grid into the editor, I'd like to begin discussions here for now. Maybe we can work on an MVP, or version 1 for now to get into the plugin for testing.
Two things I think need to be considered are grids within a block that applies to its inner blocks only, plus horizontal grid lines. So this needs a flexible enough API for plugins and themes to customize the grids for snapping. Example use case for me would be the AMP plugin's AMP Stories editor, which could make use of this.
Yes, absolutely. Although, this brings up having multiple grids and maybe that's also an option to allow declaring of multiples.
Yes, and it should be documented to encourage people to easily be able to adapt.
I think restructuring is a massive step. Perhaps starting with what there is right now and seeing potential restructure as an iteration is a better-stepped process here.
By default probably, but having gutters as an option could be a case. Most grids would have gutters.
I think snapping to grid feels like an option or a step after having a grid. I see a great need for it and want, but like with most image software grid snapping is on option, I think it should be for Gutenberg. We may decide it's an option on by default though, I can see a strong case for that.
I think this is the 'fun' bit. Starting with what we have as a base, I think then exploring what other grids feel or are like is a great exercise in experimentation.
I think allowing it to show/hide is essential. As mentioned earlier I also think there could be a case for other options to be added in. I go back to think about how Sketch and other applications do this.
It would be great to maybe step away for a moment and do some thinking about what applications offer this. What features do they have and what can we learn?