使用WordPress设置在Gutenberg插件中设置HTML属性

时间：2018-10-21 作者：Sean

我想设定maxlength a上的属性TextControl 我在古腾堡插件中定义。这个长度是根据我的WordPress插件（加载Gutenberg插件的插件）中的设置设置的。我尝试了将PHP数据传递给JavaScript的标准方法（使用wp_localize_script, 例如讨论here), 但我想知道是否有更好的方法来做到这一点，尤其是在古腾堡的工作中，比继续滥用翻译功能更好。

无论如何，我在尝试使上述问题中的方法工作时遇到了一个错误。以下是我的代码的相关部分：

PHP插件：

    // enqueue my plugin script
    wp_enqueue_script(
        \'my-script-name\',
        \'/path/to/my/script.js\',
        array( \'wp-edit-post\', \'wp-plugins\', \'wp-i18n\', \'wp-element\' ),
        \'my-script-version\'
    );

    // pass setting to script
    wp_localize_script(
        \'my-script-name\',
        \'my_script_input_maxlength\',
        get_option( \'my_plugin_maxlength\' )
    );
Gutenberg插件（挂钩到PluginPostStatusInfo 添加TextControl):

class MyPlugin extends Component {
    constructor() {
        super( ...arguments );
    }

    render() {
        return el(
            PluginPostStatusInfo,
            {
                className: \'my_text_panel\'
            },
            el(
                TextControl,
                {
                    name: \'my_text_control_name\',
                    maxlength: my_script_input_maxlength
                }
            )
        );
    }
}
Gutenberg表示，使用上述代码时遇到了意外错误（如下图所示）。我想这可能是因为我对JavaScript缺乏了解，或者是古腾堡使用了React，这可能会以不同的方式处理这样的变量。

我的问题是：传递PHP设置/向Gutenberg/React插件添加任意数据的“正确”方法是什么？如果确实要使用wp_localize_script 如上所述，那么我做错了什么？

使用上述代码时发生Gutenberg错误：

render@https://my-test-site/wp-content/plugins/my-plugin/js/script.js?ver=0.8.1:51:21
Xf@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:91:266
yh@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:102:317
lg@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:120:88
mg@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:120:386
gc@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:127:202
vb@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:126:230
ub@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:126:65
zd@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:124:449
ra@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:123:319
enqueueSetState@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:189:231
q.prototype.setState@https://my-test-site/wp-content/plugins/gutenberg/vendor/react.min.ab6b06d4.js:18:428
value/this.unsubscribe<@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:14405
n/</<@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:4745
n/<@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:4716
v@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:21770
S/</<@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:4298
G/</<@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:12594
a/</</<@https://my-test-site/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=1540053061:1:3778
dispatch@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:24328
i/<@https://my-test-site/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=1540053061:1:3359
n/<@https://my-test-site/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=1540053061:1:7930
n@https://my-test-site/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=1540053061:1:7904
u/<@https://my-test-site/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=1540053061:1:7859
j/</<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:2:29352
j/<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:2:29220
f@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:20743
MutationCallback*[70]</n.exports@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:21024
[205]<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:2:28663
s@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:257
s/<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:316
[2]<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:1903
s@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:257
s/<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:316
[1]</<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:506
[1]<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:481
s@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:257
e@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:431
@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:2

1 个回复
最合适的回答,由SO网友:Laloptk 整理而成

我提出这个问题几乎晚了三年，但现在有一个更好的方法：WordPress建议使用wp_add_inline_script 当您想在PHP和JS之间传递数据时，可以阅读相关内容here

基本上，你要做的是改变你的wp_localize_script 代码中的函数调用，用于：

wp_add_inline_script(\'my-script-name\', \'const my_plugin_max_length=\' . get_option( \'my_plugin_maxlength\' ), \'before\');
然后可以使用变量my_plugin_max_length 在JS文件中。

结束
标签： javascript   variables   wp-localize-script   block-editor   小码农  

相关推荐

如何将Bootstrap Tour JavaScript添加到WordPress管理面板仪表板小部件

我正在开发一个主题，想知道如何将引导程序教程脚本添加到自定义仪表板小部件中。基本上，我想将引导程序巡更脚本包含到管理面板中，这样我就可以编写一个自定义仪表板小部件，然后将巡更脚本链接到该小部件。