如何修复 "This block contains unexpected or invalid content" 错误

Question

任何帮助将不胜感激！！

我正在尝试构建自定义古腾堡块。最初它工作正常，但刷新页面后，我收到 "This block contains unexpected or invalid content" 错误。

我已经检查了一些其他线程，但无济于事...

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');

JS：


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() 函数的输出。如果输入和输出不匹配，古腾堡就会知道有问题并输出无效内容错误。

问题可能是这样的：

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

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

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

如何修复 "This block contains unexpected or invalid content" 错误

How to fix the "This block contains unexpected or invalid content" error

wordpress

wordpress-gutenberg

gutenberg-blocks