如何修复“此块包含意外或无效内容”错误

Question

任何帮助都将不胜感激！！

我正试着建造一个定制的古腾堡大厦。它最初运行良好，但在刷新页面后，我得到了“此块包含意外或无效内容”错误。

我查过其他线索，但没有结果.

plugin.php代码：

<?php

function loadMyBlock() {
  wp_enqueue_script(
    'columns-block',
    plugin_dir_url(__FILE__) . 'wm-script-final.js',
    array('wp-blocks','wp-editor'),
    true
  );
}

add_action('enqueue_block_editor_assets', 'loadMyBlock');

联合来文：

var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
RichText = wp.editor.RichText;

registerBlockType( 'md-custom-block/columns-block', {
title: 'Transcript Block',
icon: 'universal-access-alt',
category: 'layout',
attributes: {
content1: {
type: 'array',
source: 'children',
selector: 'div'
},

},
edit: function( props ) {
var attributes = props.attributes;

    function onChangeContentFirst( newContent ) {
        props.setAttributes( { content1: newContent } );
    }



    return (
        el( 'div', { className: 'transcript-block'},
            el(
                RichText,
                {
                    tagName: 'p',
                    className: "none",
                    onChange: onChangeContentFirst,
                    value: attributes.content1
                }
            )

        )
    )
},
save: function( props ) {
    var attributes = props.attributes;
    return(
        el( 'div', { className: 'transcript-block'},
            el( RichText.Content,
                {
                    tagName: 'p',
                    className: props.className,
                    value: attributes.content1
                }
            )

        )
    )
}
} );

Answer 1

当第一次在编辑器中加载该块时，它会读取所有属性，然后计算save()函数的输出。如果输入和输出不匹配，Gutenberg就知道有问题，并输出无效的内容错误。

问题很可能是：

content1: {
    type: 'array',
    source: 'children',
    selector: 'div'
}

您已经将选择器设置为div，但内容实际上是在p中输出的，因此内容与保存的内容不匹配。

您需要更改该选择器或从save函数中删除p。