Gutenberg Work

editor.css

.wp-block-custom-blocks-iframe {

     background: #eee;
     border: 2px #ddd solid;
     padding: 1rem;
     padding-bottom: 0;

}

.clb-iframe-placeholder-area {
     height: 118px;
     background: #ddd;
}

icon.js

// see https://svg2jsx.herokuapp.com/

const icon =  <svg width='20px' height='20px' viewBox='0 0 100 100' data-prefix="far" data-icon="code" className="svg-inline--fa fa-code fa-w-18"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M234.8 511.7L196 500.4c-4.2-1.2-6.7-5.7-5.5-9.9L331.3 5.8c1.2-4.2 5.7-6.7 9.9-5.5L380 11.6c4.2 1.2 6.7 5.7 5.5 9.9L244.7 506.2c-1.2 4.3-5.6 6.7-9.9 5.5zm-83.2-121.1l27.2-29c3.1-3.3 2.8-8.5-.5-11.5L72.2 256l106.1-94.1c3.4-3 3.6-8.2.5-11.5l-27.2-29c-3-3.2-8.1-3.4-11.3-.4L2.5 250.2c-3.4 3.2-3.4 8.5 0 11.7L140.3 391c3.2 3 8.2 2.8 11.3-.4zm284.1.4l137.7-129.1c3.4-3.2 3.4-8.5 0-11.7L435.7 121c-3.2-3-8.3-2.9-11.3.4l-27.2 29c-3.1 3.3-2.8 8.5.5 11.5L503.8 256l-106.1 94.1c-3.4 3-3.6 8.2-.5 11.5l27.2 29c3.1 3.2 8.1 3.4 11.3.4z"
/>
</svg>;

export default icon;

index.js

/**
 * Block dependencies
 */
//import classnames from 'classnames';
import icon from './icon';
import './style.css';
import './editor.css';

/**
 * Internal block libraries
 */

const { Fragment } = wp.element;
const {
    registerBlockType,
} = wp.blocks;
const {
    InspectorControls,
} = wp.editor;
const {
     Toolbar,
    Button,
    Tooltip,
    PanelBody,
    PanelRow,
    FormToggle,
    TextControl,
    IconButton,
    RangeControl,
} = wp.components;


/**
 * Register example block
 */
export default registerBlockType(
    'custom-blocks/iframe',
    {
        title: 'iFrame Embed',
        description:  'Embed an iFrame into your content.',
        category: 'common',
        icon: {
            foreground: '#fff',
            background: '#2A5182',
            src: icon,
        },
        keywords: [
            'iFrame',
            'embed',
        ],
        attributes: {
            text: {
                type: 'string',
                source: 'text',
                selector: 'a',
            },
            url: {
                type: 'string',
                source: 'attribute',
                attribute: 'href',
                selector: 'a',
            },
            fullWidth: {
                type: 'boolean',
                default: true,
            },
            widthInPixels: {
                type: 'number',
                default: 300,
            },
            heightInPixels: {
                type: 'number',
                default: 400,
            },
            iframeBorder: {
                type: 'boolean',
                default: false,
            },
        },
        edit: props => {
            const { attributes: { text, url, fullWidth, iframeBorder, widthInPixels, heightInPixels },
                className, isSelected, setAttributes } = props;
           const togglefullWidth = () => setAttributes( { fullWidth: ! fullWidth } );
           const toggleiframeBorder = () => setAttributes( { iframeBorder: ! iframeBorder } );

                return [
                     <InspectorControls>
                         <PanelBody
                            title={ 'iFrame Settings' }
                         >
                            <PanelRow>
                                <label
                                     htmlFor="full-width-form-toggle"
                                >
                                     { 'Full Width (takes precedence)' }
                                </label>
                                <FormToggle
                                     id="full-width-form-toggle"
                                     label={ 'Full Width (takes precedence)' }
                                     checked={ fullWidth }
                                     onChange={ togglefullWidth }
                                />
                            </PanelRow>
                            <PanelBody>
                               <RangeControl
                                   beforeIcon="arrow-left-alt2"
                                   afterIcon="arrow-right-alt2"
                                   label={ 'Width in Pixels' }
                                   value={ widthInPixels }
                                   onChange={ widthInPixels => setAttributes( { widthInPixels } ) }
                                   min={ 100 }
                                   max={ 1200 }
                               />
                           </PanelBody>
                           <PanelBody>
                              <RangeControl
                                  beforeIcon="arrow-left-alt2"
                                  afterIcon="arrow-right-alt2"
                                  label={ 'Height in Pixels' }
                                  value={ heightInPixels }
                                  onChange={ heightInPixels => setAttributes( { heightInPixels } ) }
                                  min={ 100 }
                                  max={ 1200 }
                              />
                          </PanelBody>
                            <PanelRow>
                                <label
                                     htmlFor="border-form-toggle"
                                >
                                     { 'Border' }
                                </label>
                                <FormToggle
                                     id="border-form-toggle"
                                     label={ 'Border' }
                                     checked={ iframeBorder }
                                     onChange={ toggleiframeBorder }
                                />
                            </PanelRow>
                         </PanelBody>
                     </InspectorControls>,

                     <div className="clb-iframe-wrapper">
                        { isSelected ? (
                        <div className={ className + ' selected' }>
                           <Fragment>
                               <TextControl
                                    id="clb-iframe-title-input"
                                    label={ 'iFrame Source Title' }
                                    value={ text }
                                    placeholder={ 'Durham Neighborhood Compass' }
                                    onChange={ text => setAttributes( { text } ) }
                               />
                               <TextControl
                                    id="clb-iframe-URL-input"
                                    label={ 'iFrame Source URL' }
                                    value={ url }
                                    placeholder={ 'https://compass.durhamnc.gov' }
                                    onChange={ url => setAttributes( { url } ) }
                               />
                           </Fragment>
                           </div>
                        ) : (
                           <div className={ className + ' static' }>
                           <div className="clb-iframe-placeholder-area">
                           </div>
                           <p>{ 'iFrame: ' + text || 'Edit iFrame' }</p>
                           </div>
                        )}
                        </div>
                ];
        },
        save: props => {
            const { attributes: { text, url, fullWidth, iframeBorder, widthInPixels, heightInPixels } } = props;
            let titleText = text;

                 function slugify(string)
                    {
                      return string.toString().toLowerCase()
                        .replace(/\s+/g, '-')           // Replace spaces with -
                        .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
                        .replace(/\-\-+/g, '-')         // Replace multiple - with single -
                        .replace(/^-+/, '')             // Trim - from start of text
                        .replace(/-+$/, '');            // Trim - from end of text
                    }

          if( !titleText ) { titleText = ''; }
          let slugText = slugify(titleText);

          let width = widthInPixels;
          if( fullWidth ) { width = "100%"; }

          let border = 0;
          if( iframeBorder ) { border = 1 }

            return (
                 <div className="clb-custom-iframe">
                     <p>
                     <iframe id = {'iframe-' + slugText}
                         title = {titleText}
                         width = {width}
                         height = {heightInPixels}
                         frameborder = {border}
                         src = {url} >
                         </iframe>
                    </p>
                    <p><div class="iframe-source">Source: <a href={url} target="_blank">{titleText}</a></div></p>
               </div>
            );
        },
    },
);

style.css

.clb-custom-iframe p {
     margin-bottom: 0;
}

.clb-custom-iframe .iframe-source {
     text-transform: uppercase;
     font-size: 15px;
     font-color: #777;
     margin-bottom: 28px;
}