offcanvas

blocks/offcanvas-menu/block.json

@@ -4,16 +4,16 @@
     "name": "srh/offcanvas-menu",
     "version": "0.1.0",
     "title": "Off Canvas Menu",
-    "category": "design",
+    "category": "srh-blocks",
     "icon": "menu",
     "description": "Add an off-canvas menu button to your navigation",
     "supports": {
         "html": false,
-        "multiple": true,
-        "anchor": true
+        "multiple": false
     },
     "textdomain": "srh",
     "editorScript": "file:./index.js",
     "viewScript": "file:./view.js",
-    "style": "file:./style.css"
+    "style": "file:./style.css",
+    "render": "file:./render.php"
 }

blocks/offcanvas-menu/index.js

@@ -1,22 +1,28 @@
-const { registerBlockType } = wp.blocks;
-const { createElement } = wp.element;
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
 
 registerBlockType('srh/offcanvas-menu', {
+    apiVersion: 3,
+    title: 'Off Canvas Menu',
+    icon: 'menu',
+    category: 'srh-blocks',
+    
     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')
-                )
-            )
+        const blockProps = useBlockProps({
+            className: 'wp-block-srh-offcanvas-menu'
+        });
+        
+        return (
+            <div { ...blockProps }>
+                <button className="hamburger-toggle is-editor" aria-label="Toggle Menu">
+                    <div className="hamburger-lines">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <span className="menu-text">Menu</span>
+                </button>
+            </div>
         );
     },
     

css/offcanvas-menu-editor.css

@@ -1,8 +1,32 @@
 .wp-block-srh-offcanvas-menu {
+    position: relative;
     display: flex;
     align-items: center;
-    padding: 10px;
-    border: 1px dashed #ccc;
+}
+
+.hamburger-toggle.is-editor {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.7;
+}
+
+.hamburger-toggle .hamburger-lines {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 24px;
+    width: 24px;
+}
+
+.hamburger-toggle .hamburger-lines span {
+    display: block;
+    height: 2px;
+    width: 100%;
+    background-color: currentColor;
+}
+
+.hamburger-toggle .menu-text {
+    margin-left: 8px;
 }
 
 .editor-styles-wrapper .hamburger-toggle {

functions.php

@@ -1,5 +1,29 @@
 <?php 
 
+/**
+ * Additional logging in WordPress 6.1+ that generates the following
+ * message regarding cron schedules:
+ *
+ * Cron reschedule event error for hook:
+ * action_scheduler_run_queue,
+ * Error code: invalid_schedule,
+ * Error message: Event schedule does not exist.,
+ * Data: {"schedule":"every_minute","args":,"interval":60}
+ *
+ * This function needs to fire prior to loading Action Scheduler as its a
+ * pre-requisite for it to schedule our tasks.
+ *
+ * This filter seeks to manually add the schedule to the list of schedules to
+ * address this bug.
+ */
+add_filter('cron_schedules', function ($schedules) {
+    $schedules = [
+        'interval' => 60,
+        'display'  => 'Every Minute',
+    ];
+    return $schedules;
+});
+
 /***********************************************************
 ############### REST API and Iframe Support ################
 ************************************************************/
@@ -255,33 +279,20 @@ 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', array(
-        'render_callback' => 'render_offcanvas_menu',
-        'editor_script' => 'offcanvas-menu-editor',
-        'editor_style'  => 'offcanvas-menu-editor',
-        'supports' => array(
-            'inserter' => true,
-            'multiple' => true,
-            'parent' => array('core/navigation')
-        )
-    ));
-
-    // Register editor assets
     wp_register_script(
-        'offcanvas-menu-editor',
-        get_stylesheet_directory_uri() . '/js/offcanvas-menu-editor.js',
-        array('wp-blocks', 'wp-element'),
-        '1.0.0'
+        'srh-offcanvas-menu-editor',
+        get_stylesheet_directory_uri() . '/blocks/offcanvas-menu/index.js',
+        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-i18n'),
+        filemtime(get_stylesheet_directory() . '/blocks/offcanvas-menu/index.js')
     );
 
-    wp_register_style(
-        'offcanvas-menu-editor',
-        get_stylesheet_directory_uri() . '/css/offcanvas-menu-editor.css',
-        array(),
-        '1.0.0'
-    );
+    register_block_type(get_stylesheet_directory() . '/blocks/offcanvas-menu', array(
+        'api_version' => 3,
+        'editor_script' => 'srh-offcanvas-menu-editor',
+        'render_callback' => 'render_offcanvas_menu'
+    ));
 }
-add_action('init', 'register_offcanvas_menu_block');
+add_action('init', 'register_offcanvas_menu_block', 5);
 
 // Frontend assets remain the same
 function enqueue_offcanvas_menu_assets() {
@@ -303,7 +314,7 @@ function enqueue_offcanvas_menu_assets() {
 add_action('wp_enqueue_scripts', 'enqueue_offcanvas_menu_assets');
 
 function render_offcanvas_menu($attributes, $content) {
-    $template_part = do_blocks('<!-- wp:template-part {"slug":"offcanvas-content","theme":"edit-srh"} /-->');
+    $pattern_content = do_blocks('<!-- wp:pattern {"slug":"srh/offcanvas-content"} /-->');
     
     return sprintf(
         '<div class="wp-block-srh-offcanvas-menu">
@@ -319,7 +330,7 @@ function render_offcanvas_menu($attributes, $content) {
                 <div class="offcanvas-menu-inner">%s</div>
             </div>
         </div>',
-        $template_part
+        $pattern_content
     );
 }