1

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
);
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
    Jun 15 '21 at 14:27
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.

2
  • omg how did I miss that ... ty for opening my eyes
    – Pelle
    Jun 15 '21 at 14:41
  • Happens to us all :D
    – bosco
    Jun 15 '21 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.