Theme Templates: Add Twenty Twenty specific template for offline views

Twenty Twenty uses a much different markup format for pages, so it's easier to match by using an entirely separate template. This approach should be considered a "patch", if the PWA merges into core, default themes will provide these templates.

public_html/wp-content/mu-plugins/theme-templates/bootstrap.php

@@ -71,7 +71,11 @@ function set_page_template_locations( $template_path ) {
  */
 function inject_offline_template( $template_path ) {
 	if ( function_exists( 'is_offline' ) && ( \is_offline() || \is_500() ) ) {
-		$template_path = __DIR__ . '/templates/offline.php';
+		if ( 'twentytwenty' === get_template() ) {
+			$template_path = __DIR__ . '/templates/offline-2020.php';
+		} else {
+			$template_path = __DIR__ . '/templates/offline.php';
+		}
 	}
 
 	return $template_path;

public_html/wp-content/mu-plugins/theme-templates/templates/offline-2020.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Template Name: Offline Notice
+ *
+ * This is the Twenty Twenty-specific offline template, which will be used for offline views of a PWA-enabled site.
+ * See `./offline.php` for more information.
+ */
+
+namespace WordCamp\Theme_Templates;
+
+get_header();
+
+$offline_page = get_offline_content();
+?>
+
+<main id="site-content" role="main">
+
+	<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
+
+		<header class="entry-header has-text-align-center">
+
+			<div class="entry-header-inner section-inner medium">
+
+				<h1 class="entry-title"><?php echo wp_kses_post( $offline_page['title'] ); ?></h1>
+
+			</div><!-- .entry-header-inner -->
+
+		</header><!-- .entry-header -->
+
+		<div class="post-inner">
+
+			<div class="entry-content">
+
+				<?php echo wp_kses_post( $offline_page['content'] ); ?>
+
+			</div><!-- .entry-content -->
+
+		</div><!-- .post-inner -->
+
+	</article><!-- .post -->
+
+</main><!-- #site-content -->
+
+<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
+
+<?php get_footer(); ?>