WordPress.com API Console v3

This is the current version of the WordPress.com API console, written in React. It is deployed at:

https://developer.wordpress.com/docs/api/

It supercedes https://github.com/Automattic/rest-api-console2.

Getting Started Locally

To setup the environment on your local system with WordPress.com APIs:

1. Clone the repository git clone https://github.com/Automattic/wp-api-console.git.

2. Install dependencies npm ci --legacy-peer-deps. Switch to Node v16 - If you use nvm, add a .nvmrc file with the version 16.20.2 on it as this project can't run on higher node version.

3. Open WordPress.com Developer Resources

4. Create New Application: fill the form. Under "Redirect URI" and "Javascript Origins" specify http://localhost:3000 (or where your local app will run). After creation keep the OAuth Information details at hand.

5. Copy src/config.sample.json to src/config.json and fill "client_id" and "redirect_uri" with the values from the app created above.

6. Run the dev server npm start. The app will start at http://localhost:3000.

7. Click on the key to authenticate.

For more details, see below or check out the technical documentation.

Configuration

Using with WordPress.com APIs

To use with WordPress.com, visit WordPress.com Developer Resources and create an application.

Copy src/config.sample.json to src/config.json and use your WordPress.com Client ID and Redirect URI for the values.

Make sure you add your host to the Javascript Origins / CORS whitelist in the Application's settings.

{
  "wordpress.com": {
    "clientID": "33333",
    "redirectUrl": "http://localhost:3000"
  }
}

Using with your self-hosted WordPress site

You can also use this console with your WordPress.org installation but make sure to install the WP REST API - OAuth 1.0a Server first, create an app (in the Users → Applications screen), and then edit the src/config.json like this:

{
  "wordpress.org": [
    {
      "name": "Dev",                         // Name to display on the API selector
      "url": "http://wordpress.dev",         // Base URL of your WordPress website
      "clientKey": "PwQXbJdBYrXq",           // Client (public) key of your application
      "secretKey": "XB9oidFfxr3g...",        // Secret key of your application
      "callbackUrl": "http://localhost:3000" // Callback URL where you are running this console
    }
  ]
}

Note that your callbackUrl must match the configured value for the application. If you are having an error like "Callback URL is invalid", try putting a trailing slash at the end of your callback URL (details).

You can also install the Application Passwords plugin and use basic authentication to communicate with your site. Make sure that your site is running over HTTPS, otherwise this is insecure. Here are the config settings for basic auth:

{
  "wordpress.org": [
    {
      "name": "Dev (basic)",                 // Name to display on the API selector
      "url": "https://wordpress.dev",        // Base URL of your WordPress website
      "authType": "basic",
      "authHeader": "Basic bWU6bXlwYSBzc3dvIHJk"
    }
  ]
}

You can generate the base64-encoded portion of the authHeader as follows, using your WP username and your application password (this is the password generated by the plugin, NOT your WP password for your site):

$ echo -n 'mywpusername:mypa sswo rd' | base64
bWU6bXlwYSBzc3dvIHJk

Building a Static Package

To create a static package you can use anywhere (e.g. Github pages): npm run build

The static site is located in build

Deploying

If you want to quickly deploy the console to Surge, just run npm run deploy.

Deploying to WordPress.com

• Run the ./bin/build-for-wpcom.sh script. This should generate a build-theme directory.
• See PCYsg-baa-p2 for further instructions.

License

All source code is licensed under GNU General Public License v2 (or later).