Docs: Move ESNext to JavaScript tutorial

docs/designers-developers/developers/tutorials/create-block/block-anatomy.md

@@ -1,6 +1,10 @@
-# Anatomy of a Gutenberg Block
+# Anatomy of a 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:
+At its simplest, a block in Gutenberg is a JavaScript object with a specific set of properties.
+
+**Note:** Block development uses ESNext syntax, this refers to the latest JavaScript standard. If this is unfamiliar, I recommend reviewing the [ESNext synatx documentation](/docs/designers-developers/developers/tutorials/javascript/esnext-js.md) to familiarize yourself with the newer syntax used in modern JavaScript development.
+
+Here is the complete code for registering a block:
 
 ```js
 import { registerBlockType } from '@wordpress/blocks';

docs/designers-developers/developers/tutorials/create-block/readme.md

@@ -24,9 +24,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. [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)
+3. [Anatomy of a Gutenberg Block](block-anatomy.md)
+4. [Block Attributes](block-attributes.md)
+5. [Code Implementation](block-code.md)
+6. [Authoring Experience](author-experience.md)
+7. [Finishing Touches](finishing.md)

docs/designers-developers/developers/tutorials/create-block/wp-plugin.md

@@ -156,4 +156,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.
 
-Next Section: [ESNext Syntax](esnext-js.md)
+Next Section: [Anatomy of a Block](block-anatomy.md)

docs/designers-developers/developers/tutorials/create-block/esnext-js.md → docs/designers-developers/developers/tutorials/javascript/esnext-js.md

@@ -1,11 +1,9 @@
 # ESNext 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.
 
+Here are some common ESNext syntax patterns used throughout the Gutenberg project.
+
 ## 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.
@@ -123,5 +121,3 @@ 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/)
-
-Next Section: [Anatomy of a Gutenberg Block](block-anatomy.md)

docs/designers-developers/developers/tutorials/javascript/readme.md

@@ -8,7 +8,6 @@ JavaScript is a programming language which is loaded and executed in your web br
 
 The block editor introduced in WordPress 5.0 is written in JavaScript, with the code run in the browser, and not on the server, this allows for a richer and more dynamic user experience. It also requires you to learn how to use JavaScript to extend and enhance the block editor.
 
-
 ### Table of Contents
 
 1. [Plugins Background](/docs/designers-developers/developers/tutorials/javascript/plugins-background.md)
@@ -18,4 +17,4 @@ The block editor introduced in WordPress 5.0 is written in JavaScript, with the
 5. [JavaScript Versions and Building](/docs/designers-developers/developers/tutorials/javascript/versions-and-building.md)
 6. [Scope your code](/docs/designers-developers/developers/tutorials/javascript/scope-your-code.md)
 7. [JavaScript Build Step](/docs/designers-developers/developers/tutorials/javascript/js-build-setup.md)
-
+8. [ESNext Syntax](/docs/designers-developers/developers/tutorials/javascript/esnext-js.md)

docs/designers-developers/developers/tutorials/javascript/versions-and-building.md

@@ -11,3 +11,5 @@ Additionally, the ESNext code examples in the handbook include [JSX syntax](http
 For simplicity, the JavaScript tutorial uses the ES5 definition, without JSX. This code can run straight in your browser and does not require an additional build step. In many cases, it is perfectly fine to follow the same approach for simple plugins or experimenting. As your codebase grows in complexity it might be a good idea to switch to ESNext. You will find the majority of code and documentation across the block editor uses ESNext.
 
 See the [JavaScript Build Setup documentation](/docs/designers-developers/developers/tutorials/javascript/js-build-setup.md) for setting up a development environment using ESNext syntax.
+
+See the [ESNext syntax documentation](/docs/designers-developers/developers/tutorials/javascript/esnext-js.md) for explanation and examples about common code differences between standard JavaScript and ESNext.

docs/manifest.json

@@ -503,6 +503,12 @@
 		"markdown_source": "../docs/designers-developers/developers/tutorials/javascript/js-build-setup.md",
 		"parent": "javascript"
 	},
+	{
+		"title": "ESNext Syntax",
+		"slug": "esnext-js",
+		"markdown_source": "../docs/designers-developers/developers/tutorials/javascript/esnext-js.md",
+		"parent": "javascript"
+	},
 	{
 		"title": "Blocks",
 		"slug": "block-tutorial",

docs/toc.json

@@ -98,7 +98,8 @@
 			{ "docs/designers-developers/developers/tutorials/javascript/troubleshooting.md": [] },
 			{ "docs/designers-developers/developers/tutorials/javascript/versions-and-building.md": [] },
 			{ "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/javascript/js-build-setup.md": [] },
+			{ "docs/designers-developers/developers/tutorials/javascript/esnext-js.md": [] }
 		] },
 		{ "docs/designers-developers/developers/tutorials/block-tutorial/readme.md": [
 			{ "docs/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type.md": [] },