withInstanceId example

gistfile1.txt

/**
 * BLOCK: bmore-micromodal
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

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

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { Fragment } = wp.element;
const { PlainText, InnerBlocks } = wp.editor;
const { TextControl, Button } = wp.components;
const { withInstanceId } = wp.compose;
const TEMPLATE = [
	[ 'core/paragraph', { placeholder: 'Modal content, but you can add other blocks as well.' }]
];

// import the element creator function
const el = wp.element.createElement;
// custom SVG path
const iconEl = el( 'svg', { width: 20, height: 20 },
	el( 'path', { d: "M16 2h-8.021c-1.099 0-1.979 0.88-1.979 1.98v8.020c0 1.1 0.9 2 2 2h8c1.1 0 2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM16 12h-8v-8h8v8zM4 10h-2v6c0 1.1 0.9 2 2 2h6v-2h-6v-6z" } )
);

/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * For built-in Dashicons, reference https://developer.wordpress.org/resource/dashicons/
 * Block categories include common, formatting, layout widgets, embed
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise `undefined`.
 */
registerBlockType( 'bmore/micromodal-block', {
	title: __( 'Modals' ),
	icon: iconEl,
	category: 'common',
	attributes: {
		modaltitle: {
			source: 'text'
		}
	},

	/**
	 * The edit function describes the structure of your block in the context of the editor.
	 * This represents what the editor will render when the block is used.
	 *
	 * The "edit" property must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 */	
	edit({ attributes, className, setAttributes }) {
		return (
			<Fragment>
				<div>
					<PlainText
						onChange={ content => setAttributes( { modaltitle: content } ) }
						value={ attributes.modaltitle }
						placeholder={ __( "Modal Title" ) }
						autoFocus
					/>
					<InnerBlocks template={ TEMPLATE } />
				</div>
			</Fragment>
		);
	},

	/**
	 * The save function defines the way in which the different attributes should be combined
	 * into the final markup, which is then serialized by Gutenberg into post_content.
	 *
	 * The "save" property must be specified and must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 */
	
	save({ attributes }) {
		const instanceId = attributes.instanceId;
		return(
			<Fragment>
				<div className="wp-block-button">
					<button className="wp-block-button__link" data-micromodal-trigger={ `modal-${ instanceId }` }>
						{ attributes.modaltitle }
					</button>
				</div>
				<div className="modal micromodal-slide" id={ `modal-${ instanceId }` } aria-hidden="true">
					<div className="modal__overlay" tabindex="-1" data-micromodal-close>
						<div className="modal__container" role="dialog" aria-modal="true" aria-labelledby={ `modal-${ instanceId }-title` }>
							<header className="modal__header">
								<h2 className="modal__title" id={ `modal-${ instanceId }-title` }>
									{ attributes.modaltitle } 
								</h2>
								<button className="modal__close" aria-label="Close modal" data-micromodal-close></button>
							</header>
							<div className="modal__content" id={ `modal-${ instanceId }-content` }>
								<InnerBlocks.Content />
							</div>
						</div>
					</div>
				</div>
			</Fragment>
		);
	}
} );

Not sure if you noticed, but it doesn't seem you actually use withInstanceId after importint it.