自定义gutenberg块 - 您的站点不包括对块的支持

Question

我想创建一个具有可编辑字段的块，但我无法找到为什么我一直收到此错误：'您的站点不包含对块的支持。您可以保留此块完整，将其内容转换为自定义HTML块，或完全删除它。有谁知道可能会产生这样的错误？难道我做错了什么？

PHP代码：

function protex_contact_gutenberg_block_enqueue_scripts(){
    $required_js_files = array(
        'wp-blocks',
        'wp-i18n',
        'wp-element',
        'wp-editor'
    );
    wp_enqueue_script( 'react', 'https://unpkg.com/react@16/umd/react.development.js', $required_js_files );
    $required_js_files[] = 'react';
    wp_enqueue_script( 'react-dom', 'https://unpkg.com/react-dom@16/umd/react-dom.development.js', $required_js_files );
    wp_enqueue_script( 'babel', 'https://unpkg.com/babel-standalone@6/babel.min.js', $required_js_files );
    $required_js_files[] = 'babel';
    wp_register_script( 'protex_contact_gutenberg_block_gutenberg_js', plugin_dir_url( __FILE__ ) . 'assets/prtx_contact.js', $required_js_files );

    register_block_type('protex-contact/block', array(
        'editor_script' => 'protex_contact_gutenberg_block_gutenberg_js',
        'editor_script' => 'babel',
        'editor_script' => 'react',
        'editor_script' => 'react-dom',
    ));
}
add_action( 'init', 'protex_contact_gutenberg_block_enqueue_scripts' );
function protex_contact_gutenberg_block_gutenberg_modify_jsx_tag( $tag, $handle, $src ) {
    if ( 'my_custom_gutenberg_block_gutenberg_js' == $handle ) {
        $tag = str_replace( "<script type='text/javascript'", "<script type='text/babel'", $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'protex_contact_gutenberg_block_gutenberg_modify_jsx_tag', 10, 3 );

JS代码：

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( 'protex-contact/block', {
    title: __( 'Protex konakt', 'protex-contact' ),
    icon: 'id',
    category: 'common',
    attributes: {
    content: {
        type: 'string',
        source: 'html',
        selector: 'p',
    },
},

    edit({ attributes, className, setAttributes }) {
        const { content } = attributes;
        function onChangeContent( newContent ) {
            setAttributes( { content: newContent } );
        }
        return (
            <div className={ className }>
                <RichText
                    tagName="p"
                    className="prtx_contact_input"
                    value={ content }
                    onChange={ onChangeContent } />
            </div>
        );
    },
    save({ attributes }) {
        let { content } = attributes;
        return (
            <RichText.Content
                tagName="p"
                value={ content }
            />
        );
    },
} );

Answer 1

注册此脚本时请检查您的路径：

wp_register_script( 'protex_contact_gutenberg_block_gutenberg_js', plugin_dir_url( __FILE__ ) . 'assets/prtx_contact.js', $required_js_files );

如果从子目录中调用plugin_dir_url( __FILE__ )，则url将包含该子目录。例如，如果我从目录路径'plugins / my-custom-plugin / library'中的文件调用plugin_dir_url( __FILE__ )，则url将以'/ my-custom-plugin / library /'结尾，这可能不是您想要的路径。

如果从子目录调用，我会使用

wp_register_script( 'protex_contact_gutenberg_block_gutenberg_js', plugins_url( 'assets/prtx_contact.js', dirname( __FILE__ ) ), $required_js_files );

如果从很多级别深入调用，那么你可能需要将dirname( __FILE__ )添加到像dirname( __FILE__ , 2 )这样的东西来遍历你需要去的远处（或考虑传递到“assets”文件夹的路径，这样你就不必计算它了在飞行中）。

我遇到了类似的问题，问题是由于路径不正确而未加载脚本。除此之外，考虑到您正在注册的脚本依赖项的数量，我会检查所有其他脚本是否正确加载而不会产生任何问题。