Help Integrating Custom Add-On into Elementor.

[torchsmith]

Hello, I contacted analogwp via the website, and Krishna suggested I add this issue here for this. Perhaps I can receive some help with my custom Elementor add-on that I'm having troubles with.

The reason I reached out is because in StyleKits I know that you guys inject controls into Elementor, which is an issue I'm having.

The issue we are facing with this code is that in Elementor versions past 3.13.x there are what seems to be random times where the styles and classes being added by our injected controls don't show up on the frontend at all. The classes are not there, and the padding (being added by injected controls) is not in the CSS either. Maybe you guys have had the same issue, maybe not.

We can fix by doing a combination of saving the page and/or regenerating the CSS through Elementor > Tools, but the problem will show up soon after. We are not sure what we are doing wrong and have tried many avenues to no success. Everything has worked perfectly up to the latest 3.13.x version.

Here's the link to the plugin: https://wordpress.org/plugins/fundamento/

In my plugin I'm trying to inject custom controls to widgets based on what the theme tells the plugin to do.

As far as I can tell I'm following the Elementor documentation to the best of my abilities.

Here's an example of theme code:

if(is_plugin_active('fundamento/fundamento.php')) {
    function fundamento_init() {
        // create a new Fundamento instance
        $f = \Fundamento\Plugin::instance(); 

        // Register a new skin
        $f->register_skin([
            'name'       => 'Red',                                                      // The name of your new skin, as it will appear in Elementor
            'element'    => 'button',                                                    // The elementor element you are skinning
            'is_default' => true,                                                          // optional - should this skin be set by default on all elements of this type
            'css'        => get_stylesheet_directory_uri() . '/skins/button/red.css',   // optional - have Fundamento enqueue an extra css file
        ]);

        // Register a padding preset
        $f->register_padding([
            'name'       => 'Standard',                                                    // The name of your padding preset, as it will appear in Elementor
            'element'    => 'container',                                                     // The elementor element you are skinning
            'padding'    => '30px',                                                        // The value and unit of the amount of padding this preset should apply
            'is_default' => true,                                                          // optional - should this padding preset be set by default on all elements of this type
        ]);
    }
    add_action('elementor/init', 'fundamento_init');
}

The plugin code that implements this with Elementor can be found here (only ~200 lines of code):

https://plugins.trac.wordpress.org/browser/fundamento/trunk/includes/controls/skin-control.php https://plugins.trac.wordpress.org/browser/fundamento/trunk/includes/controls/padding-control.php

[torchsmith]

@lushkant at-ing you here so you see this.

[lushkant]

Hi there @torchsmith,

Please know that, this is beyond the scope of our available time to look into. What we can do is guide you towards how we fix issues that are similar or closely related to this.

At the first glance this looks like something of an implementation issue, which you can fix if you were to take a look at Elementor's own code instead of their documentation. We know from experience that most times the documentation at Elementor is pretty bad/outdated, due to the ever changing nature of their code. We have had our fair share of hair pulling for many years to get our features to work as expected.

You can also try/catching by following our code for registering editor controls and if it helps maybe copy bits and pieces from the code here to the best of your requirements.

Also for the point where you said it was working till v3.13.x, this is what we do when fixing issues that come with new updates, look at the Elementor's source code for the version it worked with and then compare the changes they brought in the next version when the issue started in your plugin. This generally is the easiest way for us to catch/fix incremental bugs. It might sound a bit too much to look into Elementor's source, but it is what it is shall you wish to continue this route.

Hope this helps :)

[torchsmith]

Thanks so much for the guidance @lushkant ! I really appreciate it.