Please split up the --widgets-spacing variable values introduced in 3.16.0 #23754
KingGrizzly
started this conversation in
Feature Request
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Prerequisites
What problem is your feature request going to solve? Please describe.
Elementor 3.16.0 introduces the ability to have column and row gap variables under Site Settings > Layout.
In Elementor 3.15.x, the global and container gap setting was just one value. For example, gap: 12px.
The CSS variable elementor created would look like:
elementor-element {
--gap: 12px;
}
In Elementor 3.16.x there is a column and row gap value. When this is outputted to CSS, it is rendered in CSS shorthand:
elementor-element {
--gap: 18px 12px;
}
This has broken at least 6 client sites because we were using variables for the gap settings, for example: --gap-300p where the associated CSS could use calc such as:
calc((--gap) * 3)
Effectively, 12px * 3 = 36px
This would allow us to use shorthand variables in our containers. --gap-400p, --gap-50p, etc.
Since Elementor has gone to two container gap values but writes the CSS using shorthand, this breaks variable support. For example, if the column gap was 12px and the row gap was 24px, the calc does something like:
calc((12px 24px) *3)
This makes no sense to the browser and doesn't work, breaking the layouts of every page.
Elementor needs to have two gap variables, something like:
--gap-column
--gap-row
The shorthand --gap approach with two values breaks continuity from the 3.15 approach and makes Elementor less dynamic.
Or, does anyone know how to pick out those two values separately?
Describe the solution you'd like
Elementor needs to have two gap variables, something like:
--gap-column
--gap-row
.some-class {
--name: calc(var(--gap-row) * .5); // 50% default row gap
--name: calc(var(--gap-column) * 2); // 200% default column gap
--name: calc(var(--gap-row) * 3); // 300% default row gap
}
Describe alternatives you've considered
No response
Additional context
No response
All reactions