Splitting Metabox iFrames into sidebar.

Splits metabox iframes into sidebar, and changes the partial page to
handle different metabox locations.

assets/js/metabox.js

@@ -1,5 +1,6 @@
 ( function( iFrameResize, $ ) {
 	$( document ).ready( function() {
 		iFrameResize( { resizeFrom: 'child', heightCalculationMethod: 'documentElementScroll' }, '#gutenberg-metabox-iframe' );
+		iFrameResize( { resizeFrom: 'child', heightCalculationMethod: 'documentElementScroll' }, '#gutenberg-metabox-iframe-sidebar' );
 	} );
 } )( window.iFrameResize, jQuery );

editor/layout/index.js

@@ -21,7 +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 Metaboxes from '../metaboxes/main.js';
 import {
 	getEditorMode,
 	isEditorSidebarOpened,

editor/metaboxes/index.js → editor/metaboxes/main.js

@@ -3,13 +3,12 @@
  */
 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';
+import { Component } from '@wordpress/element';
 
 /**
  * Internal dependencies

editor/metaboxes/sidebar.js

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { setMetaboxReference } from '../actions';
+
+class SidebarMetaboxes 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, id = 'gutenberg-metabox-iframe' } = this.props;
+		const classes = classnames( {
+			'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 )( SidebarMetaboxes );

editor/sidebar/index.js

@@ -15,13 +15,17 @@ import './style.scss';
 import PostSettings from './post-settings';
 import BlockInspector from './block-inspector';
 import Header from './header';
+import SidebarMetaboxes from '../metaboxes/sidebar.js';
 import { getActivePanel } from '../selectors';
 
 const Sidebar = ( { panel } ) => {
 	return (
 		<div className="editor-sidebar">
 			<Header />
-			{ panel === 'document' && <PostSettings /> }
+			{ panel === 'document' && [
+				<PostSettings key="settings" />,
+				<SidebarMetaboxes key="metabox" location="side" id="gutenberg-metabox-iframe-sidebar" />,
+			] }
 			{ panel === 'block' && <BlockInspector /> }
 		</div>
 	);

lib/metabox-partial-page.php

@@ -28,6 +28,10 @@ function gutenberg_metabox_partial_page() {
 	 * this differently for new posts.
 	 */
 	if ( isset( $_REQUEST['metabox'] ) && 'post.php' === $GLOBALS['pagenow'] ) {
+		if ( ! in_array( $_REQUEST['metabox'], array( 'side', 'normal', 'advanced' ), true ) ) {
+			wp_die( __( 'The metabox parameter should be one of "side", "normal", or "advanced".', 'gutenberg' ) );
+		}
+
 		global $post, $wp_meta_boxes, $hook_suffix, $current_screen, $wp_locale;
 
 		/* Scripts and styles that metaboxes can potentially be using */
@@ -98,7 +102,9 @@ function resizeIframe( obj ) {
 		 *
 		 * @since 2.6.0
 		 */
+		// @codingStandardsIgnoreStart
 		do_action( "admin_print_styles-{$hook_suffix}" );
+		// @codingStandardsIgnoreEnd
 
 		/**
 		 * Fires when styles are printed for all admin pages.
@@ -112,7 +118,9 @@ function resizeIframe( obj ) {
 		 *
 		 * @since 2.1.0
 		 */
+		// @codingStandardsIgnoreStart
 		do_action( "admin_print_scripts-{$hook_suffix}" );
+		// @codingStandardsIgnoreEnd
 
 		/**
 		 * Fires when scripts are printed for all admin pages.
@@ -129,7 +137,9 @@ function resizeIframe( obj ) {
 		 *
 		 * @since 2.1.0
 		 */
+		// @codingStandardsIgnoreStart
 		do_action( "admin_head-{$hook_suffix}" );
+		// @codingStandardsIgnoreEnd
 
 		/**
 		 * Fires in head section for all admin pages.
@@ -255,8 +265,9 @@ function resizeIframe( obj ) {
 		<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. -->
+		<!-- These fields are not part of the standard post form. Used to redirect back to this page on save. -->
 		<input type="hidden" name="gutenberg_metaboxes" value="gutenberg_metaboxes" />
+		<input type="hidden" name="gutenberg_metabox_location" value="<?php echo esc_attr( $_REQUEST['metabox'] ); ?>" />
 		<?php if ( ! empty( $active_post_lock ) ) : ?>
 		<input type="hidden" id="active_post_lock" value="<?php echo esc_attr( implode( ':', $active_post_lock ) ); ?>" />
 		<?php endif; ?>
@@ -309,14 +320,31 @@ function resizeIframe( obj ) {
 			<div class="gutenberg-metaboxes">
 				<div id="postbox-container-2" class="postbox-container">
 		<?php
-		$locations = array( 'normal', 'advanced', 'side' );
-		foreach ( $locations as $location ) {
-			do_meta_boxes(
-				null,
-				$location,
-				$post
-			);
+		$_original_metaboxes = $wp_meta_boxes;
+		$wp_meta_boxes = gutenberg_filter_metaboxes( $wp_meta_boxes );
+
+		$locations = array();
+
+		if ( 'normal' === $_REQUEST['metabox'] || 'advanced' === $_REQUEST['metabox'] ) {
+			$locations = array( 'advanced', 'normal' );
+		}
+
+		if ( 'side' === $_REQUEST['metabox'] ) {
+			$locations = array( 'side' );
 		}
+
+		if ( ! empty( $locations ) ) {
+			foreach ( $locations as $location ) {
+				do_meta_boxes(
+					$current_screen,
+					$location,
+					$post
+				);
+			}
+		}
+
+		// Reset metaboxes.
+		$wp_meta_boxes = $_original_metaboxes;
 		?>
 		<!-- Don't ask why this works, but for some reason do_meta_boxes() will output closing div tags, but still needs this one. -->
 		</div>
@@ -385,7 +413,7 @@ function resizeIframe( obj ) {
 	}
 }
 
-add_action( 'do_meta_boxes', 'gutenberg_metabox_partial_page' );
+add_action( 'gutenberg_metaboxes', 'gutenberg_metabox_partial_page' );
 
 /**
  * Allows the metabox endpoint to correctly redirect to the metabox endpoint
@@ -397,13 +425,59 @@ function resizeIframe( obj ) {
  * @hooked redirect_post_location priority 10
  */
 function gutenberg_metabox_save_redirect( $location, $post_id ) {
-	if ( isset( $_REQUEST['gutenberg_metaboxes'] ) && 'gutenberg_metaboxes' === $_REQUEST['gutenberg_metaboxes'] ) {
-		$location = add_query_arg( 'metabox', 'taco', $location );
+	if ( isset( $_REQUEST['gutenberg_metaboxes'] )
+			&& isset( $_REQUEST['gutenberg_metabox_location'] )
+			&& 'gutenberg_metaboxes' === $_REQUEST['gutenberg_metaboxes'] ) {
+		$metabox_location = $_REQUEST['gutenberg_metabox_location'];
+		$location = add_query_arg( 'metabox', $metabox_location, $location );
 	}
 
 	return $location;
 }
 
 add_filter( 'redirect_post_location', 'gutenberg_metabox_save_redirect', 10, 2 );
 
+/**
+ * Filter out core metaboxes as well as the post thumbnail.
+ *
+ * @param array $metaboxes Metabox data.
+ */
+function gutenberg_filter_metaboxes( $metaboxes ) {
+	$core_side_metaboxes = array(
+		'submitdiv',
+		'formatdiv',
+		'categorydiv',
+		'tagsdiv-post_tag',
+		'postimagediv',
+	);
+
+	$core_normal_metaboxes = array(
+		'revisionsdiv',
+		'postexcerpt',
+		'trackbacksdiv',
+		'postcustom',
+		'commentstatusdiv',
+		'commentsdiv',
+		'slugdiv',
+		'authordiv',
+	);
+
+	foreach ( $metaboxes as $page => $contexts ) {
+		foreach ( $contexts as $context => $priorities ) {
+			foreach ( $priorities as $priority => $box ) {
+				foreach ( $box as $name => $data ) {
+					if ( 'normal' === $context && in_array( $name, $core_normal_metaboxes, true ) ) {
+						unset( $metaboxes[ $page ][ $context ][ $priority ][ $name ] );
+					}
+					if ( 'side' === $context && in_array( $name, $core_side_metaboxes, true ) ) {
+						unset( $metaboxes[ $page ][ $context ][ $priority ][ $name ] );
+					}
+				}
+			}
+		}
+	}
+
+	return $metaboxes;
+}
+
 ?>

lib/register.php

@@ -18,27 +18,6 @@
  * @since 0.1.0
  */
 function the_gutenberg_project() {
-	/**
-	 * 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 = admin_url( 'post.php' );
-	$meta_box_api_url = add_query_arg( array(
-		'post'    => $post_id,
-		'metabox' => 'some-location',
-		'action'  => 'edit',
-	), $meta_box_api_url );
-
 	?>
 	<div class="gutenberg">
 		<section id="editor" class="gutenberg__editor"></section>