javascript – Gutenberg: Block validation Failed Richtext undefined

Question

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

0
Pelle 6 months 2021-06-15T09:11:53-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse