WordPress · DAreRodz · Apr 22, 2024 · Mar 5, 2024 · Mar 5, 2024 · Mar 5, 2024
@@ -28,6 +28,9 @@ function gutenberg_enable_experiments() {
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 		wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' );
 	}
+	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
+		wp_add_inline_script( 'wp-block-library', 'window.__experimentalFullPageClientSideNavigation = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

@@ -0,0 +1,60 @@
+<?php
+/**
+ * Registers full page client-side navigation option using the Interactivity API and adds the necessary directives.
+ */
+
+/**
+ * Enqueue the interactivity router script.
+ */
+function _gutenberg_enqueue_interactivity_router() {
+	// Set the navigation mode to full page client-side navigation.
+	wp_interactivity_config( 'core/router', array( 'navigationMode' => 'fullPage' ) );
+	wp_enqueue_script_module( '@wordpress/interactivity-router' );
+}
+
+add_action( 'wp_enqueue_scripts', '_gutenberg_enqueue_interactivity_router' );
+
+/**
+ * Set enhancedPagination attribute for query loop when the experiment is enabled.
+ *
+ * @param array $parsed_block The parsed block.
+ *
+ * @return array The same parsed block with the modified attribute.
+ */
+function _gutenberg_add_enhanced_pagination_to_query_block( $parsed_block ) {
+	if ( 'core/query' !== $parsed_block['blockName'] ) {
+		return $parsed_block;
+	}
+
+	$parsed_block['attrs']['enhancedPagination'] = true;
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', '_gutenberg_add_enhanced_pagination_to_query_block' );
+
+/**
+ * Add directives to all links.
+ *
+ * Note: This should probably be done per site, not by default when this option is enabled.
+ *
+ * @param array $content The block content.
+ *
+ * @return array The same block content with the directives needed.
+ */
+function _gutenberg_add_client_side_navigation_directives( $content ) {
+	$p = new WP_HTML_Tag_Processor( $content );
+	while ( $p->next_tag( array( 'tag_name' => 'a' ) ) ) {
+		if ( empty( $p->get_attribute( 'data-wp-on--click' ) ) ) {
+			$p->set_attribute( 'data-wp-on--click', 'core/router::actions.navigate' );
+		}
+		if ( empty( $p->get_attribute( 'data-wp-on--mouseenter' ) ) ) {
+			$p->set_attribute( 'data-wp-on--mouseenter', 'core/router::actions.prefetch' );
+		}
+	}
+	// Hack to add the necessary directives to the body tag.
+	// TODO: Find a proper way to add directives to the body tag.
+	return (string) $p . '<body data-wp-interactive="core/experimental" data-wp-context="{}">';
-	return (string) $p . '<body data-wp-interactive="core/experimental" data-wp-context="{}">';
+	static $body_interactive_added;
+	if ( ! $body_interactive_added ) {
+		$body_interactive_added = true;
+		return (string) $p . '<body data-wp-interactive="core/experimental" data-wp-context="{}">';
+	}
+
+	return (string) $p;
-	return (string) $p . '<body data-wp-interactive="core/experimental" data-wp-context="{}">';
+	static $body_interactive_added;
+	if ( ! $body_interactive_added ) {
+		$body_interactive_added = true;
+		return (string) $p . '<body data-wp-interactive="core/experimental" data-wp-context="{}">';
+	}
+
+	return (string) $p;
+}
+
+// TODO: Explore moving this to the server directive processing.
+add_filter( 'render_block', '_gutenberg_add_client_side_navigation_directives' );
@@ -127,6 +127,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-full-page-client-side-navigation',
+		__( 'Enable full page client-side navigation', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable full page client-side navigation using the Interactivity API', 'gutenberg' ),
+			'id'    => 'gutenberg-full-page-client-side-navigation',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

@@ -192,6 +192,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/demo.php';
 require __DIR__ . '/experiments-page.php';
 require __DIR__ . '/interactivity-api.php';
+if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
+	require __DIR__ . '/experimental/full-page-client-side-navigation.php';
+}
 
 // Copied package PHP files.
 if ( is_dir( __DIR__ . '/../build/style-engine' ) ) {

@@ -27,7 +27,11 @@ export default function EnhancedPaginationModal( {
 		useUnsupportedBlocks( clientId );
 
 	useEffect( () => {
-		if ( enhancedPagination && hasUnsupportedBlocks ) {
+		if (
+			enhancedPagination &&
+			hasUnsupportedBlocks &&
+			! window.__experimentalFullPageClientSideNavigation
+		) {
 			setAttributes( { enhancedPagination: false } );
 			setOpen( true );
 		}

@@ -15,9 +15,13 @@ export default function EnhancedPaginationControl( {
 	clientId,
 } ) {
 	const { hasUnsupportedBlocks } = useUnsupportedBlocks( clientId );
+	const fullPageClientSideNavigation =
+		window.__experimentalFullPageClientSideNavigation;
 
 	let help = __( 'Browsing between pages requires a full page reload.' );
-	if ( enhancedPagination ) {
+	if ( fullPageClientSideNavigation ) {
+		help = __( 'Full page client-side navigation enabled.' );
+	} else if ( enhancedPagination ) {
 		help = __(
 			"Browsing between pages won't require a full page reload, unless non-compatible blocks are detected."
 		);
@@ -32,8 +36,12 @@ export default function EnhancedPaginationControl( {
 			<ToggleControl
 				label={ __( 'Force page reload' ) }
 				help={ help }
-				checked={ ! enhancedPagination }
-				disabled={ hasUnsupportedBlocks }
+				checked={
+					! enhancedPagination && ! fullPageClientSideNavigation
+				}
+				disabled={
+					hasUnsupportedBlocks || fullPageClientSideNavigation
+				}
 				onChange={ ( value ) => {
 					setAttributes( {
 						enhancedPagination: ! value,

@@ -51,8 +51,8 @@ function render_block_core_query( $attributes, $content, $block ) {
 			// Add the necessary directives.
 			$p->set_attribute( 'data-wp-interactive', 'core/query' );
 			$p->set_attribute( 'data-wp-router-region', 'query-' . $attributes['queryId'] );
-			$p->set_attribute( 'data-wp-init', 'callbacks.setQueryRef' );
 			$p->set_attribute( 'data-wp-context', '{}' );
+			$p->set_attribute( 'data-wp-key', $attributes['queryId'] );
 			$content = $p->get_updated_html();
 		}
 	}

diff --git a/packages/interactivity-router/src/head.js b/packages/interactivity-router/src/head.js
@@ -0,0 +1,91 @@
+/**
+ * Helper to update only the necessary tags in the head.
+ *
+ * @async
+ * @param {Array} newHead The head elements of the new page.
+ *
+ */
+export const updateHead = async ( newHead ) => {
+	// Helper to get the tag id store in the cache.
+	const getTagId = ( tag ) => tag.id || tag.outerHTML;
+
+	// Map incoming head tags by their content.
+	const newHeadMap = new Map();
+	for ( const child of newHead ) {
+		newHeadMap.set( getTagId( child ), child );
+	}
+
+	const toRemove = [];
+
+	// Detect nodes that should be added or removed.
+	for ( const child of document.head.children ) {
+		const id = getTagId( child );
+		// Always remove styles and links as they might change.
+		if ( child.nodeName === 'LINK' || child.nodeName === 'STYLE' )
+			toRemove.push( child );
+		else if ( newHeadMap.has( id ) ) newHeadMap.delete( id );
+		else if ( child.nodeName !== 'SCRIPT' && child.nodeName !== 'META' )
+			toRemove.push( child );
+	}
+
+	// Prepare new assets.
+	const toAppend = [ ...newHeadMap.values() ];
+
+	// Apply the changes.
+	toRemove.forEach( ( n ) => n.remove() );
+	document.head.append( ...toAppend );
+};
+
+/**
+ * Fetches and processes head assets (stylesheets and scripts) from a specified document.
+ *
+ * @async
+ * @param {Document} document     The document from which to fetch head assets. It should support standard DOM querying methods.
+ * @param {Map}      headElements A map of head elements to modify tracking the URLs of already processed assets to avoid duplicates.
+ *
+ * @return {HTMLElement[]} Returns an array of HTML elements representing the head assets.
+ */
+export const fetchHeadAssets = async ( document, headElements ) => {
+	const headTags = [];
+	const assets = [
+		{
+			tagName: 'style',
+			selector: 'link[rel=stylesheet]',
+			attribute: 'href',
+		},
+		{ tagName: 'script', selector: 'script[src]', attribute: 'src' },
+	];
+	for ( const asset of assets ) {
+		const { tagName, selector, attribute } = asset;
+		const tags = document.querySelectorAll( selector );
+
+		// Use Promise.all to wait for fetch to complete
+		await Promise.all(
+			Array.from( tags ).map( async ( tag ) => {
+				const attributeValue = tag.getAttribute( attribute );
+				if ( ! headElements.has( attributeValue ) ) {
+					const response = await fetch( attributeValue );
+					const text = await response.text();
+					headElements.set( attributeValue, {
+						tag,
+						text,
+					} );
+				}
+
+				const headElement = headElements.get( attributeValue );
+				const element = document.createElement( tagName );
+				element.innerText = headElement.text;
+				for ( const attr of headElement.tag.attributes ) {
+					element.setAttribute( attr.name, attr.value );
+				}
+				headTags.push( element );
+			} )
+		);
+	}
+
+	return [
+		document.querySelector( 'title' ),
+		...document.querySelectorAll( 'style' ),
+		...headTags,
+	];
+};