Paragraph: Add CSS columns

[scruffian]

It would help readability of paragraphs on wide screens if the text were to go to more than one column. This can be achieve using the css columns property. It would look like this:

I think this could be enabled/disabled with a toggle. On wider screens the number of columns would increase, and on mobile we wouldn't have any.

[aristath]

This can already be accomplished in themes using block-styles. The block-style adds the class, and then the theme can simply style that. I don't think we need separate controls etc on the paragraph block, this is something that will need to be considered on the theme level

[scruffian]

This feels like something that lots of themes might want to implement, so I'd rather not move it to the theme as we'll need to write the same implementation in many themes. I also think it's something that users will want to customize which is why I'd rather see it as an option in the block.

[ntsekouras]

Related: https://github.com/WordPress/gutenberg/issues/25459

[kjellr]

This can already be accomplished in themes using block-styles.

That's true, but I could see the benefit to having additional controls beyond that: a way to adjust the number of columns, and a checkbox for whether or not the columns should disappear on mobile. Those options aren't really suited well to a block style.

[aristath]

Did we not use to have a text-columns block? AFAIR it was later abstracted and converted to the more generic columns block. I understand there's a difference between using the CSS columns property and actually having 2 columns, but usability-wise I don't think it will make much of a difference. If the users wants 2 columns, they just add 2 columns... There's no need for a columns control in paragraphs when we already have that functionality in the columns block. However, if the user wants auto-scaling columns, then things change. I can definitely imagine a newspaper-like or heavy text-based article benefiting from that... But in that case it wouldn't define the number of columns, they can already do that by adding columns and splitting their text in separate columns. They could however define the column-width. So something like this would work beautifully in this case:

p.is-style-columns {
  column-gap: 2em;
  column-width: 15em;
  column-rule: 1px solid rgba(0,0,0,.1);
}

It's responsive, works for all content and viewports and it's pretty simple to implement. So then the question becomes do we want to allow customizing the column-width? If yes, then we add a control for the width. If not, then this can be a block-style. And if a block-style, then 15em is a pretty reasonable middle-ground for the columns-width :wink:

[scruffian]

Can we apply a block style to all blocks using theme.json?

[aristath]

I don't think so... but having a defaultStyle prop in theme.json would be pretty amazing. Perhaps we should create a new issue for that?