diff --git a/docs/designers-developers/developers/platform/README.md b/docs/designers-developers/developers/platform/README.md new file mode 100644 index 0000000000000..11ced8ea783d4 --- /dev/null +++ b/docs/designers-developers/developers/platform/README.md @@ -0,0 +1,55 @@ + +# Gutenberg as a Development Platform + +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](https://www.npmjs.com/org/wordpress). + +## UI Components + +The [WordPress Components package](/docs/components/) contains a set of UI components you can use in your project. See the [WordPress Storybook site](https://wordpress.github.io/gutenberg/) 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: + +```bash +npm install --save @wordpress/components +``` + +Usage in React: + +```jsx +import { Button } from '@wordpress/components'; + +function MyApp() { + return ( + + ); +} +``` + +## Development Scripts + +The [wp-scripts package](https://developer.wordpress.org/block-editor/packages/packages-scripts/) 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: + +```bash +npm install --save-dev @wordpress/scripts +``` + +You can then add a scripts section to your package.json file, for example: + +```json + "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](https://www.npmjs.com/package/@wordpress/scripts) for full documentation. + +You can also play with the [Gutenberg Example #03](https://github.com/WordPress/gutenberg-examples/tree/master/03-editable-esnext) for a complete setup using the wp-scripts package. diff --git a/docs/manifest.json b/docs/manifest.json index a44e36d2ee77a..81369c181351d 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -233,6 +233,12 @@ "markdown_source": "../docs/designers-developers/developers/backward-compatibility/meta-box.md", "parent": "backward-compatibility" }, + { + "title": "Gutenberg as a Development Platform", + "slug": "platform", + "markdown_source": "../docs/designers-developers/developers/platform/README.md", + "parent": "developers" + }, { "title": "Designer Documentation", "slug": "designers", diff --git a/docs/toc.json b/docs/toc.json index 21bb8cdbaf084..ee9edb4ccf072 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -44,7 +44,8 @@ { "docs/designers-developers/developers/backward-compatibility/README.md": [ { "docs/designers-developers/developers/backward-compatibility/deprecations.md": [] }, { "docs/designers-developers/developers/backward-compatibility/meta-box.md": [] } - ] } + ] }, + { "docs/designers-developers/developers/platform/README.md": [] } ] }, { "docs/designers-developers/designers/README.md": [ { "docs/designers-developers/designers/block-design.md": [] },