使用WordPress设置在古腾堡插件中设置HTML属性
使用WordPress设置在古腾堡插件中设置HTML属性
提问于 2018-10-21 08:59:58
我想将maxlength属性设置在我在古腾堡插件中定义的TextControl上。这个长度将根据我的WordPress插件(加载古腾堡插件的那个)中的设置来设置。我尝试了将PHP传递给JavaScript的标准方法(例如使用wp_localize_script，例如这里)，但我想知道是否有更好的方法来做到这一点，尤其是在Gutenberg已经完成的工作中，而不是继续滥用翻译函数。
无论如何，我遇到了一个错误，试图让上述问题中的方法起作用。下面是我代码的相关部分：
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缺乏了解，要么是因为Gutenberg使用了React，这可能会以不同的方式处理这样的变量。
我的问题是:向Gutenberg/ PHP插件传递PHP设置/添加任意数据的“适当”方法是什么？如果真的像上面那样使用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
WordPress Development用户
回答已采纳
发布于 2021-09-04 11:06:20
我提出这个问题已经将近3年了，但是现在有一个更好的方法: WordPress建议在PHP之间传递数据时使用wp_add_inline_script，您可以阅读有关它的这里。
基本上，您要做的是更改代码中的wp_localize_script函数调用，如下所示：
wp_add_inline_script('my-script-name', 'const my_plugin_max_length=' . get_option( 'my_plugin_maxlength' ), 'before'); 然后可以在JS文件中使用变量my_plugin_max_length。
页面原文内容由WordPress Development提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://wordpress.stackexchange.com/questions/317199
复制相关文章
相似问题
腾讯云开发者
