我正在构建一个自定义块，将youtube视频添加为背景视频，在您访问该网站时自动播放和无限循环。要做到这一点，用户需要video-link 和playlist-link （用于循环）并将其放入我在块中创建的2个Richtext输入字段中。完成后，视频将开始在后端播放alredy，以便更好地查看它在网站上的外观。现在，当您保存块时，将按预期在前端生成代码，但一旦刷新后端页面，块将被破坏，控制台中将显示以下消息：

Block validation: Block validation failed for `test/video` ( … ).

Content generated by `save` function:

<div class="video-wrapper" class="wp-block-test-video"><iframe class="parallax" src="https://www.youtube.com/embed/undefined?autoplay=1&amp;mute=…fo=0&amp;modestbranding=1&amp disablekb=1&amp;list=undefined" frameborder="0"></iframe></div>

Content retrieved from post body:

<div class="video-wrapper" class="wp-block-test-video"><iframe class="parallax" src="https://www.youtube.com/embed/8nAjc_A7v1U?autoplay=1&amp;mut…&amp;disablekb=1&amp;list=PL9pyS4BNAYIMGCcVHo6QpUlsFBk-h1wC4" frameborder="0"></iframe></div>

视频：8nAjc\\U A7v1U播放列表：PL9pyS4BNAYIMGCcVHo6QpUlsFBk-h1wC4

它被替换为undefined

以下是我的区块JS代码：

(function(blocks, editor, element) {

    var el = element.createElement;

    const { RichText } = editor;
    const { PlainText } = editor;

    /* Test Block */
    wp.blocks.registerBlockType(\'test/video\', {
        title: \'Video\',
        icon: \'video-alt3\',
        category: \'common\',
        attributes: {
            content: {type: \'string\'},
            color: {type: \'string\'}
        },
        edit: function(props){
            function onChangeVideoLink(videoLink) {
                props.setAttributes({video: videoLink})
            }
            function onChangePlaylistLink(playlistLink) {
                props.setAttributes({playlist: playlistLink})
            }

            return el(\'div\', {
                    class: \'video-wrapper\'
                },
                el(\'div\', {
                        class: \'video-links\'
                    },
                    // Richtext Input for Video Link
                    el(RichText, {
                        // format: \'string\',
                        placeholder: \'Video Link\',
                        onChange: onChangeVideoLink,
                        value: props.attributes.video,
                        formattingControls: []
                    }),
                    // Richtext Input for Playlist Link
                    el(RichText, {
                        // format: \'string\',
                        placeholder: \'Playlist Link\',
                        onChange: onChangePlaylistLink,
                        value: props.attributes.playlist,
                        formattingControls: []
                    })
                ),
                el(\'div\', {
                        class: \'video\'
                    },
                    el(\'iframe\', {
                        src: \'https://www.youtube.com/embed/\' + props.attributes.video + \'?autoplay=1&mute=1&controls=0&loop=1&showinfo=0&modestbranding=1&disablekb=1&list=\' + props.attributes.playlist,
                        frameborder: \'0\'
                    })
                )
            );
        },
        save: function(props){
            return el(\'div\', {
                    class: \'video-wrapper\'
                },
                el(\'iframe\', {
                    src: \'https://www.youtube.com/embed/\' + props.attributes.video + \'?autoplay=1&mute=1&controls=0&loop=1&showinfo=0&modestbranding=1&disablekb=1&list=\' + props.attributes.playlist,
                    frameborder: \'0\'
                })
            );
        }
    });
} )(
    window.wp.blocks,
    window.wp.editor,
    window.wp.element
);