javascript - Gutenberg: Block validation Failed Richtext undefined

admin管理员组

文章数量:1291207

I am building a custom block to add a youtube-video as a background-video that autoplays and infinite loops when you visit the site. To make this happen the user needs to get the video-link and playlist-link (for the loop) and put it into the 2 Richtext input fields I created in the block. Once that is done the video will start playing alredy in the backend to get a better view on how it will look on the site. Now when you save the Block the code will be generated on the frontend as expected but as soon as you refresh the backend page the block will be broken and the following message will be displayed in the console:

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=";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=";amp;mut…&amp;disablekb=1&amp;list=PL9pyS4BNAYIMGCcVHo6QpUlsFBk-h1wC4" frameborder="0"></iframe></div>

Instead of saving the values that were put into the Richtext input fields:

Video: 8nAjc_A7v1U
Playlist: PL9pyS4BNAYIMGCcVHo6QpUlsFBk-h1wC4

it got replaced with undefined

Here is my JS code for the Block:

(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: '/' + 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: '/' + 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
);

I am building a custom block to add a youtube-video as a background-video that autoplays and infinite loops when you visit the site. To make this happen the user needs to get the video-link and playlist-link (for the loop) and put it into the 2 Richtext input fields I created in the block. Once that is done the video will start playing alredy in the backend to get a better view on how it will look on the site. Now when you save the Block the code will be generated on the frontend as expected but as soon as you refresh the backend page the block will be broken and the following message will be displayed in the console:

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/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/embed/8nAjc_A7v1U?autoplay=1&amp;mut…&amp;disablekb=1&amp;list=PL9pyS4BNAYIMGCcVHo6QpUlsFBk-h1wC4" frameborder="0"></iframe></div>

Instead of saving the values that were put into the Richtext input fields:

Video: 8nAjc_A7v1U
Playlist: PL9pyS4BNAYIMGCcVHo6QpUlsFBk-h1wC4

it got replaced with undefined

Here is my JS code for the Block:

(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/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/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
);

• javascript
• block-editor

Share Improve this question asked Jun 15, 2021 at 14:11 PellePelle 1522 bronze badges 1

• RichText fields are not a great choice for something like a URL - they provide piles of logic which you do not need, and give the end-user a lot of rope to hang themselves with. TextControl would be more appropriate. Or URLInput or LinkControl if you wanted to get super fancy :) – bosco Commented Jun 15, 2021 at 14:27

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Your block type did not register the playlist attribute (it only registers content and color) so props.attributes.playlist is not available within your save() function.

本文标签： javascriptGutenberg Block validation Failed Richtext undefined