refactored interactivity-router-2f43f8

Author: juanmaguitar

plugins/interactivity-router-2f43f8/_playground/export.xml

@@ -75,22 +75,22 @@
 
 		<item>
 			<title><![CDATA[The Beatles]]></title>
-			<link>https://whats-new-2.wp.local/</link>
+			<link>/</link>
 			<pubDate>Sat, 29 Nov 2025 18:49:56 +0000</pubDate>
 			<dc:creator><![CDATA[admin]]></dc:creator>
-			<guid isPermaLink="false">https://whats-new-2.wp.local/?page_id=134</guid>
+			<guid isPermaLink="false">/?page_id=134</guid>
 			<description></description>
 			<content:encoded><![CDATA[<!-- wp:block-development-examples/interactivity-router-2f43f8 -->
 <div class="wp-block-block-development-examples-interactivity-router-2f43f8"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column -->
 <div class="wp-block-column"><!-- wp:image {"id":138,"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full"><img src="https://whats-new-2.wp.local/wp-content/uploads/2025/11/image-2.png" alt="" class="wp-image-138"/></figure>
+<figure class="wp-block-image size-full"><img src="/wp-content/uploads/2025/11/image-2.png" alt="" class="wp-image-138"/></figure>
 <!-- /wp:image --></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:paragraph -->
-<p><strong>The Beatles</strong>&nbsp;were an English&nbsp;rock&nbsp;band formed in&nbsp;Liverpool&nbsp;in 1960. The core lineup of the band comprised&nbsp;<a href="https://whats-new-2.wp.local/john-lennon/" data-type="post" data-id="5">John Lennon</a>,&nbsp;<a href="https://whats-new-2.wp.local/paul-mccartney/" data-type="post" data-id="125">Paul McCartney</a>,&nbsp;<a href="https://whats-new-2.wp.local/george-harrison/" data-type="post" data-id="126">George Harrison</a>&nbsp;and&nbsp;<a href="https://whats-new-2.wp.local/ringo-starr/" data-type="post" data-id="122">Ringo Starr</a>. </p>
+<p><strong>The Beatles</strong>&nbsp;were an English&nbsp;rock&nbsp;band formed in&nbsp;Liverpool&nbsp;in 1960. The core lineup of the band comprised&nbsp;<a href="/john-lennon/" data-type="post" data-id="5">John Lennon</a>,&nbsp;<a href="/paul-mccartney/" data-type="post" data-id="125">Paul McCartney</a>,&nbsp;<a href="/george-harrison/" data-type="post" data-id="126">George Harrison</a>&nbsp;and&nbsp;<a href="/ringo-starr/" data-type="post" data-id="122">Ringo Starr</a>. </p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>
@@ -126,7 +126,7 @@ https://youtu.be/rblYSKz_VnI?si=15Dz5qCfl0WQbHPa
 			</wp:postmeta>
 			<wp:postmeta>
 				<wp:meta_key><![CDATA[_wp_page_template]]></wp:meta_key>
-				<wp:meta_value><![CDATA[simple-template]]></wp:meta_value>
+				<wp:meta_value><![CDATA[bde-2f43f8//minimal-homepage]]></wp:meta_value>
 			</wp:postmeta>
 		</item>
 
@@ -216,7 +216,7 @@ Commenter avatars come from <a href="https://gravatar.com/">Gravatar</a>.]]></wp
 			<guid isPermaLink="false">/?p=4</guid>
 			<description></description>
 			<content:encoded><![CDATA[<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:block-development-examples/interactivity-router-2f43f8 {"next":"/john-lennon", "prev":"/"} -->
+<div class="wp-block-group"><!-- wp:block-development-examples/interactivity-router-2f43f8 {"next":"/john-lennon"} -->
 <div class="wp-block-block-development-examples-interactivity-router-2f43f8"><!-- wp:columns {"isStackedOnMobile":false} -->
 <div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column -->
 <div class="wp-block-column"><!-- wp:image {"id":30,"sizeSlug":"large","linkDestination":"none"} -->

plugins/interactivity-router-2f43f8/_playground/images/the-beatles.png

@@ -12,33 +12,62 @@
  */
 
 $base_url = get_site_url();
+wp_interactivity_state(
+	'router-2f43f8',
+	array(
+		'prev'        => $attributes['prev'],
+		'next'        => $attributes['next'],
+		'currentSlug' => get_post_field( 'post_name', get_post() ),
+		'slugs'       => array(
+			'paul-mccartney|Paul',
+			'john-lennon|John',
+			'george-harrison|George',
+			'ringo-starr|Ringo',
+		),
+	)
+);
 ?>
 <div
 	<?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>
 	data-wp-interactive="router-2f43f8"
 	data-wp-router-region="region-example-2f43f8"
+	data-wp-watch--newPage="callbacks.newPage"
 >
-
+	<a href="/">🏠 Start Page</a>
 		<p><em>Displaying region "region-example-2f43f8" from <a data-wp-bind--href="state.urlRegionDisplay" data-wp-text="state.urlRegionDisplay"></a></em></p>
-		<div class="box-content">
-			<?php echo wp_kses_post( $content ); ?>
-		</div>
-		<p><small><em>Click "Next" (or "Prev") to get more info from other pages (without a page reload)</em></small></p>
-		<nav>
-			<?php if ( isset( $attributes['prev'] ) ) : ?>
+		<ul class="beatles-links">
+			<template data-wp-each="state.slugs">
+				<li><a 
+				data-wp-on--click="actions.navigate"
+				data-wp-text="state.itemName"
+				data-wp-bind--href="state.itemSlug"
+				data-wp-class--current="state.isCurrentSlug"
+				></a></li>
+			</template>
+		</ul>
+		<p data-wp-bind--hidden="state.areNavigationLinksVisible"><small><em>Click "Next" (or "Prev") to get more info from other pages (without a page reload)</em></small></p>
+		<p data-wp-bind--hidden="!state.areNavigationLinksVisible"><small><em>Click on any of the beatles names (links) to start the navigation</em></small></p>
+		
+		<nav class="navigation-links">
 				<a
+					class="navigation-link-prev"
+					data-wp-bind--hidden="!state.prev"
 					data-wp-on--click="actions.navigate"
-					href="<?php echo esc_url( $base_url . esc_attr( $attributes['prev'] ) ); ?>"
+					data-wp-bind--href="state.prev"
 				>&lt; Prev</a>
-			<?php endif; ?>
-			<?php if ( isset( $attributes['next'] ) ) : ?>
 				<a
+					class="navigation-link-next"
+					data-wp-bind--hidden="!state.next"
 					data-wp-on--click="actions.navigate"
-					href="<?php echo esc_url( $base_url . esc_attr( $attributes['next'] ) ); ?>"
+					data-wp-bind--href="state.next"
 				>Next &gt;</a>
-			<?php endif; ?>
 		</nav>
 
+		<div class="box-content">
+			<?php echo wp_kses_post( $content ); ?>
+		</div>
+
+		
 		<div class="debug-info">
 			<p>block (region in display) attributes: <code style="text-align: left;">
 				<?php echo wp_json_encode( $attributes ); ?>

plugins/interactivity-router-2f43f8/build/index.js

@@ -1 +1 @@
-<?php return array('dependencies' => array('@wordpress/interactivity', array('id' => '@wordpress/interactivity-router', 'import' => 'dynamic')), 'version' => '7e7c26b8e69522c016bd', 'type' => 'module');
+<?php return array('dependencies' => array('@wordpress/interactivity', array('id' => '@wordpress/interactivity-router', 'import' => 'dynamic')), 'version' => 'ddc3aea312f07cd92ede', 'type' => 'module');