From 7fa18578bc2007bb932e2447b063ec1cfdfeab65 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 29 May 2020 16:04:16 -0700
Subject: [PATCH 01/25] Init Create a Block tutorial

---
 .../create-block/author-experience.md         | 129 +++++++++++++++++
 .../tutorials/create-block/block-anatomy.md   |  57 ++++++++
 .../create-block/block-attributes.md          |  72 ++++++++++
 .../tutorials/create-block/block-code.md      |  44 ++++++
 .../tutorials/create-block/devenv.md          |  60 ++++++++
 .../tutorials/create-block/esnext-js.md       | 128 +++++++++++++++++
 .../tutorials/create-block/finishing.md       |   8 ++
 .../tutorials/create-block/readme.md          |  31 +++++
 .../tutorials/create-block/wp-plugin.md       | 131 ++++++++++++++++++
 9 files changed, 660 insertions(+)
 create mode 100644 docs/designers-developers/developers/tutorials/create-block/author-experience.md
 create mode 100644 docs/designers-developers/developers/tutorials/create-block/block-anatomy.md
 create mode 100644 docs/designers-developers/developers/tutorials/create-block/block-attributes.md
 create mode 100644 docs/designers-developers/developers/tutorials/create-block/block-code.md
 create mode 100644 docs/designers-developers/developers/tutorials/create-block/devenv.md
 create mode 100644 docs/designers-developers/developers/tutorials/create-block/esnext-js.md
 create mode 100644 docs/designers-developers/developers/tutorials/create-block/finishing.md
 create mode 100644 docs/designers-developers/developers/tutorials/create-block/readme.md
 create mode 100644 docs/designers-developers/developers/tutorials/create-block/wp-plugin.md

diff --git a/docs/designers-developers/developers/tutorials/create-block/author-experience.md b/docs/designers-developers/developers/tutorials/create-block/author-experience.md
new file mode 100644
index 0000000000000..150835870a297
--- /dev/null
+++ b/docs/designers-developers/developers/tutorials/create-block/author-experience.md
@@ -0,0 +1,129 @@
+
+# Authoring Experience
+
+## Background
+
+One of the primary tenets of Gutenberg is as a WYSIWYG editor, what you see in the editor, should be as close to what you get when published. Keep this in mind when building blocks.
+
+## Placeholder
+
+The state when a block has been inserted, but no data has been entered yet, is called a placeholder. There is a `Placeholder` component built that gives us a standard look. You can see example placeholders in use with the image and embed blocks.
+
+To use the Placeholder, wrap the `<TextControl>` component so it becomes a child element of the `<Placeholder>` component. Try it out in your code. After updating, you might have something like:
+
+```jsx
+import { Placeholder, TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function Edit( { attributes, className, setAttributes } ) {
+    return (
+        <div className={ className }>
+			<Placeholder
+			  label="Gutenpride Block"
+			  instructions="Add your message"
+			>
+			  <TextControl
+			    value={ attributes.message }
+			    onChange={ ( val ) => setAttributes( { message: val } ) }
+			  />
+			</Placeholder>
+        </div>
+    );
+}
+```
+
+## isSelected Ternary Function
+
+The placeholder looks ok, for a simple text message it may or may not be what you are looking for. However, the placeholder can be useful if you are replacing the block after what is typed in, similar to the embed blocks.
+
+For this we can use a ternary function, to display content based on a value being set or not. A ternary function is an inline if-else statement, using the syntax:
+
+```js
+  ( clause ) ? ( doIfTrue ) : ( doIfFalse )
+```
+
+This can be used inside a block to control what shows when a parameter is set or not. A simple case that checks if the `message` is set might look like:
+
+```jsx
+  return (
+    <div>
+      { attributes.message ?
+        <div> Message: { attributes.message }</div> :
+        <div> No Message <TextField/> </div>
+      }
+  );
+```
+
+If we only used the above check, as soon as we type anything, the textfield would disappear since the message would be set. So we need to pair with the `isSelected` parameter.
+
+The `isSelected` parameter is passed in to the `edit` function and is set to true if the block is selected in the editor (currently editing) otherwise set to false (editing elsewhere).
+
+Using that parameter, we can use the logic:
+
+```js
+attributes.message && ! isSelected
+```
+
+If the message is set and `!isSelected`, meaning we are not editing the block, the focus is elsewhere, then display the message not the text field.
+
+All so this combined together here's what the edit function looks like this:
+
+```jsx
+import { Placeholder, TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function Edit( { attributes, className, isSelected, setAttributes } ) {
+    return (
+        <div>
+        { attributes.message && !isSelected ?
+            <div className={ className }>
+                { attributes.message }
+            </div> :
+			<Placeholder
+			  label="Gutenpride Block"
+			  instructions="Add your message"
+			>
+			  <TextControl
+			    value={ attributes.message }
+			    onChange={ ( val ) => setAttributes( { message: val } ) }
+			  />
+            </Placeholder>
+        }
+        </div>
+    );
+}
+```
+
+With that in place, rebuild and reload and when you are not editing the message is displayed as it would be for the view, when you click into the block you see the text field.
+
+## An Better Solution
+
+Replacing the Placeholder and TextControl when it is selected or not is jarring and not an ideal situation for this block. This was mainly used to illustrate what can be done depending on your block. It is important to think about the author's experience using the block.
+
+The simpler and better solution is to modify the editor.css to include the proper style for the textfield, this will give the stylized text while typing.
+
+Update `editor.css` to:
+
+```css
+.wp-block-create-block-gutenpride input[type="text"] {
+	font-family: Gilbert;
+	font-size: 64px;
+}
+```
+
+The edit function can simply be:
+
+```jsx
+import { TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function Edit( { attributes, className, setAttributes } ) {
+    return (
+        <TextControl
+            className={ className }
+            value={ attributes.message }
+            onChange={ ( val ) => setAttributes( { message: val } ) }
+        />
+    );
+}
+```
diff --git a/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md b/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md
new file mode 100644
index 0000000000000..4e9e3ac3864cb
--- /dev/null
+++ b/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md
@@ -0,0 +1,57 @@
+
+# Anatomy of a Gutenberg Block
+
+At its simplest, a block in Gutenberg is a JavaScript object with a specific set of properties. Here is the complete code for registering a block:
+
+```js
+import { registerBlockType } from '@wordpress/blocks';
+
+registerBlockType( 'create-block/gutenpride', {
+	title: 'Gutenpride',
+	description: 'Example block.',
+	category: 'widgets',
+	icon: 'smiley',
+	supports: {
+		// Removes support for an HTML mode.
+		html: false,
+    },
+
+    edit: ( ) => {
+        return (
+            <div> Hello in Editor. </div>
+        );
+    },
+
+    save: ( ) => {
+        return (
+            <div> Hello in Save.</div>
+        );
+    },
+} );
+```
+
+The first parameter in the **registerBlockType** function is the block name, this should match exactly to the name registered in the PHP file.
+
+The second parameter to the function is the block object. See the [block registration documentation](https://developer.wordpress.org/block-editor/developers/block-api/block-registration/) for full details.
+
+The **title** is the title of the block shown in the Inserter.
+
+The **icon** is the icon shown in the Inserter. The icon property expects any Dashicon name as a string, see [list of available icons](https://developer.wordpress.org/resource/dashicons/). You can also provide an SVG object, but for now it's easiest to just pick a Dashicon name.
+
+The **category** specified is a string and must be one of: \"common, formatting, layout, widgets, or embed\". You can create your own custom category name, [see documentation for details](https://developer.wordpress.org/block-editor/designers-developers/developers/filters/block-filters/#managing-block-categories). For this tutorial, I specified "widgets" as the category.
+
+The last two block object properties are **edit** and **save**, these are the key parts of a block. Both properties should be defined as functions.
+
+The results of the edit function is what the editor will render to the editor page when the block is inserted.
+
+The results of the save function is what the editor will insert into the **post_content** field when the post is saved. The post_content field is the field in the WordPress database used to store the content of the post.
+
+## Internationalization
+
+If you look at the generated `src/index.js` file, the block title and description are wrapped in a function that looks like this:
+
+```js
+__('Gutenpride', 'create_block')
+```
+
+This is an internationalization wrapper that allows for the string "Gutenpride" to be translated. The second parameter, "create_block" is called the text domain and gives context for where the string is from. The JavaScript internationalization, often abbreviated i18n, matches the core WordPress internationalization process. See the [I18n for WordPress documentation](https://codex.wordpress.org/I18n_for_WordPress_Developers) for more details.
diff --git a/docs/designers-developers/developers/tutorials/create-block/block-attributes.md b/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
new file mode 100644
index 0000000000000..6632add12cd68
--- /dev/null
+++ b/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
@@ -0,0 +1,72 @@
+
+# Block Attributes
+
+Attributes are the way a block stores data, they define how a block is parsed to extract data from the saved content.
+
+We will add a **message** attribute that will be the variable to hold the user message. The following code defines a **message** attribute of type string with the value derived from the source, defined as the text of a `div` tag.
+
+```js
+attributes: {
+    message: {
+        type: 'string',
+        source: 'text',
+        selector: 'div',
+    },
+},
+```
+
+Add this to the `index.js` file within the `registerBlockType` function in `index.js`, `attributes` are at the same level as the title and description fields.
+
+To repeat, when the block loads it will look at the saved content for the block, look for the div tag, take the text portion — the part in between the open and close div tags —  and store the content in an `attributes.message` variable.
+
+For more details and other examples see the [Block Attributes documentation](https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/).
+
+## Edit and Save
+
+The **attributes** are passed to the `edit` and `save` functions, along with a  **setAttributes** parameters for setting the values after the user enters. Additional parameters are also passed in to this functions, see [the edit/save documentation](https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/) for more details.
+
+The attributes is a JavaScript object containing the values of each attribute, or default values if defined. The setAttributes is a function to update an attribute. If you are familiar with React, this is similar to state and setState.
+
+## TextControl Component
+
+For this example block, the component we are going to use is the **TextControl** component, it is similar to an HTML text input field. You can see [documentation for TextControl component](https://developer.wordpress.org/block-editor/components/text-control/) and a complete list of components in the handbook. You can also browse an [interactive set of components in this Storybook](https://wordpress.github.io/gutenberg/).
+
+The component is added similar to an HTML tag, setting a label, the `value` is set to the `attributes.message` and the `onChange` function uses the `setAttributes` to update the url attribute value.
+
+The save function will simply write the `attributes.message` as a div tag since that is how we defined it to be parsed.
+
+Update the edit.js and save.js files to the following, replacing the existing functions.
+
+**edit.js**
+
+```js
+import { TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function Edit( { attributes, className, setAttributes } ) {
+    return (
+        <div className={ className }>
+            <TextControl
+                label={ __( "Message", "create-block" ) }
+                value={ attributes.message }
+                onChange={ ( val ) => setAttributes( { message: val } ) }
+            />
+        </div>
+    );
+}
+```
+
+
+**save.js**
+
+```jsx
+export default function Save( { attributes, className } ) {
+	return (
+		<div className={ className }>
+			{ attributes.message }
+		</div>
+	);
+}
+```
+
+With that code in place, rebuild the block using `npm run build`, reload the editor and add the block. You should be able to type a message in the editor, and on save, view it in the post.
\ No newline at end of file
diff --git a/docs/designers-developers/developers/tutorials/create-block/block-code.md b/docs/designers-developers/developers/tutorials/create-block/block-code.md
new file mode 100644
index 0000000000000..eefbd858e69a9
--- /dev/null
+++ b/docs/designers-developers/developers/tutorials/create-block/block-code.md
@@ -0,0 +1,44 @@
+
+# Code Implementation
+
+The basic block is in place, the next step is to add some style to the block. Feel free to style and adjust for your own preference, the main lesson is showing how to create and load external resources. For this example I'm going to load the colorized gilbert font from [Type with Pride](https://www.typewithpride.com/).
+
+Note: The color may not work with all browsers until they support the proper color font properly, but the font itself still loads and styles. See [colorfonts.wtf](https://www.colorfonts.wtf/) for browser support and details on color fonts.
+
+## Load Font File
+
+I downloaded and extracted the font from the Type with Pride site, and copied it to my plugin directory naming it `gilber-color.otf`. To load the font file, we need to add CSS using standard WordPress enqueue, [see Including CSS & JavaScript documentation](https://developer.wordpress.org/themes/basics/including-css-javascript/).
+
+In the `gutenpride.php` file, the enqueue process is already setup from the generated script, so `editor.css` and `style.css` files are loaded using:
+
+```php
+register_block_type( 'create-block/gutenpride', array(
+    'editor_script' => 'create-block-gutenpride-block-editor',
+    'editor_style'  => 'create-block-gutenpride-block-editor',
+    'style'         => 'create-block-gutenpride-block',
+) );
+```
+The `editor_style` and `style` parameters refer to the handles in the `wp_register_style` functions that match the files to the handles.
+
+Note: The `style` CSS will load on both the editor and front-end — published post view — the `editor_style` loads only within the editor, and after the style css.
+
+## Add CSS Style for Block
+
+The style.css will be loaded in both contexts, the editor and the front-end, so we only need to add the style in one spot and it will show while editing and viewing the post.
+
+Edit the style.css to the following, note the classname given to a block is prefixed with `wp-block` and then adds the block name converting any `/` to `-` so in this case the block name `create-block/gutenpride` is converted to the classname `.wp-block-create-block-gutenpride`.
+
+```css
+@font-face {
+    font-family: Gilbert;
+    src: url(gilbert-color.otf);
+    font-weight: bold;
+}
+
+.wp-block-create-block-gutenpride {
+	font-family: Gilbert;
+	font-size: 64px;
+}
+```
+
+With that updated, you can reload the post, for CSS changes you don't need to rebuild, so refresh and if you are using a browser that supports color fonts (Firefox) then you will see it styled.
\ No newline at end of file
diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
new file mode 100644
index 0000000000000..47b4ace25653a
--- /dev/null
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -0,0 +1,60 @@
+
+# Create Block: Developer Environment
+
+The three main pieces needed for the development environment are:
+
+1. Node/NPM Development Tools
+2. WordPress Development Site
+3. Code Editor
+
+## Development Tools
+
+The tools needed for development are **Node** and **NPM**. **Nodejs** is a runtime environment that allows running JavaScript outside of the browser. NPM is the Node Package Manager, it is used for installing dependencies and running scripts. The script `npx` is installed with `npm` and is used to run packages not yet installed, we will use this to bootstrap a block.
+
+The tools are used to take the JavaScript we are going to write, which is in a syntax that the browser can not run, and transpile it into a syntax it can. This is called the build step.
+
+You can [download Nodejs](https://nodejs.org/) directly from the main website and install. It also packaged for most package managers.
+
+On Mac, I recommend using [Homebrew package tool](https://brew.sh/) and install is: `brew install node`js
+
+On Windows, you can use Chocolatey package manager and install using: `choco install nodejs`
+
+NPM usually comes bundled with the above installs. On Ubuntu, or Debian, NPM is bundled separately and you can install using: `apt install nodejs npm`
+
+However you install Nodejs, the important part is being able to use them in your terminal. Open a terminal command-line and be able to run `node -v` and `npm -v` to confirm they are installed.
+
+
+## WordPress Development Site
+
+There are several ways to run WordPress locally on your own computer, or you could even develop on a cloud hosted computer, though this may be slower.
+
+The WordPress [wp-env package](https://www.npmjs.com/package/@wordpress/env) lets you set up a local WordPress environment for building and testing plugins and themes, without any additional configuration.
+
+The `wp-env` package requires Docker to be installed. There are instructions available for installing Docker on [Windows 10 Pro](https://docs.docker.com/docker-for-windows/install/), [all other versions of Windows](https://docs.docker.com/toolbox/toolbox_install_windows/), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/v17.12/install/linux/docker-ce/ubuntu/#install-using-the-convenience-script).
+
+
+After confirming that the prerequisites are installed, you can install wp-env globally from the command-line running:
+
+```bash
+npm -g install @wordpress/env
+```
+
+### Alternatives
+
+If you are just starting out, using [Local by Flywheel](https://localbyflywheel.com/) might be easier, since it does not require the additional Docker install and setup. Local is a single application you download and install and tends to be much simpler than alternatives. You will need to know where the plugin directory is installed. If you create a site called `mywp` typically the plugin directory is installed at `~\Local Sites\mywp\app\public\wp-content\plugins`
+
+You can use [WampServer](http://www.wampserver.com/en/) or
+[MAMP](https://www.mamp.info/) environments, both are quite similar to
+Local, combining a web server, PHP, and database. However these tools
+are not WordPress specific, so if you are not already using them, you might as
+well use Local.
+
+You can also work remotely on a server, this might be easy to setup the server since most hosts have a WordPress already installed. However, this may require development time since it may require syncing files, or editing the directly on the server.
+
+The important part is having a WordPress site installed, and know where and how to update files in the plugins directory.
+
+## Code Editor
+
+[Visual Studio Code](https://code.visualstudio.com/) is a popular code editor for JavaScript development. It works quite well, open-source, actively maintained by Microsoft, and a vibrant community providing plugins and extensions; it is becoming the defacto standard for web development.
+
+You can use any editor you're comfortable with, it is more a personal preference. The development setup for WordPress block editor is a common JavaScript environment and most editors have plugins and suppport. The key is having a way to open, edit, and save text files.
diff --git a/docs/designers-developers/developers/tutorials/create-block/esnext-js.md b/docs/designers-developers/developers/tutorials/create-block/esnext-js.md
new file mode 100644
index 0000000000000..f59bbd20c1b94
--- /dev/null
+++ b/docs/designers-developers/developers/tutorials/create-block/esnext-js.md
@@ -0,0 +1,128 @@
+
+# ES6 Syntax
+
+A brief aside to discuss JavaScript.
+
+## Background
+
+The JavaScript language continues to evolve, the syntax used to write JavaScript code is not fixed but changes over time. [Ecma International](https://en.wikipedia.org/wiki/Ecma_International) is the organization that sets the standard for the language, officially called [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript). A new standard for JavaScript is published each year, the 6th edition published in 2015 is often referred to as ES6. Our usage would more appropriately be **ESNext** referring to the latest standard. The build step is what converts this latest syntax of JavaScript to a version understood by browsers.
+
+## Destructuring Assignments
+
+The [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) syntax allows you to pull apart arrays, or properties from objects into their own variable.
+
+For the object `const obj = { foo: "bar" }`
+
+Creating and assigning a new variable `foo` can be done in a single step: `const { foo } = obj;`
+
+The curly brackets on the left side tells JavaScript to inspect the object `obj` for the property `foo` and assign its value to the new variable of the same name.
+
+## Arrow Functions
+
+Arrow functions provide a shorter syntax for defining a function; this is such a common task in JavaScript that having a syntax a bit shorter is quite helpful.
+
+Before you might define a function like:
+
+```js
+const f = function( param ) { console.log( param ); }
+```
+
+Using arrow function, you can define the same using:
+
+```js
+const g = ( param ) => { console.log( param ); }
+```
+
+Or even shorter, if the function is only a single-line you can omit the
+curly braces:
+
+```js
+const g2 = ( param ) => console.log( param );
+```
+
+In the examples above, using `console.log` we aren't too concerned about the return values. However, when using arrow functions in this way, the return value is set whatever the line returns.
+
+For example, our save function could be shortened from:
+
+```js
+save: ( { attributes } ) => {
+    return (
+        <div className="theurl">{ attributes.url }</div>
+    );
+}
+```
+
+To:
+
+```js
+save: ( { attributes } ) => (
+    <div className="theurl">{ attributes.url }</div>
+);
+```
+
+There are even more ways to shorten code, but you don't want to take it too far and make it harder to read what is going on.
+
+## Imports
+
+The [import statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) is used to import variables or functions from an exported file. You can use destructuring on imports, for example:
+
+```js
+import { TextControl } from '@wordpress/components';
+```
+
+This will look in the `@wordpress/components` package for the exported `TextControl` variable.
+
+A package or file can also set a `default` export, this is imported without using the curly brackets. For example
+
+```js
+const edit = ( { attributes, setAttributes } ) => {
+    return (
+        <div>
+            <TextControl
+                label="URL"
+                value={ attributes.url }
+                onChange={ ... }
+            />
+        </div>
+    );
+};
+
+export default edit;
+```
+
+To import, you would use:
+
+```js
+import edit from './edit';
+
+registerBlockType( 'mkaz/qrcode-block', {
+    title: 'QRCode Block',
+    icon: 'visibility',
+    category: 'widgets',
+    attributes: {
+        url: {
+            type: 'string',
+            source: 'text',
+            selector: '.theurl',
+        },
+    },
+    edit,
+    save: ( { attributes } ) => {
+        return (
+            <div> ... </div>
+        );
+    }
+});
+```
+
+Note, you can also shorten `edit: edit` to just `edit` as shown above. JavaScript will automatically assign the property `edit` to the value of `edit`. This is another form of destructuring.
+
+## Summary
+
+It helps to become familiar with the ESNext syntax and the common shorter forms. It will give you a greater understanding of reading code examples and what is going on.
+
+Here are a few more resources that may help
+
+- [ES5 vs ES6 with example code](https://medium.com/recraftrelic/es5-vs-es6-with-example-code-9901fa0136fc)
+- [Top 10 ES6 Features by Example](https://blog.pragmatists.com/top-10-es6-features-by-example-80ac878794bb)
+- [ES6 Syntax and Feature Overview](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
diff --git a/docs/designers-developers/developers/tutorials/create-block/finishing.md b/docs/designers-developers/developers/tutorials/create-block/finishing.md
new file mode 100644
index 0000000000000..9bc1bce911d02
--- /dev/null
+++ b/docs/designers-developers/developers/tutorials/create-block/finishing.md
@@ -0,0 +1,8 @@
+
+# Finishing Touches
+
+@TODO
+
+- Block directory
+- Icons
+- Anything else?
\ No newline at end of file
diff --git a/docs/designers-developers/developers/tutorials/create-block/readme.md b/docs/designers-developers/developers/tutorials/create-block/readme.md
new file mode 100644
index 0000000000000..860f883f1ab03
--- /dev/null
+++ b/docs/designers-developers/developers/tutorials/create-block/readme.md
@@ -0,0 +1,31 @@
+
+# Create Block Tutorial
+
+The goal of this tutorial is to get you started creating your first block for the WordPress Block Editor. We will create a simple block that allows the user to type a message and styles it.
+
+The tutorial includes setting up your development enviornment, tools, and getting comfortable with the new development model. If you are already comfortable, try the quick start below, otherwise step through whatever part of the tutorial you need.
+
+## Quick Start
+
+The `@wordpress/create-block` package exists to create the necessary block scaffolding to get you started. See [create-block pacakage documentation](https://www.npmjs.com/package/@wordpress/create-block) for additional features. This quick start assumes you have a development enviornment with node installed, and a WordPress site. From your plugins directory, to create your block run:
+
+```bash
+npx @wordpress/create-block starter-block
+cd starter-block
+npm run build
+```
+
+The above commands create a new directory called `starter-block`, installs the necessary files and builds the block plugin.
+
+If you ran from within your WordPress sites plugin directory, you can add and activate it from your WordPress site. After activated, go to the block editor and use the inserter to search and add your new block.
+
+## Table of Contents
+
+1. [Development Environment](devenv.md)
+2. [WordPress Plugin](wp-plugin.md)
+3. [ESNext Syntax](esnext-js.md)
+4. [Block Anatomy ](block-anatomy.md)
+5. [Block Attributes & Data](block-attributes.md)
+6. [Block Code](block-code.md)
+7. [Author Experience](author-experience.md)
+8. [Finishing Touches](finishing.md)
diff --git a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
new file mode 100644
index 0000000000000..9bbf2b09e82a8
--- /dev/null
+++ b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
@@ -0,0 +1,131 @@
+# Create a Block: WordPress Plugin
+
+A new block in the WordPress block editor is added by creating a WordPress plugin, installing, and activating the plugin. This page covers the details of a WordPress plugin if you are not already familiar.
+
+## WordPress Plugin
+
+A WordPress plugin is a set of files in a directory within the sites `wp-content/plugins` directory. For this example, we will use the `create-block` package to generate the necessary plugin files.
+
+From the command-line, change to your WordPress installs plugin directory and run:
+
+```
+npx @wordpress/create-block gutenpride
+```
+
+All of the plugin files we develop will be in this `gutenpride` directory.
+
+The script created a PHP file `gutenpride.php` that is the main plugin file. At the top of this file is the appropriate Plugin Header comment block which defines the plugin.
+
+```php
+/**
+ * Plugin Name:     Gutenpride
+ * Description:     Example block
+ * Version:         0.1.0
+ * Author:          The WordPress Contributors
+ * License:         GPL-2.0-or-later
+ * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
+ * Text Domain:     create-block
+ *
+ * @package         create-block
+ */
+```
+
+This is all that is needed to stub out a plugin, it won't do anything. However, it is good to get the basics in place and build up from there. The plugin should be listed on the Plugins admin page and can be activated.
+
+For more on creating a WordPress plugin see [Plugin Basics](https://developer.wordpress.org/plugins/plugin-basics/), and [Plugin Header requirements](https://developer.wordpress.org/plugins/plugin-basics/header-requirements/) for explanation and additional fields you can include in your plugin
+header.
+
+## package.json
+
+The package.json file defines the JavaScript properties for your project. This is a standard file used by NPM for defining properties and scripts it can run, the file and process is not specific to WordPress.
+
+A package.json file was created with the create script, this defines the dependecies and scripts needed. you can install dependencies. The only initial dependency is the `@wordpress/scripts` package which bundles the tools and configurations needed to build blocks.
+
+To use the scripts package, the `scripts` property of package.json defines the parameter called and what to run, the two main scripts are:
+
+```json
+  "scripts": {
+    "build": "wp-scripts build",
+    "start": "wp-scripts start"
+  },
+```
+
+These are run using: `npm run build` or `npm run start` which will call the appropriate binary and command we need.
+
+Use `npm run build` for running once to create a production build.
+
+Use `npm run start` for creating a development build that also starts a watch process that waits and watches for changes to the file and will rebuild each time it is saved.
+
+By default, the build scripts looks for `src/index.js` for the JavaScript file to build and will save the built file to `build/index.js`.
+
+## Plugin to Load Script
+
+To load the built script, so it is run within the editor, you need to tell WordPress about the script. This done in the init action in the `gutenpride.php` file.
+
+```php
+function create_block_gutenpride_block_init() {
+	$dir = dirname( __FILE__ );
+
+	$script_asset_path = "$dir/build/index.asset.php";
+	if ( ! file_exists( $script_asset_path ) ) {
+		throw new Error(
+			'You need to run `npm start` or `npm run build` for the "create-block/gutenpride" block first.'
+		);
+	}
+	$index_js     = 'build/index.js';
+	$script_asset = require( $script_asset_path );
+	wp_register_script(
+		'create-block-gutenpride-block-editor',
+		plugins_url( $index_js, __FILE__ ),
+		$script_asset['dependencies'],
+		$script_asset['version']
+	);
+
+	$editor_css = 'editor.css';
+	wp_register_style(
+		'create-block-gutenpride-block-editor',
+		plugins_url( $editor_css, __FILE__ ),
+		array(),
+		filemtime( "$dir/$editor_css" )
+	);
+
+	$style_css = 'style.css';
+	wp_register_style(
+		'create-block-gutenpride-block',
+		plugins_url( $style_css, __FILE__ ),
+		array(),
+		filemtime( "$dir/$style_css" )
+	);
+
+	register_block_type( 'create-block/gutenpride', array(
+		'editor_script' => 'create-block-gutenpride-block-editor',
+		'editor_style'  => 'create-block-gutenpride-block-editor',
+		'style'         => 'create-block-gutenpride-block',
+	) );
+}
+add_action( 'init', 'create_block_gutenpride_block_init' );
+```
+
+The build process creates a secondary asset file that contains the list of dependencies and a file version based on the timestamp, this is the `index.asset.php` file.
+
+The `wp_register_script` function registers a name, called the handle, and relates that name to the script file. The dependencies are used to specify if the script requires including other libraries. The version is specified so the browser will reload if the file changed.
+
+The `register_block_type` function registers the block we are going to create and specifies the editor_script file handle registered. So now when the editor loads it will load this script.
+
+With the above in place, create a new post to load the editor and check the you can add the block in the inserter. You can use `/` to search, or click the box with the [+] and search for "Gutenpride" to find the block.
+
+## Troubleshooting
+
+It is a good skill to learn and get comfortable using the web console. This is where JavaScript errors are shown and a nice way to test out snippets of JavaScript. See [Firefox Developer Tools documentation](https://developer.mozilla.org/en-US/docs/Tools).
+
+To open the developer tools in Firefox, use the menu selecting Web Developer : Toggle Tools, or the keyboard shortcuts on Windows is Ctrl+Shift+I, or on Mac Cmd+Shift+I. For me on Linux, the F12 key also works. You can then click Console to view logs.
+
+Try running `npm run start` that will start the watch process for automatic rebuilds. If you then make an update to `src/index.js` file, you will see the build run, and if you reload the WordPress editor you'll see the change.
+
+For more info, see the build section of the [Getting Started with JavaScript tutorial](https://developer.wordpress.org/block-editor/tutorials/javascript/js-build-setup/) in the WordPress Handbook.
+
+## Summary
+
+Hopefully, at this point, you have your plugin created and activated. We have the package.json with the `@wordpress/scripts` dependency, that defines the build and start scripts. The basic block is in place and can be added to the editor.
+
+The next lessons will explain the structure of a block and then how we can do something a little more interesting with it.
\ No newline at end of file

From 272f831ce0aa07f1be6e88d52565a00d17179b17 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 4 Jun 2020 09:30:06 -0700
Subject: [PATCH 02/25] Fix typo

---
 .../developers/tutorials/create-block/author-experience.md      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/author-experience.md b/docs/designers-developers/developers/tutorials/create-block/author-experience.md
index 150835870a297..753b2229c90f6 100644
--- a/docs/designers-developers/developers/tutorials/create-block/author-experience.md
+++ b/docs/designers-developers/developers/tutorials/create-block/author-experience.md
@@ -96,7 +96,7 @@ export default function Edit( { attributes, className, isSelected, setAttributes
 
 With that in place, rebuild and reload and when you are not editing the message is displayed as it would be for the view, when you click into the block you see the text field.
 
-## An Better Solution
+## A Better Solution
 
 Replacing the Placeholder and TextControl when it is selected or not is jarring and not an ideal situation for this block. This was mainly used to illustrate what can be done depending on your block. It is important to think about the author's experience using the block.
 

From 05812150670320be2b228e475cc4519bb0bf28a7 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 4 Jun 2020 10:50:11 -0700
Subject: [PATCH 03/25] Add Sass support info h/t @zzap

---
 .../tutorials/create-block/block-code.md      | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/block-code.md b/docs/designers-developers/developers/tutorials/create-block/block-code.md
index eefbd858e69a9..36cae30354f76 100644
--- a/docs/designers-developers/developers/tutorials/create-block/block-code.md
+++ b/docs/designers-developers/developers/tutorials/create-block/block-code.md
@@ -41,4 +41,26 @@ Edit the style.css to the following, note the classname given to a block is pref
 }
 ```
 
-With that updated, you can reload the post, for CSS changes you don't need to rebuild, so refresh and if you are using a browser that supports color fonts (Firefox) then you will see it styled.
\ No newline at end of file
+With that updated, you can reload the post, for CSS changes you don't need to rebuild, so refresh and if you are using a browser that supports color fonts (Firefox) then you will see it styled.
+
+## Use Sass for Style
+
+The wp-scripts package does provide support for using the Sass/Scss languages to generate CSS. See the [Sass language site](https://sass-lang.com/) to learn more.
+
+To use Sass, you need to import a `editor.scss` or `style.scss` in the `index.js` JavaScript file and it will build and output the generated file in the build directory. Note: You need to update the enqueing functions in PHP to load from the correct location.
+
+Add import to **index.js**:
+
+```js
+import "../editor.scss";
+
+import Edit from './edit';
+import save from './save';
+```
+
+Update **gutenpride.php** to enqueue from generated file location:
+
+```php
+$editor_css = "build/index.css";
+```
+

From 58d0a676e6164a09f6e49c1b5ce06c0e90789472 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 4 Jun 2020 13:32:24 -0700
Subject: [PATCH 04/25] Fix typos

---
 .../developers/tutorials/create-block/readme.md               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/readme.md b/docs/designers-developers/developers/tutorials/create-block/readme.md
index 860f883f1ab03..42f7837f30ff7 100644
--- a/docs/designers-developers/developers/tutorials/create-block/readme.md
+++ b/docs/designers-developers/developers/tutorials/create-block/readme.md
@@ -3,11 +3,11 @@
 
 The goal of this tutorial is to get you started creating your first block for the WordPress Block Editor. We will create a simple block that allows the user to type a message and styles it.
 
-The tutorial includes setting up your development enviornment, tools, and getting comfortable with the new development model. If you are already comfortable, try the quick start below, otherwise step through whatever part of the tutorial you need.
+The tutorial includes setting up your development environment, tools, and getting comfortable with the new development model. If you are already comfortable, try the quick start below, otherwise step through whatever part of the tutorial you need.
 
 ## Quick Start
 
-The `@wordpress/create-block` package exists to create the necessary block scaffolding to get you started. See [create-block pacakage documentation](https://www.npmjs.com/package/@wordpress/create-block) for additional features. This quick start assumes you have a development enviornment with node installed, and a WordPress site. From your plugins directory, to create your block run:
+The `@wordpress/create-block` package exists to create the necessary block scaffolding to get you started. See [create-block package documentation](https://www.npmjs.com/package/@wordpress/create-block) for additional features. This quick start assumes you have a development environment with node installed, and a WordPress site. From your plugins directory, to create your block run:
 
 ```bash
 npx @wordpress/create-block starter-block

From cc5c949bc355d397bd38b9af0be0db7d1d18b528 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 4 Jun 2020 13:32:40 -0700
Subject: [PATCH 05/25] Add alternative code editor options

---
 .../developers/tutorials/create-block/devenv.md               | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index 47b4ace25653a..e67cbce1ef953 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -55,6 +55,8 @@ The important part is having a WordPress site installed, and know where and how
 
 ## Code Editor
 
-[Visual Studio Code](https://code.visualstudio.com/) is a popular code editor for JavaScript development. It works quite well, open-source, actively maintained by Microsoft, and a vibrant community providing plugins and extensions; it is becoming the defacto standard for web development.
+[Visual Studio Code](https://code.visualstudio.com/) is a popular code editor for JavaScript development. It works quite well across the three major platforms (Windows, Linux, and Mac), it is open-source and actively maintained by Microsoft. Plus Visual Studio Code has a vibrant community providing plugins and extensions; it is becoming the defacto standard for web development.
+
+Alternative editors include [Sublime Text](https://www.sublimetext.com/) that is also available across platforms, though is a commercial product; or other free alternatives include [Vim](https://www.vim.org/), [Atom](https://atom.io/), and [Notepad++](https://notepad-plus-plus.org/) all support standard JavaScript style development.
 
 You can use any editor you're comfortable with, it is more a personal preference. The development setup for WordPress block editor is a common JavaScript environment and most editors have plugins and suppport. The key is having a way to open, edit, and save text files.

From f84c4c2a8bf59f136e08c44b353a73490b2d551b Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 4 Jun 2020 13:41:59 -0700
Subject: [PATCH 06/25] Add Chrome info for developer tools

---
 .../developers/tutorials/create-block/wp-plugin.md              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
index 9bbf2b09e82a8..6e376421056c6 100644
--- a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
+++ b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
@@ -118,7 +118,7 @@ With the above in place, create a new post to load the editor and check the you
 
 It is a good skill to learn and get comfortable using the web console. This is where JavaScript errors are shown and a nice way to test out snippets of JavaScript. See [Firefox Developer Tools documentation](https://developer.mozilla.org/en-US/docs/Tools).
 
-To open the developer tools in Firefox, use the menu selecting Web Developer : Toggle Tools, or the keyboard shortcuts on Windows is Ctrl+Shift+I, or on Mac Cmd+Shift+I. For me on Linux, the F12 key also works. You can then click Console to view logs.
+To open the developer tools in Firefox, use the menu selecting Web Developer : Toggle Tools, on Chrome, select More Tools -> Developers Tools. For both browers, the keyboard shortcut on Windows is Ctrl+Shift+I, or on Mac Cmd+Shift+I. On Windows & Linux, the F12 key also works. You can then click Console to view logs.
 
 Try running `npm run start` that will start the watch process for automatic rebuilds. If you then make an update to `src/index.js` file, you will see the build run, and if you reload the WordPress editor you'll see the change.
 

From 35262b25808ec260818b6f1c35425c25af5adfb1 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 4 Jun 2020 13:54:11 -0700
Subject: [PATCH 07/25] Add clarification around message attribute

---
 .../developers/tutorials/create-block/block-attributes.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/block-attributes.md b/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
index 6632add12cd68..d73e216c716c8 100644
--- a/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
+++ b/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
@@ -3,7 +3,7 @@
 
 Attributes are the way a block stores data, they define how a block is parsed to extract data from the saved content.
 
-We will add a **message** attribute that will be the variable to hold the user message. The following code defines a **message** attribute of type string with the value derived from the source, defined as the text of a `div` tag.
+For this block tutorial, we want to allow the user to type in a message that we will display stylized in the published post. So, we need to add a **message** attribute that will hold the user message. The following code defines a **message** attribute; the attribute type is a string; the source is the text from the selector which is a `div` tag.
 
 ```js
 attributes: {

From 56f57eba416c0d81fd6a107d14ec71c369af3db0 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 4 Jun 2020 14:20:15 -0700
Subject: [PATCH 08/25] Update finishing touches with additional resources

---
 .../tutorials/create-block/finishing.md       | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/finishing.md b/docs/designers-developers/developers/tutorials/create-block/finishing.md
index 9bc1bce911d02..d7c541d0cdc20 100644
--- a/docs/designers-developers/developers/tutorials/create-block/finishing.md
+++ b/docs/designers-developers/developers/tutorials/create-block/finishing.md
@@ -1,8 +1,27 @@
 
 # Finishing Touches
 
-@TODO
+This tutorial covers the basic structure of building a block, and the general concepts for creating a basic blocks. This sets you up for creating numerous more complicated blocks iterating and adding to this.
 
-- Block directory
-- Icons
-- Anything else?
\ No newline at end of file
+## Additional Components
+
+The block editor provides a [components package](/packages/packages-components/) which contains numerous prebuilt components you can use to build your block.
+
+You can visually browse the compoents and what their implementation looks like using the Storybook tool published at https://wordpress.github.io/gutenberg
+
+## Additional Tutorials
+
+The **RichText component** allows for creating a richer input besides plain text, allowing for bold, italic, links, and other inline formating. See the[RichText Reference](/docs/designers-developers/developers/richtext.md) for documentation using this component.
+
+The InspectorPanel, the settings on the right for a block, and Block Controls have a standard way to implement. See the [Block controls tutorial](/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md) for additional information.
+
+
+The [Sidebar tutorial](/docs/designers-developers/developers/tutorials/plugin-sidebar-0.md) is a good resource on how to creat a sidebar for your plugin.
+
+Nested blocks, a block that contains additional blocks, is a common pattern used by various blocks such as Columns, Cover, and Social Links. The **InnerBlocks component** enables this functionality, see the [Using InnerBlocks documentation](/docs/designers-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md)
+
+## How did they do that?
+
+One of the best sources for information and reference is the Block Editor itself, all the core blocks are built the same way and the code is available to browse. A good way is to find a core block doing something close to what you are interested, and read through its code to see how things are done.
+
+All core blocks are in the [block library package](https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src).

From 68d64c2bbffd809daf3c96dcbd8cf12bb31c6394 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 4 Jun 2020 14:56:49 -0700
Subject: [PATCH 09/25] Fix links

---
 .../developers/tutorials/create-block/block-anatomy.md      | 4 ++--
 .../developers/tutorials/create-block/block-attributes.md   | 6 +++---
 .../developers/tutorials/create-block/finishing.md          | 2 +-
 .../developers/tutorials/create-block/wp-plugin.md          | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md b/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md
index 4e9e3ac3864cb..74e56673cabf3 100644
--- a/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md
+++ b/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md
@@ -32,13 +32,13 @@ registerBlockType( 'create-block/gutenpride', {
 
 The first parameter in the **registerBlockType** function is the block name, this should match exactly to the name registered in the PHP file.
 
-The second parameter to the function is the block object. See the [block registration documentation](https://developer.wordpress.org/block-editor/developers/block-api/block-registration/) for full details.
+The second parameter to the function is the block object. See the [block registration documentation](/docs/designers-developers/developers/block-api/block-registration.md) for full details.
 
 The **title** is the title of the block shown in the Inserter.
 
 The **icon** is the icon shown in the Inserter. The icon property expects any Dashicon name as a string, see [list of available icons](https://developer.wordpress.org/resource/dashicons/). You can also provide an SVG object, but for now it's easiest to just pick a Dashicon name.
 
-The **category** specified is a string and must be one of: \"common, formatting, layout, widgets, or embed\". You can create your own custom category name, [see documentation for details](https://developer.wordpress.org/block-editor/designers-developers/developers/filters/block-filters/#managing-block-categories). For this tutorial, I specified "widgets" as the category.
+The **category** specified is a string and must be one of: "common, formatting, layout, widgets, or embed". You can create your own custom category name, [see documentation for details](/docs/designers-developers/developers/filters/block-filters.md#managing-block-categories). For this tutorial, I specified "widgets" as the category.
 
 The last two block object properties are **edit** and **save**, these are the key parts of a block. Both properties should be defined as functions.
 
diff --git a/docs/designers-developers/developers/tutorials/create-block/block-attributes.md b/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
index d73e216c716c8..8249393337a3f 100644
--- a/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
+++ b/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
@@ -19,17 +19,17 @@ Add this to the `index.js` file within the `registerBlockType` function in `inde
 
 To repeat, when the block loads it will look at the saved content for the block, look for the div tag, take the text portion — the part in between the open and close div tags —  and store the content in an `attributes.message` variable.
 
-For more details and other examples see the [Block Attributes documentation](https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/).
+For more details and other examples see the [Block Attributes documentation](/docs/designers-developers/developers/block-api/block-attributes.md).
 
 ## Edit and Save
 
-The **attributes** are passed to the `edit` and `save` functions, along with a  **setAttributes** parameters for setting the values after the user enters. Additional parameters are also passed in to this functions, see [the edit/save documentation](https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/) for more details.
+The **attributes** are passed to the `edit` and `save` functions, along with a  **setAttributes** parameters for setting the values after the user enters. Additional parameters are also passed in to this functions, see [the edit/save documentation](/docs/designers-developers/developers/block-api/block-edit-save.md) for more details.
 
 The attributes is a JavaScript object containing the values of each attribute, or default values if defined. The setAttributes is a function to update an attribute. If you are familiar with React, this is similar to state and setState.
 
 ## TextControl Component
 
-For this example block, the component we are going to use is the **TextControl** component, it is similar to an HTML text input field. You can see [documentation for TextControl component](https://developer.wordpress.org/block-editor/components/text-control/) and a complete list of components in the handbook. You can also browse an [interactive set of components in this Storybook](https://wordpress.github.io/gutenberg/).
+For this example block, the component we are going to use is the **TextControl** component, it is similar to an HTML text input field. You can see [documentation for TextControl component](/packages/components/src/text-control/README.md) and a complete list of components in the handbook. You can also browse an [interactive set of components in this Storybook](https://wordpress.github.io/gutenberg/).
 
 The component is added similar to an HTML tag, setting a label, the `value` is set to the `attributes.message` and the `onChange` function uses the `setAttributes` to update the url attribute value.
 
diff --git a/docs/designers-developers/developers/tutorials/create-block/finishing.md b/docs/designers-developers/developers/tutorials/create-block/finishing.md
index d7c541d0cdc20..8fe562ca0bd9c 100644
--- a/docs/designers-developers/developers/tutorials/create-block/finishing.md
+++ b/docs/designers-developers/developers/tutorials/create-block/finishing.md
@@ -5,7 +5,7 @@ This tutorial covers the basic structure of building a block, and the general co
 
 ## Additional Components
 
-The block editor provides a [components package](/packages/packages-components/) which contains numerous prebuilt components you can use to build your block.
+The block editor provides a [components package](/packages/components/README.md) which contains numerous prebuilt components you can use to build your block.
 
 You can visually browse the compoents and what their implementation looks like using the Storybook tool published at https://wordpress.github.io/gutenberg
 
diff --git a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
index 6e376421056c6..46b957b299074 100644
--- a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
+++ b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
@@ -122,7 +122,7 @@ To open the developer tools in Firefox, use the menu selecting Web Developer : T
 
 Try running `npm run start` that will start the watch process for automatic rebuilds. If you then make an update to `src/index.js` file, you will see the build run, and if you reload the WordPress editor you'll see the change.
 
-For more info, see the build section of the [Getting Started with JavaScript tutorial](https://developer.wordpress.org/block-editor/tutorials/javascript/js-build-setup/) in the WordPress Handbook.
+For more info, see the build section of the [Getting Started with JavaScript tutorial](/docs/designers-developers/developers/tutorials/javascript/js-build-setup.md) in the WordPress Handbook.
 
 ## Summary
 

From 95ff5968ec54c818b4897e06ac3541ba50c93885 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 4 Jun 2020 17:02:31 -0700
Subject: [PATCH 10/25] Fix typo

---
 .../developers/tutorials/create-block/finishing.md              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/finishing.md b/docs/designers-developers/developers/tutorials/create-block/finishing.md
index 8fe562ca0bd9c..d107de36edbe2 100644
--- a/docs/designers-developers/developers/tutorials/create-block/finishing.md
+++ b/docs/designers-developers/developers/tutorials/create-block/finishing.md
@@ -7,7 +7,7 @@ This tutorial covers the basic structure of building a block, and the general co
 
 The block editor provides a [components package](/packages/components/README.md) which contains numerous prebuilt components you can use to build your block.
 
-You can visually browse the compoents and what their implementation looks like using the Storybook tool published at https://wordpress.github.io/gutenberg
+You can visually browse the components and what their implementation looks like using the Storybook tool published at https://wordpress.github.io/gutenberg
 
 ## Additional Tutorials
 

From 1d18da2b5f09c5834f4f6ce14281161d30c575b5 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 9 Jun 2020 11:03:16 -0700
Subject: [PATCH 11/25] Various Updates per @gziolo review

- Add clarification around TextControl use
- Fix classname back to root element
- Rephrase on how to better stylize text
- Simplify quick start, emphasize activation
- Add CLI prompts for questions
---
 .../create-block/author-experience.md         | 101 +++++++++---------
 .../tutorials/create-block/readme.md          |  12 ++-
 2 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/author-experience.md b/docs/designers-developers/developers/tutorials/create-block/author-experience.md
index 753b2229c90f6..90ca9296c8b0e 100644
--- a/docs/designers-developers/developers/tutorials/create-block/author-experience.md
+++ b/docs/designers-developers/developers/tutorials/create-block/author-experience.md
@@ -16,19 +16,19 @@ import { Placeholder, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function Edit( { attributes, className, setAttributes } ) {
-    return (
-        <div className={ className }>
+		return (
+				<div className={ className }>
 			<Placeholder
-			  label="Gutenpride Block"
-			  instructions="Add your message"
+				label="Gutenpride Block"
+				instructions="Add your message"
 			>
-			  <TextControl
-			    value={ attributes.message }
-			    onChange={ ( val ) => setAttributes( { message: val } ) }
-			  />
+				<TextControl
+					value={ attributes.message }
+					onChange={ ( val ) => setAttributes( { message: val } ) }
+				/>
 			</Placeholder>
-        </div>
-    );
+				</div>
+		);
 }
 ```
 
@@ -39,22 +39,28 @@ The placeholder looks ok, for a simple text message it may or may not be what yo
 For this we can use a ternary function, to display content based on a value being set or not. A ternary function is an inline if-else statement, using the syntax:
 
 ```js
-  ( clause ) ? ( doIfTrue ) : ( doIfFalse )
+	( clause ) ? ( doIfTrue ) : ( doIfFalse )
 ```
 
-This can be used inside a block to control what shows when a parameter is set or not. A simple case that checks if the `message` is set might look like:
+This can be used inside a block to control what shows when a parameter is set or not. A simple case that displays a `message` if set, otherwise show the form element:
 
 ```jsx
-  return (
-    <div>
-      { attributes.message ?
-        <div> Message: { attributes.message }</div> :
-        <div> No Message <TextField/> </div>
-      }
-  );
+	return (
+		<div>
+			{ attributes.message ?
+				<div>Message: { attributes.message }</div> :
+				<div>
+					<p>No Message.</p>
+					<TextControl
+						value={ attributes.message }
+						onChange={ ( val ) => setAttributes( { message: val } ) }
+					/>
+				</div>
+			}
+	);
 ```
 
-If we only used the above check, as soon as we type anything, the textfield would disappear since the message would be set. So we need to pair with the `isSelected` parameter.
+There is a problem with the above, if we only use the `attributes.message` check, as soon as we type in the text field it would disappear since the message would then be set to a value. So we need to pair with an additional `isSelected` parameter.
 
 The `isSelected` parameter is passed in to the `edit` function and is set to true if the block is selected in the editor (currently editing) otherwise set to false (editing elsewhere).
 
@@ -73,24 +79,24 @@ import { Placeholder, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function Edit( { attributes, className, isSelected, setAttributes } ) {
-    return (
-        <div>
-        { attributes.message && !isSelected ?
-            <div className={ className }>
-                { attributes.message }
-            </div> :
-			<Placeholder
-			  label="Gutenpride Block"
-			  instructions="Add your message"
-			>
-			  <TextControl
-			    value={ attributes.message }
-			    onChange={ ( val ) => setAttributes( { message: val } ) }
-			  />
-            </Placeholder>
-        }
-        </div>
-    );
+		return (
+			<div className={ className }>
+				{ attributes.message && !isSelected ?
+					<div>
+						{ attributes.message }
+					</div> :
+					<Placeholder
+						label="Gutenpride Block"
+						instructions="Add your message"
+					>
+						<TextControl
+							value={ attributes.message }
+							onChange={ ( val ) => setAttributes( { message: val } ) }
+						/>
+					</Placeholder>
+				}
+			</div>
+		);
 }
 ```
 
@@ -98,9 +104,9 @@ With that in place, rebuild and reload and when you are not editing the message
 
 ## A Better Solution
 
-Replacing the Placeholder and TextControl when it is selected or not is jarring and not an ideal situation for this block. This was mainly used to illustrate what can be done depending on your block. It is important to think about the author's experience using the block.
+The switching between a Placeholder and input control works well with a visual element like an image or video, but for the text example in this block we can do better.
 
-The simpler and better solution is to modify the editor.css to include the proper style for the textfield, this will give the stylized text while typing.
+The simpler and better solution is to modify the `editor.css` to include the proper stylized text while typing.
 
 Update `editor.css` to:
 
@@ -115,15 +121,14 @@ The edit function can simply be:
 
 ```jsx
 import { TextControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 export default function Edit( { attributes, className, setAttributes } ) {
-    return (
-        <TextControl
-            className={ className }
-            value={ attributes.message }
-            onChange={ ( val ) => setAttributes( { message: val } ) }
-        />
-    );
+	return (
+		<TextControl
+			className={ className }
+			value={ attributes.message }
+			onChange={ ( val ) => setAttributes( { message: val } ) }
+		/>
+	);
 }
 ```
diff --git a/docs/designers-developers/developers/tutorials/create-block/readme.md b/docs/designers-developers/developers/tutorials/create-block/readme.md
index 42f7837f30ff7..0b60d0fc5c40d 100644
--- a/docs/designers-developers/developers/tutorials/create-block/readme.md
+++ b/docs/designers-developers/developers/tutorials/create-block/readme.md
@@ -7,17 +7,19 @@ The tutorial includes setting up your development environment, tools, and gettin
 
 ## Quick Start
 
-The `@wordpress/create-block` package exists to create the necessary block scaffolding to get you started. See [create-block package documentation](https://www.npmjs.com/package/@wordpress/create-block) for additional features. This quick start assumes you have a development environment with node installed, and a WordPress site. From your plugins directory, to create your block run:
+The `@wordpress/create-block` package exists to create the necessary block scaffolding to get you started. See [create-block package documentation](https://www.npmjs.com/package/@wordpress/create-block) for additional features. This quick start assumes you have a development environment with node installed, and a WordPress site.
+
+From your plugins directory, to create your block run:
 
 ```bash
 npx @wordpress/create-block starter-block
-cd starter-block
-npm run build
 ```
 
-The above commands create a new directory called `starter-block`, installs the necessary files and builds the block plugin.
+The above command will ask you a few questions to customize, then will create a new directory called `starter-block`, installs the necessary files, and builds the block plugin.
+
+You now need to activate the plugin from inside wp-admin plugins page.
 
-If you ran from within your WordPress sites plugin directory, you can add and activate it from your WordPress site. After activated, go to the block editor and use the inserter to search and add your new block.
+After activated, go to the block editor and use the inserter to search and add your new block.
 
 ## Table of Contents
 

From de69d217f63fd5a6c0d572bec8d01920f5524101 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 9 Jun 2020 11:37:09 -0700
Subject: [PATCH 12/25] Add clarification around installs

- Call out package managers is an alternative
- Be clear about what is needed per platform
---
 .../developers/tutorials/create-block/devenv.md      | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index e67cbce1ef953..48fc7234cb57d 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -11,15 +11,17 @@ The three main pieces needed for the development environment are:
 
 The tools needed for development are **Node** and **NPM**. **Nodejs** is a runtime environment that allows running JavaScript outside of the browser. NPM is the Node Package Manager, it is used for installing dependencies and running scripts. The script `npx` is installed with `npm` and is used to run packages not yet installed, we will use this to bootstrap a block.
 
-The tools are used to take the JavaScript we are going to write, which is in a syntax that the browser can not run, and transpile it into a syntax it can. This is called the build step.
+The tools are used to convert the JavaScript we are going to write into a format that browsers can run. This is called transpiling or the build step.
 
-You can [download Nodejs](https://nodejs.org/) directly from the main website and install. It also packaged for most package managers.
+You can [download Nodejs](https://nodejs.org/en/download/) directly from the main website and install.
 
-On Mac, I recommend using [Homebrew package tool](https://brew.sh/) and install is: `brew install node`js
+Alternatively, if you use a package manager, a node package is avilable for most package managers.
 
-On Windows, you can use Chocolatey package manager and install using: `choco install nodejs`
+On Mac, [Homebrew](https://brew.sh/) is a popular package manager, if you use Homebrew install using: `brew install nodejs`
 
-NPM usually comes bundled with the above installs. On Ubuntu, or Debian, NPM is bundled separately and you can install using: `apt install nodejs npm`
+On Windows, [Chocolatey](https://chocolatey.org/packages) is a popular package manager, if you use Chocolatey install using: `choco install nodejs`
+
+If you use Linux, you should confirm NPM is also installed. In some systems it is bundled separately and you may need to explicitly install it. For example, on Ubuntu, or Debian systems you can install using: `apt install nodejs npm`
 
 However you install Nodejs, the important part is being able to use them in your terminal. Open a terminal command-line and be able to run `node -v` and `npm -v` to confirm they are installed.
 

From b6447cea2b2173e3f649b88a804808a9a4b367fc Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 9 Jun 2020 12:10:07 -0700
Subject: [PATCH 13/25] Tweak installation instructions

---
 .../developers/tutorials/create-block/devenv.md               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index 48fc7234cb57d..78bdf4e540b51 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -13,9 +13,9 @@ The tools needed for development are **Node** and **NPM**. **Nodejs** is a runti
 
 The tools are used to convert the JavaScript we are going to write into a format that browsers can run. This is called transpiling or the build step.
 
-You can [download Nodejs](https://nodejs.org/en/download/) directly from the main website and install.
+You can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, installers are available for Windows and Mac, and binaries available for Linux.
 
-Alternatively, if you use a package manager, a node package is avilable for most package managers.
+An alternative installation, if you use a package manager, nodejs is available for most package managers.
 
 On Mac, [Homebrew](https://brew.sh/) is a popular package manager, if you use Homebrew install using: `brew install nodejs`
 

From 7106752a9a02fc3a73478d1930a11d77e7fd1fdf Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 10 Jun 2020 06:22:15 -0700
Subject: [PATCH 14/25] Remove package manager part, refer to Node site

---
 .../developers/tutorials/create-block/devenv.md      | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index 78bdf4e540b51..e82531a28e9b5 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -13,17 +13,9 @@ The tools needed for development are **Node** and **NPM**. **Nodejs** is a runti
 
 The tools are used to convert the JavaScript we are going to write into a format that browsers can run. This is called transpiling or the build step.
 
-You can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, installers are available for Windows and Mac, and binaries available for Linux.
+You can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, installers are available for Windows and Mac, and binaries available for Linux. See Node.js site for additional installation methods.
 
-An alternative installation, if you use a package manager, nodejs is available for most package managers.
-
-On Mac, [Homebrew](https://brew.sh/) is a popular package manager, if you use Homebrew install using: `brew install nodejs`
-
-On Windows, [Chocolatey](https://chocolatey.org/packages) is a popular package manager, if you use Chocolatey install using: `choco install nodejs`
-
-If you use Linux, you should confirm NPM is also installed. In some systems it is bundled separately and you may need to explicitly install it. For example, on Ubuntu, or Debian systems you can install using: `apt install nodejs npm`
-
-However you install Nodejs, the important part is being able to use them in your terminal. Open a terminal command-line and be able to run `node -v` and `npm -v` to confirm they are installed.
+The important part after installing is being able to use them in your terminal. Open a terminal command-line and be able to run `node -v` and `npm -v` to confirm they are installed.
 
 
 ## WordPress Development Site

From 2129a1c0efca33776d63fc4e670bec3a391866fb Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 10 Jun 2020 06:47:45 -0700
Subject: [PATCH 15/25] Add version and LTS info to node

---
 .../developers/tutorials/create-block/devenv.md       | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index e82531a28e9b5..8e2d6dbdce7f3 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -13,10 +13,19 @@ The tools needed for development are **Node** and **NPM**. **Nodejs** is a runti
 
 The tools are used to convert the JavaScript we are going to write into a format that browsers can run. This is called transpiling or the build step.
 
-You can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, installers are available for Windows and Mac, and binaries available for Linux. See Node.js site for additional installation methods.
+You can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, the LTS (long term support) version is recommened. Installers are available for Windows and Mac, and binaries available for Linux. See Node.js site for additional installation methods.
 
 The important part after installing is being able to use them in your terminal. Open a terminal command-line and be able to run `node -v` and `npm -v` to confirm they are installed.
 
+```
+> node -v
+v12.18.0
+
+> npm -v
+6.14.4
+```
+
+The minimum version for node is >= 10.x and for npm >= 6.9x, using the current LTS version will always be supported.
 
 ## WordPress Development Site
 

From 864edbe563815ddb4087b4a22e8ab3a7925f67b3 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Sun, 14 Jun 2020 07:27:47 -0700
Subject: [PATCH 16/25] Add version and optional to Sass section

---
 .../developers/tutorials/create-block/block-code.md           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/block-code.md b/docs/designers-developers/developers/tutorials/create-block/block-code.md
index 36cae30354f76..c84c226b4a146 100644
--- a/docs/designers-developers/developers/tutorials/create-block/block-code.md
+++ b/docs/designers-developers/developers/tutorials/create-block/block-code.md
@@ -43,9 +43,9 @@ Edit the style.css to the following, note the classname given to a block is pref
 
 With that updated, you can reload the post, for CSS changes you don't need to rebuild, so refresh and if you are using a browser that supports color fonts (Firefox) then you will see it styled.
 
-## Use Sass for Style
+## Use Sass for Style (optional)
 
-The wp-scripts package does provide support for using the Sass/Scss languages to generate CSS. See the [Sass language site](https://sass-lang.com/) to learn more.
+The wp-scripts package does provide support for using the Sass/Scss languages, to generate CSS, added in @wordpress/scripts v9.1.0. See the [Sass language site](https://sass-lang.com/) to learn more about Sass.
 
 To use Sass, you need to import a `editor.scss` or `style.scss` in the `index.js` JavaScript file and it will build and output the generated file in the build directory. Note: You need to update the enqueing functions in PHP to load from the correct location.
 

From 17eb7441455e2db70f1dc05d9eae1f833f7a7034 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Sun, 14 Jun 2020 07:28:13 -0700
Subject: [PATCH 17/25] Connect devenv to plugin using wp-env

---
 .../tutorials/create-block/devenv.md           |  4 ++--
 .../tutorials/create-block/wp-plugin.md        | 18 ++++++++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index 8e2d6dbdce7f3..6222dba439a78 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -13,9 +13,9 @@ The tools needed for development are **Node** and **NPM**. **Nodejs** is a runti
 
 The tools are used to convert the JavaScript we are going to write into a format that browsers can run. This is called transpiling or the build step.
 
-You can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, the LTS (long term support) version is recommened. Installers are available for Windows and Mac, and binaries available for Linux. See Node.js site for additional installation methods.
+You can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, the LTS (long term support) version is recommeneded. Installers are available for Windows and Mac, and binaries available for Linux. See Node.js site for additional installation methods.
 
-The important part after installing is being able to use them in your terminal. Open a terminal command-line and be able to run `node -v` and `npm -v` to confirm they are installed.
+The important part after installing is being able to use them in your terminal. Open a terminal command-line and type `node -v` and `npm -v` to confirm they are installed.
 
 ```
 > node -v
diff --git a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
index 46b957b299074..c6eb726146264 100644
--- a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
+++ b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
@@ -4,9 +4,11 @@ A new block in the WordPress block editor is added by creating a WordPress plugi
 
 ## WordPress Plugin
 
-A WordPress plugin is a set of files in a directory within the sites `wp-content/plugins` directory. For this example, we will use the `create-block` package to generate the necessary plugin files.
+A WordPress plugin is a set of files in a directory within the site's `wp-content/plugins` directory. For this example, we will use the `create-block` package to generate the necessary plugin files.
 
-From the command-line, change to your WordPress installs plugin directory and run:
+If you do not plan to use `wp-env` change to your local WordPress plugin directory; if you do plan to use `wp-env` start from any directory for your project.
+
+Run the following command to generate plugin files:
 
 ```
 npx @wordpress/create-block gutenpride
@@ -30,7 +32,15 @@ The script created a PHP file `gutenpride.php` that is the main plugin file. At
  */
 ```
 
-This is all that is needed to stub out a plugin, it won't do anything. However, it is good to get the basics in place and build up from there. The plugin should be listed on the Plugins admin page and can be activated.
+The generated plugin should now be listed on the Plugins admin page in your WordPress install. If you are using `wp-env`, see [Development Enviornment setup](devenv.md), then you should now run:
+
+```
+wp-env start
+```
+
+This will start your local WordPress site and use the current directory as your plugin, go to https://localhost:8888/wp-admin/ to confirm.
+
+To login, the default username is "admin" and password is "password", no quotes.
 
 For more on creating a WordPress plugin see [Plugin Basics](https://developer.wordpress.org/plugins/plugin-basics/), and [Plugin Header requirements](https://developer.wordpress.org/plugins/plugin-basics/header-requirements/) for explanation and additional fields you can include in your plugin
 header.
@@ -128,4 +138,4 @@ For more info, see the build section of the [Getting Started with JavaScript tut
 
 Hopefully, at this point, you have your plugin created and activated. We have the package.json with the `@wordpress/scripts` dependency, that defines the build and start scripts. The basic block is in place and can be added to the editor.
 
-The next lessons will explain the structure of a block and then how we can do something a little more interesting with it.
\ No newline at end of file
+The next lessons will explain the structure of a block and then how we can do something a little more interesting with it.

From f65404157a0ef6037b7578673cb1f6dbe94e21b5 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Sun, 14 Jun 2020 07:54:21 -0700
Subject: [PATCH 18/25] =?UTF-8?q?Numerous=20updates=20based=20on=20reviews?=
 =?UTF-8?q?=20=F0=9F=99=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-block/block-attributes.md          | 20 ++++++++++++-------
 .../tutorials/create-block/block-code.md      | 18 ++++++++---------
 .../tutorials/create-block/devenv.md          |  4 ++--
 .../tutorials/create-block/esnext-js.md       |  2 +-
 .../tutorials/create-block/finishing.md       |  2 +-
 .../tutorials/create-block/readme.md          |  8 ++++----
 .../tutorials/create-block/wp-plugin.md       |  6 ++----
 7 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/block-attributes.md b/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
index 8249393337a3f..bee95dc2a73a7 100644
--- a/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
+++ b/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
@@ -15,21 +15,27 @@ attributes: {
 },
 ```
 
-Add this to the `index.js` file within the `registerBlockType` function in `index.js`, `attributes` are at the same level as the title and description fields.
+Add this to the `index.js` file within the `registerBlockType` function. The  `attributes` are at the same level as the title and description fields.
 
-To repeat, when the block loads it will look at the saved content for the block, look for the div tag, take the text portion — the part in between the open and close div tags —  and store the content in an `attributes.message` variable.
+When the block loads it will: look at the saved content for the block, look for the div tag, take the text portion, and store the content in an `attributes.message` variable.
 
-For more details and other examples see the [Block Attributes documentation](/docs/designers-developers/developers/block-api/block-attributes.md).
+Note: The text portion is equivalent to `innerText` attribute of a DOM element. For more details and other examples see the [Block Attributes documentation](/docs/designers-developers/developers/block-api/block-attributes.md).
 
 ## Edit and Save
 
-The **attributes** are passed to the `edit` and `save` functions, along with a  **setAttributes** parameters for setting the values after the user enters. Additional parameters are also passed in to this functions, see [the edit/save documentation](/docs/designers-developers/developers/block-api/block-edit-save.md) for more details.
+The **attributes** are passed to the `edit` and `save` functions, along with a  **setAttributes** function to set the values. Additional parameters are also passed in to this functions, see [the edit/save documentation](/docs/designers-developers/developers/block-api/block-edit-save.md) for more details.
 
-The attributes is a JavaScript object containing the values of each attribute, or default values if defined. The setAttributes is a function to update an attribute. If you are familiar with React, this is similar to state and setState.
+The `attributes` is a JavaScript object containing the values of each attribute, or default values if defined. The `setAttributes` is a function to update an attribute.
+
+```js
+export default function Edit( { attributes, setAttributes } ) {
+    // ...
+}
+```
 
 ## TextControl Component
 
-For this example block, the component we are going to use is the **TextControl** component, it is similar to an HTML text input field. You can see [documentation for TextControl component](/packages/components/src/text-control/README.md) and a complete list of components in the handbook. You can also browse an [interactive set of components in this Storybook](https://wordpress.github.io/gutenberg/).
+For our example block, the component we are going to use is the **TextControl** component, it is similar to an HTML text input field. You can see [documentation for TextControl component](/packages/components/src/text-control/README.md). You can browse an [interactive set of components in this Storybook](https://wordpress.github.io/gutenberg/).
 
 The component is added similar to an HTML tag, setting a label, the `value` is set to the `attributes.message` and the `onChange` function uses the `setAttributes` to update the url attribute value.
 
@@ -69,4 +75,4 @@ export default function Save( { attributes, className } ) {
 }
 ```
 
-With that code in place, rebuild the block using `npm run build`, reload the editor and add the block. You should be able to type a message in the editor, and on save, view it in the post.
\ No newline at end of file
+Rebuild the block using `npm run build`, reload the editor and add the block. Type a message in the editor, save, and view it in the post.
diff --git a/docs/designers-developers/developers/tutorials/create-block/block-code.md b/docs/designers-developers/developers/tutorials/create-block/block-code.md
index c84c226b4a146..c78368b545438 100644
--- a/docs/designers-developers/developers/tutorials/create-block/block-code.md
+++ b/docs/designers-developers/developers/tutorials/create-block/block-code.md
@@ -1,13 +1,13 @@
 
 # Code Implementation
 
-The basic block is in place, the next step is to add some style to the block. Feel free to style and adjust for your own preference, the main lesson is showing how to create and load external resources. For this example I'm going to load the colorized gilbert font from [Type with Pride](https://www.typewithpride.com/).
+The basic block is in place, the next step is to add styles to the block. Feel free to style and adjust for your own preference, the main lesson is showing how to create and load external resources. For this example I'm going to load the colorized gilbert font from [Type with Pride](https://www.typewithpride.com/).
 
 Note: The color may not work with all browsers until they support the proper color font properly, but the font itself still loads and styles. See [colorfonts.wtf](https://www.colorfonts.wtf/) for browser support and details on color fonts.
 
 ## Load Font File
 
-I downloaded and extracted the font from the Type with Pride site, and copied it to my plugin directory naming it `gilber-color.otf`. To load the font file, we need to add CSS using standard WordPress enqueue, [see Including CSS & JavaScript documentation](https://developer.wordpress.org/themes/basics/including-css-javascript/).
+Download and extract the font from the Type with Pride site, and copy it to your plugin directory naming it `gilbert-color.otf`. To load the font file, we need to add CSS using standard WordPress enqueue, [see Including CSS & JavaScript documentation](https://developer.wordpress.org/themes/basics/including-css-javascript/).
 
 In the `gutenpride.php` file, the enqueue process is already setup from the generated script, so `editor.css` and `style.css` files are loaded using:
 
@@ -18,15 +18,15 @@ register_block_type( 'create-block/gutenpride', array(
     'style'         => 'create-block-gutenpride-block',
 ) );
 ```
-The `editor_style` and `style` parameters refer to the handles in the `wp_register_style` functions that match the files to the handles.
+The `editor_style` and `style` parameters refer to the files that match the handles in the `wp_register_style` functions.
 
-Note: The `style` CSS will load on both the editor and front-end — published post view — the `editor_style` loads only within the editor, and after the style css.
+Note: the `editor_style` loads only within the editor, and after the `style`. The `style` CSS loads in both the editor and front-end — published post view.
 
 ## Add CSS Style for Block
 
-The style.css will be loaded in both contexts, the editor and the front-end, so we only need to add the style in one spot and it will show while editing and viewing the post.
+We only need to add the style to `style.css` since it will show while editing and viewing the post. Edit the style.css to add the following.
 
-Edit the style.css to the following, note the classname given to a block is prefixed with `wp-block` and then adds the block name converting any `/` to `-` so in this case the block name `create-block/gutenpride` is converted to the classname `.wp-block-create-block-gutenpride`.
+ Note: the block classname is prefixed with `wp-block`. The `create-block/gutenpride` is converted to the classname `.wp-block-create-block-gutenpride`.
 
 ```css
 @font-face {
@@ -41,15 +41,15 @@ Edit the style.css to the following, note the classname given to a block is pref
 }
 ```
 
-With that updated, you can reload the post, for CSS changes you don't need to rebuild, so refresh and if you are using a browser that supports color fonts (Firefox) then you will see it styled.
+After updating, reload the post and refresh the brwoser. If you are using a browser that supports color fonts (Firefox) then you will see it styled.
 
 ## Use Sass for Style (optional)
 
-The wp-scripts package does provide support for using the Sass/Scss languages, to generate CSS, added in @wordpress/scripts v9.1.0. See the [Sass language site](https://sass-lang.com/) to learn more about Sass.
+The wp-scripts package provides support for using the Sass/Scss languages, to generate CSS, added in @wordpress/scripts v9.1.0. See the [Sass language site](https://sass-lang.com/) to learn more about Sass.
 
 To use Sass, you need to import a `editor.scss` or `style.scss` in the `index.js` JavaScript file and it will build and output the generated file in the build directory. Note: You need to update the enqueing functions in PHP to load from the correct location.
 
-Add import to **index.js**:
+Add the following imports to **index.js**:
 
 ```js
 import "../editor.scss";
diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index 6222dba439a78..79b89a7f11ffc 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -1,7 +1,7 @@
 
-# Create Block: Developer Environment
+# Development Environment
 
-The three main pieces needed for the development environment are:
+We will need a place to work and tools for creating a block, this is often referred to as the development enviornment. The three main pieces needed for our development environment are:
 
 1. Node/NPM Development Tools
 2. WordPress Development Site
diff --git a/docs/designers-developers/developers/tutorials/create-block/esnext-js.md b/docs/designers-developers/developers/tutorials/create-block/esnext-js.md
index f59bbd20c1b94..67fb547806043 100644
--- a/docs/designers-developers/developers/tutorials/create-block/esnext-js.md
+++ b/docs/designers-developers/developers/tutorials/create-block/esnext-js.md
@@ -1,5 +1,5 @@
 
-# ES6 Syntax
+# ESNext Syntax
 
 A brief aside to discuss JavaScript.
 
diff --git a/docs/designers-developers/developers/tutorials/create-block/finishing.md b/docs/designers-developers/developers/tutorials/create-block/finishing.md
index d107de36edbe2..d5e22e3c9a7a7 100644
--- a/docs/designers-developers/developers/tutorials/create-block/finishing.md
+++ b/docs/designers-developers/developers/tutorials/create-block/finishing.md
@@ -11,7 +11,7 @@ You can visually browse the components and what their implementation looks like
 
 ## Additional Tutorials
 
-The **RichText component** allows for creating a richer input besides plain text, allowing for bold, italic, links, and other inline formating. See the[RichText Reference](/docs/designers-developers/developers/richtext.md) for documentation using this component.
+The **RichText component** allows for creating a richer input besides plain text, allowing for bold, italic, links, and other inline formating. See the [RichText Reference](/docs/designers-developers/developers/richtext.md) for documentation using this component.
 
 The InspectorPanel, the settings on the right for a block, and Block Controls have a standard way to implement. See the [Block controls tutorial](/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md) for additional information.
 
diff --git a/docs/designers-developers/developers/tutorials/create-block/readme.md b/docs/designers-developers/developers/tutorials/create-block/readme.md
index 0b60d0fc5c40d..79adc666ba3b0 100644
--- a/docs/designers-developers/developers/tutorials/create-block/readme.md
+++ b/docs/designers-developers/developers/tutorials/create-block/readme.md
@@ -26,8 +26,8 @@ After activated, go to the block editor and use the inserter to search and add y
 1. [Development Environment](devenv.md)
 2. [WordPress Plugin](wp-plugin.md)
 3. [ESNext Syntax](esnext-js.md)
-4. [Block Anatomy ](block-anatomy.md)
-5. [Block Attributes & Data](block-attributes.md)
-6. [Block Code](block-code.md)
-7. [Author Experience](author-experience.md)
+4. [Anatomy of a Gutenberg Block ](block-anatomy.md)
+5. [Block Attributes](block-attributes.md)
+6. [Code Implementation](block-code.md)
+7. [Authoring Experience](author-experience.md)
 8. [Finishing Touches](finishing.md)
diff --git a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
index c6eb726146264..271f6747c7649 100644
--- a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
+++ b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
@@ -1,8 +1,8 @@
-# Create a Block: WordPress Plugin
+# WordPress Plugin
 
 A new block in the WordPress block editor is added by creating a WordPress plugin, installing, and activating the plugin. This page covers the details of a WordPress plugin if you are not already familiar.
 
-## WordPress Plugin
+## Plugin Details
 
 A WordPress plugin is a set of files in a directory within the site's `wp-content/plugins` directory. For this example, we will use the `create-block` package to generate the necessary plugin files.
 
@@ -137,5 +137,3 @@ For more info, see the build section of the [Getting Started with JavaScript tut
 ## Summary
 
 Hopefully, at this point, you have your plugin created and activated. We have the package.json with the `@wordpress/scripts` dependency, that defines the build and start scripts. The basic block is in place and can be added to the editor.
-
-The next lessons will explain the structure of a block and then how we can do something a little more interesting with it.

From 780fd23785023884b28274385fa515aef5d6b6b7 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Sun, 14 Jun 2020 08:09:31 -0700
Subject: [PATCH 19/25] Add details around wp-env, and alternatives

---
 .../tutorials/create-block/devenv.md          | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index 79b89a7f11ffc..0db8bd30e35cb 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -36,23 +36,31 @@ The WordPress [wp-env package](https://www.npmjs.com/package/@wordpress/env) let
 The `wp-env` package requires Docker to be installed. There are instructions available for installing Docker on [Windows 10 Pro](https://docs.docker.com/docker-for-windows/install/), [all other versions of Windows](https://docs.docker.com/toolbox/toolbox_install_windows/), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/v17.12/install/linux/docker-ce/ubuntu/#install-using-the-convenience-script).
 
 
-After confirming that the prerequisites are installed, you can install wp-env globally from the command-line running:
+After confirming that the prerequisites are installed, install `wp-env` globally from the command-line using:
 
 ```bash
 npm -g install @wordpress/env
 ```
 
+This will be used in the next [Plugin step](wp-plugin.ms). To confirm it is installed and available, run:
+
+```
+wp-env --version
+> 1.4.0
+```
+
 ### Alternatives
 
-If you are just starting out, using [Local by Flywheel](https://localbyflywheel.com/) might be easier, since it does not require the additional Docker install and setup. Local is a single application you download and install and tends to be much simpler than alternatives. You will need to know where the plugin directory is installed. If you create a site called `mywp` typically the plugin directory is installed at `~\Local Sites\mywp\app\public\wp-content\plugins`
+A block is just a plugin, so any WordPress environment can be used for development. A couple of alternatives that might be easier, since they do not require Docker install and setup.
+
+* [Local by Flywheel](https://localbyflywheel.com/) - Local is a single application you download and install. You will need to know where the plugin directory is located after install. If you create a site called `mywp` typically the plugin directory is installed at `~\Local Sites\mywp\app\public\wp-content\plugins`
 
-You can use [WampServer](http://www.wampserver.com/en/) or
+* [WampServer](http://www.wampserver.com/en/) or
 [MAMP](https://www.mamp.info/) environments, both are quite similar to
 Local, combining a web server, PHP, and database. However these tools
-are not WordPress specific, so if you are not already using them, you might as
-well use Local.
+are not WordPress specific, so if you are not already using them, Local might be an easier option
 
-You can also work remotely on a server, this might be easy to setup the server since most hosts have a WordPress already installed. However, this may require development time since it may require syncing files, or editing the directly on the server.
+* Remote server - you could work on remote server that is easy to setup, since most hosts have a standard WordPress install. However, this may require additonal development time to sync to the server.
 
 The important part is having a WordPress site installed, and know where and how to update files in the plugins directory.
 

From 1667e299620f91be2a29330807218dd6c6b04f69 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 22 Jun 2020 12:55:43 -0700
Subject: [PATCH 20/25] Add Mac recommendation to use Homebrew

---
 .../developers/tutorials/create-block/devenv.md  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index 0db8bd30e35cb..9b2af9e074bd3 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -1,4 +1,3 @@
-
 # Development Environment
 
 We will need a place to work and tools for creating a block, this is often referred to as the development enviornment. The three main pieces needed for our development environment are:
@@ -15,6 +14,8 @@ The tools are used to convert the JavaScript we are going to write into a format
 
 You can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, the LTS (long term support) version is recommeneded. Installers are available for Windows and Mac, and binaries available for Linux. See Node.js site for additional installation methods.
 
+On Mac, it is recommended to use [Homebrew package manager](https://brew.sh/) to install node. Homebrew sets up user level permissions properly, whereas the default Node installer sets it up at the system-level causing permission issues later.
+
 The important part after installing is being able to use them in your terminal. Open a terminal command-line and type `node -v` and `npm -v` to confirm they are installed.
 
 ```
@@ -35,7 +36,6 @@ The WordPress [wp-env package](https://www.npmjs.com/package/@wordpress/env) let
 
 The `wp-env` package requires Docker to be installed. There are instructions available for installing Docker on [Windows 10 Pro](https://docs.docker.com/docker-for-windows/install/), [all other versions of Windows](https://docs.docker.com/toolbox/toolbox_install_windows/), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/v17.12/install/linux/docker-ce/ubuntu/#install-using-the-convenience-script).
 
-
 After confirming that the prerequisites are installed, install `wp-env` globally from the command-line using:
 
 ```bash
@@ -53,14 +53,14 @@ wp-env --version
 
 A block is just a plugin, so any WordPress environment can be used for development. A couple of alternatives that might be easier, since they do not require Docker install and setup.
 
-* [Local by Flywheel](https://localbyflywheel.com/) - Local is a single application you download and install. You will need to know where the plugin directory is located after install. If you create a site called `mywp` typically the plugin directory is installed at `~\Local Sites\mywp\app\public\wp-content\plugins`
+-   [Local by Flywheel](https://localbyflywheel.com/) - Local is a single application you download and install. You will need to know where the plugin directory is located after install. If you create a site called `mywp` typically the plugin directory is installed at `~\Local Sites\mywp\app\public\wp-content\plugins`
 
-* [WampServer](http://www.wampserver.com/en/) or
-[MAMP](https://www.mamp.info/) environments, both are quite similar to
-Local, combining a web server, PHP, and database. However these tools
-are not WordPress specific, so if you are not already using them, Local might be an easier option
+-   [WampServer](http://www.wampserver.com/en/) or
+    [MAMP](https://www.mamp.info/) environments, both are quite similar to
+    Local, combining a web server, PHP, and database. However these tools
+    are not WordPress specific, so if you are not already using them, Local might be an easier option
 
-* Remote server - you could work on remote server that is easy to setup, since most hosts have a standard WordPress install. However, this may require additonal development time to sync to the server.
+-   Remote server - you could work on remote server that is easy to setup, since most hosts have a standard WordPress install. However, this may require additonal development time to sync to the server.
 
 The important part is having a WordPress site installed, and know where and how to update files in the plugins directory.
 

From e7ac74b6f86b7bd932cb6cd91cd72181b9a32610 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 22 Jun 2020 16:40:16 -0700
Subject: [PATCH 21/25] Add further clarification for Mac/Homebrew

---
 .../developers/tutorials/create-block/devenv.md                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index 9b2af9e074bd3..c3703ec6706cc 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -14,7 +14,7 @@ The tools are used to convert the JavaScript we are going to write into a format
 
 You can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, the LTS (long term support) version is recommeneded. Installers are available for Windows and Mac, and binaries available for Linux. See Node.js site for additional installation methods.
 
-On Mac, it is recommended to use [Homebrew package manager](https://brew.sh/) to install node. Homebrew sets up user level permissions properly, whereas the default Node installer sets it up at the system-level causing permission issues later.
+On Mac, it is recommended to use the [Homebrew package manager](https://brew.sh/) to install node and not the installer above. Homebrew sets up user level permissions properly, whereas the default Node installer sets it up at the system-level causing permission issues later. Follow the directions on Homebrew to install the package manager, and then run `brew install node` to have it install node.
 
 The important part after installing is being able to use them in your terminal. Open a terminal command-line and type `node -v` and `npm -v` to confirm they are installed.
 

From 30c533bb4640a9b871b972531313b35c11ae1747 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 23 Jun 2020 13:51:04 -0700
Subject: [PATCH 22/25] Add headings for plugin sections, and two paths

---
 .../tutorials/create-block/wp-plugin.md       | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
index 271f6747c7649..cafd1276b1b1a 100644
--- a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
+++ b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
@@ -6,12 +6,22 @@ A new block in the WordPress block editor is added by creating a WordPress plugi
 
 A WordPress plugin is a set of files in a directory within the site's `wp-content/plugins` directory. For this example, we will use the `create-block` package to generate the necessary plugin files.
 
-If you do not plan to use `wp-env` change to your local WordPress plugin directory; if you do plan to use `wp-env` start from any directory for your project.
+### Switch to Working Directory
 
-Run the following command to generate plugin files:
+(1A) If you do not plan to use `wp-env` change to your local WordPress plugin directory. For example in Local it is: `~\Local Sites\mywp\wp-content\plugins`
+
+-or-
+
+(1B) If you do use `wp-env` start, you can start from any directory for your project. `wp-env` will use it as a plugin directory for your site.
+
+### Generate Plugin Files
+
+(2) Once in the right directory for your enviornment, the next step is to
+Regardless of environment, run the Run the following command to generate plugin files:
 
 ```
 npx @wordpress/create-block gutenpride
+cd gutenpride
 ```
 
 All of the plugin files we develop will be in this `gutenpride` directory.
@@ -32,15 +42,23 @@ The script created a PHP file `gutenpride.php` that is the main plugin file. At
  */
 ```
 
-The generated plugin should now be listed on the Plugins admin page in your WordPress install. If you are using `wp-env`, see [Development Enviornment setup](devenv.md), then you should now run:
+### Start WordPress
+
+(3A) If you are using Local, or other environment confirm it is started and running.
+
+-or-
+
+(3B) If you are using `wp-env`, see [Development Environment setup](devenv.md), then you should now run from inside the `gutenpride` directory:
 
 ```
 wp-env start
 ```
 
-This will start your local WordPress site and use the current directory as your plugin, go to https://localhost:8888/wp-admin/ to confirm.
+This will start your local WordPress site and use the current directory as your plugin directory. In your browser, go to https://localhost:8888/wp-admin/ and login, the default username is "admin" and password is "password", no quotes.
+
+### Confirm Plugin Installed
 
-To login, the default username is "admin" and password is "password", no quotes.
+The generated plugin should now be listed on the Plugins admin page in your WordPress install. Switch WorPress to the plugins page and activate.
 
 For more on creating a WordPress plugin see [Plugin Basics](https://developer.wordpress.org/plugins/plugin-basics/), and [Plugin Header requirements](https://developer.wordpress.org/plugins/plugin-basics/header-requirements/) for explanation and additional fields you can include in your plugin
 header.

From 975207f38ef511c3c3a5370d1331fcbffa144249 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 24 Jun 2020 08:12:30 -0700
Subject: [PATCH 23/25] Switch recommended install to nvm for Mac/Linux

---
 .../tutorials/create-block/devenv.md          | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index c3703ec6706cc..f17338f39ff8f 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -12,9 +12,25 @@ The tools needed for development are **Node** and **NPM**. **Nodejs** is a runti
 
 The tools are used to convert the JavaScript we are going to write into a format that browsers can run. This is called transpiling or the build step.
 
-You can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, the LTS (long term support) version is recommeneded. Installers are available for Windows and Mac, and binaries available for Linux. See Node.js site for additional installation methods.
+For Mac and Linux, it is recommended to use the [Node Version Manager](https://github.com/nvm-sh/nvm) (nvm). Using `nvm` to install node allows installing specific versions, plus installs locally in your home directory and avoids any global permission issues.
 
-On Mac, it is recommended to use the [Homebrew package manager](https://brew.sh/) to install node and not the installer above. Homebrew sets up user level permissions properly, whereas the default Node installer sets it up at the system-level causing permission issues later. Follow the directions on Homebrew to install the package manager, and then run `brew install node` to have it install node.
+For Windows, or alternative installs, you can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, the long term support (LTS) version is recommeneded. Installers are available for Windows and Mac, and binaries available for Linux. See Node.js site for additional installation methods.
+
+Here are the quick instructions to install using nvm, see the [full installation instructions](https://github.com/nvm-sh/nvm#installing-and-updating) for additional details.
+
+A tip for macOS Catalina, the default profile file may not be created, you can create the required file typing `touch ~/.zshrc` on the command-line. It is fine to run if the file already exists. Note, `~/` is a shortcut to your home directory.
+
+Run the following on the command-line to install nvm:
+
+```
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
+```
+
+After installing nvm, you need to use it to install node, to install the latest version of node, run:
+
+```
+nvm install --lts
+```
 
 The important part after installing is being able to use them in your terminal. Open a terminal command-line and type `node -v` and `npm -v` to confirm they are installed.
 
@@ -26,7 +42,7 @@ v12.18.0
 6.14.4
 ```
 
-The minimum version for node is >= 10.x and for npm >= 6.9x, using the current LTS version will always be supported.
+Your versions may not match exactly, that is fine. The minimum version for node is >= 10.x and for npm >= 6.9x, using the current LTS version will always be supported.
 
 ## WordPress Development Site
 

From 421d33008fda548255d49b49bdd0c47ebe84e969 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 24 Jun 2020 15:57:06 -0700
Subject: [PATCH 24/25] Add docs to TOC, nav links

---
 .../create-block/author-experience.md         | 61 +++++++++++--------
 .../tutorials/create-block/block-anatomy.md   | 27 ++++----
 .../create-block/block-attributes.md          | 34 +++++------
 .../tutorials/create-block/block-code.md      | 13 ++--
 .../tutorials/create-block/devenv.md          |  2 +
 .../tutorials/create-block/esnext-js.md       | 59 +++++++++---------
 .../tutorials/create-block/readme.md          |  1 -
 .../tutorials/create-block/wp-plugin.md       |  2 +
 docs/manifest.json                            | 54 ++++++++++++++++
 docs/toc.json                                 | 10 +++
 10 files changed, 165 insertions(+), 98 deletions(-)

diff --git a/docs/designers-developers/developers/tutorials/create-block/author-experience.md b/docs/designers-developers/developers/tutorials/create-block/author-experience.md
index 90ca9296c8b0e..cab6324ff3e95 100644
--- a/docs/designers-developers/developers/tutorials/create-block/author-experience.md
+++ b/docs/designers-developers/developers/tutorials/create-block/author-experience.md
@@ -1,4 +1,3 @@
-
 # Authoring Experience
 
 ## Background
@@ -16,8 +15,8 @@ import { Placeholder, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function Edit( { attributes, className, setAttributes } ) {
-		return (
-				<div className={ className }>
+	return (
+		<div className={ className }>
 			<Placeholder
 				label="Gutenpride Block"
 				instructions="Add your message"
@@ -27,8 +26,8 @@ export default function Edit( { attributes, className, setAttributes } ) {
 					onChange={ ( val ) => setAttributes( { message: val } ) }
 				/>
 			</Placeholder>
-				</div>
-		);
+		</div>
+	);
 }
 ```
 
@@ -39,7 +38,7 @@ The placeholder looks ok, for a simple text message it may or may not be what yo
 For this we can use a ternary function, to display content based on a value being set or not. A ternary function is an inline if-else statement, using the syntax:
 
 ```js
-	( clause ) ? ( doIfTrue ) : ( doIfFalse )
+clause ? doIfTrue : doIfFalse;
 ```
 
 This can be used inside a block to control what shows when a parameter is set or not. A simple case that displays a `message` if set, otherwise show the form element:
@@ -67,7 +66,7 @@ The `isSelected` parameter is passed in to the `edit` function and is set to tru
 Using that parameter, we can use the logic:
 
 ```js
-attributes.message && ! isSelected
+attributes.message && ! isSelected;
 ```
 
 If the message is set and `!isSelected`, meaning we are not editing the block, the focus is elsewhere, then display the message not the text field.
@@ -78,25 +77,31 @@ All so this combined together here's what the edit function looks like this:
 import { Placeholder, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function Edit( { attributes, className, isSelected, setAttributes } ) {
-		return (
-			<div className={ className }>
-				{ attributes.message && !isSelected ?
-					<div>
-						{ attributes.message }
-					</div> :
-					<Placeholder
-						label="Gutenpride Block"
-						instructions="Add your message"
-					>
-						<TextControl
-							value={ attributes.message }
-							onChange={ ( val ) => setAttributes( { message: val } ) }
-						/>
-					</Placeholder>
-				}
-			</div>
-		);
+export default function Edit( {
+	attributes,
+	className,
+	isSelected,
+	setAttributes,
+} ) {
+	return (
+		<div className={ className }>
+			{ attributes.message && ! isSelected ? (
+				<div>{ attributes.message }</div>
+			) : (
+				<Placeholder
+					label="Gutenpride Block"
+					instructions="Add your message"
+				>
+					<TextControl
+						value={ attributes.message }
+						onChange={ ( val ) =>
+							setAttributes( { message: val } )
+						}
+					/>
+				</Placeholder>
+			) }
+		</div>
+	);
 }
 ```
 
@@ -111,7 +116,7 @@ The simpler and better solution is to modify the `editor.css` to include the pro
 Update `editor.css` to:
 
 ```css
-.wp-block-create-block-gutenpride input[type="text"] {
+.wp-block-create-block-gutenpride input[type='text'] {
 	font-family: Gilbert;
 	font-size: 64px;
 }
@@ -132,3 +137,5 @@ export default function Edit( { attributes, className, setAttributes } ) {
 	);
 }
 ```
+
+Next Section: [Finishing Touches](finishing.md)
diff --git a/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md b/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md
index 74e56673cabf3..1ce0a2b22a51e 100644
--- a/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md
+++ b/docs/designers-developers/developers/tutorials/create-block/block-anatomy.md
@@ -1,4 +1,3 @@
-
 # Anatomy of a Gutenberg Block
 
 At its simplest, a block in Gutenberg is a JavaScript object with a specific set of properties. Here is the complete code for registering a block:
@@ -14,19 +13,15 @@ registerBlockType( 'create-block/gutenpride', {
 	supports: {
 		// Removes support for an HTML mode.
 		html: false,
-    },
-
-    edit: ( ) => {
-        return (
-            <div> Hello in Editor. </div>
-        );
-    },
-
-    save: ( ) => {
-        return (
-            <div> Hello in Save.</div>
-        );
-    },
+	},
+
+	edit: () => {
+		return <div> Hello in Editor. </div>;
+	},
+
+	save: () => {
+		return <div> Hello in Save.</div>;
+	},
 } );
 ```
 
@@ -51,7 +46,9 @@ The results of the save function is what the editor will insert into the **post_
 If you look at the generated `src/index.js` file, the block title and description are wrapped in a function that looks like this:
 
 ```js
-__('Gutenpride', 'create_block')
+__( 'Gutenpride', 'create_block' );
 ```
 
 This is an internationalization wrapper that allows for the string "Gutenpride" to be translated. The second parameter, "create_block" is called the text domain and gives context for where the string is from. The JavaScript internationalization, often abbreviated i18n, matches the core WordPress internationalization process. See the [I18n for WordPress documentation](https://codex.wordpress.org/I18n_for_WordPress_Developers) for more details.
+
+Next Section: [Block Attributes](block-attributes.md)
diff --git a/docs/designers-developers/developers/tutorials/create-block/block-attributes.md b/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
index bee95dc2a73a7..267db3120f3af 100644
--- a/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
+++ b/docs/designers-developers/developers/tutorials/create-block/block-attributes.md
@@ -1,4 +1,3 @@
-
 # Block Attributes
 
 Attributes are the way a block stores data, they define how a block is parsed to extract data from the saved content.
@@ -15,7 +14,7 @@ attributes: {
 },
 ```
 
-Add this to the `index.js` file within the `registerBlockType` function. The  `attributes` are at the same level as the title and description fields.
+Add this to the `index.js` file within the `registerBlockType` function. The `attributes` are at the same level as the title and description fields.
 
 When the block loads it will: look at the saved content for the block, look for the div tag, take the text portion, and store the content in an `attributes.message` variable.
 
@@ -23,13 +22,13 @@ Note: The text portion is equivalent to `innerText` attribute of a DOM element.
 
 ## Edit and Save
 
-The **attributes** are passed to the `edit` and `save` functions, along with a  **setAttributes** function to set the values. Additional parameters are also passed in to this functions, see [the edit/save documentation](/docs/designers-developers/developers/block-api/block-edit-save.md) for more details.
+The **attributes** are passed to the `edit` and `save` functions, along with a **setAttributes** function to set the values. Additional parameters are also passed in to this functions, see [the edit/save documentation](/docs/designers-developers/developers/block-api/block-edit-save.md) for more details.
 
 The `attributes` is a JavaScript object containing the values of each attribute, or default values if defined. The `setAttributes` is a function to update an attribute.
 
 ```js
 export default function Edit( { attributes, setAttributes } ) {
-    // ...
+	// ...
 }
 ```
 
@@ -50,29 +49,26 @@ import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function Edit( { attributes, className, setAttributes } ) {
-    return (
-        <div className={ className }>
-            <TextControl
-                label={ __( "Message", "create-block" ) }
-                value={ attributes.message }
-                onChange={ ( val ) => setAttributes( { message: val } ) }
-            />
-        </div>
-    );
+	return (
+		<div className={ className }>
+			<TextControl
+				label={ __( 'Message', 'create-block' ) }
+				value={ attributes.message }
+				onChange={ ( val ) => setAttributes( { message: val } ) }
+			/>
+		</div>
+	);
 }
 ```
 
-
 **save.js**
 
 ```jsx
 export default function Save( { attributes, className } ) {
-	return (
-		<div className={ className }>
-			{ attributes.message }
-		</div>
-	);
+	return <div className={ className }>{ attributes.message }</div>;
 }
 ```
 
 Rebuild the block using `npm run build`, reload the editor and add the block. Type a message in the editor, save, and view it in the post.
+
+Next Section: [Code Implementation](block-code.md)
diff --git a/docs/designers-developers/developers/tutorials/create-block/block-code.md b/docs/designers-developers/developers/tutorials/create-block/block-code.md
index c78368b545438..df6d3f9c800b0 100644
--- a/docs/designers-developers/developers/tutorials/create-block/block-code.md
+++ b/docs/designers-developers/developers/tutorials/create-block/block-code.md
@@ -1,4 +1,3 @@
-
 # Code Implementation
 
 The basic block is in place, the next step is to add styles to the block. Feel free to style and adjust for your own preference, the main lesson is showing how to create and load external resources. For this example I'm going to load the colorized gilbert font from [Type with Pride](https://www.typewithpride.com/).
@@ -18,6 +17,7 @@ register_block_type( 'create-block/gutenpride', array(
     'style'         => 'create-block-gutenpride-block',
 ) );
 ```
+
 The `editor_style` and `style` parameters refer to the files that match the handles in the `wp_register_style` functions.
 
 Note: the `editor_style` loads only within the editor, and after the `style`. The `style` CSS loads in both the editor and front-end — published post view.
@@ -26,13 +26,13 @@ Note: the `editor_style` loads only within the editor, and after the `style`. Th
 
 We only need to add the style to `style.css` since it will show while editing and viewing the post. Edit the style.css to add the following.
 
- Note: the block classname is prefixed with `wp-block`. The `create-block/gutenpride` is converted to the classname `.wp-block-create-block-gutenpride`.
+Note: the block classname is prefixed with `wp-block`. The `create-block/gutenpride` is converted to the classname `.wp-block-create-block-gutenpride`.
 
 ```css
 @font-face {
-    font-family: Gilbert;
-    src: url(gilbert-color.otf);
-    font-weight: bold;
+	font-family: Gilbert;
+	src: url( gilbert-color.otf );
+	font-weight: bold;
 }
 
 .wp-block-create-block-gutenpride {
@@ -52,7 +52,7 @@ To use Sass, you need to import a `editor.scss` or `style.scss` in the `index.js
 Add the following imports to **index.js**:
 
 ```js
-import "../editor.scss";
+import '../editor.scss';
 
 import Edit from './edit';
 import save from './save';
@@ -64,3 +64,4 @@ Update **gutenpride.php** to enqueue from generated file location:
 $editor_css = "build/index.css";
 ```
 
+Next Section: [Authoring Experience](author-experience.md)
diff --git a/docs/designers-developers/developers/tutorials/create-block/devenv.md b/docs/designers-developers/developers/tutorials/create-block/devenv.md
index f17338f39ff8f..a648edcceae12 100644
--- a/docs/designers-developers/developers/tutorials/create-block/devenv.md
+++ b/docs/designers-developers/developers/tutorials/create-block/devenv.md
@@ -87,3 +87,5 @@ The important part is having a WordPress site installed, and know where and how
 Alternative editors include [Sublime Text](https://www.sublimetext.com/) that is also available across platforms, though is a commercial product; or other free alternatives include [Vim](https://www.vim.org/), [Atom](https://atom.io/), and [Notepad++](https://notepad-plus-plus.org/) all support standard JavaScript style development.
 
 You can use any editor you're comfortable with, it is more a personal preference. The development setup for WordPress block editor is a common JavaScript environment and most editors have plugins and suppport. The key is having a way to open, edit, and save text files.
+
+Next Section: [WordPress Plugin](wp-plugin.md)
diff --git a/docs/designers-developers/developers/tutorials/create-block/esnext-js.md b/docs/designers-developers/developers/tutorials/create-block/esnext-js.md
index 67fb547806043..e5661cd4d97d9 100644
--- a/docs/designers-developers/developers/tutorials/create-block/esnext-js.md
+++ b/docs/designers-developers/developers/tutorials/create-block/esnext-js.md
@@ -1,4 +1,3 @@
-
 # ESNext Syntax
 
 A brief aside to discuss JavaScript.
@@ -24,13 +23,17 @@ Arrow functions provide a shorter syntax for defining a function; this is such a
 Before you might define a function like:
 
 ```js
-const f = function( param ) { console.log( param ); }
+const f = function ( param ) {
+	console.log( param );
+};
 ```
 
 Using arrow function, you can define the same using:
 
 ```js
-const g = ( param ) => { console.log( param ); }
+const g = ( param ) => {
+	console.log( param );
+};
 ```
 
 Or even shorter, if the function is only a single-line you can omit the
@@ -46,18 +49,14 @@ For example, our save function could be shortened from:
 
 ```js
 save: ( { attributes } ) => {
-    return (
-        <div className="theurl">{ attributes.url }</div>
-    );
-}
+	return <div className="theurl">{ attributes.url }</div>;
+};
 ```
 
 To:
 
 ```js
-save: ( { attributes } ) => (
-    <div className="theurl">{ attributes.url }</div>
-);
+save: ( { attributes } ) => <div className="theurl">{ attributes.url }</div>;
 ```
 
 There are even more ways to shorten code, but you don't want to take it too far and make it harder to read what is going on.
@@ -96,23 +95,21 @@ To import, you would use:
 import edit from './edit';
 
 registerBlockType( 'mkaz/qrcode-block', {
-    title: 'QRCode Block',
-    icon: 'visibility',
-    category: 'widgets',
-    attributes: {
-        url: {
-            type: 'string',
-            source: 'text',
-            selector: '.theurl',
-        },
-    },
-    edit,
-    save: ( { attributes } ) => {
-        return (
-            <div> ... </div>
-        );
-    }
-});
+	title: 'QRCode Block',
+	icon: 'visibility',
+	category: 'widgets',
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'text',
+			selector: '.theurl',
+		},
+	},
+	edit,
+	save: ( { attributes } ) => {
+		return <div> ... </div>;
+	},
+} );
 ```
 
 Note, you can also shorten `edit: edit` to just `edit` as shown above. JavaScript will automatically assign the property `edit` to the value of `edit`. This is another form of destructuring.
@@ -123,6 +120,8 @@ It helps to become familiar with the ESNext syntax and the common shorter forms.
 
 Here are a few more resources that may help
 
-- [ES5 vs ES6 with example code](https://medium.com/recraftrelic/es5-vs-es6-with-example-code-9901fa0136fc)
-- [Top 10 ES6 Features by Example](https://blog.pragmatists.com/top-10-es6-features-by-example-80ac878794bb)
-- [ES6 Syntax and Feature Overview](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
+-   [ES5 vs ES6 with example code](https://medium.com/recraftrelic/es5-vs-es6-with-example-code-9901fa0136fc)
+-   [Top 10 ES6 Features by Example](https://blog.pragmatists.com/top-10-es6-features-by-example-80ac878794bb)
+-   [ES6 Syntax and Feature Overview](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
+
+Next Section: [Anatomy of a Gutenberg Block](block-anatomy.md)
diff --git a/docs/designers-developers/developers/tutorials/create-block/readme.md b/docs/designers-developers/developers/tutorials/create-block/readme.md
index 79adc666ba3b0..17713b641044a 100644
--- a/docs/designers-developers/developers/tutorials/create-block/readme.md
+++ b/docs/designers-developers/developers/tutorials/create-block/readme.md
@@ -1,4 +1,3 @@
-
 # Create Block Tutorial
 
 The goal of this tutorial is to get you started creating your first block for the WordPress Block Editor. We will create a simple block that allows the user to type a message and styles it.
diff --git a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
index cafd1276b1b1a..39e589a7d9f0c 100644
--- a/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
+++ b/docs/designers-developers/developers/tutorials/create-block/wp-plugin.md
@@ -155,3 +155,5 @@ For more info, see the build section of the [Getting Started with JavaScript tut
 ## Summary
 
 Hopefully, at this point, you have your plugin created and activated. We have the package.json with the `@wordpress/scripts` dependency, that defines the build and start scripts. The basic block is in place and can be added to the editor.
+
+Next Section: [ESNext Syntax](esnext-js.md)
diff --git a/docs/manifest.json b/docs/manifest.json
index 228c06c262e96..c58bd2d552d22 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -473,6 +473,60 @@
 		"markdown_source": "../docs/designers-developers/developers/tutorials/javascript/js-build-setup.md",
 		"parent": "javascript"
 	},
+	{
+		"title": "Create Block Tutorial",
+		"slug": "create-block",
+		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/readme.md",
+		"parent": "tutorials"
+	},
+	{
+		"title": "Development Environment",
+		"slug": "devenv",
+		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/devenv.md",
+		"parent": "create-block"
+	},
+	{
+		"title": "WordPress Plugin",
+		"slug": "wp-plugin",
+		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/wp-plugin.md",
+		"parent": "create-block"
+	},
+	{
+		"title": "ESNext Syntax",
+		"slug": "esnext-js",
+		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/esnext-js.md",
+		"parent": "create-block"
+	},
+	{
+		"title": "Anatomy of a Gutenberg Block",
+		"slug": "block-anatomy",
+		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/block-anatomy.md",
+		"parent": "create-block"
+	},
+	{
+		"title": "Block Attributes",
+		"slug": "block-attributes",
+		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/block-attributes.md",
+		"parent": "create-block"
+	},
+	{
+		"title": "Code Implementation",
+		"slug": "block-code",
+		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/block-code.md",
+		"parent": "create-block"
+	},
+	{
+		"title": "Authoring Experience",
+		"slug": "author-experience",
+		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/author-experience.md",
+		"parent": "create-block"
+	},
+	{
+		"title": "Finishing Touches",
+		"slug": "finishing",
+		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/finishing.md",
+		"parent": "create-block"
+	},
 	{
 		"title": "Blocks",
 		"slug": "block-tutorial",
diff --git a/docs/toc.json b/docs/toc.json
index cc4435707fcf8..d8f525c45cfe2 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -94,6 +94,16 @@
 			{ "docs/designers-developers/developers/tutorials/javascript/scope-your-code.md": [] },
 			{ "docs/designers-developers/developers/tutorials/javascript/js-build-setup.md": [] }
 		] },
+		{ "docs/designers-developers/developers/tutorials/create-block/readme.md": [
+			{ "docs/designers-developers/developers/tutorials/create-block/devenv.md": [] },
+			{ "docs/designers-developers/developers/tutorials/create-block/wp-plugin.md": [] },
+			{ "docs/designers-developers/developers/tutorials/create-block/esnext-js.md": [] },
+			{ "docs/designers-developers/developers/tutorials/create-block/block-anatomy.md": [] },
+			{ "docs/designers-developers/developers/tutorials/create-block/block-attributes.md": [] },
+			{ "docs/designers-developers/developers/tutorials/create-block/block-code.md": [] },
+			{ "docs/designers-developers/developers/tutorials/create-block/author-experience.md": [] },
+			{ "docs/designers-developers/developers/tutorials/create-block/finishing.md": [] }
+		] },
 		{ "docs/designers-developers/developers/tutorials/block-tutorial/readme.md": [
 			{ "docs/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type.md": [] },
 			{ "docs/designers-developers/developers/tutorials/block-tutorial/applying-styles-with-stylesheets.md": [] },

From 6273e11c2134d7f0f6f3281583c055ec7297f93a Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 25 Jun 2020 10:16:55 -0700
Subject: [PATCH 25/25] Delist tutorial, so we can merge and iterate

---
 docs/manifest.json | 54 ----------------------------------------------
 docs/toc.json      | 10 ---------
 2 files changed, 64 deletions(-)

diff --git a/docs/manifest.json b/docs/manifest.json
index c58bd2d552d22..228c06c262e96 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -473,60 +473,6 @@
 		"markdown_source": "../docs/designers-developers/developers/tutorials/javascript/js-build-setup.md",
 		"parent": "javascript"
 	},
-	{
-		"title": "Create Block Tutorial",
-		"slug": "create-block",
-		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/readme.md",
-		"parent": "tutorials"
-	},
-	{
-		"title": "Development Environment",
-		"slug": "devenv",
-		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/devenv.md",
-		"parent": "create-block"
-	},
-	{
-		"title": "WordPress Plugin",
-		"slug": "wp-plugin",
-		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/wp-plugin.md",
-		"parent": "create-block"
-	},
-	{
-		"title": "ESNext Syntax",
-		"slug": "esnext-js",
-		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/esnext-js.md",
-		"parent": "create-block"
-	},
-	{
-		"title": "Anatomy of a Gutenberg Block",
-		"slug": "block-anatomy",
-		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/block-anatomy.md",
-		"parent": "create-block"
-	},
-	{
-		"title": "Block Attributes",
-		"slug": "block-attributes",
-		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/block-attributes.md",
-		"parent": "create-block"
-	},
-	{
-		"title": "Code Implementation",
-		"slug": "block-code",
-		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/block-code.md",
-		"parent": "create-block"
-	},
-	{
-		"title": "Authoring Experience",
-		"slug": "author-experience",
-		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/author-experience.md",
-		"parent": "create-block"
-	},
-	{
-		"title": "Finishing Touches",
-		"slug": "finishing",
-		"markdown_source": "../docs/designers-developers/developers/tutorials/create-block/finishing.md",
-		"parent": "create-block"
-	},
 	{
 		"title": "Blocks",
 		"slug": "block-tutorial",
diff --git a/docs/toc.json b/docs/toc.json
index d8f525c45cfe2..cc4435707fcf8 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -94,16 +94,6 @@
 			{ "docs/designers-developers/developers/tutorials/javascript/scope-your-code.md": [] },
 			{ "docs/designers-developers/developers/tutorials/javascript/js-build-setup.md": [] }
 		] },
-		{ "docs/designers-developers/developers/tutorials/create-block/readme.md": [
-			{ "docs/designers-developers/developers/tutorials/create-block/devenv.md": [] },
-			{ "docs/designers-developers/developers/tutorials/create-block/wp-plugin.md": [] },
-			{ "docs/designers-developers/developers/tutorials/create-block/esnext-js.md": [] },
-			{ "docs/designers-developers/developers/tutorials/create-block/block-anatomy.md": [] },
-			{ "docs/designers-developers/developers/tutorials/create-block/block-attributes.md": [] },
-			{ "docs/designers-developers/developers/tutorials/create-block/block-code.md": [] },
-			{ "docs/designers-developers/developers/tutorials/create-block/author-experience.md": [] },
-			{ "docs/designers-developers/developers/tutorials/create-block/finishing.md": [] }
-		] },
 		{ "docs/designers-developers/developers/tutorials/block-tutorial/readme.md": [
 			{ "docs/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type.md": [] },
 			{ "docs/designers-developers/developers/tutorials/block-tutorial/applying-styles-with-stylesheets.md": [] },