[Proof of concept] Portals API + Navigation block

packages/block-library/src/navigation/index.php

@@ -268,6 +268,7 @@ function( $block ) {
 	if ( empty( $inner_blocks ) ) {
 		return '';
 	}
+
 	$colors     = block_core_navigation_build_css_colors( $attributes );
 	$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
 	$classes    = array_merge(

packages/block-library/src/navigation/view.js

@@ -95,3 +95,58 @@ window.onload = () =>
 		onClose: navigationToggleModal,
 		openClass: 'is-menu-open',
 	} );
+
+function createPortals() {
+	const pageLinks = document.querySelectorAll(
+		'nav.wp-block-navigation ul a'
+	);
+	const siteLink = document.querySelector( 'h1.wp-block-site-title a' );
+	const links = [ ...pageLinks, siteLink ];
+
+	for ( const el of links ) {
+		// Don't create the portal for the current page
+		if ( el.href === window.location.href ) continue;
+
+		const portal = document.createElement( 'portal' );
+		portal.src = el.href;
+		portal.hidden = true;
+
+		document.body.append( portal );
+
+		el.onclick = async ( ev ) => {
+			ev.preventDefault();
+			portal.hidden = false;
+
+			try {
+				await portal.activate();
+			} catch {
+				// If the portal activation fails, do a normal navigation
+				portal.hidden = true;
+				window.location.href = el.href;
+			}
+		};
+	}
+}
+
+if ( 'HTMLPortalElement' in window ) {
+	// window.portalHost would be set in a page that was opened in a portal
+	if ( ! window.portalHost ) {
+		window.addEventListener( 'DOMContentLoaded', () => {
+			createPortals();
+		} );
+	} else {
+		// We are on the portaled page, so we should wait for the portal to be
+		// activated before creating the portals, otherwise we would end up with
+		// infinitely nested portals.
+		window.addEventListener( 'portalactivate', () => {
+			createPortals();
+		} );
+	}
+} else {
+	window.addEventListener( 'load', () => {
+		document.body.innerHTML = `Your browser version does not support the Portals API. 
+		Use the latest version of Google Chrome and go to 
+		<a href="chrome://flags/#enable-portals"> chrome://flags/#enable-portals </a> to enable them
+		(copy-paste the link, clicking does not work)`;
+	} );
+}