Gutenberg Script Loading

  • So im following the way to add styles/script in to the gutenberg editor as mentioned here:
    https://jasonyingling.me/enqueueing-scripts-and-styles-for-gutenberg-blocks/

    Styles are coming in fine as expected, however scripts dont seem to be working as expected (possibly too early?).

    The code being used is:

    /**
 * Enqueue block JavaScript and CSS for the editor
 */
function my_block_plugin_editor_scripts()
{
    // Enqueue block editor styles
    wp_enqueue_style('fontawesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    wp_enqueue_style('site-css', get_template_directory_uri() . '/assets/styles/style.css', array(), filemtime(get_template_directory() . '/assets/styles/scss'), 'all');
    wp_enqueue_style('slick-css', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css');
    wp_enqueue_style('slick-theme-css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css');

    // Enqueue block editor JS
    wp_enqueue_script('site-js', get_template_directory_uri() . '/assets/scripts/scripts.js', array('jquery'), filemtime(get_template_directory() . '/assets/scripts/js'), true);
    wp_enqueue_script('slick-js', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js', array('jquery'), true);
}

// Hook the enqueue functions into the editor
add_action('enqueue_block_editor_assets', 'my_block_plugin_editor_scripts');

    (Neat version here if formatting is off: https://pastebin.com/BfHpmmgW )

    I can see in devtools that its adding all scripts in to the <Head>.

    So, is the issue that its loading too early?
    If so, how can i make it load later?

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    You manage the order scripts are loaded through the $deps argument. Include the handle of all enqueued scripts that need to be loaded before the one being enqueued. You already have “jquery” as a dependency. For example, if you want to ensure “site-js” is loaded before “slick-js”, when you enqueue “slick-js”, the $deps argument should be array('site-js','jquery',) Actually, if “site-js” requires “jquery”, you don’t really need to specify it again here since “site-js” is required and requires jQuery for itself. But it doesn’t hurt to be explicit and it could help in future maintenance to remind you of its complete dependencies.

    Thread Starter mikedistras

    (@mikedistras)

    Hi @bcworkz

    Thanks for that, helpful info to know for any other potential errors.

    However unfortunately it didnt seem to fix my problem.

    It looks like all scripts are being output before the <body>, which surely means its firing them all off before the content has even loaded in yet?

    Is there a way to get the scripts in to the footer? Or just after a specific block has loaded in?

    Moderator bcworkz

    (@bcworkz)

    wp_enqueue_script() takes up to 5 arguments, the last being a boolean value for whether to link the file in the footer or not. Pass true to have it linked in the footer. You’ll need a version argument after the dependencies for the fourth argument. Pass false for WP to use the current WP version as the script’s version. Pass null for no version or pass any string to serve as your own version value.

    This has already been done for “site-js”, but “slick-js” is enqueued incorrectly, passing true for the version argument. I think you want something more like:
    wp_enqueue_script('slick-js', 'https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js', array('jquery'), '1.8.1', true );

    Links in the head section are loaded before content (unless the link tag has a defer attribute), but that does not mean the scripts execute. Many scripts are in the form of a closure to $.ready() (or equivalent) so they only execute once the DOM has finished loading even though the file has been loaded earlier.

    There might be an event you could listen for that fires when a block is inserted, but the file containing the script must already be loaded.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Gutenberg Script Loading’ is closed to new replies.