If, like me, you are using a CSS Framework to manage the CSS classes you use for website development with Elementor, then you have a large library of global classes with associated variables. Is there a way of importing these CSS classes into the new Editor v4 without having to laboriously type them all in?

YES! because I have created a tool with a lot of help from ChatGPT. But there are limitations and I explain here what they are so you can modify your CSS library to make the import easier.

Before I go any further let me give you the health warnings if you use this tool.

• Only do so in a development environment.
• Use a plugin like WP Reset so you can recreate the database if things go badly wrong
• It’s designed to be used at the very start of development – before you have created any classes (because it will overwrite them).
• Don’t try your entire library in one go – try say 20 classes at a time and see if you get problems. If there is a problem you will either get no classes in the class manager or it will hang when trying to publish a page.
• I have provided some simple validation checking of the JSON but also provided the current JSON schemas which you can use to validate the output using an online tool before it is written to the database.

Do this first

Once you have enabled the Editor v4, create a test page and edit it in Elementor. Add the new Flex Box and create a new class called “test”. Then under Typography select color and create a color variable called test and assign it a color like #FFFFFF. This will create the two database rows that the import tool will update. Both the test class and the test variable can be deleted using the Reset button in the tool.

Now delete the test page you created – You will get in a mess otherwise when you next open it as it will be looking for the test class which you deleted.

Editor v4 Limitations

Editor v4 imposes limitations even if you try to enter classes manually.

• You can’t use class names that contain # space or dot. Let that sink in for a moment. It means these examples can’t be imported: #mybtn{}, link a{}, .icon1 .icon2{}
• You can’t currently create classes that target an element like body, h1 etc (thought this will almost certainly change)
• You can’t use pseudo elements like ::before and ::after (though this again may change)
• There is a limit of 50 classes. This looks like an artificial restriction probably to maintain performance. I certainly hope this will change.

Import Tool Limitations

The tool that I created also imposes limitations – largely around the shorthand properties that can have one of more values eg. border: solid 1px #cccccc; So the first rule is

replace shorthand properties by using the relevant properties

You will have to amend shorthand properties like border to use the appropriate properties; border-style, border-width and border-color. The best approach is to stick with

One property, one value

No cheating by using a variable that contains multiple values.

There are two exceptions which are supported:

background-image: linear-gradient(180deg, rgb(0,0,0) 0%,rgb(255,255,255) 100%);

box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5);

Yes, variables are supported and they probably litter your classes. You will need to

Import variables first

Your variables, like your classes, get stored with a unique id. Variables that you use in class properties will be replaced in the JSON output with the unique identifier, hence the need to import variables first. If there is no means in Editor v4 to create your variable, it will still work if you put it in Additional CSS.

Hover, focus and active are supported provided they immediately follow the class

Remove -webkit properties

I have also found that you don’t need to add the -webkit properties to classes, the Elementor Editor will do this for you when it generates the CSS to view the page. You will need to remove them.

Media queries are not supported

I am not sure if there is a need to support media queries – I don’t have any in my CSS library so at the moment they are unsupported. The way that Editor v4 stores media queries make media queries particularly tricky to implement.

Watch out for quirks

Editor v4 is still in beta so there are bugs and quirks.

For example

text-decoration: underline is recognised but

text-decoration-line: underline is not.

Conclusion

All that said I have been able to import over 100 classes in just a few minutes. The best part is – they are in alphabetical order.