Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a new document section for "Gutenberg as a Platform" #20666

Merged
merged 4 commits into from
Mar 6, 2020
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions docs/designers-developers/developers/platform/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@

# Gutenberg as a Development Platform

The Gutenberg Project is not only building a better editor for WordPress, but while doing 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).
mkaz marked this conversation as resolved.
Show resolved Hide resolved

## 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 (
<Button>Hello Button</Button>
);
}
```

## 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.
mkaz marked this conversation as resolved.
Show resolved Hide resolved

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.
6 changes: 6 additions & 0 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion docs/toc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [] },
Expand Down