Wordpress custom Gutenberg block not working: Uncaught TypeError: Cannot read property 'blocks' of undefined

Question

此刻我很绝望。我尝试根据这些教程为古腾堡编辑器构建我的第一个自定义块：

我完全按照教程进行了操作，但我什至看不到古腾堡编辑器中的第一个示例块。在浏览器控制台中出现错误

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 教程中的完全一样。
block-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');

Answer 1

这可能是您的问题：include(get_stylesheet_directory_uri() ....

当包含来自服务器的 PHP 文件时 get_stylesheet_directory_uri() function returns an URL. You want to use get_stylesheet_directory() 而不是。

Wordpress custom Gutenberg block not working: Uncaught TypeError: Cannot read property 'blocks' of undefined

Wordpress custom Gutenberg block not working: Uncaught TypeError: Cannot read property 'blocks' of undefined

wordpress

wordpress-gutenberg