Question

我想创建一个带有可编辑字段的块，但是我找不到导致此错误的原因： '您的站点不支持该块。您可以保留该块不变，将其内容转换为Custom 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 )之类，以遍历到需要走的远处（或考虑将路径传递到“资产” “文件夹，因此您不必即时计算它。

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

自定义gutenberg块-您的网站不包含对该块的支持

1 个答案: