Custom Gutenberg Block adding in IFRAME instead of string containing URL

Question

I am trying to create a simple custom ‘testimonial’ block. I have been following the following tutorial

https://themes.artbees.net/blog/create-a-custom-block-for-wordpress-gutenberg/

and created a block containing two <p> elements to hold testimonial content, and testimonial author information.

The testimonial author field should contain a URL, and everything works fine in the editor. But when I review the page, some but not all URL’s are displaying fine as text.

A few, however, are not showing at all, and WordPress has added a <blockquote> and <iframe> pulling data from the URL instead.

I have not been able to find any help in the WordPress Block API reference.

My testimonial.js is as follows:

( function( blocks, editor, element ) {
    var el = element.createElement;

    blocks.registerBlockType( 'csb/testimonial', {
        title: 'Testimonial', // The title of block in editor.
        icon: 'admin-comments', // The icon of block in editor.
        category: 'common', // The category of block in editor.
        attributes: {
        content: {
        type: 'string',
        default: 'The Affiliate Program is a great thing to sign up for.'
        },
        aff: {
        type: 'string',
        default: 'A.N. Affiliate',
        }
    },
        edit: function( props ) {
    return (
        el( 'div', { className: props.className },
            el(
                editor.RichText,
                {
                    tagName: 'div',
                    className: 'csb-testimonial-content',
                    value: props.attributes.content,
                    onChange: function( content ) {
                        props.setAttributes( { content: content } );
                    }
                }
            ),
            el(
                editor.RichText,
                {
                    tagName: 'div',
                    className: 'csb-testimonial-aff',
                    value: props.attributes.aff,
                    onChange: function( aff ) {
                        props.setAttributes( { aff: aff } );
                    }
                }
            ),
            
        )
    );
},
        save: function( props ) {
    return (
        el( 'div', { className: props.className },
            el( editor.RichText.Content, {
                tagName: 'p',
                className: 'csb-testimonial-content',
                value: props.attributes.content,
            } ),
            el( editor.RichText.Content, {
                tagName: 'p',
                className: 'csb-testimonial-aff',
                value: props.attributes.aff,
            } ),
        )
    );
},
    } );
} )( window.wp.blocks, window.wp.editor, window.wp.element );
0
Artoo 3 months 0 Answers 13 views 0

Leave an answer