In this video, we dive into the exciting world of WordPress 6.5’s Interactivity API and explore its potential by creating a dynamic mega menu from scratch. The inspiration for this video came from Nick Diego’s concept, which I stumbled upon on Twitter.

Throughout the video, I’ll guide you through each step of the process, breaking down complex concepts into digestible segments.

By the end of this video, you’ll have a deep understanding of how to leverage the WordPress 6.5 Interactivity API to create dynamic mega menus that captivate your website visitors.

Stay tuned, subscribe and like the video!

Twitter Post “Nick Diego”:
https://twitter.com/nickmdiego/status/1760288390342496718

Post about it from Nick:
https://nickdiego.com/experimenting-with-block-based-mega-menus/

Github repo “Nick Diego”:
https://github.com/ndiego/mega-menu-block

Github repo:
https://github.com/ArneDeBelser/mega-menu-block

Chapters:

00:00 Introduction
00:43 Showcasing end result (example)
04:05 Run command to scaffold block
04:38 Edit block.json
06:28 Add custom menu template part
07:37 Fix typo registering custom menu template part
08:34 Explanation how WordPress block development works
09:16 Explain Edit.js
10:19 Install icon library
10:26 Setup all attributes and variables in Edit.js
11:20 Run watcher with “npm start”
11:34 Explain site URL
11:57 Fix site URL, should be function 12:15 Write Edit.js boilerplate
14:40 Explain and add InspectorControls
16:46 Create rendered <div> in Edit.js
17:29 Add all the “.scss” (css) files
17:54 Configure index.js – this is the JavaScript entry file
18:22 Create render.php
22:01 Creating state in View.js
23:05 Add “actions” and explain how the menu opens and closes
25:28 Add callback “initMenus”
25:43 Outro