Add support for non-equal width columns

[paulwilde]

Now that nested blocks are implemented (#3745) one limitation is that only equal width columns are supported. Having a resize control between each column that you can drag would allow for more complex grid options such as an image taking up 1/3, with the 2/3 reserved for complimentary text.

It makes sense that the resize control would snap between 6 column grid points rather than allowing random percentages. This would then allow the grid to be styled via classes instead of having inline styles dictate the width (See #2862).

[StaggerLeee]

They could save themselves a lot of time, and nerves, by integrating Bootstrap library in the core.

This library is done by huge community of skilled developers, to guarantee it will work fine in all browsers. Core team can relax a bit, enjoy and let others do their work.

Wont mention what other nice things they win by using Bootstrap. Only Modal Bootstrap JS in back-end would be worth in gold. Other plugins could use Bootstrap things well too.

[paulwilde]

Whilst I somewhat agree on using Bootstrap (At least as far as the grid is concerned), I don't see that happening, and that's fine.

I at least hope that the final HTML output for column blocks can be modified, as I do use Bootstrap's grid myself and don't want to add additional CSS on the frontend in order to support a secondary grid.

[ZebulanStanphill]

For inspiration on how to implement non-equal width columns, just look at how the various page builders like Beaver Builder, Divi, Elementor, and Visual Composer do it.

Notably, I know that Beaver Builder and Elementor both allow for any-width columns that are not limited to any grid at all, while still being responsive and being able to snap back to a clean 3/4+1/4 or 2/3+1/3 combination if desired.

[karmatosed]

I think right now this falls in the Customizer focus. I am closing this for the editor but assigning it that milestone as it very much will get considered there. If we have time we could add this in, however I want to ensure it gets considered in that also.

[mrpritchett]

This is no way should be in the customizer. This is a very BASIC feature needed in any block based content editor. Please reopen.

[ramizmanked]

Recently I came across a client requirement where I needed to implement a variable column block. Then I decided to play around using custom block. Finally, I ended up with kind of variable width block that can be found as a plugin on WordPress Plugins directory. Currently, the plugin is not responsive and supports the only paragraph. I am planning to upgrade it so it will allow other blocks to be added using InnerBlocks. I think such kind of functionality can be implemented in core Gutenberg as well. Any feedback(s) are much appreciated. What is your thought? @karmatosed @mtias

[lkraav]

Nice plugin find @ramizmanked

From a systematic and "high level result" point of view, these "desktop-only" width sliders make little sense, as in reality one has to cover columns/content layout for a specific set of the devices spectrum (and/or breakpoints), in harmony with the active theme.

Customizer has a responsive preview framework baked in (ever notice the small device icons at the bottom of the Customizer bar?).

I've started to question whether it's possible to achieve a quality result without something similar, or the same thing, living directly inside Gutenberg.