Gutenberg as a Development Platform Edit

The Gutenberg Project is not only building a better editor for WordPress, but also creating a platform to build upon. This platform consists of a set of JavaScript packages and tools that you can use in your web application. View the list packages available on npm.

UI Components UI Components

The WordPress Components package contains a set of UI components you can use in your project. See the WordPress Storybook site for an interactive guide to the available components and settings.

Here is a quick example, how to use components in your project.

Install the dependency:

npm install --save @wordpress/components

Usage in React:

import { Button } from '@wordpress/components';

function MyApp() {
   return (
      <Button>Hello Button</Button>
   );
}

Top ↑

Development Scripts Development Scripts

The wp-scripts package is a collection of reusable scripts for JavaScript development — includes scripts for building, linting, and testing — all with no additional configuration files.

Here is a quick example, on how to use wp-scripts in your project.

Install the depenency:

npm install --save-dev @wordpress/scripts

You can then add a scripts section to your package.json file, for example:

    "scripts": {
        "build": "wp-scripts build",
        "format:js": "wp-scripts format-js",
        "lint:js": "wp-scripts lint-js",
        "start": "wp-scripts start"
    }

You can then use npm run build to build your project with all the default webpack settings already configured, likewise for formating and linting. The start command is used for development mode. See the scripts package for full documentation.

You can also play with the Gutenberg Example #03 for a complete setup using the wp-scripts package.

Top ↑

Block Editor Block Editor

The @wordpress/block-editor package allows you to create and use standalone block editors.

You can learn more by reading the tutorial “Building a custom block editor”.