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

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。

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

1 个答案: