offcanvas

blocks/offcanvas-menu/block.json

@@ -1,14 +1,19 @@
 {
+    "$schema": "https://schemas.wp.org/trunk/block.json",
     "apiVersion": 2,
     "name": "srh/offcanvas-menu",
+    "version": "0.1.0",
     "title": "Off Canvas Menu",
-    "category": "srh-blocks",
+    "category": "design",
     "icon": "menu",
-    "description": "Adds a hamburger menu with off-canvas navigation",
+    "description": "Add an off-canvas menu button to your navigation",
     "supports": {
-        "html": false
+        "html": false,
+        "multiple": true
     },
+    "parent": ["core/navigation"],
     "textdomain": "srh",
     "editorScript": "file:./index.js",
-    "style": "file:../../css/offcanvas-menu.css"
+    "viewScript": "file:./view.js",
+    "style": "file:./style.css"
 }

blocks/offcanvas-menu/index.js

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

blocks/offcanvas-menu/view.js

@@ -0,0 +1,12 @@
+window.addEventListener('load', function() {
+    const toggles = document.querySelectorAll('.hamburger-toggle');
+    
+    toggles.forEach(toggle => {
+        toggle.addEventListener('click', function() {
+            this.classList.toggle('is-active');
+            this.closest('.wp-block-srh-offcanvas-menu')
+                .querySelector('.offcanvas-menu')
+                .classList.toggle('is-active');
+        });
+    });
+});

css/offcanvas-menu.css

@@ -18,7 +18,7 @@
     display: block;
     width: 100%;
     height: 2px;
-    background-color: #000;
+    background-color: #ffffff;
     transition: all 0.3s ease;
 }
 

functions.php

@@ -208,19 +208,14 @@ 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', [
-        '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']
-    );
+    register_block_type( __DIR__ . '/blocks/offcanvas-menu', array(
+        'render_callback' => 'render_offcanvas_menu',
+        'supports' => array(
+            'inserter' => true,
+            'multiple' => true,
+            'parent' => array('core/navigation')
+        )
+    ));
 }
 add_action('init', 'register_offcanvas_menu_block');
 

js/deny-list-blocks.js

@@ -15,7 +15,7 @@ wp.domReady(() => {
     ];
 
     // Log available blocks for debugging
-    console.log('Available blocks:', wp.blocks.getBlockTypes().map(block => block.name));
+    //console.log('Available blocks:', wp.blocks.getBlockTypes().map(block => block.name));
 
     // Remove specified core blocks
     removeBlocks.forEach(blockName => {
@@ -23,7 +23,7 @@ wp.domReady(() => {
             const block = wp.blocks.getBlockType(blockName);
             if (block) {
                 wp.blocks.unregisterBlockType(blockName);
-                console.log(`Successfully removed block: ${blockName}`);
+                //console.log(`Successfully removed block: ${blockName}`);
             }
         } catch (error) {
             console.warn(`Failed to remove block ${blockName}:`, error);