Custom Java Script not working inside Guteberg editor

I try to add a custom java script to my wordpress theme using Gutenberg. In the frontend the scripts are working fine. In the backend (gutenberg) the scripts are included but not taking any effects on the content.

I have content created by a custom block (acf beta plugin) and all div-classes are the same in backend and frontend.

Here is how I include the script (among others) inside my theme functions.php:

function themename_effekte_guten_js() {
wp_enqueue_script( ‘themename_effekte_guten_js’, get_template_directory_uri() . ‘/inc/themename-effekte.js’, ‘jquery’, ‘1.0.0’, true);
wp_enqueue_script( ‘slick_guten_js’, get_template_directory_uri() . ‘/libs/slick/slick.min.js’, ‘jquery’, ”, true);
wp_enqueue_style( ‘slick_guten_css’, get_template_directory_uri() . ‘/libs/slick/slick.css’, ”, ”, true);
}
add_action( ‘enqueue_block_editor_assets’, ‘themename_effekte_guten_js’ );

Here one example of script I like to use:

//////
// Akkordeon

var acc = document.getElementsByClassName(“accordion”);
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener(“click”, function() {
this.classList.toggle(“active”);
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + “px”;
}

});

}

Is there anything I forgot to take care of?

Read more here:: Custom Java Script not working inside Guteberg editor

Leave a Reply

Your email address will not be published. Required fields are marked *