Regression: Columns CSS affects readability in WP 6.0

[peterwilsoncc]

Description

This was reported on WordPress trac by the WordPress.org user marctison75. The original ticket was WP#55703.

The first part of the issue with the narrow gap seems more important to my mind.

I've tested multiple sites that I managed with WordPress 6.0 RC, and I see that it changes and breaks the layout of the columns block on the front-end.

The gutter between the columns is now very small.

The columns are now stacked on tablet while the setting says "Stack on mobile". With WP 5.9, the columns are 50% 50% on tablet (iPad portrait 768px). With WP 6.0 they are 100% which breaks the design of my websites.

You can reproduce this issue with the Twenty Twenty-One or the Twenty Twenty theme, Kadence, and Blocksy.

With Twenty Twenty-Two, the gutter stays the same, but there is the same issue with the columns stacking on tablet.

Step-by-step reproduction instructions

Non provided in the original ticket but I'm guessing

1. Install WP 5.9 with 2020 default theme
2. Create some content with columns
3. Update to WP 6.0 RC
4. Observe changes to columns.

Screenshots, screen recording, code snippet

See above.

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

I have confirmed. This was introduced a long time ago in Gutenberg: #37436. If a theme supports blockGap then the gap between columns will default to the blockGap setting in theme.json. Otherwise, it defaults to 0.5em. It used to default to 2em.

[ramonjd]

Hi!

Just to add some context.

#37436 was a necessary step to avoid bugs associated with #37360 (Avoid using CSS variables for block gap styles).

#37360 removed the use of --wp--style--block-gap for all styles other than top-level global styles (styles in the body tag).

0.5em currently the fallback for all blocks that have layout support. The intention was for such blocks to have blockGap support so that the gap can be modified in the editor.

This doesn't do much to help classic themes.

The obvious approach is to bump 0.5em to 2em in layout, but this would affect all blocks that use layout such as the Group, Navigation and Social Icons blocks.

Perhaps our best bet here is to fix a long-standing bug that prevents us from defining blockGap at the block-level.

It's something that was needed to be fixed after #37360. Various people have been trying different ways of achieving it.

So right now, for block themes, this theme.json style doesn't do anything:

	"styles": {
		"blocks": {
			"core/column": {
				"spacing": {
					"blockGap": "2em"
				}
			}
		}
	}

Once we get that working, I think the general approach would be to define a default blockGap value for the Columns block (let's set it back to 2em). That would fix the regression in block themes.

As for classic themes, I'm not sure yet.

This PR:

• Make global styles available to all themes #34334

allowed presets to be printed out in the source for classic themes.

But blockGap is not among them, unless we make a change to add it or alternatively settings.layout values to presets (and add a layout property of blockGap).

In the meantime, we could restore the default in the theme style sheets (for every one over in the themes directory)

.wp-block-columns {
	gap: 2em;
}

That is something we could do straight away. What do folks think?

cc @aaronrobertshaw and @andrewserong who helped write this comment

[ndiego]

Thanks for the context @ramonjd. I think the easiest and quickest fix is to implement the CSS change that you mentioned. Plus those themes already have massive stylesheets.

However, I just tested with Twenty Twenty One and simply using the class .wp-block-columns does not appear to be specific enough to override the container styles. This should work though:

div.wp-block-columns {
	gap: 2em;
}

[ramonjd]

I just tested with Twenty Twenty One and simply using the class .wp-block-columns does not appear to be specific enough to override the container styles.

Thanks for testing that out @ndiego ! 🙇

I feared we'd have to get specific 😄 but it looks like a pretty safe change here.

I'll add to/test with the other themes over at https://github.com/WordPress/wordpress-develop and if it seems to be kosher will reopen the trac ticket WP#55703

[peterwilsoncc]

In the meantime, we could restore the default in the theme style sheets (for every one over in the themes directory)

.wp-block-columns {
	gap: 2em;
}

That is something we could do straight away. What do folks think?

I'm not overly keen on modifying the default themes as a solution to this.

It still leaves the regression for the majority of sites, those that are using custom themes.

[ramonjd]

I'm not overly keen on modifying the default themes as a solution to this.

It still leaves the regression for the majority of sites, those that are using custom themes.

All good. I'm looking at an alternative.

Since the change in #34439, there has been a fallback value for the -wp--style--block-gap CSS variable for themes that do "not register its own editor style, a theme.json file, or has toggled off "Use theme styles" in preferences."

--wp--style--block-gap: 2em;

But there is no corresponding default -wp--style--block-gap value for block themes.

Rather we've opted to hardcode 0.5em into places such as the layout implementation.

Why don't we:

1. define a default value of -wp--style--block-gap: 0.5em in the common block library styles, which are loaded across the editor and frontend
2. Remove the hardcoded 0.5em in Gutenberg and refer only to var( --wp--style--block-gap ).
3. Then, define --wp--style--block-gap as we wish in the Columns block styles for the frontend and editor.

I think points 1 and 2 should be done anyway.

For example:

:root {
	...
	// Global default for block gap.
	--wp--style--block-gap: 0.5em;
}

[...swap 0.5em with var( --wp--style--block-gap ) ⏲️ ]

And, in columns/styles.scss and editor.scss:

.wp-block-columns {
        ...
        /* The Columns block should have a default block gap of 2em. */
	--wp--style--block-gap: 2em;

I'm still testing, but it seems to work fine.

[andrewserong]

I'm still testing, but it seems to work fine.

If we do that change, would that then set the fallback for all children of the Columns block to 2em, too, which would mean that social icons blocks within the column would then have a fallback of 2em? From memory, I think that was part of the reason for #37360 to resolve #36521.

[ramonjd]

which would mean that social icons blocks within the column would then have a fallback of 2em?

That's the catch. Getting around inheritance. Looking at it now, but looks pretty glum.