Vanilla javascript in custom gutenberg block not working

Question

I am trying to create a custom gutenberg block for a school project. I am new to this and I have not used the @wordpress/create-block method. I have created a plugin with a test block manually with a php-, css and javascript file. The javascript uses wp.element.createElement methods to generate the block in the edit and save functions. Everything works there.

The PHP plugin file:

<?php
/**
* Plugin Name: Javascriptblock
* Description: JS Test
* Version: 1.0
* Author: Test
*/

if (!defined("ABSPATH")) {
  exit;
}

function javascriptblock() {

wp_register_script(
    "js-script",
    plugins_url("js.js", __FILE__),
    array("wp-blocks", "wp-components", "wp-element", "wp-i18n", "wp-editor"),
    filemtime(plugin_dir_path(__FILE__) . "js.js")
);

wp_register_style(
    "js-style",
    plugins_url("/js.css", __FILE__),
    array("wp-edit-blocks"),
    filemtime(plugin_dir_path(__FILE__) . "js.css")
);

register_block_type("javascriptblock/js", array(
    "editor_script" => "js-script",
    "editor_style"  => "js-style",
    "style"         => "js-style",
    "category"      => "common",
));
}
add_action("init", "javascriptblock");

And the Javascript for the block:

wp.blocks.registerBlockType("javascriptblock/javascriptblock", {
title: "Javascriptblock",
icon: "smiley",
category: "common",

edit: function () {
    return wp.element.createElement(
        "p",
        null,
        "Hello World"
    );
},

save: function () {
    return wp.element.createElement(
        "p",
        null,
        "Hello World!"
    );

    Test();
},
});

And finally the additional script that needs to be activated after the block renders:

function Test() {
  console.log("Working!");
}

How can I enqueue the Test function within the plugin?

Answer 1

The save function of blocks only saves markup to the database (along with HTML comments, which WP uses to parse the HTML back into the Editor). To use JS on the front end with your block, you will need to create a separate JS file for what needs to run there, and enqueue it so WordPress knows to include it.