Theme previewer: Update back button to navigate all the way back to t…

…he theme details page.
WordPress · Jun 10, 2024 · ce52446 · ce52446
1 parent f61c68f
commit ce52446
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 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
@@ -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
@@ -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++;
 			}
 		},
 	},