First pass at Gutenberg support.

Integrates into Google Docs Shortcode plugin v0.5.0.

See #21.

assets/block.css

@@ -0,0 +1,9 @@
+.mexp-gdrive-gutenberg {
+	background: transparent;
+	border: 0;
+	margin-top: -3.5em;
+	padding-bottom: 1.5em;
+	position: relative;
+	text-align: center;
+	z-index: 99999;
+}

assets/block.js

@@ -0,0 +1,118 @@
+var el = wp.element.createElement,
+	Component = wp.element.Component,
+	addButton;
+
+addButton = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
+	return function( props ) {
+		var attr = props.attributes,
+			onSelect,
+			sidebarControls;
+
+		if ( 'ray/google-drive' !== props.name || attr.link ) {
+			return el(
+				BlockEdit,
+				props
+			);
+		}
+
+		onSelect = function( media ) {
+			var width = media.width * 1,
+				height = media.height * 1;
+
+			// Set some defaults if dimensions aren't yet available.
+			if ( ! width ) {
+				media.width = 640;
+			}
+			if ( ! height ) {
+				media.height = 360;
+			}
+
+			return props.setAttributes( media );
+		};
+
+        	return el(
+			wp.element.Fragment,
+			{},
+			el(
+				BlockEdit,
+				props
+			),
+			el( GDrive, {
+				onSelect: onSelect,
+				render: function( obj ) {
+					return el( 'div', {
+							className: 'component-panel mexp-gdrive-gutenberg',
+						},
+						el(
+							wp.components.Button, {
+								className: 'button button-large',
+								onClick: obj.open
+							},
+							wp.i18n.__( 'Or Select From Drive' )
+						)
+					);
+				}
+			} )
+		);
+	};
+}, 'withInspectorControls' );
+
+wp.hooks.addFilter( 'editor.BlockEdit', 'mexp/google-drive', addButton );
+
+// Our media modal launcher, adapted from the MediaUpload component.
+// @link https://github.com/WordPress/gutenberg/blob/master/edit-post/hooks/components/media-upload/index.js
+class GDrive extends Component {
+	constructor() {
+		super( ...arguments );
+		this.openModal = this.openModal.bind( this );
+		this.onOpen = this.onOpen.bind( this );
+		this.onClose = this.onClose.bind( this );
+		this.onInsert = this.onInsert.bind( this );
+
+		this.frame = wp.media(  {
+			frame: 'post',
+
+			// Default tab to select when modal is loaded.
+			state: 'mexp-service-gdrive',
+
+			// Disables plupload dropzone; we'll be handling uploading ourselves.
+			uploader: false
+		} );
+
+		// When an image is selected in the media frame...
+		this.frame.on( 'open', this.onOpen );
+		this.frame.on( 'close', this.onClose );
+		this.frame.on( 'gDrive:insert', this.onInsert );
+	}
+
+	componentWillUnmount() {
+		this.frame.remove();
+	}
+
+	onInsert( shortcode ) {
+		const { onSelect } = this.props;
+		onSelect( shortcode );
+	}
+
+	onOpen() {
+		$( '.media-frame' ).addClass( 'hide-menu' );
+		$( '.media-modal' ).addClass( 'smaller' );
+	}
+
+	onClose() {
+		$( '.media-modal' ).removeClass( 'smaller' );
+		const { onClose } = this.props;
+
+		if ( onClose ) {
+			onClose();
+		}
+	}
+
+	openModal() {
+		this.frame.open();
+	}
+
+	render() {
+		return this.props.render( { open: this.openModal } );
+	}
+}

includes/mexp-service.php

@@ -75,6 +75,37 @@ protected function hooks() {
 
 		// revoke AJAX hook
 		add_action( 'wp_ajax_mexp-gdrive-revoke', array( $this, 'oauth_ajax_revoke' ) );
+
+		// Gutenberg support. Relies on Google Docs Shortcode 0.5.0.
+		add_action( 'enqueue_block_editor_assets', function() {
+			// Check if our Google Drive block is registered.
+			if ( ! WP_Block_Type_Registry::get_instance()->is_registered( 'ray/google-drive' ) ) {
+				return;
+			}
+
+			// Enqueue our assets.
+			wp_enqueue_script(
+				'mexp-gdrive-gutenberg',
+				MEXP_GDrive::$URL . '/assets/block.js',
+				array( 'ray-gdoc-block' ),
+				'20181120'
+			);
+			wp_enqueue_style(
+				'mexp-gdrive-gutenberg',
+				MEXP_GDrive::$URL . '/assets/block.css',
+				'20181120'
+			);
+
+			// i18n. Developer tools haven't stabilized yet...
+			/*
+			$locale_data = gutenberg_get_jed_locale_data( 'gdrive' );
+			wp_add_inline_script(
+				'wp-i18n',
+				'wp.i18n.setLocaleData( ' . json_encode( $locale_data ) . ' );'
+			);
+			*/
+		}, 20 );
+
 	}
 
 	/**