Enqueuing javascript files in the editor (conflict with wordpress js)

sage
1

I’m facing issues with enqueuing JavaScript files in the Gutenberg editor. While it works on the front end, when these files are loaded, particularly main.js which initializes WOW.js, it causes the blocks to render as blank. This is likely due to a conflict with the editor’s JavaScript. ( I assumed its a conflict with wordpress js)

Here’s the current code I’ve used for enqueuing CSS and JavaScript in filters.php:

add_action('after_setup_theme', function () { 

 add_theme_support('editor-styles'); 
 add_editor_style('/public/styles/fontawesome/css/all.min.css'); 
 add_editor_style('/public/styles/bootstrap-icons/font/bootstrap-icons.min.css'); 
 add_editor_style('/public/lib/animate/animate.min.css'); 
 add_editor_style('/public/styles/bootstrap.min.css');   
 add_editor_style('/public/styles/app.css');

});

add_action('enqueue_block_editor_assets', function () { 

wp_enqueue_script('jquery');
wp_enqueue_script('sage-editor-bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js', ['jquery'], false, true); 
wp_enqueue_script('sage-editor-wow', get_template_directory_uri() . '/public/lib/wow/wow.min.js', ['jquery'], false, true); 
wp_enqueue_script('sage-editor-easing', get_template_directory_uri() . '/public/lib/easing/easing.min.js', ['jquery'], false, true); 
wp_enqueue_script('sage-editor-waypoints', get_template_directory_uri() . '/public/lib/waypoints/waypoints.min.js', ['jquery'], false, true); 
wp_enqueue_script('sage-editor-counterup', get_template_directory_uri() . '/public/lib/counterup/counterup.min.js', ['jquery'], false, true);
wp_enqueue_script('sage-editor-main', get_template_directory_uri() . '/public/js/main.js', ['jquery'], false, true);

});

when the main.js is enqueued it create that problem since it initiates the wowjs

new WOW().init();

Does anyone know how to solve this problem, or should I use another alternative for WOW.js?

2

An easy fix would be to break the wow.js init and any other JavaScript that interferes with the editor into a separate script (frontend.js or whatever) and don’t enqueue that script in the editor.

3

Thank you for your response, MWDelaney.

I understand that separating the WOW.js initialization and other interfering JavaScript into a separate script (e.g., frontend.js) and not enqueuing it in the editor can be an effective solution. However, in my case, I want to ensure that the theme provides a “what you see is what you get” experience. This means the JavaScript effects applied to the frontend need to be the same as those in the backend (Gutenberg editor).

Is it possible to apply JavaScript effects like WOW.js in both the frontend and Gutenberg editor to maintain a “what you see is what you get” experience, or should I look for an alternative solution?

4

I’m sure that it is possible but the specifics of wow.js and Gutenberg conflicts are outside the scope of this forum. This isn’t specifically an issue with Sage.

You might try reaching out to a more general WordPress, Gutenberg, or wow.js support venue for better help.

My general troubleshooting advice would be to, from the browser, inspect the incorrectly rendering blocks and determine what CSS is causing them to render blank. You may need to add some editor-specific CSS to override whatever is causing them to render wrong.

1 Like
5

Thank you for your response, MWDelaney.

I appreciate your advice and understand that the specifics of WOW.js and Gutenberg conflicts might be beyond the scope of this forum. I’ll consider reaching out to more general WordPress, Gutenberg, or WOW.js support communities for further assistance.
If anyone has successfully implemented WOW.js or similar animations in both the frontend and the Gutenberg editor, I would greatly appreciate any insights or examples you could share.

Thank you again for your guidance.