Adding metabox support.

Please see `docs/metabox.md` for details. There are still touchups that
are needed.

editor/layout/index.js

@@ -17,7 +17,7 @@ import Header from '../header';
 import Sidebar from '../sidebar';
 import TextEditor from '../modes/text-editor';
 import VisualEditor from '../modes/visual-editor';
-import MetaBoxes from '../meta-boxes';
+// import MetaBoxes from '../meta-boxes';
 import UnsavedChangesWarning from '../unsaved-changes-warning';
 import DocumentTitle from '../document-title';
 import AutosaveMonitor from '../autosave-monitor';
@@ -46,11 +46,10 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
  { mode === 'text' && <TextEditor /> }
  { mode === 'visual' && <VisualEditor /> }
  </div>
- <MetaBoxes />
+ <Metabox key="metaboxes" location="normal" isSidebarOpened={ isSidebarOpened } />
  </div>
  { isSidebarOpened && <Sidebar /> }
  </div>,
- <Metabox key="metaboxes" location="normal" isSidebarOpened={ isSidebarOpened } />,
  ];
 }
 

editor/metaboxes/iframe.js

@@ -8,6 +8,7 @@ import { isEqual } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { Component, findDOMNode } from '@wordpress/element';
+import { Panel, PanelBody } from '@wordpress/components';
 
 // @TODO add error handling.
 class MetaboxIframe extends Component {
@@ -17,13 +18,15 @@ class MetaboxIframe extends Component {
  this.state = {
  width: 0,
  height: 0,
+ isOpen: false,
  };
 
  this.formData = [];
  this.originalFormData = [];
  this.form = null;
  this.hasLoaded = false;
 
+ this.toggle = this.toggle.bind( this );
  this.checkMessageForResize = this.checkMessageForResize.bind( this );
  this.handleDoubleBuffering = this.handleDoubleBuffering.bind( this );
  this.handleMetaboxReload = this.handleMetaboxReload.bind( this );
@@ -32,6 +35,12 @@ class MetaboxIframe extends Component {
  this.observeChanges = this.observeChanges.bind( this );
  }
 
+ toggle() {
+ this.setState( {
+ isOpen: ! this.state.isOpen,
+ } );
+ }
+
  isFrameAccessible() {
  try {
  return !! this.node.contentDocument.body;
@@ -51,13 +60,17 @@ class MetaboxIframe extends Component {
  }
 
  componentDidMount() {
- /**
- * Sets up an event listener for resizing. The resizing occurs inside
- * the iframe, see gutenberg/assets/js/metabox.js
- */
- window.addEventListener( 'message', this.checkMessageForResize, false );
- this.node.style.display = 'none';
- this.node.addEventListener( 'load', this.observeChanges );
+ if ( this.isFrameAccessible() ) {
+ /**
+ * Sets up an event listener for resizing. The resizing occurs inside
+ * the iframe, see gutenberg/assets/js/metabox.js
+ */
+ window.addEventListener( 'message', this.checkMessageForResize, false );
+
+ // Initially set node to not display anything so that when it loads, we can see it.
+ this.node.style.display = 'none';
+ this.node.addEventListener( 'load', this.observeChanges );
+ }
  }
 
  componentWillReceiveProps( nextProps ) {
@@ -81,6 +94,20 @@ class MetaboxIframe extends Component {
  }
  }
 
+ componentDidUpdate() {
+ if ( this.isFrameAccessible() ) {
+ /**
+ * Sets up an event listener for resizing. The resizing occurs inside
+ * the iframe, see gutenberg/assets/js/metabox.js
+ */
+ window.addEventListener( 'message', this.checkMessageForResize, false );
+
+ // Initially set node to not display anything so that when it loads, we can see it.
+ //this.node.style.display = 'none';
+ this.node.addEventListener( 'load', this.observeChanges );
+ }
+ }
+
  handleDoubleBuffering() {
  const iframe = findDOMNode( this.node );
  const cloneIframe = findDOMNode( this.clonedNode );
@@ -114,19 +141,21 @@ class MetaboxIframe extends Component {
  }
 
  componentWillUnmount() {
- const iframe = findDOMNode( this.node );
- iframe.removeEventListener( 'message', this.checkMessageForResize );
+ if ( this.isFrameAccessible() ) {
+ const iframe = findDOMNode( this.node );
+ iframe.removeEventListener( 'message', this.checkMessageForResize );
 
- if ( this.dirtyObserver ) {
- this.dirtyObserver.disconnect();
- }
+  if ( this.dirtyObserver ) {
+  this.dirtyObserver.disconnect();
+  }
 
- if ( this.form !== null ) {
- this.form.removeEventListener( 'input', this.checkMetaboxState );
- this.form.removeEventListener( 'change', this.checkMetaboxState );
- }
+  if ( this.form !== null ) {
+  this.form.removeEventListener( 'input', this.checkMetaboxState );
+  this.form.removeEventListener( 'change', this.checkMetaboxState );
+  }
 
- this.node.removeEventListener( 'load', this.observeChanges );
+ this.node.removeEventListener( 'load', this.observeChanges );
+ }
  }
 
  observeChanges() {
@@ -157,7 +186,7 @@ class MetaboxIframe extends Component {
  }
 
  getFormData( node ) {
- if ( ! this.isFrameAccessible ) {
+ if ( ! this.isFrameAccessible() ) {
  return;
  }
 
@@ -169,19 +198,21 @@ class MetaboxIframe extends Component {
  }
 
  checkMetaboxState() {
- const entries = this.getFormData( this.node );
+ if ( this.props.isUpdating !== true ) {
+ const entries = this.getFormData( this.node );
 
- if ( ! isEqual( this.originalFormData, entries ) ) {
- if ( this.props.isDirty === false ) {
- this.props.changedMetaboxState( this.props.location, true );
- }
+  if ( ! isEqual( this.originalFormData, entries ) ) {
+  if ( this.props.isDirty === false ) {
+  this.props.changedMetaboxState( this.props.location, true );
+  }
 
- return;
- }
+  return;
+  }
 
- // If the data is the same as the original and we have metabox marked as dirty.
- if ( this.props.isDirty === true ) {
- this.props.changedMetaboxState( this.props.location, false );
+ // If the data is the same as the original and we have metabox marked as dirty.
+ if ( this.props.isDirty === true ) {
+ this.props.changedMetaboxState( this.props.location, false );
+ }
  }
  }
 
@@ -231,20 +262,28 @@ class MetaboxIframe extends Component {
 
  render() {
  const { location, className, id } = this.props;
+ const { isOpen } = this.state;
 
  return (
- <div id="iframe-container" className={ className }>
- <iframe
- ref={ ( node ) => {
- this.node = node;
- } }
+ <Panel className="editor-meta-boxes">
+ <PanelBody
  title={ __( 'Extended Settings' ) }
- key="metabox"
- id={ id }
- src={ `${ window._wpMetaboxUrl }&metabox=${ location }` }
- width={ Math.ceil( this.state.width ) }
- height={ Math.ceil( this.state.height ) } />
- </div>
+ opened={ isOpen }
+ onToggle={ this.toggle }>
+ <div id="iframe-container" className={ className }>
+ <iframe
+ ref={ ( node ) => {
+ this.node = node;
+ } }
+ title={ __( 'Extended Settings' ) }
+ key="metabox"
+ id={ id }
+ src={ `${ window._wpMetaboxUrl }&metabox=${ location }` }
+ width={ Math.ceil( this.state.width ) }
+ height={ Math.ceil( this.state.height ) } />
+ </div>
+ </PanelBody>
+ </Panel>
  );
  }
 }

editor/metaboxes/metabox-iframe.scss

@@ -28,12 +28,6 @@
  border-bottom: 1px solid $light-gray-500;
  }
 
- .gutenberg-metaboxes__header {
- background-color: #edeff0;
- border-bottom: 0;
- border-top: 1px solid $light-gray-500;
- }
-
  .postbox {
  border: 0;
  color: $dark-gray-500;

editor/metaboxes/style.scss

@@ -1,8 +1,53 @@
 .gutenberg-metabox-iframe {
  width: 100%;
  position: relative;
+}
+
+.editor-meta-boxes {
+ border-right-width: 0;
+ border-left-width: 0;
+
+ .components-panel__body-toggle {
+ background-color: $light-gray-300;
+ }
+
+ .components-panel__body {
+ padding: 0;
+
+ .components-panel__body-title {
+ margin: 0;
+
+ .components-panel__body-toggle {
+ z-index: 1;
+ }
+ }
+ }
+
+ .components-panel__body.is-opened .components-panel__body-toggle {
+ border-bottom: 1px solid $light-gray-500;
+ }
+}
+
+.editor-meta-boxes__coming-soon {
+ width: 300px;
+ padding: #{ $panel-padding * 2 } 0 $panel-padding;
+ margin: 0 auto;
+ text-align: center;
+
+ &,
+ h3 {
+ color: $dark-gray-200;
+ }
 
- &.normal.sidebar-open {
- width: calc( 100% - #{ $sidebar-width } );
+ h3 {
+ margin: 0.6em 0;
  }
+
+ p {
+ margin-bottom: 0;
+ }
+}
+
+.is-loading {
+ background-color: black !important;
 }

lib/metabox-partial-page.php

@@ -328,11 +328,6 @@ function resizeIframe( obj ) {
  * opening and closing in the block editor. By default it is open.
  */
  ?>
- <header class="gutenberg-metaboxes__header" style="<?php echo $heading_style; ?>">
- <h2 style="font-size: 14px;">Extended Settings</h2>
- <!-- @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">