From 22c3f1af60f01c373bd0c4ad92c1f5e5c13661a8 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 27 Sep 2022 17:07:07 +0200
Subject: [PATCH 01/27] First WordPress directives

Co-authored-by: Mario Santos <SantosGuillamot@users.noreply.github.com>
Co-authored-by: David Arenas <david.arenas@automattic.com>
---
 packages/block-library/package.json           |   1 +
 .../block-library/src/navigation/block.json   |   2 +-
 .../src/navigation/directives.js              |  39 +++++
 .../block-library/src/navigation/index.php    |  10 +-
 .../block-library/src/navigation/utils.js     |  24 ++++
 packages/block-library/src/navigation/vdom.js |  43 ++++++
 packages/block-library/src/navigation/view.js | 134 +++++++++---------
 7 files changed, 180 insertions(+), 73 deletions(-)
 create mode 100644 packages/block-library/src/navigation/directives.js
 create mode 100644 packages/block-library/src/navigation/utils.js
 create mode 100644 packages/block-library/src/navigation/vdom.js

diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index b99743fd0dcbaf..e2ea3a3e8bec75 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -64,6 +64,7 @@
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.10",
+		"preact": "^10.11.0",
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index a8c65b5a88b75b..781251b101aa8d 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -130,7 +130,7 @@
 			}
 		}
 	},
-	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
+	"viewScript": [ "file:./view.min.js" ],
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }
diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/directives.js
new file mode 100644
index 00000000000000..bd50c663f39e79
--- /dev/null
+++ b/packages/block-library/src/navigation/directives.js
@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { h, options } from 'preact';
+
+// WordPress Directives.
+const directives = {};
+
+// Expose function to add directives.
+export const directive = ( name, cb ) => {
+	directives[ name ] = cb;
+};
+
+const WpDirective = ( props ) => {
+	for ( const d in props.wp ) {
+		directives[ d ]?.( props );
+	}
+	props._wrapped = true;
+	const { wp, tag, children, ...rest } = props;
+	return h( tag, rest, children );
+};
+
+const old = options.vnode;
+
+options.vnode = ( vnode ) => {
+	const wp = vnode.props.wp;
+	const wrapped = vnode.props._wrapped;
+
+	if ( wp ) {
+		if ( ! wrapped ) {
+			vnode.props.tag = vnode.type;
+			vnode.type = WpDirective;
+		}
+	} else if ( wrapped ) {
+		delete vnode.props._wrapped;
+	}
+
+	if ( old ) old( vnode );
+};
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 5173f96040b4d0..4eeab9dd91bea8 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -632,11 +632,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$s">%9$s</button>
+		'<button wp-effect="function({ context }) { console.log(context.open); }" wp-on-click="function({ setContext }) { setContext({ open: true }); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
 			<div class="%5$s" style="%7$s" id="%1$s">
-				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
-					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
-							<button %4$s data-micromodal-close class="wp-block-navigation__responsive-container-close">%10$s</button>
+				<div class="wp-block-navigation__responsive-close" tabindex="-1">
+					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
+							<button %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
@@ -656,7 +656,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	return sprintf(
-		'<nav %1$s>%2$s</nav>',
+		'<nav %1$s wp-context=\'{"open": false}\'>%2$s</nav>',
 		$wrapper_attributes,
 		$responsive_container_markup
 	);
diff --git a/packages/block-library/src/navigation/utils.js b/packages/block-library/src/navigation/utils.js
new file mode 100644
index 00000000000000..4719eaef73986c
--- /dev/null
+++ b/packages/block-library/src/navigation/utils.js
@@ -0,0 +1,24 @@
+// For wrapperless hydration of document.body.
+// See https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c
+export const createRootFragment = ( parent, replaceNode ) => {
+	replaceNode = [].concat( replaceNode );
+	const s = replaceNode[ replaceNode.length - 1 ].nextSibling;
+	function insert( c, r ) {
+		parent.insertBefore( c, r || s );
+	}
+	return ( parent.__k = {
+		nodeType: 1,
+		parentNode: parent,
+		firstChild: replaceNode[ 0 ],
+		childNodes: replaceNode,
+		insertBefore: insert,
+		appendChild: insert,
+		removeChild( c ) {
+			parent.removeChild( c );
+		},
+	} );
+};
+
+// Helper function to await until the CPU is idle.
+export const idle = () =>
+	new Promise( ( resolve ) => window.requestIdleCallback( resolve ) );
diff --git a/packages/block-library/src/navigation/vdom.js b/packages/block-library/src/navigation/vdom.js
new file mode 100644
index 00000000000000..f015abda9173fb
--- /dev/null
+++ b/packages/block-library/src/navigation/vdom.js
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { h } from 'preact';
+
+// Convert DOM nodes to static virtual DOM nodes.
+export const toVdom = ( node ) => {
+	if ( node.nodeType === 3 ) return node.data;
+	if ( node.nodeType === 8 ) return null;
+	if ( node.localName === 'script' ) return h( 'script' );
+
+	const props = {},
+		a = node.attributes;
+
+	for ( let i = 0; i < a.length; i++ ) {
+		if ( a[ i ].name.startsWith( 'wp-' ) ) {
+			props.wp = props.wp || {};
+			let value = a[ i ].value;
+			try {
+				value = JSON.parse( value );
+			} catch ( e ) {}
+			props.wp[ renameDirective( a[ i ].name ) ] = value;
+		} else {
+			props[ a[ i ].name ] = a[ i ].value;
+		}
+	}
+
+	return h(
+		node.localName,
+		props,
+		[].map.call( node.childNodes, toVdom ).filter( exists )
+	);
+};
+
+// Rename WordPress Directives from `wp-some-directive` to `someDirective`.
+const renameDirective = ( s ) =>
+	s
+		.toLowerCase()
+		.replace( /^wp-/, '' )
+		.replace( /-(.)/g, ( _, chr ) => chr.toUpperCase() );
+
+// Filter the truthy.
+const exists = ( i ) => i;
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 19805a44ae4ae2..6952501b40b3cc 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -1,74 +1,74 @@
-// Open on click functionality.
-function closeSubmenus( element ) {
-	element
-		.querySelectorAll( '[aria-expanded="true"]' )
-		.forEach( function ( toggle ) {
-			toggle.setAttribute( 'aria-expanded', 'false' );
-		} );
-}
+/**
+ * External dependencies
+ */
+import 'preact/debug';
+import { h, hydrate, createContext } from 'preact';
+import { useState, useEffect, useContext } from 'preact/hooks';
 
-function toggleSubmenuOnClick( event ) {
-	const buttonToggle = event.target.closest( '[aria-expanded]' );
-	const isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );
+/**
+ * Internal dependencies
+ */
+import { toVdom } from './vdom';
+import { directive } from './directives';
+import { createRootFragment, idle } from './utils';
 
-	if ( isSubmenuOpen === 'true' ) {
-		closeSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) );
-	} else {
-		// Close all sibling submenus.
-		const parentElement = buttonToggle.closest(
-			'.wp-block-navigation-item'
-		);
-		const navigationParent = buttonToggle.closest(
-			'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'
-		);
-		navigationParent
-			.querySelectorAll( '.wp-block-navigation-item' )
-			.forEach( function ( child ) {
-				if ( child !== parentElement ) {
-					closeSubmenus( child );
-				}
-			} );
-		// Open submenu.
-		buttonToggle.setAttribute( 'aria-expanded', 'true' );
-	}
-}
+directive( 'log', ( { wp: { log } } ) => {
+	useEffect( () => {
+		console.log( log );
+	}, [ log ] );
+} );
 
-// Necessary for some themes such as TT1 Blocks, where
-// scripts could be loaded before the body.
-window.addEventListener( 'load', () => {
-	const submenuButtons = document.querySelectorAll(
-		'.wp-block-navigation-submenu__toggle'
-	);
+const ctx = createContext( {} );
 
-	submenuButtons.forEach( function ( button ) {
-		button.addEventListener( 'click', toggleSubmenuOnClick );
-	} );
+const CtxProvider = ( { oldTag: OldTag, value, ...props } ) => (
+	<ctx.Provider value={ value }>
+		<OldTag { ...props } />
+	</ctx.Provider>
+);
 
-	// Close on click outside.
-	document.addEventListener( 'click', function ( event ) {
-		const navigationBlocks = document.querySelectorAll(
-			'.wp-block-navigation'
-		);
-		navigationBlocks.forEach( function ( block ) {
-			if ( ! block.contains( event.target ) ) {
-				closeSubmenus( block );
-			}
-		} );
-	} );
-	// Close on focus outside or escape key.
-	document.addEventListener( 'keyup', function ( event ) {
-		const submenuBlocks = document.querySelectorAll(
-			'.wp-block-navigation-item.has-child'
-		);
-		submenuBlocks.forEach( function ( block ) {
-			if ( ! block.contains( event.target ) ) {
-				closeSubmenus( block );
-			} else if ( event.key === 'Escape' ) {
-				const toggle = block.querySelector( '[aria-expanded="true"]' );
-				closeSubmenus( block );
-				// Focus the submenu trigger so focus does not get trapped in the closed submenu.
-				toggle?.focus();
-			}
-		} );
+directive( 'context', ( props ) => {
+	const {
+		wp: { context },
+	} = props;
+
+	const value = useState( context );
+
+	props.oldTag = props.tag;
+	props.tag = CtxProvider;
+	props.value = value;
+} );
+
+directive( 'effect', ( { wp: { effect } } ) => {
+	const [ context, setContext ] = useContext( ctx );
+	useEffect( () => {
+		const cb = eval( `(${ effect })` );
+		cb( { context, setContext } );
 	} );
 } );
+
+directive( 'onClick', ( props ) => {
+	const {
+		wp: { onClick },
+	} = props;
+	const [ context, setContext ] = useContext( ctx );
+	props.onclick = ( event ) => {
+		const cb = eval( `(${ onClick })` );
+		cb( { context, setContext, event } );
+	};
+} );
+
+// Initialize the initial vDOM.
+document.addEventListener( 'DOMContentLoaded', async () => {
+	// Create the root fragment to hydrate everything.
+	const rootFragment = createRootFragment(
+		document.documentElement,
+		document.body
+	);
+
+	await idle(); // Wait until the CPU is idle to do the hydration.
+	const vdom = toVdom( document.body );
+	hydrate( vdom, rootFragment );
+
+	// eslint-disable-next-line no-console
+	console.log( 'hydrated!' );
+} );

From 4af14d68e202fbe1e2f6c8dfd5647de0e8f15e6e Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 27 Sep 2022 17:07:07 +0200
Subject: [PATCH 02/27] Fix return of components

---
 .../src/navigation/directives.js              | 14 +++---
 .../block-library/src/navigation/index.php    |  2 +-
 packages/block-library/src/navigation/view.js | 45 ++++++++++---------
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/directives.js
index bd50c663f39e79..98295cf484f024 100644
--- a/packages/block-library/src/navigation/directives.js
+++ b/packages/block-library/src/navigation/directives.js
@@ -12,12 +12,15 @@ export const directive = ( name, cb ) => {
 };
 
 const WpDirective = ( props ) => {
+	const element = h( props.type, props );
+	const directiveProps = { ...props, children: element, element };
+
 	for ( const d in props.wp ) {
-		directives[ d ]?.( props );
+		const ret = directives[ d ]?.( directiveProps );
+		if ( ret !== undefined ) directiveProps.children = ret;
 	}
-	props._wrapped = true;
-	const { wp, tag, children, ...rest } = props;
-	return h( tag, rest, children );
+
+	return directiveProps.children;
 };
 
 const old = options.vnode;
@@ -28,7 +31,8 @@ options.vnode = ( vnode ) => {
 
 	if ( wp ) {
 		if ( ! wrapped ) {
-			vnode.props.tag = vnode.type;
+			vnode.props.type = vnode.type;
+			vnode.props._wrapped = true;
 			vnode.type = WpDirective;
 		}
 	} else if ( wrapped ) {
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 4eeab9dd91bea8..cb41d2195b6af6 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -632,7 +632,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
 
 	$responsive_container_markup = sprintf(
-		'<button wp-effect="function({ context }) { console.log(context.open); }" wp-on-click="function({ setContext }) { setContext({ open: true }); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
+		'<button wp-log="The button was rendered" wp-effect="function({ context }) { console.log(context.open); }" wp-on-click="function({ setContext }) { setContext({ open: true }); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
 			<div class="%5$s" style="%7$s" id="%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1">
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 6952501b40b3cc..3be3b24fb55aa8 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -1,3 +1,10 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable jsdoc/check-tag-names */
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable no-eval */
+
+/** @jsx h */
+
 /**
  * External dependencies
  */
@@ -12,32 +19,25 @@ import { toVdom } from './vdom';
 import { directive } from './directives';
 import { createRootFragment, idle } from './utils';
 
+/**
+ * Directives
+ */
+// wp-log
 directive( 'log', ( { wp: { log } } ) => {
 	useEffect( () => {
+		// eslint-disable-next-line no-console
 		console.log( log );
 	}, [ log ] );
 } );
 
+// wp-context
 const ctx = createContext( {} );
-
-const CtxProvider = ( { oldTag: OldTag, value, ...props } ) => (
-	<ctx.Provider value={ value }>
-		<OldTag { ...props } />
-	</ctx.Provider>
-);
-
-directive( 'context', ( props ) => {
-	const {
-		wp: { context },
-	} = props;
-
+directive( 'context', ( { wp: { context }, children } ) => {
 	const value = useState( context );
-
-	props.oldTag = props.tag;
-	props.tag = CtxProvider;
-	props.value = value;
+	return <ctx.Provider value={ value }>{ children }</ctx.Provider>;
 } );
 
+// wp-effect
 directive( 'effect', ( { wp: { effect } } ) => {
 	const [ context, setContext ] = useContext( ctx );
 	useEffect( () => {
@@ -46,18 +46,19 @@ directive( 'effect', ( { wp: { effect } } ) => {
 	} );
 } );
 
-directive( 'onClick', ( props ) => {
-	const {
-		wp: { onClick },
-	} = props;
+// wp-on-click
+directive( 'onClick', ( { wp: { onClick }, element } ) => {
 	const [ context, setContext ] = useContext( ctx );
-	props.onclick = ( event ) => {
+
+	element.props.onclick = ( event ) => {
 		const cb = eval( `(${ onClick })` );
 		cb( { context, setContext, event } );
 	};
 } );
 
-// Initialize the initial vDOM.
+/**
+ * Initialize the initial vDOM.
+ */
 document.addEventListener( 'DOMContentLoaded', async () => {
 	// Create the root fragment to hydrate everything.
 	const rootFragment = createRootFragment(

From 9195ddf49fb6a4cfa53f05f0802a679bb952b482 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 27 Sep 2022 17:23:59 +0200
Subject: [PATCH 03/27] Delete not used view-modal file

---
 .../src/navigation/view-modal.js              | 68 -------------------
 1 file changed, 68 deletions(-)
 delete mode 100644 packages/block-library/src/navigation/view-modal.js

diff --git a/packages/block-library/src/navigation/view-modal.js b/packages/block-library/src/navigation/view-modal.js
deleted file mode 100644
index 477f05b5d5e51e..00000000000000
--- a/packages/block-library/src/navigation/view-modal.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * External dependencies
- */
-import MicroModal from 'micromodal';
-
-// Responsive navigation toggle.
-function navigationToggleModal( modal ) {
-	const dialogContainer = modal.querySelector(
-		`.wp-block-navigation__responsive-dialog`
-	);
-
-	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-
-	modal.classList.toggle( 'has-modal-open', ! isHidden );
-	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
-
-	if ( isHidden ) {
-		dialogContainer.removeAttribute( 'role' );
-		dialogContainer.removeAttribute( 'aria-modal' );
-	} else {
-		dialogContainer.setAttribute( 'role', 'dialog' );
-		dialogContainer.setAttribute( 'aria-modal', 'true' );
-	}
-
-	// Add a class to indicate the modal is open.
-	const htmlElement = document.documentElement;
-	htmlElement.classList.toggle( 'has-modal-open' );
-}
-
-window.addEventListener( 'load', () => {
-	MicroModal.init( {
-		onShow: navigationToggleModal,
-		onClose: navigationToggleModal,
-		openClass: 'is-menu-open',
-	} );
-
-	// Close modal automatically on clicking anchor links inside modal.
-	const navigationLinks = document.querySelectorAll(
-		'.wp-block-navigation-item__content'
-	);
-
-	navigationLinks.forEach( function ( link ) {
-		// Ignore non-anchor links and anchor links which open on a new tab.
-		if (
-			! link.getAttribute( 'href' )?.startsWith( '#' ) ||
-			link.attributes?.target === '_blank'
-		) {
-			return;
-		}
-
-		// Find the specific parent modal for this link
-		// since .close() won't work without an ID if there are
-		// multiple navigation menus in a post/page.
-		const modal = link.closest(
-			'.wp-block-navigation__responsive-container'
-		);
-		const modalId = modal?.getAttribute( 'id' );
-
-		link.addEventListener( 'click', () => {
-			// check if modal exists and is open before trying to close it
-			// otherwise Micromodal will toggle the `has-modal-open` class
-			// on the html tag which prevents scrolling
-			if ( modalId && modal.classList.contains( 'has-modal-open' ) ) {
-				MicroModal.close( modalId );
-			}
-		} );
-	} );
-} );

From 1ee977ca88417c3b94ad61032d8d2b58e104c8e2 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 29 Sep 2022 14:12:20 +0200
Subject: [PATCH 04/27] Refactor directives logic to match last version in BHE

---
 .../src/navigation/directives.js              | 34 ++++++++-----
 packages/block-library/src/navigation/vdom.js | 51 ++++++++++---------
 packages/block-library/src/navigation/view.js | 10 ++--
 3 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/directives.js
index 98295cf484f024..7be1a8e72a3e90 100644
--- a/packages/block-library/src/navigation/directives.js
+++ b/packages/block-library/src/navigation/directives.js
@@ -11,33 +11,39 @@ export const directive = ( name, cb ) => {
 	directives[ name ] = cb;
 };
 
-const WpDirective = ( props ) => {
-	const element = h( props.type, props );
-	const directiveProps = { ...props, children: element, element };
+const WpDirective = ( { type, wp, props: originalProps } ) => {
+	const element = h( type, { ...originalProps, _wrapped: true } );
+	const props = { ...originalProps, children: element };
 
-	for ( const d in props.wp ) {
-		const ret = directives[ d ]?.( directiveProps );
-		if ( ret !== undefined ) directiveProps.children = ret;
+	for ( const d in wp ) {
+		const wrapper = directives[ d ]?.( wp, props, { element } );
+		if ( wrapper !== undefined ) props.children = wrapper;
 	}
 
-	return directiveProps.children;
+	return props.children;
 };
 
 const old = options.vnode;
-
 options.vnode = ( vnode ) => {
 	const wp = vnode.props.wp;
-	const wrapped = vnode.props._wrapped;
 
 	if ( wp ) {
-		if ( ! wrapped ) {
-			vnode.props.type = vnode.type;
-			vnode.props._wrapped = true;
+		const props = vnode.props;
+		delete props.wp;
+		if ( ! props._wrapped ) {
+			vnode.props = { type: vnode.type, wp, props };
 			vnode.type = WpDirective;
+		} else {
+			delete props._wrapped;
 		}
-	} else if ( wrapped ) {
-		delete vnode.props._wrapped;
 	}
 
 	if ( old ) old( vnode );
 };
+
+// Rename WordPress Directives from `wp-some-directive` to `someDirective`.
+export const rename = ( s ) =>
+	s
+		.toLowerCase()
+		.replace( /^wp-/, '' )
+		.replace( /-(.)/g, ( _, chr ) => chr.toUpperCase() );
diff --git a/packages/block-library/src/navigation/vdom.js b/packages/block-library/src/navigation/vdom.js
index f015abda9173fb..f01769811f29ba 100644
--- a/packages/block-library/src/navigation/vdom.js
+++ b/packages/block-library/src/navigation/vdom.js
@@ -2,42 +2,43 @@
  * External dependencies
  */
 import { h } from 'preact';
+/**
+ * Internal dependencies
+ */
+import { rename } from './directives';
+
+// Recursive function that transfoms a DOM tree into vDOM.
+export default function toVdom( node ) {
+	const props = {};
+	const attributes = node.attributes;
+	const wpDirectives = { initialRef: node }; // Pass down original static node.
+	let hasWpDirectives = false;
 
-// Convert DOM nodes to static virtual DOM nodes.
-export const toVdom = ( node ) => {
 	if ( node.nodeType === 3 ) return node.data;
 	if ( node.nodeType === 8 ) return null;
 	if ( node.localName === 'script' ) return h( 'script' );
 
-	const props = {},
-		a = node.attributes;
-
-	for ( let i = 0; i < a.length; i++ ) {
-		if ( a[ i ].name.startsWith( 'wp-' ) ) {
-			props.wp = props.wp || {};
-			let value = a[ i ].value;
+	for ( let i = 0; i < attributes.length; i++ ) {
+		const name = attributes[ i ].name;
+		if ( name.startsWith( 'wp-' ) ) {
+			hasWpDirectives = true;
+			let value = attributes[ i ].value;
 			try {
 				value = JSON.parse( value );
 			} catch ( e ) {}
-			props.wp[ renameDirective( a[ i ].name ) ] = value;
+			wpDirectives[ rename( name ) ] = value;
 		} else {
-			props[ a[ i ].name ] = a[ i ].value;
+			props[ name ] = attributes[ i ].value;
 		}
 	}
 
-	return h(
-		node.localName,
-		props,
-		[].map.call( node.childNodes, toVdom ).filter( exists )
-	);
-};
+	if ( hasWpDirectives ) props.wp = wpDirectives;
+
+	// Walk child nodes and return vDOM children.
+	const children = [].map.call( node.childNodes, toVdom ).filter( exists );
 
-// Rename WordPress Directives from `wp-some-directive` to `someDirective`.
-const renameDirective = ( s ) =>
-	s
-		.toLowerCase()
-		.replace( /^wp-/, '' )
-		.replace( /-(.)/g, ( _, chr ) => chr.toUpperCase() );
+	return h( node.localName, props, children );
+}
 
-// Filter the truthy.
-const exists = ( i ) => i;
+// Filter existing items.
+const exists = ( x ) => x;
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 3be3b24fb55aa8..9381c3fc954e9c 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -15,7 +15,7 @@ import { useState, useEffect, useContext } from 'preact/hooks';
 /**
  * Internal dependencies
  */
-import { toVdom } from './vdom';
+import toVdom from './vdom';
 import { directive } from './directives';
 import { createRootFragment, idle } from './utils';
 
@@ -23,7 +23,7 @@ import { createRootFragment, idle } from './utils';
  * Directives
  */
 // wp-log
-directive( 'log', ( { wp: { log } } ) => {
+directive( 'log', ( { log } ) => {
 	useEffect( () => {
 		// eslint-disable-next-line no-console
 		console.log( log );
@@ -32,13 +32,13 @@ directive( 'log', ( { wp: { log } } ) => {
 
 // wp-context
 const ctx = createContext( {} );
-directive( 'context', ( { wp: { context }, children } ) => {
+directive( 'context', ( { context }, { children } ) => {
 	const value = useState( context );
 	return <ctx.Provider value={ value }>{ children }</ctx.Provider>;
 } );
 
 // wp-effect
-directive( 'effect', ( { wp: { effect } } ) => {
+directive( 'effect', ( { effect } ) => {
 	const [ context, setContext ] = useContext( ctx );
 	useEffect( () => {
 		const cb = eval( `(${ effect })` );
@@ -47,7 +47,7 @@ directive( 'effect', ( { wp: { effect } } ) => {
 } );
 
 // wp-on-click
-directive( 'onClick', ( { wp: { onClick }, element } ) => {
+directive( 'onClick', ( { onClick }, _, { element } ) => {
 	const [ context, setContext ] = useContext( ctx );
 
 	element.props.onclick = ( event ) => {

From 5a5b4512e37658c0057585e4cad51ac9c856fc2c Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 29 Sep 2022 17:13:43 +0200
Subject: [PATCH 05/27] Preliminary support for prefix/suffix in directives

---
 .../src/navigation/directives.js              | 27 +++++-
 .../block-library/src/navigation/index.php    |  2 +-
 .../src/navigation/test/rename-directives.js  | 95 +++++++++++++++++++
 packages/block-library/src/navigation/vdom.js |  8 +-
 packages/block-library/src/navigation/view.js |  6 +-
 5 files changed, 127 insertions(+), 11 deletions(-)
 create mode 100644 packages/block-library/src/navigation/test/rename-directives.js

diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/directives.js
index 7be1a8e72a3e90..3a706cc10d41f0 100644
--- a/packages/block-library/src/navigation/directives.js
+++ b/packages/block-library/src/navigation/directives.js
@@ -41,9 +41,30 @@ options.vnode = ( vnode ) => {
 	if ( old ) old( vnode );
 };
 
-// Rename WordPress Directives from `wp-some-directive` to `someDirective`.
-export const rename = ( s ) =>
-	s
+// Rename WordPress Directives from:
+// - `wp-some-directive` to `someDirective`.
+// - `wp-some-prefix:some-directive` to `somePrefix`.
+export const rename = ( name ) =>
+	name
 		.toLowerCase()
 		.replace( /^wp-/, '' )
+		.replace( /:.*/, '' )
 		.replace( /-(.)/g, ( _, chr ) => chr.toUpperCase() );
+
+// Add some support for suffixes and modifiers. See the tests file.
+export const value = ( name, val ) => {
+	if ( ! name.includes( ':' ) ) return val;
+	const [ , suffix, mods ] = /^.*?:([^.]*)\.?(.*)/.exec( name );
+	const modifiers = mods?.split( '.' ).reduce( ( obj, mod ) => {
+		const i = mod.indexOf( '=' );
+		if ( i !== -1 ) obj[ mod.substring( 0, i ) ] = mod.substring( i + 1 );
+		else obj[ mod ] = true;
+		return obj;
+	}, {} );
+	return {
+		name: rename( name ),
+		suffix: rename( suffix ),
+		...( mods && { modifiers } ),
+		value: val,
+	};
+};
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index cb41d2195b6af6..1e86242e123fc7 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -632,7 +632,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
 
 	$responsive_container_markup = sprintf(
-		'<button wp-log="The button was rendered" wp-effect="function({ context }) { console.log(context.open); }" wp-on-click="function({ setContext }) { setContext({ open: true }); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
+		'<button wp-log="The button was rendered" wp-effect="function({ context }) { console.log(context.open); }" wp-on:click="function({ setContext }) { setContext({ open: true }); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
 			<div class="%5$s" style="%7$s" id="%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1">
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
diff --git a/packages/block-library/src/navigation/test/rename-directives.js b/packages/block-library/src/navigation/test/rename-directives.js
new file mode 100644
index 00000000000000..4ae35ed305677a
--- /dev/null
+++ b/packages/block-library/src/navigation/test/rename-directives.js
@@ -0,0 +1,95 @@
+/**
+ * Internal dependencies
+ */
+import { rename, value } from '../directives';
+
+describe( 'directives name', () => {
+	it( 'should do camelcase', () => {
+		expect( rename( 'wp-some-directive' ) ).toBe( 'someDirective' );
+	} );
+
+	it( 'should do camelcase even it casing is mixed up', () => {
+		expect( rename( 'wP-SOme-dIRECtivE' ) ).toBe( 'someDirective' );
+	} );
+
+	it( 'should remove anything after :', () => {
+		expect( rename( 'wp-some-prefix:some-directive' ) ).toBe(
+			'somePrefix'
+		);
+	} );
+} );
+
+describe( 'directives value', () => {
+	it( "shouldn't do anything if name doesn't contain a colon", () => {
+		expect( value( 'wp-some-directive', 123 ) ).toBe( 123 );
+	} );
+
+	it( 'should return an object if name contains a colon', () => {
+		expect( value( 'wp-some-prefix:some-directive', 123 ) ).toEqual( {
+			name: 'somePrefix',
+			suffix: 'someDirective',
+			value: 123,
+		} );
+	} );
+
+	it( 'should return single modifier without value if it exists', () => {
+		expect( value( 'wp-some-prefix:some-directive.option1', 123 ) ).toEqual(
+			{
+				name: 'somePrefix',
+				suffix: 'someDirective',
+				modifiers: {
+					option1: true,
+				},
+				value: 123,
+			}
+		);
+	} );
+
+	it( 'should return multiple modifiers without value if they exists', () => {
+		expect(
+			value(
+				'wp-some-prefix:some-directive.option1.option2.option3',
+				123
+			)
+		).toEqual( {
+			name: 'somePrefix',
+			suffix: 'someDirective',
+			modifiers: {
+				option1: true,
+				option2: true,
+				option3: true,
+			},
+			value: 123,
+		} );
+	} );
+
+	it( 'should return single modifier with value', () => {
+		expect(
+			value( 'wp-some-prefix:some-directive.option1=some value', 123 )
+		).toEqual( {
+			name: 'somePrefix',
+			suffix: 'someDirective',
+			modifiers: {
+				option1: 'some value',
+			},
+			value: 123,
+		} );
+	} );
+
+	it( 'should return multiple modifiers with value', () => {
+		expect(
+			value(
+				'wp-some-prefix:some-directive.option1=some value.option2=other value',
+				123
+			)
+		).toEqual( {
+			name: 'somePrefix',
+			suffix: 'someDirective',
+			modifiers: {
+				option1: 'some value',
+				option2: 'other value',
+			},
+			value: 123,
+		} );
+	} );
+} );
diff --git a/packages/block-library/src/navigation/vdom.js b/packages/block-library/src/navigation/vdom.js
index f01769811f29ba..a24d9113c14cbe 100644
--- a/packages/block-library/src/navigation/vdom.js
+++ b/packages/block-library/src/navigation/vdom.js
@@ -5,7 +5,7 @@ import { h } from 'preact';
 /**
  * Internal dependencies
  */
-import { rename } from './directives';
+import { rename, value } from './directives';
 
 // Recursive function that transfoms a DOM tree into vDOM.
 export default function toVdom( node ) {
@@ -22,11 +22,11 @@ export default function toVdom( node ) {
 		const name = attributes[ i ].name;
 		if ( name.startsWith( 'wp-' ) ) {
 			hasWpDirectives = true;
-			let value = attributes[ i ].value;
+			let val = attributes[ i ].value;
 			try {
-				value = JSON.parse( value );
+				val = JSON.parse( val );
 			} catch ( e ) {}
-			wpDirectives[ rename( name ) ] = value;
+			wpDirectives[ rename( name ) ] = value( name, val );
 		} else {
 			props[ name ] = attributes[ i ].value;
 		}
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 9381c3fc954e9c..649acad577cc0e 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -47,11 +47,11 @@ directive( 'effect', ( { effect } ) => {
 } );
 
 // wp-on-click
-directive( 'onClick', ( { onClick }, _, { element } ) => {
+directive( 'on', ( { on: { suffix, value } }, _, { element } ) => {
 	const [ context, setContext ] = useContext( ctx );
 
-	element.props.onclick = ( event ) => {
-		const cb = eval( `(${ onClick })` );
+	element.props[ `on${ suffix }` ] = ( event ) => {
+		const cb = eval( `(${ value })` );
 		cb( { context, setContext, event } );
 	};
 } );

From cd01ffa3ecb134165f5d662540bda932b36dcbf2 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 29 Sep 2022 17:15:00 +0200
Subject: [PATCH 06/27] Update package.lock

---
 package-lock.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index e070dc114fa5d5..0486f91bbb0592 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17406,6 +17406,7 @@
 				"lodash": "^4.17.21",
 				"memize": "^1.1.0",
 				"micromodal": "^0.4.10",
+				"preact": "^10.11.0",
 				"remove-accents": "^0.4.2"
 			}
 		},
@@ -49896,6 +49897,11 @@
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
 			"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
 		},
+		"preact": {
+			"version": "10.11.0",
+			"resolved": "https://registry.npmjs.org/preact/-/preact-10.11.0.tgz",
+			"integrity": "sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w=="
+		},
 		"prelude-ls": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",

From eabeed9ad80b295fd6f44ac64fc31eb814af979d Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 29 Sep 2022 17:26:09 +0200
Subject: [PATCH 07/27] Remove support for modifiers

---
 .../src/navigation/directives.js              | 10 +--
 .../src/navigation/test/rename-directives.js  | 61 -------------------
 2 files changed, 1 insertion(+), 70 deletions(-)

diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/directives.js
index 3a706cc10d41f0..92cdfb006d7043 100644
--- a/packages/block-library/src/navigation/directives.js
+++ b/packages/block-library/src/navigation/directives.js
@@ -54,17 +54,9 @@ export const rename = ( name ) =>
 // Add some support for suffixes and modifiers. See the tests file.
 export const value = ( name, val ) => {
 	if ( ! name.includes( ':' ) ) return val;
-	const [ , suffix, mods ] = /^.*?:([^.]*)\.?(.*)/.exec( name );
-	const modifiers = mods?.split( '.' ).reduce( ( obj, mod ) => {
-		const i = mod.indexOf( '=' );
-		if ( i !== -1 ) obj[ mod.substring( 0, i ) ] = mod.substring( i + 1 );
-		else obj[ mod ] = true;
-		return obj;
-	}, {} );
 	return {
 		name: rename( name ),
-		suffix: rename( suffix ),
-		...( mods && { modifiers } ),
+		suffix: rename( name.substring( name.indexOf( ':' ) + 1 ) ),
 		value: val,
 	};
 };
diff --git a/packages/block-library/src/navigation/test/rename-directives.js b/packages/block-library/src/navigation/test/rename-directives.js
index 4ae35ed305677a..06f9d9d2eeb10f 100644
--- a/packages/block-library/src/navigation/test/rename-directives.js
+++ b/packages/block-library/src/navigation/test/rename-directives.js
@@ -31,65 +31,4 @@ describe( 'directives value', () => {
 			value: 123,
 		} );
 	} );
-
-	it( 'should return single modifier without value if it exists', () => {
-		expect( value( 'wp-some-prefix:some-directive.option1', 123 ) ).toEqual(
-			{
-				name: 'somePrefix',
-				suffix: 'someDirective',
-				modifiers: {
-					option1: true,
-				},
-				value: 123,
-			}
-		);
-	} );
-
-	it( 'should return multiple modifiers without value if they exists', () => {
-		expect(
-			value(
-				'wp-some-prefix:some-directive.option1.option2.option3',
-				123
-			)
-		).toEqual( {
-			name: 'somePrefix',
-			suffix: 'someDirective',
-			modifiers: {
-				option1: true,
-				option2: true,
-				option3: true,
-			},
-			value: 123,
-		} );
-	} );
-
-	it( 'should return single modifier with value', () => {
-		expect(
-			value( 'wp-some-prefix:some-directive.option1=some value', 123 )
-		).toEqual( {
-			name: 'somePrefix',
-			suffix: 'someDirective',
-			modifiers: {
-				option1: 'some value',
-			},
-			value: 123,
-		} );
-	} );
-
-	it( 'should return multiple modifiers with value', () => {
-		expect(
-			value(
-				'wp-some-prefix:some-directive.option1=some value.option2=other value',
-				123
-			)
-		).toEqual( {
-			name: 'somePrefix',
-			suffix: 'someDirective',
-			modifiers: {
-				option1: 'some value',
-				option2: 'other value',
-			},
-			value: 123,
-		} );
-	} );
 } );

From ced9cbf75e20c13cdf3d6f0c3c5089cb09d93e3b Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 29 Sep 2022 17:35:55 +0200
Subject: [PATCH 08/27] Move rename and value to the vdom file

---
 .../src/navigation/directives.js              | 20 ----------------
 .../src/navigation/test/rename-directives.js  |  2 +-
 packages/block-library/src/navigation/vdom.js | 24 +++++++++++++++----
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/directives.js
index 92cdfb006d7043..77ed12fd3890f0 100644
--- a/packages/block-library/src/navigation/directives.js
+++ b/packages/block-library/src/navigation/directives.js
@@ -40,23 +40,3 @@ options.vnode = ( vnode ) => {
 
 	if ( old ) old( vnode );
 };
-
-// Rename WordPress Directives from:
-// - `wp-some-directive` to `someDirective`.
-// - `wp-some-prefix:some-directive` to `somePrefix`.
-export const rename = ( name ) =>
-	name
-		.toLowerCase()
-		.replace( /^wp-/, '' )
-		.replace( /:.*/, '' )
-		.replace( /-(.)/g, ( _, chr ) => chr.toUpperCase() );
-
-// Add some support for suffixes and modifiers. See the tests file.
-export const value = ( name, val ) => {
-	if ( ! name.includes( ':' ) ) return val;
-	return {
-		name: rename( name ),
-		suffix: rename( name.substring( name.indexOf( ':' ) + 1 ) ),
-		value: val,
-	};
-};
diff --git a/packages/block-library/src/navigation/test/rename-directives.js b/packages/block-library/src/navigation/test/rename-directives.js
index 06f9d9d2eeb10f..311e5ebaedc98b 100644
--- a/packages/block-library/src/navigation/test/rename-directives.js
+++ b/packages/block-library/src/navigation/test/rename-directives.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { rename, value } from '../directives';
+import { rename, value } from '../vdom';
 
 describe( 'directives name', () => {
 	it( 'should do camelcase', () => {
diff --git a/packages/block-library/src/navigation/vdom.js b/packages/block-library/src/navigation/vdom.js
index a24d9113c14cbe..a4f6190a2c2d13 100644
--- a/packages/block-library/src/navigation/vdom.js
+++ b/packages/block-library/src/navigation/vdom.js
@@ -2,10 +2,6 @@
  * External dependencies
  */
 import { h } from 'preact';
-/**
- * Internal dependencies
- */
-import { rename, value } from './directives';
 
 // Recursive function that transfoms a DOM tree into vDOM.
 export default function toVdom( node ) {
@@ -42,3 +38,23 @@ export default function toVdom( node ) {
 
 // Filter existing items.
 const exists = ( x ) => x;
+
+// Rename WordPress Directives from:
+// - `wp-some-directive` to `someDirective`.
+// - `wp-some-prefix:some-directive` to `somePrefix`.
+export const rename = ( name ) =>
+	name
+		.toLowerCase()
+		.replace( /^wp-/, '' )
+		.replace( /:.*/, '' )
+		.replace( /-(.)/g, ( _, chr ) => chr.toUpperCase() );
+
+// Add some support for suffixes and modifiers. See the tests file.
+export const value = ( name, val ) => {
+	if ( ! name.includes( ':' ) ) return val;
+	return {
+		name: rename( name ),
+		suffix: rename( name.substring( name.indexOf( ':' ) + 1 ) ),
+		value: val,
+	};
+};

From 2d8dc0c0d2004e3f9af0f1bb09a7b38869f2e0d2 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 29 Sep 2022 17:54:12 +0200
Subject: [PATCH 09/27] Add wp-class directive

---
 packages/block-library/src/navigation/index.php |  2 +-
 packages/block-library/src/navigation/view.js   | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 1e86242e123fc7..4357b2097e4674 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -632,7 +632,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
 
 	$responsive_container_markup = sprintf(
-		'<button wp-log="The button was rendered" wp-effect="function({ context }) { console.log(context.open); }" wp-on:click="function({ setContext }) { setContext({ open: true }); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
+		'<button wp-class:hide-menu="function({ context }) { return context.open; }" wp-log="The button was rendered" wp-effect="function({ context }) { console.log(context.open); }" wp-on:click="function({ setContext, context }) { setContext({ open: !context.open }); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
 			<div class="%5$s" style="%7$s" id="%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1">
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 649acad577cc0e..6626b9ec866da6 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -46,7 +46,7 @@ directive( 'effect', ( { effect } ) => {
 	} );
 } );
 
-// wp-on-click
+// wp-on:[event]
 directive( 'on', ( { on: { suffix, value } }, _, { element } ) => {
 	const [ context, setContext ] = useContext( ctx );
 
@@ -56,6 +56,18 @@ directive( 'on', ( { on: { suffix, value } }, _, { element } ) => {
 	};
 } );
 
+// wp-class:[event]
+directive( 'class', ( { class: { suffix, value } }, _, { element } ) => {
+	const [ context, setContext ] = useContext( ctx );
+
+	const cb = eval( `(${ value })` );
+	const result = cb( { context, setContext } );
+
+	if ( ! result ) element.props.class.replace( suffix, '' );
+	else if ( ! element.props.class.includes( suffix ) )
+		element.props.class += ` ${ suffix }`;
+} );
+
 /**
  * Initialize the initial vDOM.
  */

From 546b5b8674961ea9adc79d885f5a3ae4905a063a Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 29 Sep 2022 17:59:18 +0200
Subject: [PATCH 10/27] Remove camelcase in directive suffix

---
 packages/block-library/src/navigation/test/rename-directives.js | 2 +-
 packages/block-library/src/navigation/vdom.js                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/navigation/test/rename-directives.js b/packages/block-library/src/navigation/test/rename-directives.js
index 311e5ebaedc98b..b4f9c0050c2d78 100644
--- a/packages/block-library/src/navigation/test/rename-directives.js
+++ b/packages/block-library/src/navigation/test/rename-directives.js
@@ -27,7 +27,7 @@ describe( 'directives value', () => {
 	it( 'should return an object if name contains a colon', () => {
 		expect( value( 'wp-some-prefix:some-directive', 123 ) ).toEqual( {
 			name: 'somePrefix',
-			suffix: 'someDirective',
+			suffix: 'some-directive',
 			value: 123,
 		} );
 	} );
diff --git a/packages/block-library/src/navigation/vdom.js b/packages/block-library/src/navigation/vdom.js
index a4f6190a2c2d13..190ad74b2d3407 100644
--- a/packages/block-library/src/navigation/vdom.js
+++ b/packages/block-library/src/navigation/vdom.js
@@ -54,7 +54,7 @@ export const value = ( name, val ) => {
 	if ( ! name.includes( ':' ) ) return val;
 	return {
 		name: rename( name ),
-		suffix: rename( name.substring( name.indexOf( ':' ) + 1 ) ),
+		suffix: name.substring( name.indexOf( ':' ) + 1 ),
 		value: val,
 	};
 };

From 7807a9834eca99863d9f5ddc85d449b77b410a1d Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Fri, 30 Sep 2022 11:30:45 +0200
Subject: [PATCH 11/27] Add first directives to open and close the menu

---
 packages/block-library/src/navigation/index.php | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 4357b2097e4674..e8c58ff9b79264 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -632,11 +632,16 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
 
 	$responsive_container_markup = sprintf(
-		'<button wp-class:hide-menu="function({ context }) { return context.open; }" wp-log="The button was rendered" wp-effect="function({ context }) { console.log(context.open); }" wp-on:click="function({ setContext, context }) { setContext({ open: !context.open }); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
-			<div class="%5$s" style="%7$s" id="%1$s">
+		'<button wp-on:click="function({ setContext }) { setContext({ open: true }); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
+			<div 
+				class="%5$s" 
+				wp-class:is-menu-open="function({ context }) { return context.open; }"
+				style="%7$s" 
+				id="%1$s"
+			>
 				<div class="wp-block-navigation__responsive-close" tabindex="-1">
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
-							<button %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
+							<button wp-on:click="function({ setContext }) { setContext({ open: false }); }" %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>

From 453445761640593bfd5a3d5fe88d62dbc2d5d8b9 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Fri, 30 Sep 2022 12:27:32 +0200
Subject: [PATCH 12/27] Pass ref, use it to set focus of first element

---
 .../src/navigation/directives.js              |  9 +++++--
 .../block-library/src/navigation/index.php    | 15 +++++++++---
 packages/block-library/src/navigation/view.js | 24 +++++++++++++++----
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/directives.js
index 77ed12fd3890f0..710e6e77bd570f 100644
--- a/packages/block-library/src/navigation/directives.js
+++ b/packages/block-library/src/navigation/directives.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { useRef } from 'preact/hooks';
 import { h, options } from 'preact';
 
 // WordPress Directives.
@@ -12,11 +13,15 @@ export const directive = ( name, cb ) => {
 };
 
 const WpDirective = ( { type, wp, props: originalProps } ) => {
-	const element = h( type, { ...originalProps, _wrapped: true } );
+	const ref = useRef( null );
+	const element = h( type, { ...originalProps, ref, _wrapped: true } );
 	const props = { ...originalProps, children: element };
 
 	for ( const d in wp ) {
-		const wrapper = directives[ d ]?.( wp, props, { element } );
+		const wrapper = directives[ d ]?.( wp, props, {
+			ref,
+			element,
+		} );
 		if ( wrapper !== undefined ) props.children = wrapper;
 	}
 
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index e8c58ff9b79264..e410f373eb1953 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -556,6 +556,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$inner_blocks_html = '';
 	$is_list_open      = false;
+	$is_first_item     = false;
 	foreach ( $inner_blocks as $inner_block ) {
 		if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name || 'core/site-title' === $inner_block->name || 'core/site-logo' === $inner_block->name || 'core/navigation-submenu' === $inner_block->name ) && ! $is_list_open ) {
 			$is_list_open       = true;
@@ -566,6 +567,13 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 			$inner_blocks_html .= '</ul>';
 		}
 		$inner_block_content = $inner_block->render();
+		if (!$is_first_item) {
+			$w = new WP_HTML_Tag_Processor($inner_block_content);
+			$w->next_tag('a');
+			$w->set_attribute('wp-init', 'function({ setContext, ref }) { setContext({ firstMenuElement: ref }); }');	
+			$inner_block_content = (string) $w;
+			$is_first_item = true;
+		}
 		if ( 'core/site-title' === $inner_block->name || ( 'core/site-logo' === $inner_block->name && $inner_block_content ) ) {
 			$inner_blocks_html .= '<li class="wp-block-navigation-item">' . $inner_block_content . '</li>';
 		} else {
@@ -632,18 +640,19 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
 
 	$responsive_container_markup = sprintf(
-		'<button wp-on:click="function({ setContext }) { setContext({ open: true }); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
+		'<button wp-on:click="function({ setContext }) { setContext({ open: true }); }" wp-effect="function({ context }) { context.open && context.firstMenuElement.focus(); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
 			<div 
 				class="%5$s" 
+				wp-effect="function({ context }) { console.log(context); }"
 				wp-class:is-menu-open="function({ context }) { return context.open; }"
 				style="%7$s" 
 				id="%1$s"
 			>
 				<div class="wp-block-navigation__responsive-close" tabindex="-1">
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
-							<button wp-on:click="function({ setContext }) { setContext({ open: false }); }" %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
+						<button wp-on:click="function({ setContext }) { setContext({ open: false }); }" %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
-							%2$s
+						%2$s
 						</div>
 					</div>
 				</div>
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 6626b9ec866da6..c99e5080089f21 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -31,10 +31,17 @@ directive( 'log', ( { log } ) => {
 } );
 
 // wp-context
-const ctx = createContext( {} );
-directive( 'context', ( { context }, { children } ) => {
-	const value = useState( context );
-	return <ctx.Provider value={ value }>{ children }</ctx.Provider>;
+const ctx = createContext( [ {}, () => ( {} ) ] );
+directive( 'context', ( { context: initialContext }, { children } ) => {
+	const [ context, setContext ] = useState( initialContext );
+	const setMergedContext = ( newContext ) => {
+		setContext( { ...context, ...newContext } );
+	};
+	return (
+		<ctx.Provider value={ [ context, setMergedContext ] }>
+			{ children }
+		</ctx.Provider>
+	);
 } );
 
 // wp-effect
@@ -46,6 +53,15 @@ directive( 'effect', ( { effect } ) => {
 	} );
 } );
 
+// wp-init
+directive( 'init', ( { init }, _, { ref } ) => {
+	const [ context, setContext ] = useContext( ctx );
+	useEffect( () => {
+		const cb = eval( `(${ init })` );
+		cb( { context, setContext, ref: ref.current } );
+	}, [] );
+} );
+
 // wp-on:[event]
 directive( 'on', ( { on: { suffix, value } }, _, { element } ) => {
 	const [ context, setContext ] = useContext( ctx );

From e80249f3c56d55121126ae18d11e62e02be270d9 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Fri, 30 Sep 2022 15:30:04 +0200
Subject: [PATCH 13/27] Try new API

As explained in
https://github.com/WordPress/gutenberg/pull/44509#issuecomment-1263537894
---
 .../src/navigation/directives.js              |  6 +-
 .../block-library/src/navigation/index.php    | 40 ++++++----
 .../src/navigation/test/rename-directives.js  | 34 ---------
 packages/block-library/src/navigation/vdom.js | 26 +------
 packages/block-library/src/navigation/view.js | 73 +++++++++++--------
 5 files changed, 72 insertions(+), 107 deletions(-)
 delete mode 100644 packages/block-library/src/navigation/test/rename-directives.js

diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/directives.js
index 710e6e77bd570f..9c43a2d5232ac3 100644
--- a/packages/block-library/src/navigation/directives.js
+++ b/packages/block-library/src/navigation/directives.js
@@ -16,12 +16,10 @@ const WpDirective = ( { type, wp, props: originalProps } ) => {
 	const ref = useRef( null );
 	const element = h( type, { ...originalProps, ref, _wrapped: true } );
 	const props = { ...originalProps, children: element };
+	const directiveProps = { directives: wp, props, element };
 
 	for ( const d in wp ) {
-		const wrapper = directives[ d ]?.( wp, props, {
-			ref,
-			element,
-		} );
+		const wrapper = directives[ d ]?.( directiveProps );
 		if ( wrapper !== undefined ) props.children = wrapper;
 	}
 
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index e410f373eb1953..faecb4dfed6516 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -640,23 +640,33 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
 
 	$responsive_container_markup = sprintf(
-		'<button wp-on:click="function({ setContext }) { setContext({ open: true }); }" wp-effect="function({ context }) { context.open && context.firstMenuElement.focus(); }" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
-			<div 
-				class="%5$s" 
-				wp-effect="function({ context }) { console.log(context); }"
-				wp-class:is-menu-open="function({ context }) { return context.open; }"
-				style="%7$s" 
-				id="%1$s"
-			>
-				<div class="wp-block-navigation__responsive-close" tabindex="-1">
-					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
-						<button wp-on:click="function({ setContext }) { setContext({ open: false }); }" %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
-						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
-						%2$s
-						</div>
+		'<button 
+			wp-on:click="function({ setContext }) { setContext({ open: true, previousElementWithFocus: document.activeElement }); }" 
+			wp-effect:on-open="function({ context }) { context.open && context.firstMenuElement.focus(); }" 
+			wp-effect:on-close="function({ context }) { context.close && context.previousElementWithFocus.focus(); }" 
+			aria-haspopup="true" 
+			%3$s 
+			class="%6$s"
+		>
+			%9$s
+		</button>
+		<div 
+			class="%5$s" 
+			wp-effect="function({ context }) { console.log(context); }"
+			wp-class:is-menu-open="function({ context }) { return context.open; }"
+			wp-class:has-modal-open="function({ context }) { return context.open; }"
+			style="%7$s" 
+			id="%1$s"
+		>
+			<div class="wp-block-navigation__responsive-close" tabindex="-1">
+				<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
+					<button wp-on:click="function({ setContext }) { setContext({ open: false }); }" %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
+					<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
+					%2$s
 					</div>
 				</div>
-			</div>',
+			</div>
+		</div>',
 		esc_attr( $modal_unique_id ),
 		$inner_blocks_html,
 		$toggle_aria_label_open,
diff --git a/packages/block-library/src/navigation/test/rename-directives.js b/packages/block-library/src/navigation/test/rename-directives.js
deleted file mode 100644
index b4f9c0050c2d78..00000000000000
--- a/packages/block-library/src/navigation/test/rename-directives.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Internal dependencies
- */
-import { rename, value } from '../vdom';
-
-describe( 'directives name', () => {
-	it( 'should do camelcase', () => {
-		expect( rename( 'wp-some-directive' ) ).toBe( 'someDirective' );
-	} );
-
-	it( 'should do camelcase even it casing is mixed up', () => {
-		expect( rename( 'wP-SOme-dIRECtivE' ) ).toBe( 'someDirective' );
-	} );
-
-	it( 'should remove anything after :', () => {
-		expect( rename( 'wp-some-prefix:some-directive' ) ).toBe(
-			'somePrefix'
-		);
-	} );
-} );
-
-describe( 'directives value', () => {
-	it( "shouldn't do anything if name doesn't contain a colon", () => {
-		expect( value( 'wp-some-directive', 123 ) ).toBe( 123 );
-	} );
-
-	it( 'should return an object if name contains a colon', () => {
-		expect( value( 'wp-some-prefix:some-directive', 123 ) ).toEqual( {
-			name: 'somePrefix',
-			suffix: 'some-directive',
-			value: 123,
-		} );
-	} );
-} );
diff --git a/packages/block-library/src/navigation/vdom.js b/packages/block-library/src/navigation/vdom.js
index 190ad74b2d3407..11940245b66219 100644
--- a/packages/block-library/src/navigation/vdom.js
+++ b/packages/block-library/src/navigation/vdom.js
@@ -7,7 +7,7 @@ import { h } from 'preact';
 export default function toVdom( node ) {
 	const props = {};
 	const attributes = node.attributes;
-	const wpDirectives = { initialRef: node }; // Pass down original static node.
+	const wpDirectives = {};
 	let hasWpDirectives = false;
 
 	if ( node.nodeType === 3 ) return node.data;
@@ -22,7 +22,9 @@ export default function toVdom( node ) {
 			try {
 				val = JSON.parse( val );
 			} catch ( e ) {}
-			wpDirectives[ rename( name ) ] = value( name, val );
+			const [ , prefix, suffix ] = /wp-([^:]+):?(.*)$/.exec( name );
+			wpDirectives[ prefix ] = wpDirectives[ prefix ] || {};
+			wpDirectives[ prefix ][ suffix || 'default' ] = val;
 		} else {
 			props[ name ] = attributes[ i ].value;
 		}
@@ -38,23 +40,3 @@ export default function toVdom( node ) {
 
 // Filter existing items.
 const exists = ( x ) => x;
-
-// Rename WordPress Directives from:
-// - `wp-some-directive` to `someDirective`.
-// - `wp-some-prefix:some-directive` to `somePrefix`.
-export const rename = ( name ) =>
-	name
-		.toLowerCase()
-		.replace( /^wp-/, '' )
-		.replace( /:.*/, '' )
-		.replace( /-(.)/g, ( _, chr ) => chr.toUpperCase() );
-
-// Add some support for suffixes and modifiers. See the tests file.
-export const value = ( name, val ) => {
-	if ( ! name.includes( ':' ) ) return val;
-	return {
-		name: rename( name ),
-		suffix: name.substring( name.indexOf( ':' ) + 1 ),
-		value: val,
-	};
-};
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index c99e5080089f21..c04b3c163be9cd 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -23,65 +23,74 @@ import { createRootFragment, idle } from './utils';
  * Directives
  */
 // wp-log
-directive( 'log', ( { log } ) => {
-	useEffect( () => {
-		// eslint-disable-next-line no-console
-		console.log( log );
-	}, [ log ] );
+directive( 'log', ( { directives: { log } } ) => {
+	Object.values( log ).forEach( ( expression ) => {
+		useEffect( () => {
+			// eslint-disable-next-line no-console
+			console.log( expression );
+		}, [ expression ] );
+	} );
 } );
 
 // wp-context
 const ctx = createContext( [ {}, () => ( {} ) ] );
-directive( 'context', ( { context: initialContext }, { children } ) => {
-	const [ context, setContext ] = useState( initialContext );
+directive( 'context', ( { directives: { context }, props: { children } } ) => {
+	const [ contextValue, setContext ] = useState( context.default );
 	const setMergedContext = ( newContext ) => {
-		setContext( { ...context, ...newContext } );
+		setContext( { ...contextValue, ...newContext } );
 	};
 	return (
-		<ctx.Provider value={ [ context, setMergedContext ] }>
+		<ctx.Provider value={ [ contextValue, setMergedContext ] }>
 			{ children }
 		</ctx.Provider>
 	);
 } );
 
 // wp-effect
-directive( 'effect', ( { effect } ) => {
+directive( 'effect', ( { directives: { effect } } ) => {
 	const [ context, setContext ] = useContext( ctx );
-	useEffect( () => {
-		const cb = eval( `(${ effect })` );
-		cb( { context, setContext } );
+	Object.values( effect ).forEach( ( expression ) => {
+		useEffect( () => {
+			const cb = eval( `(${ expression })` );
+			cb( { context, setContext } );
+		} );
 	} );
 } );
 
 // wp-init
-directive( 'init', ( { init }, _, { ref } ) => {
+directive( 'init', ( { directives: { init }, element } ) => {
 	const [ context, setContext ] = useContext( ctx );
-	useEffect( () => {
-		const cb = eval( `(${ init })` );
-		cb( { context, setContext, ref: ref.current } );
-	}, [] );
+	Object.values( init ).forEach( ( expression ) => {
+		useEffect( () => {
+			const cb = eval( `(${ expression })` );
+			cb( { context, setContext, ref: element.ref.current } );
+		}, [] );
+	} );
 } );
 
 // wp-on:[event]
-directive( 'on', ( { on: { suffix, value } }, _, { element } ) => {
+directive( 'on', ( { directives: { on }, element } ) => {
 	const [ context, setContext ] = useContext( ctx );
-
-	element.props[ `on${ suffix }` ] = ( event ) => {
-		const cb = eval( `(${ value })` );
-		cb( { context, setContext, event } );
-	};
+	Object.entries( on ).forEach( ( [ name, expression ] ) => {
+		element.props[ `on${ name }` ] = ( event ) => {
+			const cb = eval( `(${ expression })` );
+			cb( { context, setContext, event } );
+		};
+	} );
 } );
 
 // wp-class:[event]
-directive( 'class', ( { class: { suffix, value } }, _, { element } ) => {
+directive( 'class', ( { directives: { class: className }, element } ) => {
 	const [ context, setContext ] = useContext( ctx );
-
-	const cb = eval( `(${ value })` );
-	const result = cb( { context, setContext } );
-
-	if ( ! result ) element.props.class.replace( suffix, '' );
-	else if ( ! element.props.class.includes( suffix ) )
-		element.props.class += ` ${ suffix }`;
+	Object.keys( className )
+		.filter( ( n ) => n !== 'default' )
+		.forEach( ( name ) => {
+			const cb = eval( `(${ className[ name ] })` );
+			const result = cb( { context, setContext } );
+			if ( ! result ) element.props.class.replace( name, '' );
+			else if ( ! element.props.class.includes( name ) )
+				element.props.class += ` ${ name }`;
+		} );
 } );
 
 /**

From 7d868f992ebbb2faafa5fa1b27f3be0ad9bea7fd Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Fri, 30 Sep 2022 15:35:09 +0200
Subject: [PATCH 14/27] Remove wp-log

It's not really needed, we just added previously to test things
---
 packages/block-library/src/navigation/view.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index c04b3c163be9cd..20f580a7af4013 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -22,16 +22,6 @@ import { createRootFragment, idle } from './utils';
 /**
  * Directives
  */
-// wp-log
-directive( 'log', ( { directives: { log } } ) => {
-	Object.values( log ).forEach( ( expression ) => {
-		useEffect( () => {
-			// eslint-disable-next-line no-console
-			console.log( expression );
-		}, [ expression ] );
-	} );
-} );
-
 // wp-context
 const ctx = createContext( [ {}, () => ( {} ) ] );
 directive( 'context', ( { directives: { context }, props: { children } } ) => {

From d85c56b6e6fad576fb10d9fc4c9023899a9a18d7 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Fri, 30 Sep 2022 16:00:12 +0200
Subject: [PATCH 15/27] Fix variable typo

---
 packages/block-library/src/navigation/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index faecb4dfed6516..e1fa14eb5ab5a2 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -643,7 +643,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		'<button 
 			wp-on:click="function({ setContext }) { setContext({ open: true, previousElementWithFocus: document.activeElement }); }" 
 			wp-effect:on-open="function({ context }) { context.open && context.firstMenuElement.focus(); }" 
-			wp-effect:on-close="function({ context }) { context.close && context.previousElementWithFocus.focus(); }" 
+			wp-effect:on-close="function({ context }) { !context.open && context.previousElementWithFocus && context.previousElementWithFocus.focus(); }" 
 			aria-haspopup="true" 
 			%3$s 
 			class="%6$s"

From 9309a918cd35b3659a45d20729225c2f133acd67 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Fri, 30 Sep 2022 16:42:59 +0200
Subject: [PATCH 16/27] Rename directive props to directive args

---
 packages/block-library/src/navigation/directives.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/directives.js
index 9c43a2d5232ac3..9beb7455575249 100644
--- a/packages/block-library/src/navigation/directives.js
+++ b/packages/block-library/src/navigation/directives.js
@@ -16,10 +16,10 @@ const WpDirective = ( { type, wp, props: originalProps } ) => {
 	const ref = useRef( null );
 	const element = h( type, { ...originalProps, ref, _wrapped: true } );
 	const props = { ...originalProps, children: element };
-	const directiveProps = { directives: wp, props, element };
+	const directiveArgs = { directives: wp, props, element };
 
 	for ( const d in wp ) {
-		const wrapper = directives[ d ]?.( directiveProps );
+		const wrapper = directives[ d ]?.( directiveArgs );
 		if ( wrapper !== undefined ) props.children = wrapper;
 	}
 

From 265763e7d4b2ededde589c348b0bd10fc8174edf Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 16:05:43 +0200
Subject: [PATCH 17/27] Switch to signals

---
 package-lock.json                             | 14 +++++
 packages/block-library/package.json           |  1 +
 .../src/navigation/deep-signal.js             | 61 +++++++++++++++++++
 .../block-library/src/navigation/index.php    |  9 ++-
 packages/block-library/src/navigation/view.js | 50 ++++++---------
 5 files changed, 99 insertions(+), 36 deletions(-)
 create mode 100644 packages/block-library/src/navigation/deep-signal.js

diff --git a/package-lock.json b/package-lock.json
index 0486f91bbb0592..bea9bb81b0fc9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8113,6 +8113,19 @@
 			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
 			"integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw=="
 		},
+		"@preact/signals": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@preact/signals/-/signals-1.1.1.tgz",
+			"integrity": "sha512-I1DhYo2d1t9qDkEq1jYDVTQdBGmo4NlqatNEtulsS/87kVdwhZluP6TTDS4/5sc2h86TlBF6UA6LO+tDpIt/Gw==",
+			"requires": {
+				"@preact/signals-core": "^1.2.0"
+			}
+		},
+		"@preact/signals-core": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.2.1.tgz",
+			"integrity": "sha512-aqzRMNFU1hoQyP4Kb1ldJrUTCnA9vqPDa7qHEQzHJ3upnBOcC2pjmvjAuTqGuY4AVTtUkCQV0FvOCuIQQ2hSdA=="
+		},
 		"@reach/router": {
 			"version": "1.3.4",
 			"resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz",
@@ -17373,6 +17386,7 @@
 			"version": "file:packages/block-library",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
+				"@preact/signals": "^1.1.1",
 				"@wordpress/a11y": "file:packages/a11y",
 				"@wordpress/api-fetch": "file:packages/api-fetch",
 				"@wordpress/autop": "file:packages/autop",
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index e2ea3a3e8bec75..cf38570458963b 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -31,6 +31,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@preact/signals": "^1.1.1",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/autop": "file:../autop",
diff --git a/packages/block-library/src/navigation/deep-signal.js b/packages/block-library/src/navigation/deep-signal.js
new file mode 100644
index 00000000000000..5ef29ae0dd7db8
--- /dev/null
+++ b/packages/block-library/src/navigation/deep-signal.js
@@ -0,0 +1,61 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable no-undef */
+/**
+ * External dependencies
+ */
+import { signal } from '@preact/signals';
+
+const proxyToSignals = new WeakMap();
+const objToProxy = new WeakMap();
+const knownSymbols = new Set(
+	Object.getOwnPropertyNames( Symbol )
+		.map( ( key ) => Symbol[ key ] )
+		.filter( ( value ) => typeof value === 'symbol' )
+);
+const builtIns = new Set( [ Object, Array ] );
+const shouldWrap = ( { constructor } ) => {
+	const isBuiltIn =
+		typeof constructor === 'function' &&
+		constructor.name in globalThis &&
+		globalThis[ constructor.name ] === constructor;
+	return ! isBuiltIn || builtIns.has( constructor );
+};
+
+export const deepSignal = ( obj ) => new Proxy( obj, handlers );
+export const options = { returnSignal: /^\$/ };
+
+const handlers = {
+	get( target, prop, receiver ) {
+		if ( typeof prop === 'symbol' && knownSymbols.has( prop ) )
+			return Reflect.get( target, prop, receiver );
+		const returnSignal = options.returnSignal.test( prop );
+		const key = returnSignal
+			? prop.replace( options.returnSignal, '' )
+			: prop;
+		if ( ! proxyToSignals.has( receiver ) )
+			proxyToSignals.set( receiver, new Map() );
+		const signals = proxyToSignals.get( receiver );
+		if ( ! signals.has( key ) ) {
+			let val = Reflect.get( target, key, receiver );
+			if ( typeof val === 'object' && val !== null && shouldWrap( val ) )
+				val = new Proxy( val, handlers );
+			signals.set( key, signal( val ) );
+		}
+		return returnSignal ? signals.get( key ) : signals.get( key ).value;
+	},
+
+	set( target, prop, val, receiver ) {
+		let internal = val;
+		if ( typeof val === 'object' && val !== null && shouldWrap( val ) ) {
+			if ( ! objToProxy.has( val ) )
+				objToProxy.set( val, new Proxy( val, handlers ) );
+			internal = objToProxy.get( val );
+		}
+		if ( ! proxyToSignals.has( receiver ) )
+			proxyToSignals.set( receiver, new Map() );
+		const signals = proxyToSignals.get( receiver );
+		if ( ! signals.has( prop ) ) signals.set( prop, signal( internal ) );
+		else signals.get( prop ).value = internal;
+		return Reflect.set( target, prop, val, receiver );
+	},
+};
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index e1fa14eb5ab5a2..d40dd885668f4d 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -570,7 +570,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		if (!$is_first_item) {
 			$w = new WP_HTML_Tag_Processor($inner_block_content);
 			$w->next_tag('a');
-			$w->set_attribute('wp-init', 'function({ setContext, ref }) { setContext({ firstMenuElement: ref }); }');	
+			$w->set_attribute('wp-effect', 'function({ context, ref }) { context.firstMenuElement = ref; }');	
 			$inner_block_content = (string) $w;
 			$is_first_item = true;
 		}
@@ -641,8 +641,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_markup = sprintf(
 		'<button 
-			wp-on:click="function({ setContext }) { setContext({ open: true, previousElementWithFocus: document.activeElement }); }" 
-			wp-effect:on-open="function({ context }) { context.open && context.firstMenuElement.focus(); }" 
+			wp-on:click="function({ context }) { context.open = true; context.previousElementWithFocus = document.activeElement; }" 
+			wp-effect:on-open="async function({ context, tick }) { if (context.open) { await tick(); context.firstMenuElement.focus(); } }" 
 			wp-effect:on-close="function({ context }) { !context.open && context.previousElementWithFocus && context.previousElementWithFocus.focus(); }" 
 			aria-haspopup="true" 
 			%3$s 
@@ -652,7 +652,6 @@ class="%6$s"
 		</button>
 		<div 
 			class="%5$s" 
-			wp-effect="function({ context }) { console.log(context); }"
 			wp-class:is-menu-open="function({ context }) { return context.open; }"
 			wp-class:has-modal-open="function({ context }) { return context.open; }"
 			style="%7$s" 
@@ -660,7 +659,7 @@ class="%5$s"
 		>
 			<div class="wp-block-navigation__responsive-close" tabindex="-1">
 				<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
-					<button wp-on:click="function({ setContext }) { setContext({ open: false }); }" %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
+					<button wp-on:click="function({ context }) { context.open = false; }" %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
 					<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 					%2$s
 					</div>
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 20f580a7af4013..4e2cc6e6be6c58 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -10,7 +10,8 @@
  */
 import 'preact/debug';
 import { h, hydrate, createContext } from 'preact';
-import { useState, useEffect, useContext } from 'preact/hooks';
+import { useContext, useMemo } from 'preact/hooks';
+import { useSignalEffect } from '@preact/signals';
 
 /**
  * Internal dependencies
@@ -18,65 +19,52 @@ import { useState, useEffect, useContext } from 'preact/hooks';
 import toVdom from './vdom';
 import { directive } from './directives';
 import { createRootFragment, idle } from './utils';
+import { deepSignal } from './deep-signal';
 
 /**
  * Directives
  */
+const ctx = createContext( {} );
+const raf = window.requestAnimationFrame;
+// Until useSignalEffects is fixed: https://github.com/preactjs/signals/issues/228
+const tick = () => new Promise( ( r ) => raf( () => raf( r ) ) );
+
 // wp-context
-const ctx = createContext( [ {}, () => ( {} ) ] );
 directive( 'context', ( { directives: { context }, props: { children } } ) => {
-	const [ contextValue, setContext ] = useState( context.default );
-	const setMergedContext = ( newContext ) => {
-		setContext( { ...contextValue, ...newContext } );
-	};
-	return (
-		<ctx.Provider value={ [ contextValue, setMergedContext ] }>
-			{ children }
-		</ctx.Provider>
-	);
+	const signals = useMemo( () => deepSignal( context.default ), [] );
+	return <ctx.Provider value={ signals }>{ children }</ctx.Provider>;
 } );
 
 // wp-effect
-directive( 'effect', ( { directives: { effect } } ) => {
-	const [ context, setContext ] = useContext( ctx );
+directive( 'effect', ( { directives: { effect }, element } ) => {
+	const context = useContext( ctx );
 	Object.values( effect ).forEach( ( expression ) => {
-		useEffect( () => {
+		useSignalEffect( () => {
 			const cb = eval( `(${ expression })` );
-			cb( { context, setContext } );
+			cb( { context, tick, ref: element.ref.current } );
 		} );
 	} );
 } );
 
-// wp-init
-directive( 'init', ( { directives: { init }, element } ) => {
-	const [ context, setContext ] = useContext( ctx );
-	Object.values( init ).forEach( ( expression ) => {
-		useEffect( () => {
-			const cb = eval( `(${ expression })` );
-			cb( { context, setContext, ref: element.ref.current } );
-		}, [] );
-	} );
-} );
-
 // wp-on:[event]
 directive( 'on', ( { directives: { on }, element } ) => {
-	const [ context, setContext ] = useContext( ctx );
+	const context = useContext( ctx );
 	Object.entries( on ).forEach( ( [ name, expression ] ) => {
 		element.props[ `on${ name }` ] = ( event ) => {
 			const cb = eval( `(${ expression })` );
-			cb( { context, setContext, event } );
+			cb( { context, event } );
 		};
 	} );
 } );
 
-// wp-class:[event]
+// wp-class:[classname]
 directive( 'class', ( { directives: { class: className }, element } ) => {
-	const [ context, setContext ] = useContext( ctx );
+	const context = useContext( ctx );
 	Object.keys( className )
 		.filter( ( n ) => n !== 'default' )
 		.forEach( ( name ) => {
 			const cb = eval( `(${ className[ name ] })` );
-			const result = cb( { context, setContext } );
+			const result = cb( { context } );
 			if ( ! result ) element.props.class.replace( name, '' );
 			else if ( ! element.props.class.includes( name ) )
 				element.props.class += ` ${ name }`;

From 1b244bbcbe25c86ec827806cd5b984a77bea6dbf Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 16:07:24 +0200
Subject: [PATCH 18/27] Don't enqueue view-modal

---
 packages/block-library/src/navigation/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index d40dd885668f4d..fe0dda54de9a1e 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -428,7 +428,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'];
 	if ( $should_load_modal_view_script ) {
-		wp_enqueue_script( 'wp-block-navigation-view-modal' );
+		// wp_enqueue_script( 'wp-block-navigation-view-modal' );
 	}
 
 	$inner_blocks = $block->inner_blocks;

From fa5c532600c11f7bec02e572ad46a79438e570f0 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 16:34:09 +0200
Subject: [PATCH 19/27] Add preliminary support for components

---
 packages/block-library/src/navigation/directives.js | 13 +++++++++++++
 packages/block-library/src/navigation/index.php     |  2 +-
 packages/block-library/src/navigation/view.js       | 13 +++++++++----
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/directives.js
index 9beb7455575249..ee768ae910b629 100644
--- a/packages/block-library/src/navigation/directives.js
+++ b/packages/block-library/src/navigation/directives.js
@@ -12,6 +12,14 @@ export const directive = ( name, cb ) => {
 	directives[ name ] = cb;
 };
 
+// WordPress Components.
+const components = {};
+
+// Expose function to add directives.
+export const component = ( name, Comp ) => {
+	components[ name ] = Comp;
+};
+
 const WpDirective = ( { type, wp, props: originalProps } ) => {
 	const ref = useRef( null );
 	const element = h( type, { ...originalProps, ref, _wrapped: true } );
@@ -28,8 +36,13 @@ const WpDirective = ( { type, wp, props: originalProps } ) => {
 
 const old = options.vnode;
 options.vnode = ( vnode ) => {
+	const type = vnode.type;
 	const wp = vnode.props.wp;
 
+	if ( typeof type === 'string' && type.startsWith( 'wp-' ) ) {
+		vnode.type = components[ type ];
+	}
+
 	if ( wp ) {
 		const props = vnode.props;
 		delete props.wp;
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index fe0dda54de9a1e..dbb0931ba9b7b8 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -679,7 +679,7 @@ class="%5$s"
 	);
 
 	return sprintf(
-		'<nav %1$s wp-context=\'{"open": false}\'>%2$s</nav>',
+		'<wp-context data=\'{"open": false}\'><nav %1$s >%2$s</nav></wp-context>',
 		$wrapper_attributes,
 		$responsive_container_markup
 	);
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 4e2cc6e6be6c58..c61ff888d4e748 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -17,18 +17,23 @@ import { useSignalEffect } from '@preact/signals';
  * Internal dependencies
  */
 import toVdom from './vdom';
-import { directive } from './directives';
+import { directive, component } from './directives';
 import { createRootFragment, idle } from './utils';
 import { deepSignal } from './deep-signal';
 
-/**
- * Directives
- */
 const ctx = createContext( {} );
 const raf = window.requestAnimationFrame;
 // Until useSignalEffects is fixed: https://github.com/preactjs/signals/issues/228
 const tick = () => new Promise( ( r ) => raf( () => raf( r ) ) );
 
+// COMPONENTS
+const WpContext = ( { children, data } ) => {
+	const signals = useMemo( () => deepSignal( JSON.parse( data ) ), [] );
+	return <ctx.Provider value={ signals }>{ children }</ctx.Provider>;
+};
+component( 'wp-context', WpContext );
+
+// DIRECTIVES
 // wp-context
 directive( 'context', ( { directives: { context }, props: { children } } ) => {
 	const signals = useMemo( () => deepSignal( context.default ), [] );

From 221ea02fb10e2cb25d4198b50fda7df9a85c59f2 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 16:35:28 +0200
Subject: [PATCH 20/27] Rename directives file

---
 packages/block-library/src/navigation/view.js                   | 2 +-
 packages/block-library/src/navigation/{directives.js => wpx.js} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/block-library/src/navigation/{directives.js => wpx.js} (100%)

diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index c61ff888d4e748..621579fb50d7f3 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -17,7 +17,7 @@ import { useSignalEffect } from '@preact/signals';
  * Internal dependencies
  */
 import toVdom from './vdom';
-import { directive, component } from './directives';
+import { directive, component } from './wpx';
 import { createRootFragment, idle } from './utils';
 import { deepSignal } from './deep-signal';
 
diff --git a/packages/block-library/src/navigation/directives.js b/packages/block-library/src/navigation/wpx.js
similarity index 100%
rename from packages/block-library/src/navigation/directives.js
rename to packages/block-library/src/navigation/wpx.js

From 21d937ea6b5176b7148dcb4ef6f824a9eb1c0d76 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 16:57:38 +0200
Subject: [PATCH 21/27] Move context to wpx file

---
 packages/block-library/src/navigation/view.js | 39 ++++++++++++-------
 packages/block-library/src/navigation/wpx.js  |  8 +++-
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 621579fb50d7f3..67377ff288810c 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -9,7 +9,7 @@
  * External dependencies
  */
 import 'preact/debug';
-import { h, hydrate, createContext } from 'preact';
+import { h, hydrate } from 'preact';
 import { useContext, useMemo } from 'preact/hooks';
 import { useSignalEffect } from '@preact/signals';
 
@@ -21,39 +21,48 @@ import { directive, component } from './wpx';
 import { createRootFragment, idle } from './utils';
 import { deepSignal } from './deep-signal';
 
-const ctx = createContext( {} );
 const raf = window.requestAnimationFrame;
 // Until useSignalEffects is fixed: https://github.com/preactjs/signals/issues/228
 const tick = () => new Promise( ( r ) => raf( () => raf( r ) ) );
 
 // COMPONENTS
-const WpContext = ( { children, data } ) => {
+const WpContext = ( { children, data, context: { Provider } } ) => {
 	const signals = useMemo( () => deepSignal( JSON.parse( data ) ), [] );
-	return <ctx.Provider value={ signals }>{ children }</ctx.Provider>;
+	return <Provider value={ signals }>{ children }</Provider>;
 };
 component( 'wp-context', WpContext );
 
 // DIRECTIVES
 // wp-context
-directive( 'context', ( { directives: { context }, props: { children } } ) => {
+directive(
+	'context',
+	( {
+		directives: { context },
+		props: { children },
+		context: { Provider },
+	} ) => {
 	const signals = useMemo( () => deepSignal( context.default ), [] );
-	return <ctx.Provider value={ signals }>{ children }</ctx.Provider>;
-} );
+		return <Provider value={ signals }>{ children }</Provider>;
+	}
+);
 
 // wp-effect
-directive( 'effect', ( { directives: { effect }, element } ) => {
-	const context = useContext( ctx );
+directive(
+	'effect',
+	( { directives: { effect }, element, context: mainContext } ) => {
+		const context = useContext( mainContext );
 	Object.values( effect ).forEach( ( expression ) => {
 		useSignalEffect( () => {
 			const cb = eval( `(${ expression })` );
 			cb( { context, tick, ref: element.ref.current } );
 		} );
 	} );
-} );
+	}
+);
 
 // wp-on:[event]
-directive( 'on', ( { directives: { on }, element } ) => {
-	const context = useContext( ctx );
+directive( 'on', ( { directives: { on }, element, context: mainContext } ) => {
+	const context = useContext( mainContext );
 	Object.entries( on ).forEach( ( [ name, expression ] ) => {
 		element.props[ `on${ name }` ] = ( event ) => {
 			const cb = eval( `(${ expression })` );
@@ -63,8 +72,10 @@ directive( 'on', ( { directives: { on }, element } ) => {
 } );
 
 // wp-class:[classname]
-directive( 'class', ( { directives: { class: className }, element } ) => {
-	const context = useContext( ctx );
+directive(
+	'class',
+	( { directives: { class: className }, element, context: mainContext } ) => {
+		const context = useContext( mainContext );
 	Object.keys( className )
 		.filter( ( n ) => n !== 'default' )
 		.forEach( ( name ) => {
diff --git a/packages/block-library/src/navigation/wpx.js b/packages/block-library/src/navigation/wpx.js
index ee768ae910b629..b894a734ca1bbe 100644
--- a/packages/block-library/src/navigation/wpx.js
+++ b/packages/block-library/src/navigation/wpx.js
@@ -2,7 +2,10 @@
  * External dependencies
  */
 import { useRef } from 'preact/hooks';
-import { h, options } from 'preact';
+import { h, options, createContext } from 'preact';
+
+// Main context
+const context = createContext( {} );
 
 // WordPress Directives.
 const directives = {};
@@ -24,7 +27,7 @@ const WpDirective = ( { type, wp, props: originalProps } ) => {
 	const ref = useRef( null );
 	const element = h( type, { ...originalProps, ref, _wrapped: true } );
 	const props = { ...originalProps, children: element };
-	const directiveArgs = { directives: wp, props, element };
+	const directiveArgs = { directives: wp, props, element, context };
 
 	for ( const d in wp ) {
 		const wrapper = directives[ d ]?.( directiveArgs );
@@ -41,6 +44,7 @@ options.vnode = ( vnode ) => {
 
 	if ( typeof type === 'string' && type.startsWith( 'wp-' ) ) {
 		vnode.type = components[ type ];
+		vnode.props.context = context;
 	}
 
 	if ( wp ) {

From d0db1e81f943a93648064abda826c34755167eb4 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 16:58:09 +0200
Subject: [PATCH 22/27] Add wp-bind:attr directive

---
 .../block-library/src/navigation/index.php    |  1 +
 packages/block-library/src/navigation/view.js | 47 ++++++++++++-------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index dbb0931ba9b7b8..383203b932127b 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -654,6 +654,7 @@ class="%6$s"
 			class="%5$s" 
 			wp-class:is-menu-open="function({ context }) { return context.open; }"
 			wp-class:has-modal-open="function({ context }) { return context.open; }"
+			wp-bind:aria-hidden="function({ context }) { return context.open ? false : true; }"
 			style="%7$s" 
 			id="%1$s"
 		>
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 67377ff288810c..21c0396a8075a7 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -41,7 +41,7 @@ directive(
 		props: { children },
 		context: { Provider },
 	} ) => {
-	const signals = useMemo( () => deepSignal( context.default ), [] );
+		const signals = useMemo( () => deepSignal( context.default ), [] );
 		return <Provider value={ signals }>{ children }</Provider>;
 	}
 );
@@ -51,12 +51,12 @@ directive(
 	'effect',
 	( { directives: { effect }, element, context: mainContext } ) => {
 		const context = useContext( mainContext );
-	Object.values( effect ).forEach( ( expression ) => {
-		useSignalEffect( () => {
-			const cb = eval( `(${ expression })` );
-			cb( { context, tick, ref: element.ref.current } );
+		Object.values( effect ).forEach( ( expression ) => {
+			useSignalEffect( () => {
+				const cb = eval( `(${ expression })` );
+				cb( { context, tick, ref: element.ref.current } );
+			} );
 		} );
-	} );
 	}
 );
 
@@ -76,16 +76,31 @@ directive(
 	'class',
 	( { directives: { class: className }, element, context: mainContext } ) => {
 		const context = useContext( mainContext );
-	Object.keys( className )
-		.filter( ( n ) => n !== 'default' )
-		.forEach( ( name ) => {
-			const cb = eval( `(${ className[ name ] })` );
-			const result = cb( { context } );
-			if ( ! result ) element.props.class.replace( name, '' );
-			else if ( ! element.props.class.includes( name ) )
-				element.props.class += ` ${ name }`;
-		} );
-} );
+		Object.keys( className )
+			.filter( ( n ) => n !== 'default' )
+			.forEach( ( name ) => {
+				const cb = eval( `(${ className[ name ] })` );
+				const result = cb( { context } );
+				if ( ! result ) element.props.class.replace( name, '' );
+				else if ( ! element.props.class.includes( name ) )
+					element.props.class += ` ${ name }`;
+			} );
+	}
+);
+
+// wp-bind:[attribute]
+directive(
+	'bind',
+	( { directives: { bind }, element, context: mainContext } ) => {
+		const context = useContext( mainContext );
+		Object.entries( bind )
+			.filter( ( n ) => n !== 'default' )
+			.forEach( ( [ attribute, expression ] ) => {
+				const cb = eval( `(${ expression })` );
+				element.props[ attribute ] = cb( { context } );
+			} );
+	}
+);
 
 /**
  * Initialize the initial vDOM.

From 42e4612dbfbc8aaac0ca570a31e3ea49f8ad9d29 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 17:06:46 +0200
Subject: [PATCH 23/27] Deep signal: Add all the supported arrays

---
 .../block-library/src/navigation/deep-signal.js  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/navigation/deep-signal.js b/packages/block-library/src/navigation/deep-signal.js
index 5ef29ae0dd7db8..3ccb623ff4511f 100644
--- a/packages/block-library/src/navigation/deep-signal.js
+++ b/packages/block-library/src/navigation/deep-signal.js
@@ -12,13 +12,25 @@ const knownSymbols = new Set(
 		.map( ( key ) => Symbol[ key ] )
 		.filter( ( value ) => typeof value === 'symbol' )
 );
-const builtIns = new Set( [ Object, Array ] );
+const supported = new Set( [
+	Object,
+	Array,
+	Int8Array,
+	Uint8Array,
+	Uint8ClampedArray,
+	Int16Array,
+	Uint16Array,
+	Int32Array,
+	Uint32Array,
+	Float32Array,
+	Float64Array,
+] );
 const shouldWrap = ( { constructor } ) => {
 	const isBuiltIn =
 		typeof constructor === 'function' &&
 		constructor.name in globalThis &&
 		globalThis[ constructor.name ] === constructor;
-	return ! isBuiltIn || builtIns.has( constructor );
+	return ! isBuiltIn || supported.has( constructor );
 };
 
 export const deepSignal = ( obj ) => new Proxy( obj, handlers );

From 62e46a472c3638cfee79fd023937bcd2fd416f84 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 17:11:24 +0200
Subject: [PATCH 24/27] Move stuff to utils

---
 .../src/navigation/deep-signal.js             | 32 +++----------------
 .../block-library/src/navigation/utils.js     | 29 +++++++++++++++++
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/packages/block-library/src/navigation/deep-signal.js b/packages/block-library/src/navigation/deep-signal.js
index 3ccb623ff4511f..707cb56da79dc8 100644
--- a/packages/block-library/src/navigation/deep-signal.js
+++ b/packages/block-library/src/navigation/deep-signal.js
@@ -1,37 +1,15 @@
-// eslint-disable-next-line eslint-comments/disable-enable-pair
-/* eslint-disable no-undef */
 /**
  * External dependencies
  */
 import { signal } from '@preact/signals';
 
+/**
+ * Internal dependencies
+ */
+import { knownSymbols, shouldWrap } from './utils';
+
 const proxyToSignals = new WeakMap();
 const objToProxy = new WeakMap();
-const knownSymbols = new Set(
-	Object.getOwnPropertyNames( Symbol )
-		.map( ( key ) => Symbol[ key ] )
-		.filter( ( value ) => typeof value === 'symbol' )
-);
-const supported = new Set( [
-	Object,
-	Array,
-	Int8Array,
-	Uint8Array,
-	Uint8ClampedArray,
-	Int16Array,
-	Uint16Array,
-	Int32Array,
-	Uint32Array,
-	Float32Array,
-	Float64Array,
-] );
-const shouldWrap = ( { constructor } ) => {
-	const isBuiltIn =
-		typeof constructor === 'function' &&
-		constructor.name in globalThis &&
-		globalThis[ constructor.name ] === constructor;
-	return ! isBuiltIn || supported.has( constructor );
-};
 
 export const deepSignal = ( obj ) => new Proxy( obj, handlers );
 export const options = { returnSignal: /^\$/ };
diff --git a/packages/block-library/src/navigation/utils.js b/packages/block-library/src/navigation/utils.js
index 4719eaef73986c..c46e1ee6c5ec94 100644
--- a/packages/block-library/src/navigation/utils.js
+++ b/packages/block-library/src/navigation/utils.js
@@ -1,3 +1,6 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable no-undef */
+
 // For wrapperless hydration of document.body.
 // See https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c
 export const createRootFragment = ( parent, replaceNode ) => {
@@ -22,3 +25,29 @@ export const createRootFragment = ( parent, replaceNode ) => {
 // Helper function to await until the CPU is idle.
 export const idle = () =>
 	new Promise( ( resolve ) => window.requestIdleCallback( resolve ) );
+
+export const knownSymbols = new Set(
+	Object.getOwnPropertyNames( Symbol )
+		.map( ( key ) => Symbol[ key ] )
+		.filter( ( value ) => typeof value === 'symbol' )
+);
+const supported = new Set( [
+	Object,
+	Array,
+	Int8Array,
+	Uint8Array,
+	Uint8ClampedArray,
+	Int16Array,
+	Uint16Array,
+	Int32Array,
+	Uint32Array,
+	Float32Array,
+	Float64Array,
+] );
+export const shouldWrap = ( { constructor } ) => {
+	const isBuiltIn =
+		typeof constructor === 'function' &&
+		constructor.name in globalThis &&
+		globalThis[ constructor.name ] === constructor;
+	return ! isBuiltIn || supported.has( constructor );
+};

From d54ab569dbbe9a7bd8e03faa1c7adcbd13768ec4 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 17:40:17 +0200
Subject: [PATCH 25/27] Refactor to wpx folder

---
 packages/block-library/src/navigation/view.js | 119 +-----------------
 .../src/navigation/wpx/components.js          |  23 ++++
 .../src/navigation/{ => wpx}/deep-signal.js   |   0
 .../src/navigation/wpx/directives.js          | 101 +++++++++++++++
 .../src/navigation/{wpx.js => wpx/hooks.js}   |   8 +-
 .../block-library/src/navigation/wpx/index.js |  34 +++++
 .../src/navigation/{ => wpx}/utils.js         |   0
 .../src/navigation/{ => wpx}/vdom.js          |   0
 8 files changed, 163 insertions(+), 122 deletions(-)
 create mode 100644 packages/block-library/src/navigation/wpx/components.js
 rename packages/block-library/src/navigation/{ => wpx}/deep-signal.js (100%)
 create mode 100644 packages/block-library/src/navigation/wpx/directives.js
 rename packages/block-library/src/navigation/{wpx.js => wpx/hooks.js} (94%)
 create mode 100644 packages/block-library/src/navigation/wpx/index.js
 rename packages/block-library/src/navigation/{ => wpx}/utils.js (100%)
 rename packages/block-library/src/navigation/{ => wpx}/vdom.js (100%)

diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 21c0396a8075a7..2bb1ebb6060176 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -1,121 +1,6 @@
-// eslint-disable-next-line eslint-comments/disable-enable-pair
-/* eslint-disable jsdoc/check-tag-names */
-// eslint-disable-next-line eslint-comments/disable-enable-pair
-/* eslint-disable no-eval */
-
-/** @jsx h */
-
-/**
- * External dependencies
- */
-import 'preact/debug';
-import { h, hydrate } from 'preact';
-import { useContext, useMemo } from 'preact/hooks';
-import { useSignalEffect } from '@preact/signals';
-
 /**
  * Internal dependencies
  */
-import toVdom from './vdom';
-import { directive, component } from './wpx';
-import { createRootFragment, idle } from './utils';
-import { deepSignal } from './deep-signal';
-
-const raf = window.requestAnimationFrame;
-// Until useSignalEffects is fixed: https://github.com/preactjs/signals/issues/228
-const tick = () => new Promise( ( r ) => raf( () => raf( r ) ) );
-
-// COMPONENTS
-const WpContext = ( { children, data, context: { Provider } } ) => {
-	const signals = useMemo( () => deepSignal( JSON.parse( data ) ), [] );
-	return <Provider value={ signals }>{ children }</Provider>;
-};
-component( 'wp-context', WpContext );
-
-// DIRECTIVES
-// wp-context
-directive(
-	'context',
-	( {
-		directives: { context },
-		props: { children },
-		context: { Provider },
-	} ) => {
-		const signals = useMemo( () => deepSignal( context.default ), [] );
-		return <Provider value={ signals }>{ children }</Provider>;
-	}
-);
-
-// wp-effect
-directive(
-	'effect',
-	( { directives: { effect }, element, context: mainContext } ) => {
-		const context = useContext( mainContext );
-		Object.values( effect ).forEach( ( expression ) => {
-			useSignalEffect( () => {
-				const cb = eval( `(${ expression })` );
-				cb( { context, tick, ref: element.ref.current } );
-			} );
-		} );
-	}
-);
-
-// wp-on:[event]
-directive( 'on', ( { directives: { on }, element, context: mainContext } ) => {
-	const context = useContext( mainContext );
-	Object.entries( on ).forEach( ( [ name, expression ] ) => {
-		element.props[ `on${ name }` ] = ( event ) => {
-			const cb = eval( `(${ expression })` );
-			cb( { context, event } );
-		};
-	} );
-} );
-
-// wp-class:[classname]
-directive(
-	'class',
-	( { directives: { class: className }, element, context: mainContext } ) => {
-		const context = useContext( mainContext );
-		Object.keys( className )
-			.filter( ( n ) => n !== 'default' )
-			.forEach( ( name ) => {
-				const cb = eval( `(${ className[ name ] })` );
-				const result = cb( { context } );
-				if ( ! result ) element.props.class.replace( name, '' );
-				else if ( ! element.props.class.includes( name ) )
-					element.props.class += ` ${ name }`;
-			} );
-	}
-);
-
-// wp-bind:[attribute]
-directive(
-	'bind',
-	( { directives: { bind }, element, context: mainContext } ) => {
-		const context = useContext( mainContext );
-		Object.entries( bind )
-			.filter( ( n ) => n !== 'default' )
-			.forEach( ( [ attribute, expression ] ) => {
-				const cb = eval( `(${ expression })` );
-				element.props[ attribute ] = cb( { context } );
-			} );
-	}
-);
-
-/**
- * Initialize the initial vDOM.
- */
-document.addEventListener( 'DOMContentLoaded', async () => {
-	// Create the root fragment to hydrate everything.
-	const rootFragment = createRootFragment(
-		document.documentElement,
-		document.body
-	);
-
-	await idle(); // Wait until the CPU is idle to do the hydration.
-	const vdom = toVdom( document.body );
-	hydrate( vdom, rootFragment );
+import init from './wpx';
 
-	// eslint-disable-next-line no-console
-	console.log( 'hydrated!' );
-} );
+init();
diff --git a/packages/block-library/src/navigation/wpx/components.js b/packages/block-library/src/navigation/wpx/components.js
new file mode 100644
index 00000000000000..3cfc473775414b
--- /dev/null
+++ b/packages/block-library/src/navigation/wpx/components.js
@@ -0,0 +1,23 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable jsdoc/check-tag-names */
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import { h } from 'preact';
+import { useMemo } from 'preact/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { deepSignal } from './deep-signal';
+import { component } from './hooks';
+
+export default () => {
+	const WpContext = ( { children, data, context: { Provider } } ) => {
+		const signals = useMemo( () => deepSignal( JSON.parse( data ) ), [] );
+		return <Provider value={ signals }>{ children }</Provider>;
+	};
+	component( 'wp-context', WpContext );
+};
diff --git a/packages/block-library/src/navigation/deep-signal.js b/packages/block-library/src/navigation/wpx/deep-signal.js
similarity index 100%
rename from packages/block-library/src/navigation/deep-signal.js
rename to packages/block-library/src/navigation/wpx/deep-signal.js
diff --git a/packages/block-library/src/navigation/wpx/directives.js b/packages/block-library/src/navigation/wpx/directives.js
new file mode 100644
index 00000000000000..97244305f61430
--- /dev/null
+++ b/packages/block-library/src/navigation/wpx/directives.js
@@ -0,0 +1,101 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable jsdoc/check-tag-names */
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable no-eval */
+
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import { h } from 'preact';
+import { useContext, useMemo } from 'preact/hooks';
+import { useSignalEffect } from '@preact/signals';
+
+/**
+ * Internal dependencies
+ */
+import { directive } from './hooks';
+import { deepSignal } from './deep-signal';
+
+const raf = window.requestAnimationFrame;
+// Until useSignalEffects is fixed: https://github.com/preactjs/signals/issues/228
+const tick = () => new Promise( ( r ) => raf( () => raf( r ) ) );
+
+export default () => {
+	// wp-context
+	directive(
+		'context',
+		( {
+			directives: { context },
+			props: { children },
+			context: { Provider },
+		} ) => {
+			const signals = useMemo( () => deepSignal( context.default ), [] );
+			return <Provider value={ signals }>{ children }</Provider>;
+		}
+	);
+
+	// wp-effect
+	directive(
+		'effect',
+		( { directives: { effect }, element, context: mainContext } ) => {
+			const context = useContext( mainContext );
+			Object.values( effect ).forEach( ( expression ) => {
+				useSignalEffect( () => {
+					const cb = eval( `(${ expression })` );
+					cb( { context, tick, ref: element.ref.current } );
+				} );
+			} );
+		}
+	);
+
+	// wp-on:[event]
+	directive(
+		'on',
+		( { directives: { on }, element, context: mainContext } ) => {
+			const context = useContext( mainContext );
+			Object.entries( on ).forEach( ( [ name, expression ] ) => {
+				element.props[ `on${ name }` ] = ( event ) => {
+					const cb = eval( `(${ expression })` );
+					cb( { context, event } );
+				};
+			} );
+		}
+	);
+
+	// wp-class:[classname]
+	directive(
+		'class',
+		( {
+			directives: { class: className },
+			element,
+			context: mainContext,
+		} ) => {
+			const context = useContext( mainContext );
+			Object.keys( className )
+				.filter( ( n ) => n !== 'default' )
+				.forEach( ( name ) => {
+					const cb = eval( `(${ className[ name ] })` );
+					const result = cb( { context } );
+					if ( ! result ) element.props.class.replace( name, '' );
+					else if ( ! element.props.class.includes( name ) )
+						element.props.class += ` ${ name }`;
+				} );
+		}
+	);
+
+	// wp-bind:[attribute]
+	directive(
+		'bind',
+		( { directives: { bind }, element, context: mainContext } ) => {
+			const context = useContext( mainContext );
+			Object.entries( bind )
+				.filter( ( n ) => n !== 'default' )
+				.forEach( ( [ attribute, expression ] ) => {
+					const cb = eval( `(${ expression })` );
+					element.props[ attribute ] = cb( { context } );
+				} );
+		}
+	);
+};
diff --git a/packages/block-library/src/navigation/wpx.js b/packages/block-library/src/navigation/wpx/hooks.js
similarity index 94%
rename from packages/block-library/src/navigation/wpx.js
rename to packages/block-library/src/navigation/wpx/hooks.js
index b894a734ca1bbe..72e4429d4af44c 100644
--- a/packages/block-library/src/navigation/wpx.js
+++ b/packages/block-library/src/navigation/wpx/hooks.js
@@ -1,28 +1,25 @@
 /**
  * External dependencies
  */
-import { useRef } from 'preact/hooks';
 import { h, options, createContext } from 'preact';
+import { useRef } from 'preact/hooks';
 
 // Main context
 const context = createContext( {} );
 
 // WordPress Directives.
 const directives = {};
-
-// Expose function to add directives.
 export const directive = ( name, cb ) => {
 	directives[ name ] = cb;
 };
 
 // WordPress Components.
 const components = {};
-
-// Expose function to add directives.
 export const component = ( name, Comp ) => {
 	components[ name ] = Comp;
 };
 
+// Directive wrapper.
 const WpDirective = ( { type, wp, props: originalProps } ) => {
 	const ref = useRef( null );
 	const element = h( type, { ...originalProps, ref, _wrapped: true } );
@@ -37,6 +34,7 @@ const WpDirective = ( { type, wp, props: originalProps } ) => {
 	return props.children;
 };
 
+// Preact Options Hook called each time a vnode is created.
 const old = options.vnode;
 options.vnode = ( vnode ) => {
 	const type = vnode.type;
diff --git a/packages/block-library/src/navigation/wpx/index.js b/packages/block-library/src/navigation/wpx/index.js
new file mode 100644
index 00000000000000..aee5d67c424fee
--- /dev/null
+++ b/packages/block-library/src/navigation/wpx/index.js
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { hydrate } from 'preact';
+
+/**
+ * Internal dependencies
+ */
+import registerDirectives from './directives';
+import registerComponents from './components';
+import toVdom from './vdom';
+import { createRootFragment, idle } from './utils';
+
+/**
+ * Initialize the initial vDOM.
+ */
+export default () =>
+	document.addEventListener( 'DOMContentLoaded', async () => {
+		registerDirectives();
+		registerComponents();
+
+		// Create the root fragment to hydrate everything.
+		const rootFragment = createRootFragment(
+			document.documentElement,
+			document.body
+		);
+
+		await idle(); // Wait until the CPU is idle to do the hydration.
+		const vdom = toVdom( document.body );
+		hydrate( vdom, rootFragment );
+
+		// eslint-disable-next-line no-console
+		console.log( 'hydrated!' );
+	} );
diff --git a/packages/block-library/src/navigation/utils.js b/packages/block-library/src/navigation/wpx/utils.js
similarity index 100%
rename from packages/block-library/src/navigation/utils.js
rename to packages/block-library/src/navigation/wpx/utils.js
diff --git a/packages/block-library/src/navigation/vdom.js b/packages/block-library/src/navigation/wpx/vdom.js
similarity index 100%
rename from packages/block-library/src/navigation/vdom.js
rename to packages/block-library/src/navigation/wpx/vdom.js

From 4c82fbde9ce5b8416b671012ec0bfc169adf1742 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 18:26:01 +0200
Subject: [PATCH 26/27] Move function to JS file to avoid eval

---
 .../block-library/src/navigation/index.php    | 16 ++++----
 packages/block-library/src/navigation/view.js | 32 +++++++++++++++-
 .../src/navigation/wpx/directives.js          | 15 ++++----
 .../block-library/src/navigation/wpx/index.js | 37 +++++++++++--------
 .../block-library/src/navigation/wpx/utils.js | 24 ++++++++++++
 5 files changed, 91 insertions(+), 33 deletions(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 383203b932127b..5ad48944a941c4 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -570,7 +570,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		if (!$is_first_item) {
 			$w = new WP_HTML_Tag_Processor($inner_block_content);
 			$w->next_tag('a');
-			$w->set_attribute('wp-effect', 'function({ context, ref }) { context.firstMenuElement = ref; }');	
+			$w->set_attribute('wp-effect', 'core.navigation.addFirstElementToContext');	
 			$inner_block_content = (string) $w;
 			$is_first_item = true;
 		}
@@ -641,9 +641,9 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_markup = sprintf(
 		'<button 
-			wp-on:click="function({ context }) { context.open = true; context.previousElementWithFocus = document.activeElement; }" 
-			wp-effect:on-open="async function({ context, tick }) { if (context.open) { await tick(); context.firstMenuElement.focus(); } }" 
-			wp-effect:on-close="function({ context }) { !context.open && context.previousElementWithFocus && context.previousElementWithFocus.focus(); }" 
+			wp-on:click="core.navigation.openMenu" 
+			wp-effect:on-open="core.navigation.focusFirstElement" 
+			wp-effect:on-close="core.navigation.focusLastFocusedElement" 
 			aria-haspopup="true" 
 			%3$s 
 			class="%6$s"
@@ -652,15 +652,15 @@ class="%6$s"
 		</button>
 		<div 
 			class="%5$s" 
-			wp-class:is-menu-open="function({ context }) { return context.open; }"
-			wp-class:has-modal-open="function({ context }) { return context.open; }"
-			wp-bind:aria-hidden="function({ context }) { return context.open ? false : true; }"
+			wp-class:is-menu-open="core.navigation.isMenuOpen"
+			wp-class:has-modal-open="core.navigation.isMenuOpen"
+			wp-bind:aria-hidden="core.navigation.isMenuClosed"
 			style="%7$s" 
 			id="%1$s"
 		>
 			<div class="wp-block-navigation__responsive-close" tabindex="-1">
 				<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
-					<button wp-on:click="function({ context }) { context.open = false; }" %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
+					<button wp-on:click="core.navigation.closeMenu" %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
 					<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 					%2$s
 					</div>
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 2bb1ebb6060176..31e5b0e74e4340 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -1,6 +1,34 @@
 /**
  * Internal dependencies
  */
-import init from './wpx';
+import wpx from './wpx';
 
-init();
+wpx( {
+	core: {
+		navigation: {
+			openMenu: ( { context } ) => {
+				context.open = true;
+				context.previousElementWithFocus =
+					window.document.activeElement;
+			},
+			closeMenu: ( { context } ) => {
+				context.open = false;
+			},
+			isMenuOpen: ( { context } ) => context.open,
+			isMenuClosed: ( { context } ) => ! context.open,
+			addFirstElementToContext: ( { context, ref } ) => {
+				context.firstMenuElement = ref;
+			},
+			focusFirstElement: async ( { context, tick } ) => {
+				if ( context.open ) {
+					await tick(); // We need to wait until the DOM is updated.
+					context.firstMenuElement.focus();
+				}
+			},
+			focusLastFocusedElement: ( { context } ) => {
+				if ( ! context.open && context.previousElementWithFocus )
+					context.previousElementWithFocus.focus();
+			},
+		},
+	},
+} );
diff --git a/packages/block-library/src/navigation/wpx/directives.js b/packages/block-library/src/navigation/wpx/directives.js
index 97244305f61430..3f90f03520e484 100644
--- a/packages/block-library/src/navigation/wpx/directives.js
+++ b/packages/block-library/src/navigation/wpx/directives.js
@@ -17,6 +17,7 @@ import { useSignalEffect } from '@preact/signals';
  */
 import { directive } from './hooks';
 import { deepSignal } from './deep-signal';
+import { getCallback } from './utils';
 
 const raf = window.requestAnimationFrame;
 // Until useSignalEffects is fixed: https://github.com/preactjs/signals/issues/228
@@ -41,9 +42,9 @@ export default () => {
 		'effect',
 		( { directives: { effect }, element, context: mainContext } ) => {
 			const context = useContext( mainContext );
-			Object.values( effect ).forEach( ( expression ) => {
+			Object.values( effect ).forEach( ( callback ) => {
 				useSignalEffect( () => {
-					const cb = eval( `(${ expression })` );
+					const cb = getCallback( callback );
 					cb( { context, tick, ref: element.ref.current } );
 				} );
 			} );
@@ -55,9 +56,9 @@ export default () => {
 		'on',
 		( { directives: { on }, element, context: mainContext } ) => {
 			const context = useContext( mainContext );
-			Object.entries( on ).forEach( ( [ name, expression ] ) => {
+			Object.entries( on ).forEach( ( [ name, callback ] ) => {
 				element.props[ `on${ name }` ] = ( event ) => {
-					const cb = eval( `(${ expression })` );
+					const cb = getCallback( callback );
 					cb( { context, event } );
 				};
 			} );
@@ -76,7 +77,7 @@ export default () => {
 			Object.keys( className )
 				.filter( ( n ) => n !== 'default' )
 				.forEach( ( name ) => {
-					const cb = eval( `(${ className[ name ] })` );
+					const cb = getCallback( className[ name ] );
 					const result = cb( { context } );
 					if ( ! result ) element.props.class.replace( name, '' );
 					else if ( ! element.props.class.includes( name ) )
@@ -92,8 +93,8 @@ export default () => {
 			const context = useContext( mainContext );
 			Object.entries( bind )
 				.filter( ( n ) => n !== 'default' )
-				.forEach( ( [ attribute, expression ] ) => {
-					const cb = eval( `(${ expression })` );
+				.forEach( ( [ attribute, callback ] ) => {
+					const cb = getCallback( callback );
 					element.props[ attribute ] = cb( { context } );
 				} );
 		}
diff --git a/packages/block-library/src/navigation/wpx/index.js b/packages/block-library/src/navigation/wpx/index.js
index aee5d67c424fee..f09b2c787c2075 100644
--- a/packages/block-library/src/navigation/wpx/index.js
+++ b/packages/block-library/src/navigation/wpx/index.js
@@ -9,26 +9,31 @@ import { hydrate } from 'preact';
 import registerDirectives from './directives';
 import registerComponents from './components';
 import toVdom from './vdom';
-import { createRootFragment, idle } from './utils';
+import { createRootFragment, idle, deepMerge } from './utils';
 
 /**
  * Initialize the initial vDOM.
  */
-export default () =>
-	document.addEventListener( 'DOMContentLoaded', async () => {
-		registerDirectives();
-		registerComponents();
+document.addEventListener( 'DOMContentLoaded', async () => {
+	registerDirectives();
+	registerComponents();
 
-		// Create the root fragment to hydrate everything.
-		const rootFragment = createRootFragment(
-			document.documentElement,
-			document.body
-		);
+	// Create the root fragment to hydrate everything.
+	const rootFragment = createRootFragment(
+		document.documentElement,
+		document.body
+	);
 
-		await idle(); // Wait until the CPU is idle to do the hydration.
-		const vdom = toVdom( document.body );
-		hydrate( vdom, rootFragment );
+	await idle(); // Wait until the CPU is idle to do the hydration.
+	const vdom = toVdom( document.body );
+	hydrate( vdom, rootFragment );
 
-		// eslint-disable-next-line no-console
-		console.log( 'hydrated!' );
-	} );
+	// eslint-disable-next-line no-console
+	console.log( 'hydrated!' );
+} );
+
+window.wpx = window.wpx || {};
+
+export default ( block ) => {
+	deepMerge( window.wpx, block );
+};
diff --git a/packages/block-library/src/navigation/wpx/utils.js b/packages/block-library/src/navigation/wpx/utils.js
index c46e1ee6c5ec94..89875a093aed39 100644
--- a/packages/block-library/src/navigation/wpx/utils.js
+++ b/packages/block-library/src/navigation/wpx/utils.js
@@ -51,3 +51,27 @@ export const shouldWrap = ( { constructor } ) => {
 		globalThis[ constructor.name ] === constructor;
 	return ! isBuiltIn || supported.has( constructor );
 };
+
+// Deep Merge
+const isObject = ( item ) =>
+	item && typeof item === 'object' && ! Array.isArray( item );
+
+export const deepMerge = ( target, source ) => {
+	if ( isObject( target ) && isObject( source ) ) {
+		for ( const key in source ) {
+			if ( isObject( source[ key ] ) ) {
+				if ( ! target[ key ] ) Object.assign( target, { [ key ]: {} } );
+				deepMerge( target[ key ], source[ key ] );
+			} else {
+				Object.assign( target, { [ key ]: source[ key ] } );
+			}
+		}
+	}
+};
+
+// Get callback.
+export const getCallback = ( path ) => {
+	let current = window.wpx;
+	path.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );
+	return current;
+};

From b2e0e6a4c9373c0f8d01e7da241ba8f54354de6d Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 3 Oct 2022 18:31:07 +0200
Subject: [PATCH 27/27] Namespace navigation context

---
 .../block-library/src/navigation/index.php    |  2 +-
 packages/block-library/src/navigation/view.js | 30 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 5ad48944a941c4..9c594696f94463 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -680,7 +680,7 @@ class="%5$s"
 	);
 
 	return sprintf(
-		'<wp-context data=\'{"open": false}\'><nav %1$s >%2$s</nav></wp-context>',
+		'<wp-context data=\'{"navigation": {"open": false}}\'><nav %1$s >%2$s</nav></wp-context>',
 		$wrapper_attributes,
 		$responsive_container_markup
 	);
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 31e5b0e74e4340..916732f6dedeac 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -6,28 +6,28 @@ import wpx from './wpx';
 wpx( {
 	core: {
 		navigation: {
-			openMenu: ( { context } ) => {
-				context.open = true;
-				context.previousElementWithFocus =
+			openMenu: ( { context: { navigation } } ) => {
+				navigation.open = true;
+				navigation.previousElementWithFocus =
 					window.document.activeElement;
 			},
-			closeMenu: ( { context } ) => {
-				context.open = false;
+			closeMenu: ( { context: { navigation } } ) => {
+				navigation.open = false;
 			},
-			isMenuOpen: ( { context } ) => context.open,
-			isMenuClosed: ( { context } ) => ! context.open,
-			addFirstElementToContext: ( { context, ref } ) => {
-				context.firstMenuElement = ref;
+			isMenuOpen: ( { context: { navigation } } ) => navigation.open,
+			isMenuClosed: ( { context: { navigation } } ) => ! navigation.open,
+			addFirstElementToContext: ( { context: { navigation }, ref } ) => {
+				navigation.firstMenuElement = ref;
 			},
-			focusFirstElement: async ( { context, tick } ) => {
-				if ( context.open ) {
+			focusFirstElement: async ( { context: { navigation }, tick } ) => {
+				if ( navigation.open ) {
 					await tick(); // We need to wait until the DOM is updated.
-					context.firstMenuElement.focus();
+					navigation.firstMenuElement.focus();
 				}
 			},
-			focusLastFocusedElement: ( { context } ) => {
-				if ( ! context.open && context.previousElementWithFocus )
-					context.previousElementWithFocus.focus();
+			focusLastFocusedElement: ( { context: { navigation } } ) => {
+				if ( ! navigation.open && navigation.previousElementWithFocus )
+					navigation.previousElementWithFocus.focus();
 			},
 		},
 	},