From 500dfea4db444615ac53059e471b189ff4da9e4b Mon Sep 17 00:00:00 2001
From: BE-Webdesign <cromleyedwin89@gmail.com>
Date: Fri, 1 Sep 2017 21:17:11 -0400
Subject: [PATCH] Bringing iframes into React/Redux

Brings iframes into React, updates of the post now trigger submission of
the iframe forms. Fixed linting errors, and added tests for new JS
functionality.
---
 .eslintignore                                 |   1 +
 assets/css/metabox.css                        |   1 +
 editor/actions.js                             |  31 ++++++
 editor/effects.js                             |  15 +++
 editor/layout/index.js                        |  10 +-
 editor/metaboxes/index.js                     |  62 +++++++++++
 editor/metaboxes/style.scss                   |   7 ++
 editor/reducer.js                             |  10 ++
 editor/selectors.js                           |  10 ++
 editor/test/actions.js                        |  24 +++++
 editor/test/reducer.js                        |  59 +++++++++++
 editor/test/selectors.js                      |  17 +++
 gutenberg.php                                 |   2 +-
 lib/client-assets.php                         |   8 ++
 ...tabox-api.php => metabox-partial-page.php} | 100 +++++++++++-------
 lib/register.php                              |  19 +++-
 16 files changed, 329 insertions(+), 47 deletions(-)
 create mode 100644 editor/metaboxes/index.js
 create mode 100644 editor/metaboxes/style.scss
 rename lib/{metabox-api.php => metabox-partial-page.php} (85%)

diff --git a/.eslintignore b/.eslintignore
index 164ae5ac2c7ef..3aa71080db424 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,3 +2,4 @@ build
 coverage
 vendor
 node_modules
+/assets/js
diff --git a/assets/css/metabox.css b/assets/css/metabox.css
index a0af58ad1c7aa..615c3365747b0 100644
--- a/assets/css/metabox.css
+++ b/assets/css/metabox.css
@@ -1,6 +1,7 @@
 /* Hides scrollbar to make iframe content seem as though it is part of the page. */
 .gutenberg-metabox-html {
 	overflow: hidden;
+	width: 100%;
 }
 
 .gutenberg-metabox-html.sidebar-open {
diff --git a/editor/actions.js b/editor/actions.js
index 27938e8be1f1f..6a7331cf1259b 100644
--- a/editor/actions.js
+++ b/editor/actions.js
@@ -309,6 +309,37 @@ export function removeNotice( id ) {
 	};
 }
 
+// Metabox related actions.
+
+/**
+ * Returns an action object used to trigger metabox updates.
+ *
+ * @return {Object}     Action object
+ */
+export function updateMetaboxes() {
+	return {
+		type: 'UPDATE_METABOXES',
+	};
+}
+
+/**
+ * Returns an action object used to set metabox DOM references.
+ *
+ * @param {String} location The metabox location: normal, advanced, side.
+ * @param {DOMElement} node The reference node of the metabox.
+ *
+ * @return {Object}     Action object
+ */
+export function setMetaboxReference( location, node ) {
+	return {
+		type: 'SET_METABOX_REFERENCE',
+		data: {
+			location,
+			node,
+		},
+	};
+}
+
 export const createSuccessNotice = partial( createNotice, 'success' );
 export const createInfoNotice = partial( createNotice, 'info' );
 export const createErrorNotice = partial( createNotice, 'error' );
diff --git a/editor/effects.js b/editor/effects.js
index 163982fba0e50..911c917f64286 100644
--- a/editor/effects.js
+++ b/editor/effects.js
@@ -25,6 +25,7 @@ import {
 	removeNotice,
 	savePost,
 	editPost,
+	updateMetaboxes,
 } from './actions';
 import {
 	getCurrentPost,
@@ -35,6 +36,7 @@ import {
 	isEditedPostDirty,
 	isEditedPostNew,
 	isEditedPostSaveable,
+	getMetaboxNodes,
 } from './selectors';
 
 const SAVE_POST_NOTICE_ID = 'SAVE_POST_NOTICE_ID';
@@ -113,6 +115,9 @@ export default {
 			) );
 		}
 
+		// Update metaboxes.
+		dispatch( updateMetaboxes() );
+
 		if ( get( window.history.state, 'id' ) !== post.id ) {
 			window.history.replaceState(
 				{ id: post.id },
@@ -273,4 +278,14 @@ export default {
 
 		return effects;
 	},
+	UPDATE_METABOXES( action, store ) {
+		const { getState } = store;
+		const state = getState();
+		const metaboxes = getMetaboxNodes( state );
+		Object.values( metaboxes ).forEach( ( iframe ) => {
+			// The standard post.php form ID post should probably be mimicked.
+			const form = iframe.contentWindow.document.getElementById( 'post' );
+			form.submit();
+		} );
+	},
 };
diff --git a/editor/layout/index.js b/editor/layout/index.js
index b9d91011e4138..36a5878ab8c34 100644
--- a/editor/layout/index.js
+++ b/editor/layout/index.js
@@ -21,6 +21,7 @@ import UnsavedChangesWarning from '../unsaved-changes-warning';
 import DocumentTitle from '../document-title';
 import AutosaveMonitor from '../autosave-monitor';
 import { removeNotice } from '../actions';
+import Metaboxes from '../metaboxes';
 import {
 	getEditorMode,
 	isEditorSidebarOpened,
@@ -32,8 +33,8 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
 		'is-sidebar-opened': isSidebarOpened,
 	} );
 
-	return (
-		<div className={ className }>
+	return [
+		<div key="editor" className={ className }>
 			<DocumentTitle />
 			<NoticeList onRemove={ props.removeNotice } notices={ notices } />
 			<UnsavedChangesWarning />
@@ -44,8 +45,9 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
 				{ mode === 'visual' && <VisualEditor /> }
 			</div>
 			{ isSidebarOpened && <Sidebar /> }
-		</div>
-	);
+		</div>,
+		<Metaboxes key="metaboxes" location="normal" isSidebarOpened={ isSidebarOpened } />,
+	];
 }
 
 export default connect(
diff --git a/editor/metaboxes/index.js b/editor/metaboxes/index.js
new file mode 100644
index 0000000000000..cb4fe652e403b
--- /dev/null
+++ b/editor/metaboxes/index.js
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { connect } from 'react-redux';
+// @TODO Should this be React or WordPress elements?
+import { Component } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { setMetaboxReference } from '../actions';
+
+class Metaboxes extends Component {
+	constructor() {
+		super();
+
+		this.state = {
+			cool: 'yeah',
+		};
+	}
+
+	componentDidMount() {
+		// Sets a React Node Reference into the store.
+		this.props.setReference( this.props.location, this.node );
+	}
+
+	render() {
+		const { location, isSidebarOpened, id = 'gutenberg-metabox-iframe' } = this.props;
+		const classes = classnames( {
+			'sidebar-open': isSidebarOpened,
+			'gutenberg-metabox-iframe': true,
+		} );
+
+		return (
+			<iframe
+				ref={ ( node ) => {
+					this.node = node;
+				} }
+				title={ __( 'Extended Settings' ) }
+				key="metabox"
+				id={ id }
+				className={ classes }
+				src={ `${ window._wpMetaboxUrl }&metabox=${ location }` } />
+		);
+	}
+}
+
+function mapDispatchToProps( dispatch ) {
+	return {
+		// Used to set the reference to the Metabox in redux, fired when the component mounts.
+		setReference: ( location, node ) => dispatch( setMetaboxReference( location, node ) ),
+	};
+}
+
+export default connect( null, mapDispatchToProps )( Metaboxes );
diff --git a/editor/metaboxes/style.scss b/editor/metaboxes/style.scss
new file mode 100644
index 0000000000000..c7288cd7588c3
--- /dev/null
+++ b/editor/metaboxes/style.scss
@@ -0,0 +1,7 @@
+.gutenberg-metabox-iframe {
+	width: 100%;
+
+	&.sidebar-open {
+		padding: 0 $sidebar-width 0 0;
+	}
+}
diff --git a/editor/reducer.js b/editor/reducer.js
index 6e59e9c26021c..b396c3674aca1 100644
--- a/editor/reducer.js
+++ b/editor/reducer.js
@@ -529,6 +529,15 @@ export function notices( state = {}, action ) {
 	return state;
 }
 
+export function legacyMetaboxes( state = {}, action ) {
+	switch ( action.type ) {
+		case 'SET_METABOX_REFERENCE':
+			return { ...state, [ action.data.location ]: action.data.node };
+		default:
+			return state;
+	}
+}
+
 export default optimist( combineReducers( {
 	editor,
 	currentPost,
@@ -541,4 +550,5 @@ export default optimist( combineReducers( {
 	saving,
 	notices,
 	userData,
+	legacyMetaboxes,
 } ) );
diff --git a/editor/selectors.js b/editor/selectors.js
index b98904ea1fb64..311b0f0f5ba83 100644
--- a/editor/selectors.js
+++ b/editor/selectors.js
@@ -804,3 +804,13 @@ export function getRecentlyUsedBlocks( state ) {
 	// resolves the block names in the state to the block type settings
 	return state.userData.recentlyUsedBlocks.map( blockType => getBlockType( blockType ) );
 }
+
+/**
+ * Returns the object of nodes for metaboxes.
+ *
+ * @param {Object} state Global application state
+ * @return {Object}       Map of location to metabox iframe.
+ */
+export function getMetaboxNodes( state ) {
+	return state.legacyMetaboxes;
+}
diff --git a/editor/test/actions.js b/editor/test/actions.js
index 5f4a5d0a05d67..1c6cfb638e437 100644
--- a/editor/test/actions.js
+++ b/editor/test/actions.js
@@ -6,6 +6,8 @@ import {
 	replaceBlocks,
 	startTyping,
 	stopTyping,
+	updateMetaboxes,
+	setMetaboxReference,
 } from '../actions';
 
 describe( 'actions', () => {
@@ -52,4 +54,26 @@ describe( 'actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'updateMetaboxes', () => {
+		it( 'should return the UPDATE_METABOXES action', () => {
+			expect( updateMetaboxes() ).toEqual( {
+				type: 'UPDATE_METABOXES',
+			} );
+		} );
+	} );
+
+	describe( 'setMetaboxReference', () => {
+		it( 'should return the SET_METABOX_REFERENCE action with a location and node', () => {
+			const location = 'side';
+			const node = { i: 'is node' };
+			expect( setMetaboxReference( location, node ) ).toEqual( {
+				type: 'SET_METABOX_REFERENCE',
+				data: {
+					location,
+					node,
+				},
+			} );
+		} );
+	} );
 } );
diff --git a/editor/test/reducer.js b/editor/test/reducer.js
index 24c64bd0a6de3..0850eba95f6ab 100644
--- a/editor/test/reducer.js
+++ b/editor/test/reducer.js
@@ -24,6 +24,7 @@ import {
 	notices,
 	showInsertionPoint,
 	userData,
+	legacyMetaboxes,
 } from '../reducer';
 
 describe( 'state', () => {
@@ -966,4 +967,62 @@ describe( 'state', () => {
 			expect( initial.recentlyUsedBlocks ).toHaveLength( 8 );
 		} );
 	} );
+
+	describe( 'legacyMetaboxes()', () => {
+		it( 'should return an empty object by default', () => {
+			const actual = legacyMetaboxes( undefined, {} );
+			const expected = {};
+
+			expect( actual ).toEqual( expected );
+		} );
+		it( 'should add in metabox references', () => {
+			const action = {
+				type: 'SET_METABOX_REFERENCE',
+				data: {
+					location: 'side',
+					node: 'I am node',
+				},
+			};
+
+			const actual = legacyMetaboxes( undefined, action );
+			const expected = {
+				side: 'I am node',
+			};
+
+			expect( actual ).toEqual( expected );
+		} );
+		it( 'should override existing metabox references', () => {
+			const action = {
+				type: 'SET_METABOX_REFERENCE',
+				data: {
+					location: 'side',
+					node: 'I am node',
+				},
+			};
+
+			const actual = legacyMetaboxes( { side: 'Ref' }, action );
+			const expected = {
+				side: 'I am node',
+			};
+
+			expect( actual ).toEqual( expected );
+		} );
+		it( 'should build on top of existing metabox references for new locations', () => {
+			const action = {
+				type: 'SET_METABOX_REFERENCE',
+				data: {
+					location: 'side',
+					node: 'I am node',
+				},
+			};
+
+			const actual = legacyMetaboxes( { normal: 'Ref' }, action );
+			const expected = {
+				normal: 'Ref',
+				side: 'I am node',
+			};
+
+			expect( actual ).toEqual( expected );
+		} );
+	} );
 } );
diff --git a/editor/test/selectors.js b/editor/test/selectors.js
index de132731348ad..76c20b16a4d63 100644
--- a/editor/test/selectors.js
+++ b/editor/test/selectors.js
@@ -61,6 +61,7 @@ import {
 	didPostSaveRequestFail,
 	getSuggestedPostFormat,
 	getNotices,
+	getMetaboxNodes,
 } from '../selectors';
 
 describe( 'selectors', () => {
@@ -1666,4 +1667,20 @@ describe( 'selectors', () => {
 			] );
 		} );
 	} );
+
+	describe( 'getMetaboxNodes', () => {
+		it( 'should return the notices array', () => {
+			const state = {
+				legacyMetaboxes: {
+					side: 'I am DOM Node',
+					normal: 'I am another DOM Node',
+				},
+			};
+
+			expect( getMetaboxNodes( state ) ).toEqual( {
+				side: 'I am DOM Node',
+				normal: 'I am another DOM Node',
+			} );
+		} );
+	} );
 } );
diff --git a/gutenberg.php b/gutenberg.php
index a80e243ffd9ad..05fd44b42ac0f 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -16,7 +16,7 @@
 require_once dirname( __FILE__ ) . '/lib/init-checks.php';
 if ( gutenberg_can_init() ) {
 	// Load API functions, register scripts and actions, etc.
-	require_once dirname( __FILE__ ) . '/lib/metabox-api.php';
+	require_once dirname( __FILE__ ) . '/lib/metabox-partial-page.php';
 	require_once dirname( __FILE__ ) . '/lib/class-wp-block-type.php';
 	require_once dirname( __FILE__ ) . '/lib/class-wp-block-type-registry.php';
 	require_once dirname( __FILE__ ) . '/lib/blocks.php';
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 0df529d585886..dcc7dcd58637a 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -796,6 +796,14 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	}
 	wp_localize_script( 'wp-blocks', '_wpBlocksAttributes', $schemas );
 
+	// Get admin url for handling metaboxes.
+	$metabox_url = admin_url( 'post.php' );
+	$metabox_url = add_query_arg( array(
+		'post'   => $post_id,
+		'action' => 'edit',
+	), $metabox_url );
+	wp_localize_script( 'wp-editor', '_wpMetaboxUrl', $metabox_url );
+
 	// Initialize the editor.
 	$gutenberg_theme_support = get_theme_support( 'gutenberg' );
 	$color_palette = gutenberg_color_palette();
diff --git a/lib/metabox-api.php b/lib/metabox-partial-page.php
similarity index 85%
rename from lib/metabox-api.php
rename to lib/metabox-partial-page.php
index e13b639275bf8..bfd31253368f3 100644
--- a/lib/metabox-api.php
+++ b/lib/metabox-partial-page.php
@@ -9,7 +9,10 @@
 	die( 'Silence is golden.' );
 }
 
-function gutenberg_meta_box_api() {
+/**
+ * Renders a partial page of metaboxes.
+ */
+function gutenberg_metabox_partial_page() {
 	/**
 	 * The metabox param as long as it is set on the wp-admin/post.php request
 	 * will trigger this API.
@@ -24,7 +27,7 @@ function gutenberg_meta_box_api() {
 	 * works just fine! Will only work on existing posts so far. Need to handle
 	 * this differently for new posts.
 	 */
-	if ( isset( $_REQUEST['metabox'] ) && $GLOBALS['pagenow'] === 'post.php' ) {
+	if ( isset( $_REQUEST['metabox'] ) && 'post.php' === $GLOBALS['pagenow'] ) {
 		global $post, $wp_meta_boxes, $hook_suffix, $current_screen, $wp_locale;
 
 		/* Scripts and styles that metaboxes can potentially be using */
@@ -81,10 +84,6 @@ function resizeIframe( obj ) {
 		<meta name="viewport" content="width=device-width,initial-scale=1.0">
 		<?php
 
-		// More scripts.
-		//wp_enqueue_script( 'post' );
-		//wp_enqueue_script( 'editor-expand' );
-
 		/**
 		 * Enqueue scripts for all admin pages.
 		 *
@@ -139,37 +138,49 @@ function resizeIframe( obj ) {
 		 */
 		do_action( 'admin_head' );
 
-		if ( get_user_setting('mfold') == 'f' )
+		/**
+		 * The main way post.php sets body class.
+		 */
+		if ( get_user_setting( 'mfold' ) == 'f' ) {
 			$admin_body_class .= ' folded';
+		}
 
-		if ( !get_user_setting('unfold') )
+		if ( ! get_user_setting( 'unfold' ) ) {
 			$admin_body_class .= ' auto-fold';
+		}
 
-		if ( is_admin_bar_showing() )
+		if ( is_admin_bar_showing() ) {
 			$admin_body_class .= ' admin-bar';
+		}
 
-		if ( is_rtl() )
+		if ( is_rtl() ) {
 			$admin_body_class .= ' rtl';
+		}
 
-		if ( $current_screen->post_type )
+		if ( $current_screen->post_type ) {
 			$admin_body_class .= ' post-type-' . $current_screen->post_type;
+		}
 
-		if ( $current_screen->taxonomy )
+		if ( $current_screen->taxonomy ) {
 			$admin_body_class .= ' taxonomy-' . $current_screen->taxonomy;
+		}
 
 		$admin_body_class .= ' branch-' . str_replace( array( '.', ',' ), '-', floatval( get_bloginfo( 'version' ) ) );
 		$admin_body_class .= ' version-' . str_replace( '.', '-', preg_replace( '/^([.0-9]+).*/', '$1', get_bloginfo( 'version' ) ) );
 		$admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'fresh' );
 		$admin_body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_user_locale() ) ) );
 
-		if ( wp_is_mobile() )
+		if ( wp_is_mobile() ) {
 			$admin_body_class .= ' mobile';
+		}
 
-		if ( is_multisite() )
+		if ( is_multisite() ) {
 			$admin_body_class .= ' multisite';
+		}
 
-		if ( is_network_admin() )
+		if ( is_network_admin() ) {
 			$admin_body_class .= ' network-admin';
+		}
 
 		$admin_body_class .= ' no-customize-support no-svg';
 
@@ -192,6 +203,10 @@ function resizeIframe( obj ) {
 		 * @param string $classes Space-separated list of CSS classes.
 		 */
 		$admin_body_classes = apply_filters( 'admin_body_class', '' );
+
+		// This page should always match up with the edit action.
+		$action = 'edit';
+
 		?>
 		<body class="wp-admin wp-core-ui no-js <?php echo $admin_body_classes . ' ' . $admin_body_class; ?>">
 		<script type="text/javascript">
@@ -200,9 +215,10 @@ function resizeIframe( obj ) {
 		<?php
 		$notice = false;
 		$form_extra = '';
-		if ( 'auto-draft' == $post->post_status ) {
-			if ( 'edit' == $action )
+		if ( 'auto-draft' === $post->post_status ) {
+			if ( 'edit' === $action ) {
 				$post->post_title = '';
+			}
 			$autosave = false;
 			$form_extra .= "<input type='hidden' id='auto_draft' name='auto_draft' value='1' />";
 		} else {
@@ -213,7 +229,8 @@ function resizeIframe( obj ) {
 		$nonce_action = 'update-post_' . $post->ID;
 		$form_extra .= "<input type='hidden' id='post_ID' name='post_ID' value='" . esc_attr( $post->ID ) . "' />";
 		?>
-		<form name="post" action="post.php" method="post" id="post"<?php
+		<form name="post" action="post.php" method="post" id="post"
+		<?php
 		/**
 		 * Fires inside the post editor form tag.
 		 *
@@ -224,27 +241,28 @@ function resizeIframe( obj ) {
 		do_action( 'post_edit_form_tag', $post );
 
 		$referer = wp_get_referer();
-		?>><!-- End of Post Form Tag. -->
+		?>
+		><!-- End of Post Form Tag. -->
 		<?php wp_nonce_field( $nonce_action ); ?>
 		<?php
 			$current_user = wp_get_current_user();
-			$user_ID = $current_user->ID;
+			$user_id = $current_user->ID;
 		?>
-		<input type="hidden" id="user-id" name="user_ID" value="<?php echo (int) $user_ID ?>" />
-		<input type="hidden" id="hiddenaction" name="action" value="<?php echo esc_attr( $form_action ) ?>" />
-		<input type="hidden" id="originalaction" name="originalaction" value="<?php echo esc_attr( $form_action ) ?>" />
+		<input type="hidden" id="user-id" name="user_ID" value="<?php echo (int) $user_id; ?>" />
+		<input type="hidden" id="hiddenaction" name="action" value="<?php echo esc_attr( $form_action ); ?>" />
+		<input type="hidden" id="originalaction" name="originalaction" value="<?php echo esc_attr( $form_action ); ?>" />
 		<input type="hidden" id="post_author" name="post_author" value="<?php echo esc_attr( $post->post_author ); ?>" />
-		<input type="hidden" id="post_type" name="post_type" value="<?php echo esc_attr( $post->post_type ) ?>" />
-		<input type="hidden" id="original_post_status" name="original_post_status" value="<?php echo esc_attr( $post->post_status ) ?>" />
+		<input type="hidden" id="post_type" name="post_type" value="<?php echo esc_attr( $post->post_type ); ?>" />
+		<input type="hidden" id="original_post_status" name="original_post_status" value="<?php echo esc_attr( $post->post_status ); ?>" />
 		<input type="hidden" id="referredby" name="referredby" value="<?php echo $referer ? esc_url( $referer ) : ''; ?>" />
 		<!-- This field is not part of the standard post form and is used to signify this is a gutenberg metabox. -->
 		<input type="hidden" name="gutenberg_metaboxes" value="gutenberg_metaboxes" />
-		<?php if ( ! empty( $active_post_lock ) ) { ?>
+		<?php if ( ! empty( $active_post_lock ) ) : ?>
 		<input type="hidden" id="active_post_lock" value="<?php echo esc_attr( implode( ':', $active_post_lock ) ); ?>" />
+		<?php endif; ?>
 
 		<?php
-		}
-		if ( 'draft' != get_post_status( $post ) ) {
+		if ( 'draft' !== get_post_status( $post ) ) {
 			wp_original_referer_field( true, 'previous' );
 		}
 
@@ -267,10 +285,12 @@ function resizeIframe( obj ) {
 		 */
 		do_action( 'edit_form_top', $post );
 
-		// Rendering the metaboxes.
+		/**
+		 * Rendering the metaboxes.
+		 */
 
 		// Styles.
-		$heading_style = "display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:0;line-height: 50px;height: 50px;padding: 0 15px;background-color: #eee;border-top: 1px solid #e4e2e7;border-bottom: 1px solid #e4e2e7;box-sizing: border-box;";
+		$heading_style = 'display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:0;line-height: 50px;height: 50px;padding: 0 15px;background-color: #eee;border-top: 1px solid #e4e2e7;border-bottom: 1px solid #e4e2e7;box-sizing: border-box;';
 
 		/**
 		 * The #poststuff id selector is import for styles and scripts.
@@ -282,14 +302,15 @@ function resizeIframe( obj ) {
 		?>
 		<header class="gutenberg-metaboxes__header" style="<?php echo $heading_style; ?>">
 			<h2 style="font-size: 14px;">Extended Settings</h2>
-			<input name="save" type="submit" class="button button-primary button-large" id="publish" value="Update Settings">
+			<!-- @TODO leaving this commented out as it may need to be used. -->
+			<!--<input name="save" type="submit" class="button button-primary button-large" id="publish" value="Update Settings">-->
 		</header>
 		<div id="poststuff" class="sidebar-open">
 			<div class="gutenberg-metaboxes">
 				<div id="postbox-container-2" class="postbox-container">
 		<?php
 		$locations = array( 'normal', 'advanced', 'side' );
-		foreach( $locations as $location ) {
+		foreach ( $locations as $location ) {
 			do_meta_boxes(
 				null,
 				$location,
@@ -339,10 +360,11 @@ function resizeIframe( obj ) {
 		 */
 		do_action( "admin_footer-{$hook_suffix}" );
 
-		// get_site_option() won't exist when auto upgrading from <= 2.7
-		if ( function_exists('get_site_option') ) {
-			if ( false === get_site_option('can_compress_scripts') )
+		// get_site_option() won't exist when auto upgrading from <= 2.7.
+		if ( function_exists( 'get_site_option' ) ) {
+			if ( false === get_site_option( 'can_compress_scripts' ) ) {
 				compression_test();
+			}
 		}
 
 		?>
@@ -352,7 +374,8 @@ function resizeIframe( obj ) {
 		</html>
 
 		<?php
-		exit( 'YOLO, Gutenberg metaboxes in da haus' );
+		remove_all_actions( 'shutdown' );
+		exit();
 
 		/**
 		 * Shutdown hooks potentially firing.
@@ -362,12 +385,15 @@ function resizeIframe( obj ) {
 	}
 }
 
-add_action( 'do_meta_boxes', 'gutenberg_meta_box_api' );
+add_action( 'do_meta_boxes', 'gutenberg_metabox_partial_page' );
 
 /**
  * Allows the metabox endpoint to correctly redirect to the metabox endpoint
  * when a post is saved.
  *
+ * @param string $location The location of the metabox, 'side', 'normal'.
+ * @param int    $post_id  Post ID.
+ *
  * @hooked redirect_post_location priority 10
  */
 function gutenberg_metabox_save_redirect( $location, $post_id ) {
diff --git a/lib/register.php b/lib/register.php
index 15c175e0a11a2..4f0785268569f 100644
--- a/lib/register.php
+++ b/lib/register.php
@@ -18,11 +18,21 @@
  * @since 0.1.0
  */
 function the_gutenberg_project() {
-	// Somehow get post ID.
-	global $post;
+	/**
+	 * Somehow get post ID.
+	 *
+	 * IMPORTANT TO NOTE: This method potentially breaks around revisions.
+	 * Anyone who is more well versed in the intricacies of revisions should
+	 * help test this out.
+	 */
+	if ( isset( $_REQUEST['post_id'] ) ) {
+		$post = get_post( $_REQUEST['post_id'] );
+	} else {
+		global $post;
+	}
+
 	$post_id = $post->ID;
-	$meta_box_api_url = get_admin_url();
-	$meta_box_api_url = $meta_box_api_url . 'post.php';
+	$meta_box_api_url = admin_url( 'post.php' );
 	$meta_box_api_url = add_query_arg( array(
 		'post'    => $post_id,
 		'metabox' => 'some-location',
@@ -34,7 +44,6 @@ function the_gutenberg_project() {
 		<section id="editor" class="gutenberg__editor"></section>
 	</div>
 	<!-- Classic Metabox iFrame -->
-	<iframe id="gutenberg-metabox-iframe" class="gutenberg-metabox-iframe" style="width: 100%;" src="<?php echo esc_url_raw( $meta_box_api_url ); ?>"></iframe>
 	<?php
 }