column-gap setting in flex is missing… (maybe?)

Author Posts

nick

I am new when it comes to flex, and not as polished as other CSS settings, so if I’m wrong, please excuse my ignorance…

Gutenberg 12.4.0 which came out 2 days ago, it forced spacing between each column in their Core Columns block. A lot of my designs (and patterns) require no such spacing. In the past, these could easily be solved with margin/padding settings, but not this time. I know that recently the core containers are being changed from block types to flex. So I tried to fix the issue with Microthemer, but I could not find a setting to do so. So I investigated the issue with the Chrome inspector tool, and found out that, Gutenberg 12.4.0 is adding a css rule to the core Columns block using column-gap.

Now, manually resetting this space (gap between each column) was easy at this point. I also noticed that I can add blockGap support in the theme.json file, and I can control the spacing within Gutenberg. Note that, by adding support to this type of spacing only works when the Gutenberg plugin is active, otherwise even with WP 5.9 RC3 the Spacing setting does not appear.

So my question after all this is: Is there such a setting in Microthemer that I missed (in that case I need glasses), or this type of a control is missing, and it would be a good idea to have one?

I don’t think there is a way to activate the columnGap setting in Gutenerg via php, and this can only be done via the theme.jcon file.

Also, a warning to all: At least with my themes, testing with WP 5.9.x some things either stop working or not working well, adding an appropriate theme.json file even to non FSE themes fixed all the issues… So test your themes/sites and look to fix any issues you encounter (theme.json does all the tricks for me), otherwise you might be surprised come January 25, 2022. They say with 5.9 nothing will change for non FSE themes, but that is a flat out lie, just like their initial lie from 3-4 years ago, when they insisted that Gutenberg is not a page builder.

Thanks,
Nick.


Sebastian

Hey Nick,

Good to hear from you. I think browser support for column-gap with flex layouts wasn’t great when I initially added support for flexbox. It looks pretty good now. And so I will add this very soon.

In the meantime, the column-gap property is actually available as part of the grid options. So you can set it there for now. I don’t mind repeating it in flex though, I’ve done that with the display property in the flex and grid groups.

Cheers,
Sebastian


Sebastian

P.S. I got a bounceback from the email that should have notified you about my reply in this forum. Might be worth sending yourself a test email…


nick

Yeah, Yahoo email sometimes sucks… WP.org said that yahoo emails get bounced too, I don’t know why.

Anyway, it was strange that I got no email reply from you, as you always do…

Thanks for your reply, which makes me happy ! Keep up the good work.


Sebastian

Ah OK, that does suck. But I’m glad you’re aware of the issue. I will let you know once I’ve added the extra column-gap field.

You must login or register to reply to this topic.