javascript - 为 Gutenberg 块定义 Javascript 类型(wordpress)
问题描述
我正在尝试使用 ReactJS 为 Gutenberg 创建自定义块。我正在尝试通过 render() 函数呈现 HTML,但出现“Uncaught SyntaxError: Unexpected token <”错误。
现在,我已经读到我应该确保将脚本类型定义为text/babel以正确呈现 HTML,但是当我通过wp_register_script() wordpress 函数添加我的 JS 文件时,我必须知道如何要做到这一点。
如果您需要更多详细信息,请告诉我,谢谢!
解决方案
首先将您的脚本排入 funcio.php 文件:
function gutenberg_boilerplate_block() {
wp_register_script(
'gutenberg-boilerplate-es5-step01',
get_theme_file_uri( '/js/test.js' ),
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' )
);
register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-01', array(
'editor_script' => 'gutenberg-boilerplate-es5-step01',
) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );
把你的代码 test.js :
例如 :
var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };
registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-01', {
title: 'Hello World (Step 1)',
icon: 'universal-access-alt',
category: 'layout',
edit: function() {
return el( 'p', { style: blockStyle }, 'Hello editor.' );
},
save: function() {
return el( 'p', { style: blockStyle }, 'Hello saved content.' );
},
} );
学习古腾堡,现在点击这个网址:
推荐阅读
- reactjs - 对 HOC 注入的功能组件 props 进行类型安全处理
- python - 最大化并行请求数 (aiohttp)
- node.js - 解析服务器无法识别 APP_ID
- javascript - Javascript中的ANTLR:无法再次解析部分代码
- python - 从网站的多个页面中提取电子邮件并列出
- python - 如何获取导致 dask.read_csv 错误的 csv 文件的名称?
- python - 没有空格的字符串需要根据模式拆分
- c# - Elasticsearch NEST 和基本搜索查询
- xamarin - 如果将 Xamarin 条目移除并添加到父视图,则 Xamarin 条目将获得焦点。为什么会这样?
- java - jar 文件有时不会从网络共享启动