Gutenberg: Column Widths

Created on 2 Nov 2017  ·  3Comments  ·  Source: WordPress/gutenberg

I like the column feature, but I think it's way too basic. It only lets you set up columns of equal widths. So if I have 2 columns, each one would be 50% width, and if I had 3 each one would be 33%.

But I want to be able to have two columns, one of which is 33% and the other of which is 66%. The only way I've found to set this up is to go under Edit HTML and add width="33%", or whatever width you want, to the <div> tags of each column. This produces what I want, but I think Gutenberg should offer the ability to control the widths of the columns either by entering percentage numbers in the Block Settings, or by dragging a line between the two columns the way you would in Excel.

Another problem with using the Edit HTML method I described (and maybe this is a separate issue that should have its own post?) is that, if you have multiple consecutive blocks that use HTML, even if you've played with the HTML for completely different reasons and in completely different ways, Gutenberg will have combined both of them into one single block. The only way I've found to prevent this is by splitting the blocks up with a divider block between them, but I don't want a divider line, just an empty line.

Issue Overview

Steps to Reproduce (for bugs)



1.
2.
3.
4.

Expected Behavior


Current Behavior


Possible Solution


Related Issues and/or PRs

Todos

  • [ ] Tests
  • [ ] Documentation

Most helpful comment

Yes, improvements to Columns is a must to compete against existing page builders.

Columns must also be able to nest other content within them, such as other blocks.

All 3 comments

Yes, improvements to Columns is a must to compete against existing page builders.

Columns must also be able to nest other content within them, such as other blocks.

Columns certainly need to be able to add other blocks to them, as just text isn't too useful. This would align with other page builders, and allow a gird like layout

With nesting UI coming soon we'd be able to tackle this more in depth: see #219. Closing as that issue should hold everything related to columns.

Was this page helpful?
0 / 5 - 0 ratings