定制gutenberg块中的Vanilla javascript不工作

Question

我正试图为一个学校项目创建一个定制的古腾堡街区。我对此并不熟悉，也没有使用@wordpress/create方法。我使用php-、css和javascript文件手动创建了一个带有测试块的插件。javascript使用wp.element.createElement方法在编辑和保存函数中生成块。那里的一切都很正常。

PHP插件文件：

<?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");

以及块的Javascript：

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();
},
});

最后，需要在块呈现后激活的附加脚本：

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

如何在插件中对Test函数进行排队？

Answer 1

块的保存函数只将标记保存到数据库(以及HTML注释，WP用来将HTML解析回编辑器中)。要在您的块的前端使用JS，您需要为在那里运行的东西创建一个单独的JS文件，并对它进行排队，以便WordPress知道包含它。