Compatibilty with Gutenberg column margin ?

We have the same problem for a couple client websites. We chose the Hello Elementor theme for its simplicity and compatibility with Elementor and WordPress. We’ve laid out page sections using Columns in the WordPress Gutenberg Block Editor, with no gaps between the columns (left-right). But now there are gaps between the columns, the controls are gone, and we can’t figure out the CSS needed to close those gaps.

OTOH, it’s hard to believe this is the fault of the Hello theme. I’m about to clone the site and start deactivating plugins and switching themes to a default WP theme, to see what I can figure out. Hopefully will report back here.

• This reply was modified 6 months, 3 weeks ago by Mark Sund.

Indeed switching to the Twenty Twenty Four theme fixes this – and other missing options for Heading, Cover, and Column blocks! Also turning off all plugins doesn’t fix this when using Hello theme, and neither does deactivating some of the theme settings for various stylesheets. Only leaving Hello in favor of Twenty Twenty Four fixes it. Using Elementor Pro, PHP 8.2, SiteGround.

Elementor Pro tier 2 support says: “The Gutenberg settings you mentioned rely on a “theme.json” file with the “contentWidth” configuration. The Hello Elementor theme is meant to be a vanilla theme for Elementor, but please feel free to extend it by?creating a child theme of Hello Elementor?, and?creating your own theme.json file?.” They provided some additional help, but this confirms that Hello is missing important features for the Heading, Columns, and Cover blocks and probably more blocks too.

Eventually I copied the json file from the Twenty Twenty Four theme and removed a bunch of things to get what I want. Unless / until Elementor updates the theme with those Gutenberg settings, I think that is the only way.

After a bunch of reading and testing, here’s the theme.json file I came up with. It adds all the layout, sizing, spacing features of Gutenberg blocks, but keeps them neutral so to speak, no pre-sets, so they’re available for use. This is all that’s needed; this theme.json file goes in the theme’s folder…

{
“$schema”: “https://schemas.wp.org/trunk/theme.json”,
“version”: 2,
“settings”: {
“appearanceTools”: true,
“color”: { },
“layout”: { },
“spacing”: {
“blockGap”: true,
“units”: [“%”, “px”, “em”, “rem”, “vh”, “vw”]
},
“typography”: { },
“useRootPaddingAwareAlignments”: true
}
}

Caveat: I’m not a theme developer, so this theme.json file seems to be working for our current website in need, but your mileage may vary.

Hi,
Thanks for your reply !
I created a theme.json and customed it with the help of this page : https://fullsiteediting.com/lessons/theme-json-layout-and-spacing-options/
Have a nice day