Add a wordpress/api-request package

.eslintrc.js

@@ -38,6 +38,10 @@ module.exports = {
 				selector: 'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]',
 				message: 'Path access on WordPress dependencies is not allowed.',
 			},
+			{
+				selector: 'ImportDeclaration[source.value=/^api-request$/]',
+				message: 'Use @wordpress/api-request as import path instead.',
+			},
 			{
 				selector: 'ImportDeclaration[source.value=/^blob$/]',
 				message: 'Use @wordpress/blob as import path instead.',

lib/client-assets.php

@@ -115,6 +115,19 @@ function gutenberg_register_scripts_and_styles() {
 	);
 
 	// Editor Scripts.
+	wp_deregister_script( 'wp-api-request' );
+	wp_register_script(
+		'wp-api-request',
+		gutenberg_url( 'build/api-request/index.js' ),
+		array(),
+		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_register_script(
 		'wp-deprecated',
 		gutenberg_url( 'build/deprecated/index.js' ),

packages/api-request/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/api-request/README.md

@@ -0,0 +1,23 @@
+# @wordpress/blob
+
+Wrapper around `jQuery.ajax` to call WordPress REST APIs.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/api-request --save
+```
+
+## Usage
+
+```js
+import apiRequest from '@wordpress/api-request';
+
+apiRequest( { path: '/wp/v2/posts' } ).then( posts => {
+	console.log( posts );
+} );
+```
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/api-request/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "@wordpress/api-request",
+	"version": "1.0.0",
+	"description": "Utility to call WordPress REST APIs",
+	"author": "WordPress",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"rest-api",
+		"fetch"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/api-request/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"publishConfig": {
+		"access": "public"
+	},
+	"dependencies": {
+		"jquery": "^3.3.1"
+	}
+}

packages/api-request/src/index.js

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import jQuery from 'jquery';
+
+const wpApiSettings = window.wpApiSettings;
+
+function apiRequest( options ) {
+	options = apiRequest.buildAjaxOptions( options );
+	return apiRequest.transport( options );
+}
+
+apiRequest.buildAjaxOptions = function( options ) {
+	let url = options.url;
+	let path = options.path;
+	let namespaceTrimmed, endpointTrimmed, apiRoot;
+	let headers, addNonceHeader, headerName;
+
+	if (
+		typeof options.namespace === 'string' &&
+			typeof options.endpoint === 'string'
+	) {
+		namespaceTrimmed = options.namespace.replace( /^\/|\/$/g, '' );
+		endpointTrimmed = options.endpoint.replace( /^\//, '' );
+		if ( endpointTrimmed ) {
+			path = namespaceTrimmed + '/' + endpointTrimmed;
+		} else {
+			path = namespaceTrimmed;
+		}
+	}
+	if ( typeof path === 'string' ) {
+		apiRoot = wpApiSettings.root;
+		path = path.replace( /^\//, '' );
+
+		// API root may already include query parameter prefix if site is
+		// configured to use plain permalinks.
+		if ( 'string' === typeof apiRoot && -1 !== apiRoot.indexOf( '?' ) ) {
+			path = path.replace( '?', '&' );
+		}
+
+		url = apiRoot + path;
+	}
+
+	// If ?_wpnonce=... is present, no need to add a nonce header.
+	addNonceHeader = ! ( options.data && options.data._wpnonce );
+
+	headers = options.headers || {};
+
+	// If an 'X-WP-Nonce' header (or any case-insensitive variation
+	// thereof) was specified, no need to add a nonce header.
+	if ( addNonceHeader ) {
+		for ( headerName in headers ) {
+			if ( headers.hasOwnProperty( headerName ) ) {
+				if ( headerName.toLowerCase() === 'x-wp-nonce' ) {
+					addNonceHeader = false;
+					break;
+				}
+			}
+		}
+	}
+
+	if ( addNonceHeader ) {
+		// Do not mutate the original headers object, if any.
+		headers = jQuery.extend( {
+			'X-WP-Nonce': wpApiSettings.nonce,
+		}, headers );
+	}
+
+	// Do not mutate the original options object.
+	options = jQuery.extend( {}, options, {
+		headers: headers,
+		url: url,
+	} );
+
+	delete options.path;
+	delete options.namespace;
+	delete options.endpoint;
+
+	return options;
+};
+
+apiRequest.transport = jQuery.ajax;
+
+export default apiRequest;

test/unit/jest.config.json

@@ -6,7 +6,7 @@
 	],
 	"moduleNameMapper": {
 		"@wordpress\\/(blocks|components|editor|data|utils|edit-post|viewport|plugins|core-data|core-blocks)$": "$1",
-		"@wordpress\\/(blob|date|dom|deprecated|element)$": "packages/$1/src"
+		"@wordpress\\/(api-request|blob|date|dom|deprecated|element)$": "packages/$1/src"
 	},
 	"preset": "@wordpress/jest-preset-default",
 	"setupFiles": [

webpack.config.js

@@ -141,6 +141,7 @@ const gutenbergPackages = [
 	'deprecated',
 	'dom',
 	'element',
+	'api-request',
 ];
 
 const wordPressPackages = [
@@ -151,10 +152,6 @@ const wordPressPackages = [
 	'is-shallow-equal',
 ];
 
-const coreGlobals = [
-	'api-request',
-];
-
 const externals = {
 	react: 'React',
 	'react-dom': 'ReactDOM',
@@ -169,7 +166,6 @@ const externals = {
 	...entryPointNames,
 	...gutenbergPackages,
 	...wordPressPackages,
-	...coreGlobals,
 ].forEach( ( name ) => {
 	externals[ `@wordpress/${ name }` ] = {
 		this: [ 'wp', camelCaseDash( name ) ],