Move ESNext to default view (#22973)

WordPress · Jun 6, 2020 · cce4eb9 · cce4eb9
1 parent dbb8cdb
commit cce4eb9
Showing 1 changed file with 42 additions and 42 deletions.
diff --git a/...rs-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md b/...rs-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md
@@ -7,6 +7,31 @@ Note: A single block can only contain one `InnerBlock` component.
 Here is the basic InnerBlocks usage.
 
 {% codetabs %}
+{% ESNext %}
+```js
+import { registerBlockType } from '@wordpress/blocks';
+import { InnerBlocks } from '@wordpress/block-editor';
+
+registerBlockType( 'gutenberg-examples/example-06', {
+	// ...
+
+	edit: ( { className } ) => {
+		return (
+			<div className={ className }>
+				<InnerBlocks />
+			</div>
+		);
+	},
+
+	save: ( { className } ) => {
+		return (
+			<div className={ className }>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+} );
+```
 {% ES5 %}
 ```js
 ( function( blocks, element, blockEditor ) {
@@ -39,36 +64,11 @@ Here is the basic InnerBlocks usage.
 	window.wp.blockEditor,
 ) );
 ```
-{% ESNext %}
-```js
-import { registerBlockType } from '@wordpress/blocks';
-import { InnerBlocks } from '@wordpress/block-editor';
-
-registerBlockType( 'gutenberg-examples/example-06', {
-	// ...
-
-	edit: ( { className } ) => {
-		return (
-			<div className={ className }>
-				<InnerBlocks />
-			</div>
-		);
-	},
-
-	save: ( { className } ) => {
-		return (
-			<div className={ className }>
-				<InnerBlocks.Content />
-			</div>
-		);
-	},
-} );
-```
 {% end %}
 
 ## Allowed Blocks
 
-Using the `ALLOWED_BLOCKS` property, you can define the set of blocks allowed in your InnerBlock. This restricts the that can be included only to those listed, all other blocks will not show in the inserter. 
+Using the `ALLOWED_BLOCKS` property, you can define the set of blocks allowed in your InnerBlock. This restricts the that can be included only to those listed, all other blocks will not show in the inserter.
 
 ```js
 const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
@@ -84,7 +84,7 @@ const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
 Use the template property to define a set of blocks that prefill the InnerBlocks component when inserted. You can set attributes on the blocks to define their use. The example below shows a book review template using InnerBlocks component and setting placeholders values to show the block usage.
 
 {% codetabs %}
-{% ES5 %}
+{% ESNext %}
 ```js
 const MY_TEMPLATE = [
 	[ 'core/image', {} ],
@@ -94,17 +94,16 @@ const MY_TEMPLATE = [
 
 //...
 
-	edit: function( props ) {
-		return el(
-			InnerBlocks,
-			{
-				template: MY_TEMPLATE,
-				templateLock: "all",
-			}
+	edit: () => {
+		return (
+			<InnerBlocks
+				template={ MY_TEMPLATE }
+				templateLock="all"
+			/>
 		);
 	},
 ```
-{% ESNext %}
+{% ES5 %}
 ```js
 const MY_TEMPLATE = [
 	[ 'core/image', {} ],
@@ -114,12 +113,13 @@ const MY_TEMPLATE = [
 
 //...
 
-	edit: () => {
-		return (
-			<InnerBlocks
-				template={ MY_TEMPLATE }
-				templateLock="all"
-			/>
+	edit: function( props ) {
+		return el(
+			InnerBlocks,
+			{
+				template: MY_TEMPLATE,
+				templateLock: "all",
+			}
 		);
 	},
 ```
@@ -129,7 +129,7 @@ Use the `templateLock` property to lock down the template. Using `all` locks the
 
 ### Post Template
 
-Unrelated to `InnerBlocks` but worth mentioning here, you can create a [post template](https://developer.wordpress.org/block-editor/developers/block-api/block-templates/) by post type, that preloads the block editor with a set of blocks. 
+Unrelated to `InnerBlocks` but worth mentioning here, you can create a [post template](https://developer.wordpress.org/block-editor/developers/block-api/block-templates/) by post type, that preloads the block editor with a set of blocks.
 
 The `InnerBlocks` template is for the component in the single block that you created, the rest of the post can include any blocks the user likes. Using a post template, can lock the entire post to just the template you define.