1

Any help would be much appreciated!!

I'm attempting to build a custom Gutenberg block. It works fine initially, but after refreshing the page, I get the "This block contains unexpected or invalid content" error.

I've checked out some other threads but to no avail...

The plugin.php code:

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

The 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
                }
            )

        )
    )
}
} );
4

1 回答 1

0

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

问题很可能是这样的：

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

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

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

于 2019-04-23T12:49:21.150 回答