Gutenberg columns aren't stacking on mobile

sage
1

Morning. First time with sage and enjoying the learning curve so far. I have a slight issue with the standard Gutenberg columns refusing to stack on mobile, regardless of screen width. I’ve searched online and, whilst this seemed to be an issue with Gutenberg before 6.0, it was apparently resolved after that.

Has anyone else come across this and resolved it? If so, could you point me in the right direction?

thanks

Rob

2

Is the toggle to stack blocks on mobile set on the columns block?

If it is, it sounds like a CSS issue. Do you have any custom CSS targeting wp-block-columns or wp-block-column? Is the default WordPress stylesheet being loaded?

3

Hi @thunderdw The toggle is set - either way, seems to make no difference. I have no custom css targeting wp-block-columns; this essentially a fresh installation of sage, soil, tailwind, ACF & sage directives (via @Log1x ).

I’m assuming that the default Wordpress styles are loading as much as they would do on a fresh sage install, but if I’m honest I’m not sure to what extent that is.

4

Ok so this is being pulled through:

.wp-block-columns.wp-container-3 {
   flex-wrap: nowrap;
}

Which you’d expect would be controlled by the toggle to over-ride to ‘wrap’ at mobile breakpoint, but nothing changes. I guess I could override somewhere, but that seems a bit blunt.

5

I tracked down this issue - the soil plugin was stopping these particular styles from loading, specifically with the ‘clean-up’ part.

Amending the CleanUpModule.php file as below:

  /**
     * Disable Gutenberg block library CSS.
     *
     * @var bool
     */
    'disable_gutenberg_block_css' => false,

Which resolved the problem, though as this is a direct amend to the plugin it doesn’t seem ideal, so any other suggestions are welcome.

6

Hi @RobDobsonNC,

The values you’ve changed in CleanUpModule.php are defaults, and can be set without modifying the plugin by passing a parameter to add_theme_support('soil', [...]).

It’s a bit hidden, but the Soil readme describes how to do this in detail. Expand the “Full annotated list of features and options” to see the full example.

7

@talss89 ah! Brilliant, thank you, I didn’t see that at all.

1 Like