From ce52446f38a1b19e94e6b2e9273bb95d050695ae Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Wed, 5 Jun 2024 18:10:16 -0400
Subject: [PATCH] Theme previewer: Update back button to navigate all the way
 back to the theme details page.

---
 .../wporg-themes-2024/src/theme-previewer/render.php   | 10 ++++++++++
 .../wporg-themes-2024/src/theme-previewer/view.js      | 10 +++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/source/wp-content/themes/wporg-themes-2024/src/theme-previewer/render.php b/source/wp-content/themes/wporg-themes-2024/src/theme-previewer/render.php
index 9261e8c..0fd3426 100644
--- a/source/wp-content/themes/wporg-themes-2024/src/theme-previewer/render.php
+++ b/source/wp-content/themes/wporg-themes-2024/src/theme-previewer/render.php
@@ -89,6 +89,16 @@
 
 $content = $html->get_updated_html();
 
+// Recreate the processor to grab the back button.
+// See https://developer.wordpress.org/reference/classes/wp_html_tag_processor/#finding-tags
+$html = new WP_HTML_Tag_Processor( $content );
+while ( $html->next_tag( [ 'class_name' => 'wporg-theme-preview__back' ] ) ) {
+	$html->next_tag( 'a' );
+	$html->set_attribute( 'data-wp-on--click', 'wporg/themes/preview::actions.goBack' );
+}
+
+$content = $html->get_updated_html();
+
 $markup = sprintf( $markup, $content, esc_url_raw( $url ) );
 
 ?>
diff --git a/source/wp-content/themes/wporg-themes-2024/src/theme-previewer/view.js b/source/wp-content/themes/wporg-themes-2024/src/theme-previewer/view.js
index 445662f..20abb4b 100644
--- a/source/wp-content/themes/wporg-themes-2024/src/theme-previewer/view.js
+++ b/source/wp-content/themes/wporg-themes-2024/src/theme-previewer/view.js
@@ -3,18 +3,25 @@
  */
 import { getContext, getElement, store } from '@wordpress/interactivity';
 
-store( 'wporg/themes/preview', {
+const { state } = store( 'wporg/themes/preview', {
 	state: {
 		get isLoaded() {
 			const context = getContext();
 			return context.isLoaded;
 		},
+		pages: 1,
 	},
 	actions: {
 		onLoad() {
 			const context = getContext();
 			context.isLoaded = true;
 		},
+		goBack( event ) {
+			if ( window.history.length > state.pages ) {
+				event.preventDefault();
+				window.history.go( state.pages * -1 );
+			}
+		},
 		navigateIframe( event ) {
 			event.preventDefault();
 			const context = getContext();
@@ -46,6 +53,7 @@ store( 'wporg/themes/preview', {
 
 				context.url = previewURL;
 				window.history.replaceState( {}, '', permalinkURL );
+				state.pages++;
 			}
 		},
 	},