diff --git a/06-inner-blocks-esnext/.eslintrc b/06-inner-blocks-esnext/.eslintrc
new file mode 100644
index 00000000..371f02e3
--- /dev/null
+++ b/06-inner-blocks-esnext/.eslintrc
@@ -0,0 +1,3 @@
+{
+ "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ]
+}
diff --git a/06-inner-blocks-esnext/block.json b/06-inner-blocks-esnext/block.json
new file mode 100644
index 00000000..e6d1ece6
--- /dev/null
+++ b/06-inner-blocks-esnext/block.json
@@ -0,0 +1,10 @@
+{
+ "apiVersion": 2,
+ "name": "gutenberg-examples/example-06-esnext",
+ "title": "Example: Inner Blocks (ESNext)",
+ "category": "layout",
+ "icon": "universal-access-alt",
+ "textDomain": "gutenberg-examples",
+ "example": {},
+ "editorScript": "file:./build/index.js"
+}
diff --git a/06-inner-blocks-esnext/build/index.asset.php b/06-inner-blocks-esnext/build/index.asset.php
index a5b38c55..ce44093b 100644
--- a/06-inner-blocks-esnext/build/index.asset.php
+++ b/06-inner-blocks-esnext/build/index.asset.php
@@ -1 +1 @@
- array('wp-block-editor', 'wp-blocks', 'wp-element' ), 'version' => '3e3feaa0b42d475ad1dba41bcf282508');
+ array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-polyfill'), 'version' => 'd687a5ced712896069c1e68aba335eec');
\ No newline at end of file
diff --git a/06-inner-blocks-esnext/build/index.js b/06-inner-blocks-esnext/build/index.js
index ff9b929a..bd338b3e 100644
--- a/06-inner-blocks-esnext/build/index.js
+++ b/06-inner-blocks-esnext/build/index.js
@@ -1 +1 @@
-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.blockEditor}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n(2),c=n(1);Object(o.registerBlockType)("gutenberg-examples/example-06-esnext",{title:"Example: Inner Blocks (ESNext)",category:"layout",edit:function(e){var t=e.className;return Object(r.createElement)("div",{className:t},Object(r.createElement)(c.InnerBlocks,null))},save:function(e){var t=e.className;return Object(r.createElement)("div",{className:t},Object(r.createElement)(c.InnerBlocks.Content,null))}})}]);
\ No newline at end of file
+!function(){"use strict";!function(){var e=window.wp.blocks,n=JSON.parse('{"apiVersion":2,"name":"gutenberg-examples/example-06-esnext","title":"Example: Inner Blocks (ESNext)","category":"layout","icon":"universal-access-alt","textDomain":"gutenberg-examples","example":{},"editorScript":"file:./build/index.js"}'),t=window.wp.element,l=window.wp.blockEditor;const{name:o,...r}=n;(0,e.registerBlockType)(o,{...r,edit:()=>{const e=(0,l.useBlockProps)();return(0,t.createElement)("div",e,(0,t.createElement)(l.InnerBlocks,null))},save:()=>{const e=l.useBlockProps.save();return(0,t.createElement)("div",e,(0,t.createElement)(l.InnerBlocks.Content,null))}})}()}();
\ No newline at end of file
diff --git a/06-inner-blocks-esnext/index.php b/06-inner-blocks-esnext/index.php
index b8e57b8f..1f36665a 100644
--- a/06-inner-blocks-esnext/index.php
+++ b/06-inner-blocks-esnext/index.php
@@ -23,23 +23,7 @@ function gutenberg_examples_06_esnext_register_block() {
return;
}
- // automatically load dependencies and version
- $asset_file = include(plugin_dir_path(__FILE__) . 'build/index.asset.php');
-
- wp_register_script(
- 'gutenberg-examples-06-esnext',
- plugins_url( 'build/index.js', __FILE__ ),
- $asset_file['dependencies'],
- $asset_file['version'],
- true
- );
-
- register_block_type(
- 'gutenberg-examples/example-06-esnext',
- [
- 'editor_script' => 'gutenberg-examples-06-esnext',
- ]
- );
-
+ // Register the block by passing the location of block.json to register_block_type.
+ register_block_type( __DIR__ );
}
add_action( 'init', 'gutenberg_examples_06_esnext_register_block' );
diff --git a/06-inner-blocks-esnext/package.json b/06-inner-blocks-esnext/package.json
index 461b7e64..68505805 100644
--- a/06-inner-blocks-esnext/package.json
+++ b/06-inner-blocks-esnext/package.json
@@ -16,7 +16,7 @@
},
"main": "build/index.js",
"devDependencies": {
- "@wordpress/scripts": "^9.0.0"
+ "@wordpress/scripts": "^18.0.1"
},
"scripts": {
"build": "wp-scripts build",
diff --git a/06-inner-blocks-esnext/src/edit.js b/06-inner-blocks-esnext/src/edit.js
new file mode 100644
index 00000000..bb0cdb05
--- /dev/null
+++ b/06-inner-blocks-esnext/src/edit.js
@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const Edit = () => {
+ const blockProps = useBlockProps();
+ return (
+
+
+
+ );
+};
+export default Edit;
diff --git a/06-inner-blocks-esnext/src/index.js b/06-inner-blocks-esnext/src/index.js
index 03957b31..9548e10c 100644
--- a/06-inner-blocks-esnext/src/index.js
+++ b/06-inner-blocks-esnext/src/index.js
@@ -1,21 +1,19 @@
+/**
+ * WordPress dependencies
+ */
import { registerBlockType } from '@wordpress/blocks';
-import { InnerBlocks } from '@wordpress/block-editor';
-registerBlockType( 'gutenberg-examples/example-06-esnext', {
- title: 'Example: Inner Blocks (ESNext)',
- category: 'layout',
- edit: ( { className } ) => {
- return (
-
-
-
- );
- },
- save: ( { className } ) => {
- return (
-
-
-
- );
- },
+/**
+ * Internal dependencies
+ */
+import json from '../block.json';
+import edit from './edit';
+import save from './save';
+
+const { name, ...settings } = json;
+
+registerBlockType( name, {
+ ...settings,
+ edit,
+ save,
} );
diff --git a/06-inner-blocks-esnext/src/save.js b/06-inner-blocks-esnext/src/save.js
new file mode 100644
index 00000000..d28d31e4
--- /dev/null
+++ b/06-inner-blocks-esnext/src/save.js
@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const Save = () => {
+ const blockProps = useBlockProps.save();
+ return (
+
+
+
+ );
+};
+export default Save;