Gutenberg: Block validation Failed Richtext undefined

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.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>

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0