browsersync

blocks/offcanvas-menu/block.json

@@ -9,9 +9,9 @@
     "description": "Add an off-canvas menu button to your navigation",
     "supports": {
         "html": false,
-        "multiple": true
+        "multiple": true,
+        "anchor": true
     },
-    "parent": ["core/navigation"],
     "textdomain": "srh",
     "editorScript": "file:./index.js",
     "viewScript": "file:./view.js",

browser-sync.js

@@ -0,0 +1,9 @@
+// Function to trigger offcanvas on reload
+(function() {
+    setTimeout(() => {
+        const offcanvasToggle = document.querySelector('[data-bs-target="#offcanvasRight"]');
+        if (offcanvasToggle) {
+            offcanvasToggle.click();
+        }
+    }, 500);
+})();

css/offcanvas-menu-editor.css

@@ -0,0 +1,33 @@
+.wp-block-srh-offcanvas-menu {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border: 1px dashed #ccc;
+}
+
+.editor-styles-wrapper .hamburger-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 5px;
+}
+
+.editor-styles-wrapper .hamburger-lines {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.editor-styles-wrapper .hamburger-lines span {
+    display: block;
+    width: 25px;
+    height: 3px;
+    background-color: currentColor;
+}
+
+.editor-styles-wrapper .menu-text {
+    font-size: 14px;
+}

css/offcanvas-menu.css

@@ -4,7 +4,7 @@
 
 .hamburger-toggle {
     position: fixed;
-    top: 30px;
+    top: 35px;
     right: 20px;
     display: flex;
     flex-direction: column;
@@ -76,17 +76,19 @@
 .offcanvas-menu {
     position: fixed;
     top: 0;
-    right: -300px;
-    width: 300px;
+    right: -100%; /* Changed from -300px to -100% */
+    width: 400px;
     height: 100vh;
     background-color: var(--wp--preset--color--accent-2, #19458c);
     transition: 0.3s ease;
     z-index: 9999;
     box-shadow: -2px 0 5px rgba(0,0,0,0.1);
+    visibility: hidden; /* Added to prevent flash */
 }
 
 .offcanvas-menu.active {
     right: 0;
+    visibility: visible;
 }
 
 .offcanvas-menu-inner {
@@ -104,13 +106,6 @@ body.menu-open {
 @media (max-width: 768px) {
     .offcanvas-menu {
         width: 100%;
+        right: -100%;
     }
-}
-
-@media (max-width: 768px) {
-    .offcanvas-menu {
-        width: 100%;
-    }
-}
-    }
-}
+}

functions.php

@@ -210,12 +210,29 @@ add_filter('block_categories_all', 'srh_block_categories', 10, 2);
 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'
+    );
+
+    wp_register_style(
+        'offcanvas-menu-editor',
+        get_stylesheet_directory_uri() . '/css/offcanvas-menu-editor.css',
+        array(),
+        '1.0.0'
+    );
 }
 add_action('init', 'register_offcanvas_menu_block');
 
@@ -239,24 +256,24 @@ function enqueue_offcanvas_menu_assets() {
 add_action('wp_enqueue_scripts', 'enqueue_offcanvas_menu_assets');
 
 function render_offcanvas_menu($attributes, $content) {
-    ob_start(); ?>
-    <div class="wp-block-srh-offcanvas-menu">
-        <button class="hamburger-toggle" aria-label="Toggle Menu">
-            <div class="hamburger-lines">
-                <span></span>
-                <span></span>
-                <span></span>
-            </div>
-            <span class="menu-text">Menu</span>
-        </button>
-        <div class="offcanvas-menu">
-            <div class="offcanvas-menu-inner">
-                <?php echo do_blocks('<!-- wp:template-part {"slug":"offcanvas-content","theme":"edit-srh"} /-->'); ?>
+    $template_part = do_blocks('<!-- wp:template-part {"slug":"offcanvas-content","theme":"edit-srh"} /-->');
+    
+    return sprintf(
+        '<div class="wp-block-srh-offcanvas-menu">
+            <button class="hamburger-toggle" aria-label="Toggle Menu">
+                <div class="hamburger-lines">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+                <span class="menu-text">Menu</span>
+            </button>
+            <div class="offcanvas-menu">
+                <div class="offcanvas-menu-inner">%s</div>
             </div>
-        </div>
-    </div>
-    <?php
-    return ob_get_clean();
+        </div>',
+        $template_part
+    );
 }
 
 /***********************************************************

js/offcanvas-menu-editor.js

@@ -0,0 +1,21 @@
+(function(blocks, element) {
+    var el = element.createElement;
+    
+    blocks.registerBlockType('srh/offcanvas-menu', {
+        edit: function() {
+            return el('div', { className: 'wp-block-srh-offcanvas-menu' },
+                el('button', { className: 'hamburger-toggle' },
+                    el('div', { className: 'hamburger-lines' },
+                        el('span'),
+                        el('span'),
+                        el('span')
+                    ),
+                    el('span', { className: 'menu-text' }, 'Menu')
+                )
+            );
+        },
+        save: function() {
+            return null;
+        }
+    });
+})(window.wp.blocks, window.wp.element);

package.json

@@ -7,14 +7,16 @@
         "@babel/core": "^7.22.0",
         "@babel/preset-env": "^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"
+        "@wordpress/element": "^5.0.0",
+        "@wordpress/scripts": "^26.0.0",
+        "babel-loader": "^9.1.2",
+        "browser-sync": "^3.0.4",
+        "browser-sync-webpack-plugin": "^2.4.0",
+        "webpack": "^5.85.0",
+        "webpack-cli": "^5.1.1"
     }
-}
+}

parts/offcanvas-content.html

@@ -1,23 +1,50 @@
 <!-- wp:group {"tagName":"div","className":"offcanvas-content","layout":{"type":"constrained"}} -->
 <div class="wp-block-group offcanvas-content">
     
-    <!-- wp:group {"tagName":"nav","className":"offcanvas-navigation","layout":{"type":"constrained"}} -->
-    <nav class="wp-block-group offcanvas-navigation">
-        <!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} /-->
-    </nav>
-    <!-- /wp:group -->
+    <!-- wp:spacer {"height":"40px"} -->
+    <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+    <!-- /wp:spacer -->
+
+    <!-- wp:heading -->
+    <h2 class="wp-block-heading has-text-weight-bold has-medium-font-size">What Can we<br/>help you find?</h2>
+    <!-- /wp:heading -->
 
     <!-- wp:group {"tagName":"div","className":"offcanvas-footer","layout":{"type":"constrained"}} -->
     <div class="wp-block-group offcanvas-footer">
-        <!-- wp:social-links {"iconColor":"base","iconColorValue":"#ffffff","className":"is-style-logos-only"} -->
-        <ul class="wp-block-social-links has-icon-color is-style-logos-only">
-            <!-- wp:social-link {"url":"#","service":"facebook"} /-->
-            <!-- wp:social-link {"url":"#","service":"instagram"} /-->
-            <!-- wp:social-link {"url":"#","service":"linkedin"} /-->
-        </ul>
-        <!-- /wp:social-links -->
+        <!-- wp:group {"className":"button-group-vertical","layout":{"type":"constrained"}} -->
+        <div class="wp-block-group button-group-vertical">
+            <!-- wp:buttons {"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} -->
+            <div class="wp-block-buttons is-vertical">
+                <!-- wp:button -->
+                <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Urgent Care</a></div>
+                <!-- /wp:button -->
+                <!-- wp:button -->
+                <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Primary Care</a></div>
+                <!-- /wp:button -->
+                <!-- wp:button -->
+                <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Specialty Care</a></div>
+                <!-- /wp:button -->
+                <!-- wp:button -->
+                <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Virtual Care</a></div>
+                <!-- /wp:button -->
+            </div>
+            <!-- /wp:buttons -->
+        </div>
+        <!-- /wp:group -->
     </div>
     <!-- /wp:group -->
 
+    <!-- wp:spacer {"height":"50px"} -->
+    <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+    <!-- /wp:spacer -->
+
+    <!-- wp:separator -->
+    <hr class="wp-block-separator has-alpha-channel-opacity"/>
+    <!-- /wp:separator -->
+
+    <!-- wp:spacer {"height":"50px"} -->
+    <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+    <!-- /wp:spacer -->
+
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 
 module.exports = {
     entry: './blocks/offcanvas-menu/index.js',
@@ -16,5 +17,27 @@ module.exports = {
                 }
             }
         ]
-    }
+    },
+    plugins: [
+        new BrowserSyncPlugin({
+            host: 'localhost',
+            port: 80,
+            proxy: 'https://srh.stu/_mkt/edit/',
+            https: {
+                key: '/opt/homebrew/etc/httpd/ssl/srh.stu-key.pem',
+                cert: '/opt/homebrew/etc/httpd/ssl/srh.stu.pem'
+            },
+            files: [
+                './parts/**/*.html',
+                './blocks/**/*.js',
+                './assets/**/*.css',
+                './**/*.php'
+            ],
+            open: true,
+            reloadDelay: 50,
+            watchEvents: ['change', 'add', 'unlink', 'addDir', 'unlinkDir'],
+            injectChanges: true,
+            notify: false
+        })
+    ]
 };