Meta Box Tutorial: Default to ESNext (#22748)

Minor change switching order code toggle so ESNext is first. Per #22151 and #17873
WordPress · Jun 4, 2020 · 8efd443 · 8efd443
1 parent bee8d1a
commit 8efd443
Showing 1 changed file with 45 additions and 45 deletions.
diff --git a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md
@@ -9,6 +9,51 @@ The hook `useEntityProp` can be used by the blocks to get or change meta values.
 Add this code to your JavaScript file (this tutorial will call the file `myguten.js`):
 
 {% codetabs %}
+{% ESNext %}
+```js
+import { registerBlockType } from '@wordpress/blocks';
+import { TextControl } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
+
+registerBlockType( 'myguten/meta-block', {
+	title: 'Meta Block',
+	icon: 'smiley',
+	category: 'text',
+
+	edit( { className, setAttributes, attributes } ) {
+		const postType = useSelect(
+			( select ) => select( 'core/editor' ).getCurrentPostType(),
+			[]
+		);
+		const [ meta, setMeta ] = useEntityProp(
+			'postType',
+			postType,
+			'meta'
+		);
+		const metaFieldValue = meta['myguten_meta_block_field'];
+		function updateMetaValue( newValue ) {
+			setMeta( { ...meta, 'myguten_meta_block_field': newValue } );
+		}
+
+		return (
+			<div className={ className }>
+				<TextControl
+					label="Meta Block Field"
+					value={ metaFieldValue }
+					onChange={ updateMetaValue }
+				/>
+			</div>
+		);
+	},
+
+	// No information saved to the block
+	// Data is saved to post meta via the hook
+	save() {
+		return null;
+	},
+} );
+```
 {% ES5 %}
 ```js
 ( function( wp ) {
@@ -72,51 +117,6 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten
 	} );
 } )( window.wp );
 ```
-{% ESNext %}
-```js
-import { registerBlockType } from '@wordpress/blocks';
-import { TextControl } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useEntityProp } from '@wordpress/core-data';
-
-registerBlockType( 'myguten/meta-block', {
-	title: 'Meta Block',
-	icon: 'smiley',
-	category: 'text',
-
-	edit( { className, setAttributes, attributes } ) {
-		const postType = useSelect(
-			( select ) => select( 'core/editor' ).getCurrentPostType(),
-			[]
-		);
-		const [ meta, setMeta ] = useEntityProp(
-			'postType',
-			postType,
-			'meta'
-		);
-		const metaFieldValue = meta['myguten_meta_block_field'];
-		function updateMetaValue( newValue ) {
-			setMeta( { ...meta, 'myguten_meta_block_field': newValue } );
-		}
-
-		return (
-			<div className={ className }>
-				<TextControl
-					label="Meta Block Field"
-					value={ metaFieldValue }
-					onChange={ updateMetaValue }
-				/>
-			</div>
-		);
-	},
-
-	// No information saved to the block
-	// Data is saved to post meta via the hook
-	save() {
-		return null;
-	},
-} );
-```
 {% end %}
 
 **Important:** Before you test, you need to enqueue your JavaScript file and its dependencies. Note the WordPress packages used above are `wp.element`, `wp.blocks`, `wp.components`, `wp.data`, and `wp.coreData`. Each of these need to be included in the array of dependencies. Update the `myguten-meta-block.php` file adding the enqueue function: