Add a README.md for each block

01-basic-esnext/README.md

@@ -0,0 +1,31 @@
+# Basic Block
+Simple block, renders and saves the same content without interactivity. Using inline styles - no external stylesheet needed. Not recommended because all of these styles will appear in `post_content`.
+
+"Hello World: Step 1" from [Writing Your First Block Type](https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type/).
+
+This is the version with ESNext, the version without it can be found [here](https://github.com/WordPress/gutenberg-examples/tree/master/01-basic).
+
+## Screenshots
+### Editor
+![A red block with the text "Hello World, step 1 (from the editor)"](../images/basic-editor.png)
+### Front-End
+![A red block with the text "Hello World, step 1 (from the frontend)"](../images/basic-client.png)
+
+## Uses
+### Wordpress Packages
+These are exposed via `window.wp`.
+* [@wordpress/i18n](https://wordpress.org/gutenberg/handbook/packages/packages-i18n/)
+* [@wordpress/blocks](https://wordpress.org/gutenberg/handbook/packages/packages-blocks/)
+
+### NPM Packages
+* [babel-core](https://www.npmjs.com/package/babel-core)
+* [babel-loader](https://www.npmjs.com/package/babel-loader)
+* [babel-plugin-transform-react-jsx](https://www.npmjs.com/package/babel-plugin-transform-react-jsx)
+* [babel-preset-env](https://www.npmjs.com/package/babel-preset-env)
+* [cross-env](https://www.npmjs.com/package/cross-env)
+* [webpack](https://www.npmjs.com/package/webpack)
+
+## Building
+First, make sure you have [Node.js](https://nodejs.org/en/) installed and run `npm install` to install the dependencies.
+* `npm run dev` builds a development version of the plugin and watches for changes for automatic rebuild.
+* `npm run build` builds a production version of the plugin.

01-basic/README.md

@@ -0,0 +1,19 @@
+# Basic Block
+Simple block, renders and saves the same content without interactivity. Using inline styles - no external stylesheet needed. Not recommended because all of these styles will appear in `post_content`.
+
+"Hello World: Step 1" from [Writing Your First Block Type](https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type/).
+
+This is the version without ESNext, the version with it can be found [here](https://github.com/WordPress/gutenberg-examples/tree/master/01-basic-esnext).
+
+## Screenshots
+### Editor
+![A red block with the text "Hello World, step 1 (from the editor)"](../images/basic-editor.png)
+### Front-End
+![A red block with the text "Hello World, step 1 (from the frontend)"](../images/basic-client.png)
+
+## Uses
+### Wordpress Packages
+These are exposed via `window.wp`.
+* [@wordpress/i18n](https://wordpress.org/gutenberg/handbook/packages/packages-i18n/)
+* [@wordpress/blocks](https://wordpress.org/gutenberg/handbook/packages/packages-blocks/)
+* [@wordpress/element](https://wordpress.org/gutenberg/handbook/packages/packages-element/)

02-stylesheets/README.md

@@ -0,0 +1,19 @@
+# Basic Block with Stylesheets
+Simple block, renders and saves the same content without interactivity. Unlike [01-basic](https://github.com/WordPress/gutenberg-examples/tree/master/01-basic), this one moves styles to stylesheets - both edit and front-end.
+
+"Hello World: Step 2" from [Applying Styles With Stylesheets](https://wordpress.org/gutenberg/handbook/blocks/applying-styles-with-stylesheets/).
+
+This version does not use ESNext.
+
+## Screenshots
+### Editor
+![A green block with the text "Hello World, step 2 (from the editor, in green)."](../images/stylesheets-editor.png)
+### Front-End
+![A red block with the text "Hello World, step 2 (from the frontend, in red)."](../images/stylesheets-client.png)
+
+## Uses
+### Wordpress Packages
+These are exposed via `window.wp`.
+* [@wordpress/i18n](https://wordpress.org/gutenberg/handbook/packages/packages-i18n/)
+* [@wordpress/blocks](https://wordpress.org/gutenberg/handbook/packages/packages-blocks/)
+* [@wordpress/element](https://wordpress.org/gutenberg/handbook/packages/packages-element/)

03-editable-esnext/README.md

@@ -0,0 +1,32 @@
+# Editable Block
+Simple block with editable content. Introduces the concept of attributes and extracting them, and the default text formatting added by RichText.
+
+"Hello World: Step 3" from [Introducing Attributes and Editable Fields](https://wordpress.org/gutenberg/handbook/blocks/introducing-attributes-and-editable-fields/).
+
+This is the version with ESNext, the version without it can be found [here](https://github.com/WordPress/gutenberg-examples/tree/master/03-editable).
+
+## Screenshots
+### Editor
+![A green block with the text "This text is editable!" in progress of being edited, with a toolbar containing various format options.](../images/editable-editor.png)
+### Front-End
+![A red block with the text "This text is editable!"](../images/editable-client.png)
+
+## Uses
+### Wordpress Packages
+These are exposed via `window.wp`.
+* [@wordpress/i18n](https://wordpress.org/gutenberg/handbook/packages/packages-i18n/)
+* [@wordpress/blocks](https://wordpress.org/gutenberg/handbook/packages/packages-blocks/)
+* [@wordpress/editor](https://wordpress.org/gutenberg/handbook/packages/packages-editor/)
+
+### NPM Packages
+* [babel-core](https://www.npmjs.com/package/babel-core)
+* [babel-loader](https://www.npmjs.com/package/babel-loader)
+* [babel-plugin-transform-react-jsx](https://www.npmjs.com/package/babel-plugin-transform-react-jsx)
+* [babel-preset-env](https://www.npmjs.com/package/babel-preset-env)
+* [cross-env](https://www.npmjs.com/package/cross-env)
+* [webpack](https://www.npmjs.com/package/webpack)
+
+## Building
+First, make sure you have [Node.js](https://nodejs.org/en/) installed and run `npm install` to install the dependencies.
+* `npm run dev` builds a development version of the plugin and watches for changes for automatic rebuild.
+* `npm run build` builds a production version of the plugin.

03-editable/README.md

@@ -0,0 +1,20 @@
+# Editable Block
+Simple block with editable content. Introduces the concept of attributes and extracting them, and the default text formatting added by RichText.
+
+"Hello World: Step 3" from [Introducing Attributes and Editable Fields](https://wordpress.org/gutenberg/handbook/blocks/introducing-attributes-and-editable-fields/).
+
+This is the version without ESNext, the version with it can be found [here](https://github.com/WordPress/gutenberg-examples/tree/master/03-editable-esnext).
+
+## Screenshots
+### Editor
+![A green block with the text "This text is editable!" in progress of being edited, with a toolbar containing various format options.](../images/editable-editor.png)
+### Front-End
+![A red block with the text "This text is editable!"](../images/editable-client.png)
+
+## Uses
+### Wordpress Packages
+These are exposed via `window.wp`.
+* [@wordpress/i18n](https://wordpress.org/gutenberg/handbook/packages/packages-i18n/)
+* [@wordpress/blocks](https://wordpress.org/gutenberg/handbook/packages/packages-blocks/)
+* [@wordpress/element](https://wordpress.org/gutenberg/handbook/packages/packages-element/)
+* [@wordpress/editor](https://wordpress.org/gutenberg/handbook/packages/packages-editor/)

04-controls-esnext/README.md

@@ -0,0 +1,32 @@
+# Block with Controls
+Block with built-in alignment toolbar.
+
+"Hello World: Step 4" from [Block Controls: Toolbars and Inspector](https://wordpress.org/gutenberg/handbook/blocks/block-controls-toolbars-and-inspector/).
+
+This is the version with ESNext, the version without it can be found [here](https://github.com/WordPress/gutenberg-examples/tree/master/04-controls).
+
+## Screenshots
+### Editor
+![A blue block with the text "This has align controls in the toolbar!" with a toolbar containing various format options, including buttons to align text left, center, or right.](../images/controls-editor.png)
+### Front-End
+![A red block with the right-aligned text "This has align controls in the toolbar!"](../images/controls-client.png)
+
+## Uses
+### Wordpress Packages
+These are exposed via `window.wp`.
+* [@wordpress/i18n](https://wordpress.org/gutenberg/handbook/packages/packages-i18n/)
+* [@wordpress/blocks](https://wordpress.org/gutenberg/handbook/packages/packages-blocks/)
+* [@wordpress/editor](https://wordpress.org/gutenberg/handbook/packages/packages-editor/)
+
+### NPM Packages
+* [babel-core](https://www.npmjs.com/package/babel-core)
+* [babel-loader](https://www.npmjs.com/package/babel-loader)
+* [babel-plugin-transform-react-jsx](https://www.npmjs.com/package/babel-plugin-transform-react-jsx)
+* [babel-preset-env](https://www.npmjs.com/package/babel-preset-env)
+* [cross-env](https://www.npmjs.com/package/cross-env)
+* [webpack](https://www.npmjs.com/package/webpack)
+
+## Building
+First, make sure you have [Node.js](https://nodejs.org/en/) installed and run `npm install` to install the dependencies.
+* `npm run dev` builds a development version of the plugin and watches for changes for automatic rebuild.
+* `npm run build` builds a production version of the plugin.

04-controls/README.md

@@ -0,0 +1,20 @@
+# Block with Controls
+Block with built-in alignment toolbar.
+
+"Hello World: Step 4" from [Block Controls: Toolbars and Inspector](https://wordpress.org/gutenberg/handbook/blocks/block-controls-toolbars-and-inspector/).
+
+This is the version without ESNext, the version with it can be found [here](https://github.com/WordPress/gutenberg-examples/tree/master/04-controls-esnext).
+
+## Screenshots
+### Editor
+![A blue block with the text "This has align controls in the toolbar!" with a toolbar containing various format options, including buttons to align text left, center, or right.](../images/controls-editor.png)
+### Front-End
+![A red block with the right-aligned text "This has align controls in the toolbar!"](../images/controls-client.png)
+
+## Uses
+### Wordpress Packages
+These are exposed via `window.wp`.
+* [@wordpress/i18n](https://wordpress.org/gutenberg/handbook/packages/packages-i18n/)
+* [@wordpress/blocks](https://wordpress.org/gutenberg/handbook/packages/packages-blocks/)
+* [@wordpress/element](https://wordpress.org/gutenberg/handbook/packages/packages-element/)
+* [@wordpress/editor](https://wordpress.org/gutenberg/handbook/packages/packages-editor/)

05-recipe-card-esnext/README.md

@@ -0,0 +1,32 @@
+# Recipe Block
+Basic recipe block with space for an ingredient list, a set of instructions, and an image.
+
+This is the version with ESNext, the version without it can be found [here](https://github.com/WordPress/gutenberg-examples/tree/master/05-recipe-card).
+
+## Screenshots
+(screenshots)
+
+## Uses
+### Wordpress Packages
+These are exposed via `window.wp`.
+* [@wordpress/i18n](https://wordpress.org/gutenberg/handbook/packages/packages-i18n/)
+* [@wordpress/blocks](https://wordpress.org/gutenberg/handbook/packages/packages-blocks/)
+* [@wordpress/editor](https://wordpress.org/gutenberg/handbook/packages/packages-editor/)
+* [@wordpress/components](https://wordpress.org/gutenberg/handbook/packages/packages-components/)
+
+### Wordpress Components
+These are exposed via `window.wp.components`.
+* [Button](https://wordpress.org/gutenberg/handbook/components/button/)
+
+### NPM Packages
+* [babel-core](https://www.npmjs.com/package/babel-core)
+* [babel-loader](https://www.npmjs.com/package/babel-loader)
+* [babel-plugin-transform-react-jsx](https://www.npmjs.com/package/babel-plugin-transform-react-jsx)
+* [babel-preset-env](https://www.npmjs.com/package/babel-preset-env)
+* [cross-env](https://www.npmjs.com/package/cross-env)
+* [webpack](https://www.npmjs.com/package/webpack)
+
+## Building
+First, make sure you have [Node.js](https://nodejs.org/en/) installed and run `npm install` to install the dependencies.
+* `npm run dev` builds a development version of the plugin and watches for changes for automatic rebuild.
+* `npm run build` builds a production version of the plugin.

05-recipe-card/README.md

@@ -0,0 +1,19 @@
+# Recipe Block
+Basic recipe block with space for an ingredient list, a set of instructions, and an image.
+
+This is the version without ESNext, the version with it can be found [here](https://github.com/WordPress/gutenberg-examples/tree/master/05-recipe-card-esnext).
+
+## Screenshots
+### Editor
+![A block with options to enter a title, a list of ingredients, a set of ingredients, and an image, with a toolbar containing various format options.](../images/recipe-card-editor.png)
+### Front-End
+![A recipe for "Peanut Butter and Jelly Sandwich" featuring an image of a peanut butter and jelly sandwich, and ingredient list and a set of instructions. The ingredients include 2 slices of bread, peanut butter, and jelly. The instructions say "1. Spread Peanut butter on one slice of bread. 2. Spread jelly on the other slice of bread. 3. Combine both slices into a sandwich. 4. Enjoy!"](../images/recipe-card-client.png)
+
+## Uses
+### Wordpress Packages
+These are exposed via `window.wp`.
+* [@wordpress/i18n](https://wordpress.org/gutenberg/handbook/packages/packages-i18n/)
+* [@wordpress/blocks](https://wordpress.org/gutenberg/handbook/packages/packages-blocks/)
+* [@wordpress/element](https://wordpress.org/gutenberg/handbook/packages/packages-element/)
+* [@wordpress/editor](https://wordpress.org/gutenberg/handbook/packages/packages-editor/)
+* [@wordpress/components](https://wordpress.org/gutenberg/handbook/packages/packages-components/)