Metaboxes: Refactor to render inline without iFrame

.eslintignore

@@ -2,4 +2,3 @@ build
 coverage
 vendor
 node_modules
-/assets/js

bin/build-plugin-zip.sh

@@ -93,7 +93,6 @@ mv gutenberg.tmp.php gutenberg.php
 status "Creating archive..."
 zip -r gutenberg.zip \
 	gutenberg.php \
-	assets/js/*.js \
 	lib/*.php \
 	blocks/library/*/*.php \
 	post-content.js \

docs/meta-box.md

@@ -5,14 +5,6 @@ the superior developer and user experience of blocks however, especially once,
 block templates are available, **converting PHP meta boxes to blocks is highly
 encouraged!**
 
-## Breakdown
-
-Each meta box area is rendered by a React component containing an iframe.
-Each iframe will render a partial page containing only meta boxes for that area.
-Meta box data is collected and used for conditional rendering. The meta box areas
-will appear as toggle-able panels labeled "Extended Settings". More on this in
-the MetaBoxIframe component section.
-
 ### Meta Box Data Collection
 
 On each Gutenberg page load, the global state of post.php is mimicked, this is
@@ -50,21 +42,16 @@ this might now be possible. Test with ACF to make sure.
 `INITIALIZE_META_BOX_STATE` comes in, the store will update any active meta box
 areas by setting the `isActive` flag to `true`. Once this happens React will
 check for the new props sent in by Redux on the `MetaBox` component. If that
-`MetaBox` is now active, instead of rendering null, a `MetaBoxIframe` component will
+`MetaBox` is now active, instead of rendering null, a `MetaBoxArea` component will
 be rendered. The `MetaBox` component is the container component that mediates
-between the `MetaBoxIframe` and the Redux Store. *If no meta boxes are active,
+between the `MetaBoxArea` and the Redux Store. *If no meta boxes are active,
 nothing happens. This will be the default behavior, as all core meta boxes have
 been stripped.*
 
-#### MetaBoxIframe Component
+#### MetaBoxArea Component
 
-When the component renders it will store a ref to the iframe, the component will
-set up a listener for post messages to handle resizing. `assets/js/meta-box-resize.js` is
-loaded inside the iframe and will send up postMessages for resizing, which the
-`MetaBoxIframe` Component will use to manage its state. A mutation observer will
-also be created when the iframe loads. The observer will detect whether, any
-DOM changes have happened in the iframe, input and change event listeners will
-also be attached to check for changes.
+When the component renders it will store a ref to the metaboxes container,
+calls the page rendering the metaboxes and watches input and changes.
 
 The change detection will store the current form's `FormData`, then whenever a
 change is detected the current form data will be checked vs, the original form
@@ -84,19 +71,15 @@ submitted. This removes any unnecessary requests being made. No extra revisions,
 are created either by the meta box submissions. A Redux action will trigger on
 `REQUEST_POST_UPDATE` for any dirty meta box. See `editor/effects.js`. The
 `REQUEST_META_BOX_UPDATES` action will set that meta boxes' state to `isUpdating`,
-the `isUpdating` prop will be sent into the `MetaBoxIframe` and cause a form
-submission. The iframe will clone itself and perform a double buffer right
-before the main iframe submits its data. After loading, the original change
-detection process is fired again to handle the new state.
+the `isUpdating` prop will be sent into the `MetaBoxArea` and cause a form
+submission.
 
 Since the meta box updating is being triggered on post save success, we check to
 see if the post is saving and display an updating overlay, to prevent users from
 changing the form values while the meta box is submitting. The saving overlay
 could be made transparent, to give a more seamless effect.
 
-### Iframe serving a partial page.
-
-Each iframe will point to an individual source. These are partial pages being
+Each `MetaBoxArea` will point to an individual source. These are partial pages being
 served by post.php. Why this approach? By using post.php directly, we don't have
 to worry as much about getting the global state 100% correct for each and every
 use case of a meta box, especially when it comes to saving. Essentially, when
@@ -117,10 +100,7 @@ area is served. So an example url would look like:
 This url is automatically passed into React via a `_wpMetaBoxUrl` global variable.
 The partial page is very similar to post.php and pretty much imitates it and
 after rendering the meta boxes via `do_meta_boxes()` it imitates `admin_footer`,
-exits early, and does some hook clean up. There are two extra files that are
-enqueued. One is the js file from `assets/js/meta-box-resize.js`, which resizes the iframe.
-The other is a stylesheet that is generated by webpack from `editor/meta-boxes/meta-box-iframe.scss`
-and built into `editor/build/meta-box-iframe.css`
+exits early, and does some hook clean up.
 
 These styles make use of some of the SASS variables, so that as the Gutenberg
 UI updates so will the meta boxes.

editor/actions.js

@@ -443,6 +443,20 @@ export function handleMetaBoxReload( location ) {
 	};
 }
 
+/**
+ * Returns an action object used to signify that a meta box finished loading.
+ *
+ * @param {String} location Location of meta box: 'normal', 'side'.
+ *
+ * @return {Object} Action object
+ */
+export function metaBoxLoaded( location ) {
+	return {
+		type: 'META_BOX_LOADED',
+		location,
+	};
+}
+
 /**
  * Returns an action object used to request meta box update.
  *

editor/assets/stylesheets/_z-index.scss

@@ -15,6 +15,8 @@ $z-layers: (
 	'.editor-inserter__tabs': 1,
 	'.editor-inserter__tab.is-active': 1,
 	'.components-panel__header': 1,
+	'.editor-meta-boxes-area.is-loading:before': 1,
+	'.editor-meta-boxes-area .spinner': 2,
 	'.blocks-format-toolbar__link-modal': 2,
 	'.editor-block-contextual-toolbar': 2,
 	'.editor-block-switcher__menu': 2,

editor/components/meta-boxes/index.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 /**
  * Internal dependencies
  */
-import MetaBoxesIframe from './meta-boxes-iframe';
+import MetaBoxesArea from './meta-boxes-area';
 import MetaBoxesPanel from './meta-boxes-panel';
 import { getMetaBox } from '../../selectors';
 
@@ -15,7 +15,7 @@ function MetaBoxes( { location, isActive, usePanel = false } ) {
 		return null;
 	}
 
-	const element = <MetaBoxesIframe location={ location } />;
+	const element = <MetaBoxesArea location={ location } />;
 
 	if ( ! usePanel ) {
 		return element;

editor/components/meta-boxes/meta-boxes-area/index.js

@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import { isEqual } from 'lodash';
+import classnames from 'classnames';
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+import { Component } from '@wordpress/element';
+import { Spinner } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { handleMetaBoxReload, metaBoxStateChanged, metaBoxLoaded } from '../../../actions';
+import { getMetaBox, isSavingPost } from '../../../selectors';
+
+class MetaBoxesArea extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			loading: true,
+		};
+		this.originalFormData = [];
+		this.bindNode = this.bindNode.bind( this );
+		this.checkState = this.checkState.bind( this );
+	}
+
+	bindNode( node ) {
+		this.node = node;
+	}
+
+	componentDidMount() {
+		this.mounted = true;
+		this.fetchMetaboxes();
+	}
+
+	componentWillUnmout() {
+		this.mounted = false;
+		this.unbindFormEvents();
+	}
+
+	unbindFormEvents() {
+		if ( this.form ) {
+			this.form.removeEventListener( 'change', this.checkState );
+			this.form.removeEventListener( 'input', this.checkState );
+		}
+	}
+
+	componentWillReceiveProps( nextProps ) {
+		if ( nextProps.isUpdating && ! this.props.isUpdating ) {
+			this.setState( { loading: true } );
+			const { location } = nextProps;
+			const headers = new window.Headers();
+			const fetchOptions = {
+				method: 'POST',
+				headers,
+				body: new window.FormData( this.form ),
+				credentials: 'include',
+			};
+			const request = window.fetch( addQueryArgs( window._wpMetaBoxUrl, { meta_box: location } ), fetchOptions );
+			this.onMetaboxResponse( request, false );
+			this.unbindFormEvents();
+		}
+	}
+
+	fetchMetaboxes() {
+		const { location } = this.props;
+		const request = window.fetch( addQueryArgs( window._wpMetaBoxUrl, { meta_box: location } ), { credentials: 'include' } );
+		this.onMetaboxResponse( request );
+	}
+
+	onMetaboxResponse( request, initial = true ) {
+		request.then( ( response ) => response.text() )
+			.then( ( body ) => {
+				if ( ! this.mounted ) {
+					return;
+				}
+				jQuery( this.node ).html( body );
+				this.form = this.node.querySelector( '.meta-box-form' );
+				this.form.onSubmit = ( event ) => event.preventDefault();
+				this.originalFormData = this.getFormData();
+				this.form.addEventListener( 'change', this.checkState );
+				this.form.addEventListener( 'input', this.checkState );
+				this.setState( { loading: false } );
+				if ( ! initial ) {
+					this.props.metaBoxReloaded( this.props.location );
+				} else {
+					this.props.metaBoxLoaded( this.props.location );
+				}
+			} );
+	}
+
+	getFormData() {
+		const data = new window.FormData( this.form );
+		const entries = Array.from( data.entries() );
+		return entries;
+	}
+
+	checkState() {
+		const { loading } = this.state;
+		const { isDirty, changedMetaBoxState, location } = this.props;
+
+		const newIsDirty = ! isEqual( this.originalFormData, this.getFormData() );
+
+		/**
+		 * If we are not updating, then if dirty and equal to original, then set not dirty.
+		 * If we are not updating, then if not dirty and not equal to original, set as dirty.
+		 */
+		if ( ! loading && isDirty !== newIsDirty ) {
+			changedMetaBoxState( location, newIsDirty );
+		}
+	}
+
+	render() {
+		const { location } = this.props;
+		const { loading } = this.state;
+
+		const classes = classnames(
+			'editor-meta-boxes-area',
+			`is-${ location }`,
+			{
+				'is-loading': loading,
+			}
+		);
+
+		return (
+			<div className={ classes }>
+				{ loading && <Spinner /> }
+				<div ref={ this.bindNode } />
+			</div>
+		);
+	}
+}
+
+function mapStateToProps( state, ownProps ) {
+	const metaBox = getMetaBox( state, ownProps.location );
+	const { isDirty, isUpdating } = metaBox;
+
+	return {
+		isDirty,
+		isUpdating,
+		isPostSaving: isSavingPost( state ) ? true : false,
+	};
+}
+
+function mapDispatchToProps( dispatch ) {
+	return {
+		// Used to set the reference to the MetaBox in redux, fired when the component mounts.
+		metaBoxReloaded: ( location ) => dispatch( handleMetaBoxReload( location ) ),
+		changedMetaBoxState: ( location, hasChanged ) => dispatch( metaBoxStateChanged( location, hasChanged ) ),
+		metaBoxLoaded: ( location ) => dispatch( metaBoxLoaded( location ) ),
+	};
+}
+
+export default connect( mapStateToProps, mapDispatchToProps )( MetaBoxesArea );