wordpress - Wordpress 自定义 Gutenberg 块不起作用:未捕获的类型错误:无法读取未定义的属性“块”
问题描述
我此刻安静得绝望。我尝试根据这些教程为 Gutenberg 编辑器构建我的第一个自定义块:
- https://awhitepixel.com/blog/wordpress-gutenberg-create-custom-block-tutorial/
- https://developer.wordpress.org/block-editor/how-to-guides/javascript/js-build-setup/和https://developer.wordpress.org/block-editor/how-to-guides/block -tutorial/writing-your-first-block-type/
我完全按照教程进行操作,但我什至看不到古腾堡编辑器中的第一个示例块。在浏览器控制台中出现错误
Uncaught TypeError: Cannot read property 'blocks' of undefined
at external ["wp","blocks"]:1
at Object.@wordpress/blocks (external ["wp","blocks"]:1)
at __webpack_require__ (bootstrap:19)
at Module../src/block-zw-myfirstblock.js (block-zw-myfirstblock.js:1)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
你知道问题可能是什么吗?感谢您的帮助。
该块看起来与 wordpress 教程中的块完全一样。
块-zw-myfirstblock.js:
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
const blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
registerBlockType( 'zw/firstblock', {
apiVersion: 2,
title: 'Example: Basic (esnext)',
icon: 'universal-access-alt',
category: 'design',
example: {},
edit() {
const blockProps = useBlockProps( { style: blockStyle } );
return (
<div { ...blockProps }>Hello World (from the editor).</div>
);
},
save() {
const blockProps = useBlockProps.save( { style: blockStyle } );
return (
<div { ...blockProps }>
Hello World (from the frontend).
</div>
);
},
} );
这就是我注册块的方式:
function child_theme_register_block() {
$asset_file = include(get_stylesheet_directory_uri() . '/assets/js/gutenberg/block-zw-myfirstblock.asset.php');
wp_register_script(
'zw-myfirstblock-js',
get_stylesheet_directory_uri() . '/assets/js/gutenberg/block-zw-myfirstblock.js',
$asset_file['dependencies'],
$asset_file['version']
);
register_block_type(
'zw/firstblock',
array(
'api_version' => 2,
'editor_script' => 'zw-myfirstblock-js',
)
);
}
add_action( 'init', 'child_theme_register_block' );
这是block-zw-myfirstblock.asset.php,它包含在块注册代码的第一行:
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-polyfill'), 'version' => 'f87489192d38e545310e69e40f6c907c');
解决方案
这可能是您的问题:include(get_stylesheet_directory_uri() ....
get_stylesheet_directory_uri ()函数返回一个 URL。当包含来自服务器的 PHP 文件时,您希望使用get_stylesheet_directory() 。
推荐阅读
- spring-cloud - Zuul 没有路由到服务
- networking - 将不成功的连接尝试的输出附加到 .txt 文件
- c# - NETCore Web 应用启动时无法加载文件或程序集
- reactjs - ReactJS 如何在 app.js 中使用 withRouter
- javascript - 数组中的差/和,以检查生成的两个数字是否导致另一个数组
- c# - 如何从部分视图 ViewModel 获取数据到主 ViewModel
- http - 如何在soapui中获取位置标头
- angularjs - 为什么'<'绑定的 currentValue 未定义当我作为 Angular 中的文字字符串传递时
- mmenu - 使用带有预处理脚本的新 mmlight 时出现编译错误
- rust - 返回数组大小的关联 const