Why does everything need to suffer for gutenberg support?

[ihitro]

I may be entirely wrong- feel free to dump it all out on me if i am. But i remember being able to style a gravity form quite well using:

• A filter to enable or disable default styles (layout/cosmetic)
• A series of fairly simple css selector with reasonably low specificity

This would transform a basic gravity form into something that fits reasonably well within a custom designed theme. But ever since the “orbital theme” update(s) this stuff has turned into the most insanely convoluted [expletive] imaginable.

The orbital theme seems like it’s been designed to adopt everything that makes gutenberg so utterly impenetrable with css.

I might be wrong, but it’s got 1000s of css variables, all of which have been placed at different nesting with high specificity… It’s selectors sometimes consist of 500+ character long boneheaded selector trees that not even chatgpt is able to decipher. Every form is littered with css variables and weird static values that need overwriting for it not to stir up parts of custom styling.

In the back of my head i’m still half convinced there’s some genius logic or reason behind all of the choices made here. That’s only because i’m used to so much better from Gravity forms and the updates seemed to actually make things easier (at least for a while). But i can only keep asking myself the question “who the [expletive] is this supposed to help, other than gutenberg users?”.

The gutenberg editor as far as i know, doesn’t even offer that many editable options… why did the entire form need to be turned into a variable and selector soup ball of chaos for the 10 options it offers to work?.

Can anyone guide me to what i might be missing, or at least confirm to me i’m not alone in finding this?

[Morgan_Kay (Morgan Kay (Gravity Forms))]

So, you aren’t entirely wrong, and you definitely aren’t alone in feeling this. The new paradigm of using CSS variables for everything certainly has a learning curve, especially for those of us who have been writing CSS for a long time, but once you experiment with it for a while, I think you’ll find that it’s very powerful and can make things easier in the long run.

Let me explain our logic behind creating this system, which we are calling the Theme Framework. This is the direction all of WordPress development is going (and you’ll find it becoming very common outside of WP as well). WP uses CSS variables for styling Gutenberg blocks, and as theme.json and Full-Site Editing become more widely-adopted, this is how all of WordPress theming is going to work. With Orbital, we wanted to build something future-proof. Eventually, as theme.json becomes the dominant way to build themes, we want Gravity Forms to be able to just grab variables from theme.json and automatically apply them to forms, so that forms will automatically and seamlessly inherit styles from the theme. Theme.json isn’t standardized enough for us to do that yet, but that’s the direction we’re planning to go. We also have a lot of other ideas about how we can use the Theme Framework to make designing forms really flexible.

Once you get used to working with CSS variables, I think you’ll find that it’s now even easier to style your forms. Instead of having to find the right selector, you can just find the right variable. So, for instance, if you want to change the hover color of the submit button, here is how you would do it the old way:

body .gform_wrapper .gform_footer input[type=submit]:hover {
border: 1px solid rgba(114,114,114,0.6);
background-color: #444444;
}

But with CSS variables, all you need to do is this:

.gform_wrapper {
	--gf-ctrl-btn-bg-color-hover-primary: #444444
}

There is definitely a learning curve here, and at first it seems daunting to find the right variable name in the inspector, but once you get the hang of it, I think you’ll find that this system is very graceful and flexible. (And I will be totally honest: I hated this when I first started using it, but I have become a convert.)

I will readily admit that our documentation is currently very poor, and we could make things a lot easier for you if we improved our documentation. We are actively working on that. We have a little bit of documentation about the gform_default_styles filter that you can use to change your form styles globally.

You are right that the Gutenberg block doesn’t provide nearly as many options as there are variables in the CSS. We didn’t want to add 98719238713 settings to the editor that would be overwhelming. In the future, we probably will add some more options to the Gutenberg block, or provide an interface for editing a form theme. We built Orbital, and the theme framework that powers it, with the goal of being able to do a lot of neat things with it in the future.

Feel free to ping me here if you have specific questions. I would be happy to help decipher some of the long selectors (we make extensive use of :where and :not selectors).

I hope this helps!

[Morgan_Kay (Morgan Kay (Gravity Forms))]

Thank you for sharing your frustration here. This has led to some productive discussions on our team about how we can better support people like you who are trying to learn the new system. We will add more documentation and resources soon!