offcanvas

.babelrc

@@ -1,8 +1,11 @@
 {
-    "presets": [
-        ["@babel/preset-env"],
-        ["@babel/preset-react", {
-            "pragma": "wp.element.createElement"
-        }]
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "pragma": "wp.element.createElement"
+      }
     ]
+  ]
 }

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
-assets/*
+assets/*
+node_modules

blocks/offcanvas-menu/build/index.build.js

@@ -0,0 +1 @@
+(()=>{var e=wp.blocks.registerBlockType,n=wp.blockEditor.useBlockProps;e("srh/offcanvas-menu",{apiVersion:2,title:"Off Canvas Menu",icon:"menu",category:"srh-blocks",attributes:{},edit:function(){var e=n();return wp.element.createElement("div",e,wp.element.createElement("button",{className:"hamburger-toggle","aria-label":"Toggle Menu"},wp.element.createElement("span",null),wp.element.createElement("span",null),wp.element.createElement("span",null)),wp.element.createElement("div",{className:"offcanvas-menu"},wp.element.createElement("div",{className:"offcanvas-menu-inner"},wp.element.createElement("p",null,"Menu will appear here on frontend"))))},save:function(){return null}})})();

blocks/offcanvas-menu/index.js

@@ -8,7 +8,7 @@ registerBlockType('srh/offcanvas-menu', {
     category: 'srh-blocks',
     attributes: {},
     
-    edit: function() {
+    edit: () => {
         const blockProps = useBlockProps();
         
         return (

functions.php

@@ -208,7 +208,19 @@ add_filter('block_categories_all', 'srh_block_categories', 10, 2);
 
 // Register the block
 function register_offcanvas_menu_block() {
-    register_block_type(__DIR__ . '/blocks/offcanvas-menu');
+    register_block_type(__DIR__ . '/blocks/offcanvas-menu', [
+        'editor_script' => 'offcanvas-menu-editor',
+        'editor_style'  => 'offcanvas-menu-editor-style',
+        'script'        => 'offcanvas-menu-frontend',
+        'style'         => 'offcanvas-menu-style',
+        'render_callback' => 'render_offcanvas_menu'
+    ]);
+
+    wp_register_script(
+        'offcanvas-menu-editor',
+        get_stylesheet_directory_uri() . '/blocks/offcanvas-menu/build/index.build.js',
+        ['wp-blocks', 'wp-element', 'wp-editor']
+    );
 }
 add_action('init', 'register_offcanvas_menu_block');
 

package.json

@@ -1,7 +1,20 @@
 {
+    "scripts": {
+        "build": "wp-scripts build",
+        "start": "wp-scripts start"
+    },
     "devDependencies": {
         "@babel/core": "^7.22.0",
         "@babel/preset-env": "^7.22.0",
-        "@babel/preset-react": "^7.22.0"
+        "@babel/preset-react": "^7.22.0",
+        "@wordpress/scripts": "^26.0.0",
+        "webpack": "^5.85.0",
+        "webpack-cli": "^5.1.1",
+        "babel-loader": "^9.1.2",
+        "@wordpress/babel-preset-default": "^7.22.0",
+        "@wordpress/block-editor": "^12.0.0",
+        "@wordpress/blocks": "^12.0.0",
+        "@wordpress/components": "^25.0.0",
+        "@wordpress/element": "^5.0.0"
     }
 }

webpack.config.js

@@ -0,0 +1,20 @@
+const path = require('path');
+
+module.exports = {
+    entry: './blocks/offcanvas-menu/index.js',
+    output: {
+        path: path.resolve(__dirname, 'blocks/offcanvas-menu/build'),
+        filename: 'index.build.js',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader'
+                }
+            }
+        ]
+    }
+};