Roots Discourse

Javascript nodelist returning null on backend

sage
#1

I have successfully added my theme styles to backend editor. However, I can’t seem to get my javascript working properly.

I have an intersection observer that reveals a section by changing its opacity. It works on the front end. However, on the backend, I cannot get my querySelector to select the block on the backend – therefore the user cannot see the results before publishing.

Here’s my action for the editor:

add_action('enqueue_block_editor_assets', function () {
    wp_enqueue_style('sage/gutenberg.css', asset_path('styles/gutenberg.css'), false, null);
    wp_enqueue_script('sage/gutenberg.js', asset_path('scripts/gutenberg.js'), ['jquery'], null, true);

});

gutenberg.js is the script file I’ve duplicated.

I know the javascript is firing because when I console.log the nodelist, it returns but returns null. Has anyone else had this issue?

#2

I think this has something to do with your script trying to use the DOM before it is ready (classic mistake).
Either use the JQuery on-ready mechanism or the vanilla JS one.