Add ESNext syntax to meta block tutorial (#13954)

* Add ESNext syntax to meta block tutorial * Applied WordPress code styles to the examples * Apply suggestions from code review Co-Authored-By: mkaz <marcus@mkaz.com>
WordPress · Feb 20, 2019 · f81d0d7 · f81d0d7
1 parent d97251b
commit f81d0d7
Showing 1 changed file with 60 additions and 15 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
@@ -10,38 +10,40 @@ By specifying the source of the attributes as `meta`, the Block Editor automatic
 
 Add this code to your JavaScript file (this tutorial will call the file `myguten.js`):
 
+{% codetabs %}
+{% ES5 %}
 ```js
 ( function( wp ) {
 	var el = wp.element.createElement;
 	var registerBlockType = wp.blocks.registerBlockType;
-	var TextField = wp.components.TextControl;
+	var TextControl = wp.components.TextControl;
 
-	registerBlockType("myguten/meta-block", {
-		title: "Meta Block",
-		icon: "smiley",
-		category: "common",
+	registerBlockType( 'myguten/meta-block', {
+		title: 'Meta Block',
+		icon: 'smiley',
+		category: 'common',
 
 		attributes: {
 			blockValue: {
-				type: "string",
-				source: "meta",
-				meta: "myguten_meta_block_field"
+				type: 'string',
+				source: 'meta',
+				meta: 'myguten_meta_block_field'
 			}
 		},
 
-		edit: function(props) {
+		edit: function( props ) {
 			var className = props.className;
 			var setAttributes = props.setAttributes;
 
 			function updateBlockValue( blockValue ) {
 				setAttributes({ blockValue });
 			}
 
-		return el(
-				"div",
+			return el(
+				'div',
 				{ className: className },
-				el( TextField, {
-					label: "Meta Block Field",
+				el( TextControl, {
+					label: 'Meta Block Field',
 					value: props.attributes.blockValue,
 					onChange: updateBlockValue
 				} )
@@ -53,9 +55,52 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten
 		save: function() {
 			return null;
 		}
-	});
-})( window.wp );
+	} );
+} )( window.wp );
 ```
+{% ESNext %}
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+import { TextControl } from '@wordpress/components';
+
+registerBlockType( 'myguten/meta-block', {
+	title: 'Meta Block',
+	icon: 'smiley',
+	category: 'common',
+
+	attributes: {
+		blockValue: {
+			type: 'string',
+			source: 'meta',
+			meta: 'myguten_meta_block_field',
+		},
+	},
+
+	edit( { className, setAttributes, attributes } ) {
+
+		function updateBlockValue( blockValue ) {
+			setAttributes( { blockValue } );
+		}
+
+		return (
+			<div className={ className }>
+				<TextControl
+					label="Meta Block Field"
+					value={ attributes.blockValue }
+					onChange={ updateBlockValue }
+				/>
+			</div>
+		);
+	},
+
+	// No information saved to the block
+	// Data is saved to post meta via attributes
+	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`, and `wp.components`. Each of these need to be included in the array of dependencies. Update the `myguten-meta-block.php` file adding the enqueue function: