Theme Previewer: Add initial frame for theme preview

source/wp-content/themes/wporg-themes-2024/functions.php

@@ -16,13 +16,18 @@
  * Actions and filters.
  */
 add_action( 'init', __NAMESPACE__ . '\fix_term_imports' );
+add_action( 'init', __NAMESPACE__ . '\add_preview_endpoint' );
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
-add_filter( 'frontpage_template_hierarchy', __NAMESPACE__ . '\use_archive_template_paged' );
 add_filter( 'post_thumbnail_html', __NAMESPACE__ . '\post_thumbnail_html', 10, 5 );
+add_action( 'body_class', __NAMESPACE__ . '\add_extra_body_class' );
+add_filter( 'frontpage_template_hierarchy', __NAMESPACE__ . '\use_archive_template_paged' );
+add_action( 'single_template_hierarchy', __NAMESPACE__ . '\load_theme_preview' );
 
 // Remove filters added by plugin.
 remove_filter( 'post_thumbnail_html', 'wporg_themes_post_thumbnail_html', 10, 5 );
 
+add_filter( 'show_admin_bar', '__return_false', 2000 );
+
 /**
  * Temporary fix for permission problem during local install.
  */
@@ -32,6 +37,13 @@ function fix_term_imports() {
 	}
 }
 
+/**
+ * Set up the `view` endpoint.
+ */
+function add_preview_endpoint() {
+	add_rewrite_endpoint( 'preview', EP_PERMALINK, 'view' );
+}
+
 /**
  * Enqueue scripts and styles.
  */
@@ -47,18 +59,6 @@ function enqueue_assets() {
 	);
 }
 
-/**
- * Switch to the archive.html template on paged requests.
- *
- * @param string[] $templates A list of template candidates, in descending order of priority.
- */
-function use_archive_template_paged( $templates ) {
-	if ( is_paged() ) {
-		array_unshift( $templates, 'archive.html' );
-	}
-	return $templates;
-}
-
 /**
  * Use theme screenshot for post thumbnails, add attributes to image tag.
  *
@@ -98,6 +98,48 @@ function post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr
 	return $html;
 }
 
+/**
+ * Add some custom classes to `body`.
+ *
+ * @param string[] $classes   An array of body class names.
+ */
+function add_extra_body_class( $classes ) {
+	global $wp_query;
+
+	if ( isset( $wp_query->query_vars['view'] ) ) {
+		$classes[] = 'wporg-theme-preview';
+	}
+
+	return $classes;
+}
+
+/**
+ * Switch to the archive.html template on paged requests.
+ *
+ * @param string[] $templates A list of template candidates, in descending order of priority.
+ */
+function use_archive_template_paged( $templates ) {
+	if ( is_paged() ) {
+		array_unshift( $templates, 'archive.html' );
+	}
+	return $templates;
+}
+
+/**
+ * If this is the `view` query, use preview template.
+ *
+ * @param string[] $templates A list of template candidates, in descending order of priority.
+ */
+function load_theme_preview( $templates ) {
+	global $wp_query;
+
+	if ( isset( $wp_query->query_vars['view'] ) ) {
+		return [ 'preview.html' ];
+	}
+
+	return $templates;
+}
+
 /**
  * Generate the support URL for this theme.
  *

source/wp-content/themes/wporg-themes-2024/inc/block-bindings.php

@@ -98,6 +98,8 @@ function get_meta_block_value( $args, $block ) {
 			return esc_url( $theme->preview_url );
 		case 'download-url':
 			return esc_url( $theme->download_link );
+		case 'download-text':
+			return esc_html__( 'Download', 'wporg-themes' );
 		case 'ratings-link':
 			return sprintf(
 				'<a href="%s">%s</a>',
@@ -152,5 +154,12 @@ function get_meta_block_value( $args, $block ) {
 				esc_url( "https://themes.trac.wordpress.org/query?keywords=~theme-{$theme->slug}" ),
 				__( 'Trac Tickets', 'wporg-themes' )
 			);
+		case 'zip-name':
+			$filename = basename( $theme->download_link );
+			return esc_html( $filename );
+		case 'preview-back-url':
+			return get_permalink();
+		case 'preview-back-text':
+			return __( '← Back', 'wporg-themes' );
 	}
 }

source/wp-content/themes/wporg-themes-2024/style.css

@@ -26,3 +26,29 @@
 	border-radius: 2px;
 	box-shadow: 0 0 0 1.5px var(--wp--custom--link--color--text);
 }
+
+:where(main) a:where(:not(.wp-element-button)):focus,
+:where(main) button:where(:not([class*="wp-block-button"])):focus {
+	outline: none;
+	border-radius: 2px;
+	box-shadow: 0 0 0 1.5px var(--wp--custom--link--color--text);
+}
+
+:where(body.wporg-theme-preview) .wporg-theme-preview__container {
+	height: 100vh;
+}
+
+:where(body.wporg-theme-preview) .wporg-theme-preview__container > .wp-block-column {
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+}
+
+:where(body.wporg-theme-preview) .wp-block-column.has-charcoal-1-background-color {
+	/* Set the link color so that the focus outline is visible. */
+	--wp--custom--link--color--text: var(--wp--preset--color--blueberry-3);
+}
+
+:where(body.wporg-theme-preview) .wporg-theme-preview__download {
+	margin-top: auto;
+}

source/wp-content/themes/wporg-themes-2024/templates/preview.html

@@ -0,0 +1,61 @@
+<!-- wp:group {"tagName":"main","layout":{"type":"default"},"className":"entry-content","style":{"spacing":{"blockGap":"0px"}}} -->
+<main class="wp-block-group entry-content">
+	<!-- wp:columns {"align":"full","style":{"spacing":{"blockGap":{"top":"0","left":"0"}}},"className":"wporg-theme-preview__container"} -->
+	<div class="wp-block-columns alignfull wporg-theme-preview__container">
+		<!-- wp:column {"width":"300px","style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-3"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"backgroundColor":"charcoal-1","textColor":"white"} -->
+		<div class="wp-block-column has-white-color has-charcoal-1-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20);flex-basis:300px">
+			<!-- wp:buttons {"className":"wporg-theme-preview__back"} -->
+			<div class="wp-block-buttons wporg-theme-preview__back">
+				<!-- wp:button {"className":"is-style-outline-on-dark is-small","metadata":{"bindings":{"url":{"source":"wporg-themes/meta","args":{"key":"preview-back-url"}},"text":{"source":"wporg-themes/meta","args":{"key":"preview-back-text"}}}}} -->
+				<div class="wp-block-button is-style-outline-on-dark is-small"><a class="wp-block-button__link wp-element-button">← Back</a></div>
+				<!-- /wp:button -->
+			</div>
+			<!-- /wp:buttons -->
+
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+			<div class="wp-block-group">
+				<!-- wp:post-title {"level":1,"fontSize":"heading-5"} /-->
+
+				<!-- wp:post-author-name {"isLink":true} /-->
+			</div>
+			<!-- /wp:group -->
+
+			<!-- wp:post-excerpt {"fontSize":"small"} /-->
+
+			<!-- wp:paragraph -->
+			<p>[style variations]</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:group {"className":"wporg-theme-preview__download","layout":{"type":"constrained"}} -->
+			<div class="wp-block-group wporg-theme-preview__download">
+				<!-- wp:spacer {"height":"0"} -->
+				<div style="height:0" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer -->
+
+				<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+				<div class="wp-block-buttons">
+					<!-- wp:button {"width":100,"metadata":{"bindings":{"url":{"source":"wporg-themes/meta","args":{"key":"download-url"}},"text":{"source":"wporg-themes/meta","args":{"key":"download-text"}}}},"className":"is-style-fill-on-dark"} -->
+					<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill-on-dark"><a class="wp-block-button__link wp-element-button">Download</a></div>
+					<!-- /wp:button -->
+				</div>
+				<!-- /wp:buttons -->
+
+				<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|light-grey-1"}}},"spacing":{"margin":{"top":"var:preset|spacing|10"}}},"textColor":"light-grey-1","className":"is-style-short-text","fontSize":"extra-small","metadata":{"bindings":{"content":{"source":"wporg-themes/meta","args":{"key":"zip-name"}}}}} -->
+				<p class="has-text-align-center is-style-short-text has-light-grey-1-color has-text-color has-link-color has-extra-small-font-size" style="margin-top:var(--wp--preset--spacing--10)"></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:column -->
+
+		<!-- wp:column {"width":"","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"blueberry-4"} -->
+		<div class="wp-block-column has-blueberry-4-background-color has-background" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--30)">
+			<!-- wp:paragraph -->
+			<p>iframed preview</p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:column -->
+	</div>
+	<!-- /wp:columns -->
+</main>
+<!-- /wp:group -->