Asynchronously load tinyMCE the first time a classic block is edited

packages/block-library/src/classic/edit.js

@@ -5,6 +5,11 @@ import { Component } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { BACKSPACE, DELETE, F10 } from '@wordpress/keycodes';
 
+/**
+ * Internal dependencies
+ */
+import LazyLoad from './lazy';
+
 const { wp } = window;
 
 function isTmceEmpty( editor ) {
@@ -23,7 +28,7 @@ function isTmceEmpty( editor ) {
 	return /^\n?$/.test( body.innerText || body.textContent );
 }
 
-export default class ClassicEdit extends Component {
+class ClassicEdit extends Component {
 	constructor( props ) {
 		super( props );
 		this.initialize = this.initialize.bind( this );
@@ -216,3 +221,16 @@ export default class ClassicEdit extends Component {
 		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	}
 }
+
+const LazyClassicEdit = ( props ) => (
+	<LazyLoad
+		scripts={ [ 'wp-tinymce' ] }
+		styles={ [ 'wp-tinymce' ] }
+		onLoaded={ () => window.wpMceTranslation() }
+		placeholder={ <div>Loading...</div> }
+	>
+		<ClassicEdit { ...props } />
+	</LazyLoad>
+);
+
+export default LazyClassicEdit;

packages/block-library/src/classic/lazy.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+export default class LazyLoad extends Component {
+	static loadedScripts = new Set();
+	static loadedStyles = new Set();
+	static defaultProps = {
+		scripts: [],
+		styles: [],
+		placeholder: null,
+		onLoaded: () => Promise.resolve(),
+		onError: noop,
+	};
+
+	state = {
+		loaded: false,
+	};
+
+	loadScripts = async () => {
+		const scriptsToLoad = this.props.scripts.filter(
+			( script ) => ! this.loadedScripts.has( script )
+		);
+
+		if ( scriptsToLoad.length === 0 ) {
+			return Promise.resolve();
+		}
+
+		await new Promise( ( resolve, reject ) => {
+			const scriptElement = document.createElement( 'script' );
+			// can't use load-scripts.php, so this would need to be replaced
+			scriptElement.src = `/wp-admin/load-scripts.php?load=${ scriptsToLoad.join(
+				','
+			) }`;
+			scriptElement.onload = resolve;
+			scriptElement.onerror = reject;
+			document.head.appendChild( scriptElement );
+		} );
+
+		scriptsToLoad.forEach( ( script ) => this.loadedScripts.add( script ) );
+	};
+
+	loadStyles = async () => {
+		const stylesToLoad = this.props.styles.filter(
+			( style ) => ! this.loadedStyles.has( style )
+		);
+
+		if ( stylesToLoad.length === 0 ) {
+			return Promise.resolve();
+		}
+
+		await new Promise( ( resolve, reject ) => {
+			const linkElement = document.createElement( 'link' );
+			linkElement.rel = 'stylesheet';
+			// can't use load-styles.php, so this would need to be replaced
+			linkElement.href = `/wp-admin/load-styles.php?load=${ stylesToLoad.join(
+				','
+			) }`;
+			linkElement.onload = resolve;
+			linkElement.onerror = reject;
+			document.head.appendChild( linkElement );
+		} );
+
+		stylesToLoad.forEach( ( style ) => this.loadedStyles.add( style ) );
+	};
+
+	componentDidMount() {
+		Promise.all( [ this.loadScripts(), this.loadStyles() ] )
+			.then( this.props.onLoaded )
+			.then( () => {
+				this.setState( { loaded: true } );
+			} )
+			.catch( this.props.onError );
+	}
+
+	render() {
+		if ( this.state.loaded ) {
+			return this.props.children;
+		}
+
+		return this.props.placeholder;
+	}
+}