Add the middlewares API

.eslintrc.js

@@ -26,7 +26,7 @@ module.exports = {
 		'jest/globals': true,
 	},
 	globals: {
-		wpApiSettings: true,
+		wpApiSchema: true,
 	},
 	plugins: [
 		'jest',

components/code-editor/index.js

@@ -21,7 +21,7 @@ function loadScript() {
 		}
 
 		const script = document.createElement( 'script' );
-		script.src = `${ wpApiSettings.schema.url }/wp-admin/load-scripts.php?load=${ handles.join( ',' ) }`;
+		script.src = `${ wpApiSchema.url }/wp-admin/load-scripts.php?load=${ handles.join( ',' ) }`;
 		script.onload = resolve;
 		script.onerror = reject;
 
@@ -35,7 +35,7 @@ function loadStyle() {
 
 		const style = document.createElement( 'link' );
 		style.rel = 'stylesheet';
-		style.href = `${ wpApiSettings.schema.url }/wp-admin/load-styles.php?load=${ handles.join( ',' ) }`;
+		style.href = `${ wpApiSchema.url }/wp-admin/load-styles.php?load=${ handles.join( ',' ) }`;
 		style.onload = resolve;
 		style.onerror = reject;
 

components/higher-order/with-api-data/request.js

@@ -4,6 +4,11 @@
 import memoize from 'memize';
 import { mapKeys } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import apiRequest from '@wordpress/api-request';
+
 export const getStablePath = memoize( ( path ) => {
 	const [ base, query ] = path.split( '?' );
 	if ( ! query ) {
@@ -75,7 +80,7 @@ export function getCachedResponse( request ) {
 }
 
 export function getResponseFromNetwork( request ) {
-	const promise = wp.apiRequest( request )
+	const promise = apiRequest( request )
 		.then( ( body, status, xhr ) => {
 			return {
 				body,

core-blocks/embed/index.js

@@ -19,6 +19,7 @@ import {
 	BlockAlignmentToolbar,
 	RichText,
 } from '@wordpress/editor';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Internal dependencies
@@ -30,7 +31,7 @@ import './editor.scss';
 const HOSTS_NO_PREVIEWS = [ 'facebook.com' ];
 
 // Caches the embed API calls, so if blocks get transformed, or deleted and added again, we don't spam the API.
-const wpEmbedAPI = memoize( ( url ) => wp.apiRequest( { path: `/oembed/1.0/proxy?${ stringify( { url } ) }` } ) );
+const wpEmbedAPI = memoize( ( url ) => apiRequest( { path: `/oembed/1.0/proxy?${ stringify( { url } ) }` } ) );
 
 const matchesPatterns = ( url, patterns = [] ) => {
 	return patterns.some( ( pattern ) => {

edit-post/index.js

@@ -13,16 +13,6 @@ import store from './store';
 import { initializeMetaBoxState } from './store/actions';
 import Editor from './editor';
 
-/**
- * Configure heartbeat to refresh the wp-api nonce, keeping the editor
- * authorization intact.
- */
-window.jQuery( document ).on( 'heartbeat-tick', ( event, response ) => {
-	if ( response[ 'rest-nonce' ] ) {
-		window.wpApiSettings.nonce = response[ 'rest-nonce' ];
-	}
-} );
-
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
  * an unhandled error occurs, replacing previously mounted editor element using

edit-post/store/effects.js

@@ -9,6 +9,7 @@ import { reduce, some } from 'lodash';
 import { select, subscribe } from '@wordpress/data';
 import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Internal dependencies
@@ -98,7 +99,7 @@ const effects = {
 		additionalData.forEach( ( [ key, value ] ) => formData.append( key, value ) );
 
 		// Save the metaboxes
-		wp.apiRequest( {
+		apiRequest( {
 			url: window._wpMetaBoxUrl,
 			method: 'POST',
 			processData: false,

editor/components/autocompleters/user.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import apiRequest from '@wordpress/api-request';
+
 /**
 * A user mentions completer.
 *
@@ -12,7 +17,7 @@ export default {
 		if ( search ) {
 			payload = '?search=' + encodeURIComponent( search );
 		}
-		return wp.apiRequest( { path: '/wp/v2/users' + payload } );
+		return apiRequest( { path: '/wp/v2/users' + payload } );
 	},
 	isDebounced: true,
 	getOptionKeywords( user ) {

editor/components/post-taxonomies/flat-term-selector.js

@@ -11,6 +11,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { Component, compose } from '@wordpress/element';
 import { FormTokenField, withAPIData } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Module constants
@@ -75,7 +76,7 @@ class FlatTermSelector extends Component {
 	fetchTerms( params = {} ) {
 		const query = { ...DEFAULT_QUERY, ...params };
 		const basePath = wp.api.getTaxonomyRoute( this.props.slug );
-		const request = wp.apiRequest( { path: `/wp/v2/${ basePath }?${ stringify( query ) }` } );
+		const request = apiRequest( { path: `/wp/v2/${ basePath }?${ stringify( query ) }` } );
 		request.then( ( terms ) => {
 			this.setState( ( state ) => ( {
 				availableTerms: state.availableTerms.concat(
@@ -106,15 +107,15 @@ class FlatTermSelector extends Component {
 		return new Promise( ( resolve, reject ) => {
 			// Tries to create a term or fetch it if it already exists
 			const basePath = wp.api.getTaxonomyRoute( this.props.slug );
-			wp.apiRequest( {
+			apiRequest( {
 				path: `/wp/v2/${ basePath }`,
 				method: 'POST',
 				data: { name: termName },
 			} ).then( resolve, ( xhr ) => {
 				const errorCode = xhr.responseJSON && xhr.responseJSON.code;
 				if ( errorCode === 'term_exists' ) {
 					// search the new category created since last fetch
-					this.addRequest = wp.apiRequest( {
+					this.addRequest = apiRequest( {
 						path: `/wp/v2/${ basePath }?${ stringify( { ...DEFAULT_QUERY, search: termName } ) }`,
 					} );
 					return this.addRequest.then( ( searchResult ) => {

editor/components/post-taxonomies/hierarchical-term-selector.js

@@ -12,6 +12,7 @@ import { Component, compose } from '@wordpress/element';
 import { TreeSelect, withAPIData, withInstanceId, withSpokenMessages, Button } from '@wordpress/components';
 import { buildTermsTree } from '@wordpress/utils';
 import { withSelect, withDispatch } from '@wordpress/data';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Module Constants
@@ -103,7 +104,7 @@ class HierarchicalTermSelector extends Component {
 			} );
 			// Tries to create a term or fetch it if it already exists
 			const basePath = wp.api.getTaxonomyRoute( this.props.slug );
-			this.addRequest = wp.apiRequest( {
+			this.addRequest = apiRequest( {
 				path: `/wp/v2/${ basePath }`,
 				method: 'POST',
 				data: {
@@ -116,7 +117,7 @@ class HierarchicalTermSelector extends Component {
 					const errorCode = xhr.responseJSON && xhr.responseJSON.code;
 					if ( errorCode === 'term_exists' ) {
 						// search the new category created since last fetch
-						this.addRequest = wp.apiRequest( {
+						this.addRequest = apiRequest( {
 							path: `/wp/v2/${ basePath }?${ stringify( { ...DEFAULT_QUERY, parent: formParent || 0, search: formName } ) }`,
 						} );
 						return this.addRequest.then( ( searchResult ) => {
@@ -161,7 +162,7 @@ class HierarchicalTermSelector extends Component {
 
 	componentDidMount() {
 		const basePath = wp.api.getTaxonomyRoute( this.props.slug );
-		this.fetchRequest = wp.apiRequest( { path: `/wp/v2/${ basePath }?${ stringify( DEFAULT_QUERY ) }` } );
+		this.fetchRequest = apiRequest( { path: `/wp/v2/${ basePath }?${ stringify( DEFAULT_QUERY ) }` } );
 		this.fetchRequest.then(
 			( terms ) => { // resolve
 				const availableTermsTree = buildTermsTree( terms );

editor/components/provider/index.js

@@ -75,7 +75,7 @@ class EditorProvider extends Component {
 			[
 				APIProvider,
 				{
-					...wpApiSettings,
+					schema: wpApiSchema,
 					...pick( wp.api, [
 						'postTypeRestBaseMapping',
 						'taxonomyRestBaseMapping',

editor/components/url-input/index.js

@@ -13,6 +13,7 @@ import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { keycodes, decodeEntities } from '@wordpress/utils';
 import { Spinner, withInstanceId, withSpokenMessages, Popover } from '@wordpress/components';
+import apiRequest from '@wordpress/api-request';
 
 const { UP, DOWN, ENTER } = keycodes;
 
@@ -68,7 +69,7 @@ class UrlInput extends Component {
 			selectedSuggestion: null,
 			loading: true,
 		} );
-		this.suggestionsRequest = wp.apiRequest( {
+		this.suggestionsRequest = apiRequest( {
 			path: `/wp/v2/posts?${ stringify( {
 				search: value,
 				per_page: 20,

editor/store/effects.js

@@ -20,6 +20,7 @@ import {
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Internal dependencies
@@ -120,7 +121,7 @@ export default {
 		if ( isAutosave ) {
 			toSend.parent = post.id;
 
-			request = wp.apiRequest( {
+			request = apiRequest( {
 				path: `/wp/v2/${ basePath }/${ post.id }/autosaves`,
 				method: 'POST',
 				data: toSend,
@@ -134,7 +135,7 @@ export default {
 
 			dispatch( removeNotice( SAVE_POST_NOTICE_ID ) );
 
-			request = wp.apiRequest( {
+			request = apiRequest( {
 				path: `/wp/v2/${ basePath }/${ post.id }`,
 				method: 'PUT',
 				data: toSend,
@@ -243,7 +244,7 @@ export default {
 		const { postId } = action;
 		const basePath = wp.api.getPostTypeRoute( getCurrentPostType( getState() ) );
 		dispatch( removeNotice( TRASH_POST_NOTICE_ID ) );
-		wp.apiRequest( { path: `/wp/v2/${ basePath }/${ postId }`, method: 'DELETE' } ).then(
+		apiRequest( { path: `/wp/v2/${ basePath }/${ postId }`, method: 'DELETE' } ).then(
 			() => {
 				dispatch( {
 					...action,
@@ -286,7 +287,7 @@ export default {
 			context: 'edit',
 		};
 
-		wp.apiRequest( { path: `/wp/v2/${ basePath }/${ post.id }`, data } ).then(
+		apiRequest( { path: `/wp/v2/${ basePath }/${ post.id }`, data } ).then(
 			( newPost ) => {
 				dispatch( resetPost( newPost ) );
 			}
@@ -413,9 +414,9 @@ export default {
 
 		let result;
 		if ( id ) {
-			result = wp.apiRequest( { path: `/wp/v2/${ basePath }/${ id }` } );
+			result = apiRequest( { path: `/wp/v2/${ basePath }/${ id }` } );
 		} else {
-			result = wp.apiRequest( { path: `/wp/v2/${ basePath }?per_page=-1` } );
+			result = apiRequest( { path: `/wp/v2/${ basePath }?per_page=-1` } );
 		}
 
 		result.then(
@@ -468,7 +469,7 @@ export default {
 		const path = isTemporary ? `/wp/v2/${ basePath }` : `/wp/v2/${ basePath }/${ id }`;
 		const method = isTemporary ? 'POST' : 'PUT';
 
-		wp.apiRequest( { path, data, method } ).then(
+		apiRequest( { path, data, method } ).then(
 			( updatedSharedBlock ) => {
 				dispatch( {
 					type: 'SAVE_SHARED_BLOCK_SUCCESS',
@@ -524,7 +525,7 @@ export default {
 			sharedBlock.uid,
 		] ) );
 
-		wp.apiRequest( { path: `/wp/v2/${ basePath }/${ id }`, method: 'DELETE' } ).then(
+		apiRequest( { path: `/wp/v2/${ basePath }/${ id }`, method: 'DELETE' } ).then(
 			() => {
 				dispatch( {
 					type: 'DELETE_SHARED_BLOCK_SUCCESS',

lib/client-assets.php

@@ -123,11 +123,23 @@ function gutenberg_register_scripts_and_styles() {
 		filemtime( gutenberg_dir_path() . 'build/api-request/index.js' ),
 		true
 	);
-	wp_localize_script( 'wp-api-request', 'wpApiSettings', array(
-		'root'          => esc_url_raw( get_rest_url() ),
-		'nonce'         => ( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' ),
-		'versionString' => 'wp/v2/',
-	) );
+	wp_add_inline_script(
+		'wp-api-request',
+		sprintf(
+			'wp.apiRequest.use( wp.apiRequest.createNonceMiddleware( "%s" ) );',
+			( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' )
+		),
+		'after'
+	);
+	wp_add_inline_script(
+		'wp-api-request',
+		sprintf(
+			'wp.apiRequest.use( wp.apiRequest.createRootURLMiddleware( "%s" ) );',
+			esc_url_raw( get_rest_url() )
+		),
+		'after'
+	);
+
 	wp_register_script(
 		'wp-deprecated',
 		gutenberg_url( 'build/deprecated/index.js' ),
@@ -166,7 +178,7 @@ function gutenberg_register_scripts_and_styles() {
 	wp_register_script(
 		'wp-utils',
 		gutenberg_url( 'build/utils/index.js' ),
-		array( 'lodash', 'wp-blob', 'wp-deprecated', 'wp-dom' ),
+		array( 'lodash', 'wp-blob', 'wp-deprecated', 'wp-dom', 'wp-api-request' ),
 		filemtime( gutenberg_dir_path() . 'build/utils/index.js' ),
 		true
 	);
@@ -267,6 +279,7 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-i18n',
 			'wp-utils',
 			'wp-viewport',
+			'wp-api-request',
 		),
 		filemtime( gutenberg_dir_path() . 'build/core-blocks/index.js' ),
 		true
@@ -350,6 +363,7 @@ function gutenberg_register_scripts_and_styles() {
 			'postbox',
 			'wp-a11y',
 			'wp-api',
+			'wp-api-request',
 			'wp-blob',
 			'wp-blocks',
 			'wp-components',
@@ -380,6 +394,7 @@ function gutenberg_register_scripts_and_styles() {
 			'media-models',
 			'media-views',
 			'wp-a11y',
+			'wp-api-request',
 			'wp-components',
 			'wp-core-blocks',
 			'wp-date',
@@ -759,7 +774,7 @@ function gutenberg_extend_wp_api_backbone_client() {
 	$schema_response = rest_do_request( new WP_REST_Request( 'GET', '/' ) );
 	if ( ! $schema_response->is_error() ) {
 		wp_add_inline_script( 'wp-api', sprintf(
-			'wpApiSettings.cacheSchema = true; wpApiSettings.schema = %s;',
+			'wpApiSchema = %s;',
 			wp_json_encode( $schema_response->get_data() )
 		), 'before' );
 	}
@@ -989,9 +1004,9 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	);
 
 	wp_add_inline_script(
-		'wp-components',
-		sprintf( 'window._wpAPIDataPreload = %s', wp_json_encode( $preload_data ) ),
-		'before'
+		'wp-api-request',
+		sprintf( 'wp.apiRequest.use( wp.apiRequest.createPreloadingMiddleware( %s ) );', wp_json_encode( $preload_data ) ),
+		'after'
 	);
 
 	// Initialize the post data.