Try columns with grid and CSS vars

[tellthemachines]

Description

This is a proposal for drastically simplifying Columns/Column blocks styling with CSS grid and variables.

The main reason for this is getting rid of the need to set inline styles in blocks as much as possible, because inline styles break the resizable editor (#19082).

This work will incidentally also fix #18416 and #19112 / #19515.

• Column width is now set in the columns block with CSS grid, but each column still computes its own width and may reset the width of the adjacent columns if total column widths exceed 100%.

• Columns without an explicit width are set to 1fr, so remaining width is distributed equally among all columns without explicit widths.

• I have added a basic flexbox fallback for IE, because this grid implementation depends on CSS variables to work. This means that IE users won't be able to preview columns with custom widths.

• This setup is much easier to override by themes, because it doesn't depend as much on inline styles. E.g. themes can now cleanly override the grid-gap width with a single line of code.

How has this been tested?

Tested across browsers. IE maintains basic functionality.

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[aristath]

hm.. It could also be as simple as

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

That would simplify the code a lot and there would be no need for the css-var or calculating how many columns there are etc.

[tellthemachines]

hm.. It could also be as simple as

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

@aristath I'm afraid we can't use auto-fit or auto-fill here because we have to respect both the user-specified number of columns and the custom column widths, if they are set.

[talldan]

This seems promising! I like the fact that unset columns mostly stay proportional.

In testing I had a few observations (tested using Twenty Nineteen):

• I selected the layout with two equal columns and then tried setting the first to 50%. I would've expected there to be no change, but when explicitly setting the value to 50% the first column seems to be larger than the second. I wonder if the gaps between columns needs to be taken into account in the calculation.
• Columns can expand beyond the block boundaries, particularly when there are 3 or more columns and one is set to a large size. I don't think this was possible before, or it wasn't as easy to achieve.
• When setting one column width a value set in other columns can become unset. This seems to be the case when the total adds up to over 100%. This was particularly noticeable the more columns there are. An example is with four columns, if I set the first to 90% and then accidentally drag the second to over 10%, the first suddenly snaps back to being small, which is unexpected.

[draganescu]

This works good! 👏 Added just some minor comments.

[draganescu]

When is this visible?

[tellthemachines]

This should be visible when a column has no explicit width set.

[draganescu]

I selected the layout with two equal columns and then tried setting the first to 50%. I would've expected there to be no change, but when explicitly setting the value to 50% the first column seems to be larger than the second. I wonder if the gaps between columns needs to be taken into account in the calculation.

@talldan I tried this as well and the sizes remained the same. Although there is some flicker and i guess there remains an impression of the columns not being equal afterwards.

Also can we fix this weird state when the number next to the range control is empty?

[tellthemachines]

@talldan I have updated this to use fr units instead of %, because fr take into account the grid-gap so there should be no more weirdness in the column sizing 😅
I also changed the logic slightly to deal better with legacy column situations, where total sum of widths might exceed 100%. Exceeding 100% should no longer be possible with the changes in this PR.

[talldan]

@tellthemachines Hmm, I seem to end up with really narrow columns when adding the block for some reason:

[tellthemachines]

Hmm, I seem to end up with really narrow columns when adding the block for some reason:

There were auto-margins on the inner columns. I've removed them and made some further margin-related tweaks. Everything should look as before now 😄

[aduth]

Noting that I remarked at #18416 (comment) with some concerns about reimplementing Columns using Grid.

[tellthemachines]

Closing this PR as it will require a substantial re-write to fit with the recent changes to the columns block.