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
index 0ad9966b91a12..df78956ef6de5 100644
--- 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,6 +10,8 @@ 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;
@@ -56,6 +58,49 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten
 	});
 })( window.wp );
 ```
+{% ESNext %}
+```jsx
+const { registerBlockType } = wp.blocks;
+const TextField = wp.components.TextControl;
+
+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 }>
+				<TextField
+					label="Meta Block Field"
+					value={ attributes }
+					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: