Metaboxes: Prefetch Metaboxes and don't reload them on save

WordPress · Nov 22, 2017 · 732d7f0 · 732d7f0
1 parent 13c7c99
commit 732d7f0
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 415 deletions.
diff --git a/editor/components/meta-boxes/meta-boxes-area/index.js b/editor/components/meta-boxes/meta-boxes-area/index.js
@@ -24,7 +24,7 @@ class MetaBoxesArea extends Component {
 		super( ...arguments );
 
 		this.state = {
-			loading: true,
+			loading: false,
 		};
 		this.originalFormData = [];
 		this.bindNode = this.bindNode.bind( this );
@@ -40,9 +40,10 @@ class MetaBoxesArea extends Component {
 		this.fetchMetaboxes();
 	}
 
-	componentWillUnmout() {
+	componentWillUnmount() {
 		this.mounted = false;
 		this.unbindFormEvents();
+		document.querySelector( '#metaboxes' ).appendChild( this.form );
 	}
 
 	unbindFormEvents() {
@@ -63,37 +64,28 @@ class MetaBoxesArea extends Component {
 				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();
+
+			// Save the metaboxes
+			window.fetch( addQueryArgs( window._wpMetaBoxUrl, { meta_box: location } ), fetchOptions )
+				.then( () => {
+					if ( ! this.mounted ) {
+						return false;
+					}
+					this.setState( { loading: false } );
+					this.props.metaBoxReloaded( location );
+				} );
 		}
 	}
 
 	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 );
-				}
-			} );
+		this.form = document.querySelector( '.metabox-location-' + location );
+		this.node.appendChild( this.form );
+		this.form.onSubmit = ( event ) => event.preventDefault();
+		this.originalFormData = this.getFormData();
+		this.form.addEventListener( 'change', this.checkState );
+		this.form.addEventListener( 'input', this.checkState );
+		this.props.metaBoxLoaded( location );
 	}
 
 	getFormData() {

diff --git a/editor/effects.js b/editor/effects.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { BEGIN, COMMIT, REVERT } from 'redux-optimist';
-import { get, uniqueId, map, filter, some, castArray } from 'lodash';
+import { get, uniqueId, castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,6 @@ import {
 	isEditedPostDirty,
 	isEditedPostNew,
 	isEditedPostSaveable,
-	getMetaBoxes,
 	getBlock,
 	getReusableBlock,
 } from './selectors';
@@ -289,27 +288,6 @@ export default {
 
 		return effects;
 	},
-	INITIALIZE_META_BOX_STATE( action ) {
-		// Hold jquery.ready until the metaboxes load
-		const locations = [ 'normal', 'side' ];
-		if ( some( locations, ( location ) => !! action.metaBoxes[ location ] ) ) {
-			jQuery.holdReady( true );
-		}
-	},
-	META_BOX_LOADED( action, store ) {
-		const { getState } = store;
-		const metaboxes = getMetaBoxes( getState() );
-		const unloadedMetaboxes = filter(
-			map( metaboxes, ( value, key ) => ( {
-				...value,
-				key,
-			} ) ),
-			( metabox ) => metabox.isActive && ! metabox.isLoaded
-		);
-		if ( unloadedMetaboxes.length === 1 && unloadedMetaboxes[ 0 ].key === action.location ) {
-			jQuery.holdReady( false );
-		}
-	},
 	FETCH_REUSABLE_BLOCKS( action, store ) {
 		const { id } = action;
 		const { dispatch } = store;

diff --git a/gutenberg.php b/gutenberg.php
@@ -31,6 +31,9 @@ function the_gutenberg_project() {
 	<div class="nvda-temp-fix screen-reader-text">&nbsp;</div>
 	<div class="gutenberg">
 		<div id="editor" class="gutenberg__editor"></div>
+		<div id="metaboxes" style="display: none;">
+			<?php the_gutenberg_metaboxes(); ?>
+		</div>
 	</div>
 	<?php
 }

diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -603,7 +603,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	wp_enqueue_script(
 		'wp-editor',
 		gutenberg_url( 'editor/build/index.js' ),
-		array( 'jquery', 'wp-api', 'wp-date', 'wp-i18n', 'wp-blocks', 'wp-element', 'wp-components', 'wp-utils', 'word-count', 'editor', 'heartbeat' ),
+		array( 'wp-api', 'wp-date', 'wp-i18n', 'wp-blocks', 'wp-element', 'wp-components', 'wp-utils', 'word-count', 'editor', 'heartbeat' ),
 		filemtime( gutenberg_dir_path() . 'editor/build/index.js' ),
 		true // enqueue in the footer.
 	);