Question

我有一个创建古腾堡块的插件。该插件包含here中所述的react和babel js，并使用以下代码。该块可以很好地添加到页面中，并且可以预览和查看页面，但是当我发布或更新页面然后刷新编辑页面时，我收到一条消息：“您的网站不支持“ ka / block-test”封锁。我看不到任何明显的想法，赞赏任何想法

<?php
/*
Plugin Name: blocktest
Plugin URI: http://www.kim-aldis.co.uk
Description: Testing Guttenberg Blocks
Version: 1.0
Author: kim aldis
Author URI: http://www.kim-aldis.co.uk
*/

add_action( 'init', function() {

    $required_js_files = array(
        'wp-blocks',
        'wp-element',
        'wp-editor'
    );

    // Use minified libraries if SCRIPT_DEBUG is turned off
    $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';

    // Add React files
    wp_enqueue_script( 'react', 'https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react' . $suffix . '.js', $required_js_files, null );
    $required_js_files[] = 'react';

    wp_enqueue_script( 'react-dom', 'https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom' . $suffix . '.js', $required_js_files, null );
    $required_js_files[] = 'react-dom';

    // Add Babel file
    wp_enqueue_script( 'babel', 'https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser' . $suffix . '.js', $required_js_files, null );
    $required_js_files[] = 'babel';


    wp_register_script( 'ka-block', plugins_url( 'block.js', __FILE__ ),    $required_js_files );

    register_block_type( 'ka/block-test', [
        'editor_script' => 'ka-block',
    ] );

} );

add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {

    // Check that this is output of JSX file
    if ( 'ka-block' == $handle ) {
        $tag = str_replace( "<script type='text/javascript'", "<script type='text/babel'", $tag );
    }

    return $tag;
}, 10, 3 );

-

( function( blocks, element ) {

    var el = element.createElement;

    blocks.registerBlockType( 'ka/block-test', {
        title: 'KA Block Test',
        icon: 'lock',
        category: 'common',

        attributes: {
            gid       : {type: 'string'},
            thumb     : {type: 'string' },
            name     : {type: 'string' }
        },

        edit: function( props ) {
            return el( 'p', {}, "xxxxx")
        },
        save: function( props ) {
            return el( 'p', {}, "yyyyy" )
        },
    } );
}(
    window.wp.blocks,
    window.wp.element,
    window.wp.editor

) );

Answer 1

不确定是什么导致了确切的错误，但我想知道您是否正在排队 React 和 Babel ，而您甚至没有使用 JSX （尽管您所引用的示例使用JSX）。您可以尝试重写并坚持使用this example by Jim Schofield吗？使用标题为“让我们来构建此块！”标题下面列出的两个示例文件（PHP插件文件和JS块文件）

从我对古腾堡（Gutenberg）教程的经验中可以大致了解一下：请注意，古腾堡（Gutenberg）在Wordpress 5.0版本（2018年12月）成为核心之前编写的示例可能会包含其所有内容都不再是最新的代码细节。不知道这是否是您的特殊情况，但至少知道这一点是很好的。

Answer 2

如果您想对示例进行改进，则可能需要尝试省略registerBlockType语句。我认为它使之前的wp_register_script调用增加了一倍。

WordPress自定义古腾堡块无法正确重新加载

2 个答案: