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

* Docs: Start Gutenberg as Platform section

* Update with components and script code examples

* Update docs/designers-developers/developers/platform/README.md

👍

Co-Authored-By: Zebulan Stanphill <[email protected]>

* Update docs/designers-developers/developers/platform/README.md

Co-Authored-By: Dave Smith <[email protected]>

Co-authored-by: Zebulan Stanphill <[email protected]>
Co-authored-by: Dave Smith <[email protected]>

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

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",

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": [] },