diff --git a/01-basic-esnext/README.md b/01-basic-esnext/README.md
new file mode 100644
index 00000000..b0da37c1
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/01-basic/README.md b/01-basic/README.md
new file mode 100644
index 00000000..2a03dc40
--- /dev/null
+++ b/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/)
\ No newline at end of file
diff --git a/02-stylesheets/README.md b/02-stylesheets/README.md
new file mode 100644
index 00000000..22a55eef
--- /dev/null
+++ b/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/)
\ No newline at end of file
diff --git a/03-editable-esnext/README.md b/03-editable-esnext/README.md
new file mode 100644
index 00000000..95cae0e1
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/03-editable/README.md b/03-editable/README.md
new file mode 100644
index 00000000..fdd88eb1
--- /dev/null
+++ b/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/)
\ No newline at end of file
diff --git a/04-controls-esnext/README.md b/04-controls-esnext/README.md
new file mode 100644
index 00000000..03c29236
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/04-controls/README.md b/04-controls/README.md
new file mode 100644
index 00000000..ffc6d010
--- /dev/null
+++ b/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/)
\ No newline at end of file
diff --git a/05-recipe-card-esnext/README.md b/05-recipe-card-esnext/README.md
new file mode 100644
index 00000000..38dfadca
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/05-recipe-card/README.md b/05-recipe-card/README.md
new file mode 100644
index 00000000..ac6822bf
--- /dev/null
+++ b/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/)
\ No newline at end of file
diff --git a/images/basic-client.png b/images/basic-client.png
new file mode 100644
index 00000000..72a8ee9b
Binary files /dev/null and b/images/basic-client.png differ
diff --git a/images/basic-editor.png b/images/basic-editor.png
new file mode 100644
index 00000000..44e9b51b
Binary files /dev/null and b/images/basic-editor.png differ
diff --git a/images/controls-client.png b/images/controls-client.png
new file mode 100644
index 00000000..60fe009d
Binary files /dev/null and b/images/controls-client.png differ
diff --git a/images/controls-editor.png b/images/controls-editor.png
new file mode 100644
index 00000000..ba94b0c1
Binary files /dev/null and b/images/controls-editor.png differ
diff --git a/images/editable-client.png b/images/editable-client.png
new file mode 100644
index 00000000..c864359f
Binary files /dev/null and b/images/editable-client.png differ
diff --git a/images/editable-editor.png b/images/editable-editor.png
new file mode 100644
index 00000000..8afab388
Binary files /dev/null and b/images/editable-editor.png differ
diff --git a/images/recipe-card-client.png b/images/recipe-card-client.png
new file mode 100644
index 00000000..0d943fa0
Binary files /dev/null and b/images/recipe-card-client.png differ
diff --git a/images/recipe-card-editor.png b/images/recipe-card-editor.png
new file mode 100644
index 00000000..6d2a0a76
Binary files /dev/null and b/images/recipe-card-editor.png differ
diff --git a/images/stylesheets-client.png b/images/stylesheets-client.png
new file mode 100644
index 00000000..7caef44f
Binary files /dev/null and b/images/stylesheets-client.png differ
diff --git a/images/stylesheets-editor.png b/images/stylesheets-editor.png
new file mode 100644
index 00000000..3963ee7c
Binary files /dev/null and b/images/stylesheets-editor.png differ