I have create a map block plugin that works more or less, but I'm having trouble understanding how to load the map script when/after the block is inserted. If I reload the page after inserting/saving, or if I load the public view, the map script loads as expected (since I've enqueued the scripts and styles via PHP). Normally, I would attach the script to some kind of DOM event, but I realize that Gutenberg/React handles things differently.

So my questions are:

• How do I load a script (remote or inline) immediately after my block is inserted?
• How do I set block properties in a remote script that's been enqueued via PHP?

This is my first stab at Gutenberg/React, but here's what I'm working with at the moment. I may be missing some fundamentals.

import './style.scss';
import './editor.scss';

const { __ } = wp.i18n;
const { registerBlockType, getBlockDefaultClassName } = wp.blocks;
const { PlainText, InspectorControls, PanelBody } = wp.editor;
const { TextareaControl, TextControl } = wp.components;
const { withState } = wp.compose;

registerBlockType( 'myplugin/block-map-location', {
    title: __( 'Location Map' ),
    icon: 'location',
    category: 'myplugin',
    keywords: [ __( 'Map' ), __( 'Location' ), __( 'myplugin' ) ],
    supports: {
        anchor: true,
        html: false,
        multiple: false,
        reusable: false,
    },
    description: __( 'A block for adding a location map.' ),
    attributes: {
        caption: {
            type: 'string',
            source: 'text',
            selector: '.map-caption-pp',
        },
        lat: {
            type: 'string',
            selector: 'div.map-pp',
            source: 'attribute',
            attribute: 'data-lat',
        },
        lon: {
            type: 'string',
            selector: 'div.map-pp',
            source: 'attribute',
            attribute: 'data-lon',
        },
        zoom: {
            type: 'string',
            selector: 'div.map-pp',
            source: 'attribute',
            attribute: 'data-zoom',
        },
        mb_key: {
            type: 'string',
            selector: 'div.map-pp',
            source: 'attribute',
            attribute: 'data-mb-key',
        },
        maki: {
            type: 'string',
            selector: 'div.map-pp',
            source: 'attribute',
            attribute: 'data-zoom',
        },
        maki_color: {
            type: 'string',
            selector: 'div.map-pp',
            source: 'attribute',
            attribute: 'data-maki-color',
        },
        basemap: {
            type: 'string',
            selector: 'div.map-pp',
            source: 'attribute',
            attribute: 'data-basemap',
        },
        query: {
            type: 'string',
            selector: 'input.query-pp',
            source: 'text',
        },
    },
    edit( props ) {
        const {
            attributes: {
                caption,
                zoom,
                lat,
                lon,
                mb_key,
                maki,
                maki_color,
                basemap,
                query,
            },
            className,
            setAttributes,
        } = props;
        const onChangeCaption = caption => {
            setAttributes( { caption } );
        };

        const onSubmitQuery = function( e ) {
            e.preventDefault();
            console.log( query );
        };

        const defaults = myplugin_plugin_settings.myplugin_defaults;
        if ( ! zoom ) {
            props.setAttributes( { zoom: defaults.default_zoom } );
        }
        if ( ! lat ) {
            props.setAttributes( { lat: defaults.default_latitude } );
        }
        if ( ! lon ) {
            props.setAttributes( { lon: defaults.default_longitude } );
        }
        if ( ! mb_key ) {
            props.setAttributes( { mb_key: defaults.mapbox_key } );
        }
        if ( ! maki ) {
            props.setAttributes( { maki: defaults.maki_markers } );
        }
        if ( ! maki_color ) {
            props.setAttributes( { maki_color: defaults.maki_markers_color } );
        }
        if ( ! basemap ) {
            props.setAttributes( { basemap: defaults.default_map_type } );
        }

        return (
            <div
                className={ props.className }
                aria-label={ __( 'Interactive Map' ) }
                role="region"
            >
                <form className="inline-input" onSubmit={ onSubmitQuery }>
                    <TextControl
                        className="query-pp"
                        tagName="input"
                        placeholder={ __(
                            'Type a query and press Enter/Return.',
                            'wp_myplugin'
                        ) }
                        onChange={ input => setAttributes( { query: input } ) }
                    />
                </form>

                <figure>
                    <div
                        className="map-pp"
                        id="myplugin-map"
                        data-lat={ lat }
                        data-lon={ lon }
                        data-zoom={ zoom }
                        data-mb-key={ mb_key }
                        data-maki={ maki }
                        data-maki-color={ maki_color }
                        data-basemap={ basemap }
                    />
                    <TextareaControl
                        rows="2"
                        className="map-caption-pp"
                        tagName="figcaption"
                        placeholder={ __(
                            'Type a caption for the map (optional).',
                            'wp_myplugin'
                        ) }
                        value={ caption }
                        onChange={ onChangeCaption }
                    />
                </figure>
            </div>
        );
    },
    save( props ) {
        const className = getBlockDefaultClassName( 'myplugin/block-map-location' );
        const { attributes } = props;

        return (
            <div
                className={ props.className }
                aria-label={ __( 'Interactive Map' ) }
                role="region"
            >
                <figure>
                    <div
                        className="map-pp"
                        id="myplugin-map"
                        data-lat={ attributes.lat }
                        data-lon={ attributes.lon }
                        data-zoom={ attributes.zoom }
                        data-mb-key={ attributes.mapbox_key }
                        data-maki={ attributes.maki_markers }
                        data-maki-color={ attributes.maki_markers_color }
                        data-basemap={ attributes.basemap }
                    />
                    <figcaption className="map-caption-pp">
                        { attributes.caption }
                    </figcaption>
                </figure>
            </div>
        );
    },
} );