Detecting when Divi Builder is Activated / Deactivated

In my earlier post, I described how to detect if the Divi Builder is in use on a given post / page edit screen. But what if you want to actually detect when the user enables / disables Divi Builder editor? It can be done as in the following way.

Adding jQuery to the Post / Page Edit Screen

First we need a way to add in our jQuery code to the post / page edit screen. We can do so using the following construct:

function dfd_example() { ?>
<script>
jQuery(function($){	
    // Our jQuery code will go here
});
</script>
<?php
}
add_action('admin_head-post.php', 'dfd_example');
add_action('admin_head-post-new.php', 'dfd_example');

This uses the WordPress hooks "admin_head-post.php" and "admin_head-post-new.php" to call our dfd_example() function whenever the post / page edit screen or new post / page screen is displayed. Our function, when called, outputs a script tag within the html head and then starts a jQuery code block.

Triggering an Event when the Divi Builder is Enabled

Next, we will use the following jQuery to detect clicks on the Divi Builder button and, if appropriate, trigger a custom "diviBuilderEnabled" event to signify that the Divi Builder has been enabled:

// Trigger "diviBuilderEnabled" event when Divi Builder editor enabled
$('#et_pb_toggle_builder').click(function(){
    if (!$('#et_pb_toggle_builder.et_pb_builder_is_used').length) { 
        $(document).trigger("diviBuilderEnabled");
    } 
});

This attaches a click handler to the "Use Divi Builder" button. When it is invoked, it checks to make sure that the Divi Builder was not already running, using a variant of the code from my previous post. If it was not running, then we assume that it is now about to start running and trigger the "diviBuilderEnabled" event.

Triggering and Event when the Divi Builder is Disabled

In a somewhat similar way, we can trigger an event when the Divi Builder is disabled by the user:

// Trigger "diviBuilderDisabled" event when Divi Builder editor disabled
$(document).on('click', '[data-action="deactivate_builder"] .et_pb_prompt_proceed', function(){		
    $(document).trigger("diviBuilderDisabled");
});

You'll notice, that while looking somewhat similar to the last block of code, there are some notable differences. When checking that the user has disabled the Builder, we can't simply check if the Divi Builder button has been clicked as we did before. This is because Divi pops up a confirmation prompt when disabling the Divi Builder. Only if the prompt is accepted is the Builder actually disabled. So we use the '[data-action="deactivate_builder"] .et_pb_prompt_proceed' selector to detect clicks on the prompt acceptance button. As the prompt is dynamically created and doesn't exist in the page at the time we add our code, we can't use "click()" to register the handler. Instead we need to use the "on" function to attach the click handler to the document, which will capture the click event as it bubbles up the DOM hierarchy.

Performing Actions when the Divi Builder is Enabled / Disabled

Now that we are triggering events when the Builder is enabled / disabled, we need a way to actually run code when those events occur. This can be again done using the "on" function to bind a function to these specific events, like so:

// log divi builder enabled events	
$(document).on("diviBuilderEnabled", function(){
    console.log('Divi Builder enabled');
});
	
// log divi builder disabled events
$(document).on("diviBuilderDisabled", function(){
    console.log('Divi Builder disabled');
});

This example will simply log a message to the browser's JavaScript console each time one of the events occurs.

Putting it All Together

Here's the final code:

function dfd_example() { ?>
<script>
jQuery(function($){
	
    // Trigger "diviBuilderEnabled" event when Divi Builder editor enabled
    $('#et_pb_toggle_builder').click(function(){
        if (!$('#et_pb_toggle_builder.et_pb_builder_is_used').length) { 
            $(document).trigger("diviBuilderEnabled");
        } 
    });
	
    // Trigger "diviBuilderDisabled" event when Divi Builder editor disabled
    $(document).on('click', '[data-action="deactivate_builder"] .et_pb_prompt_proceed', function(){		
        $(document).trigger("diviBuilderDisabled");
    });
	
    // log divi builder enabled events	
    $(document).on("diviBuilderEnabled", function(){
        console.log('Divi Builder enabled');
    });
	
    // log divi builder disabled events
    $(document).on("diviBuilderDisabled", function(){
        console.log('Divi Builder disabled');
    });
	
});
</script>
<?php
}
add_action('admin_head-post.php', 'dfd_example');
add_action('admin_head-post-new.php', 'dfd_example');

Divi Booster