浏览代码

Paternize 404 Page (#5039)

* Refactor Blockbase 404 page to block pattern instead of PHP page

* Adjustments to get 404 to render in child themes.

* Adjustments to style Skatepark's 404 based on original PHP file.

* corrected 404 page layout styles

* Refactored videomaker 404 to use Blockbase pattern but match original PHP file styling.

* Refactored videomaker 404 to use Blockbase pattern but match original PHP file styling.

* Added 'blank' message to index.php

* formatted PHP comment

* Hide the pattern in the inserter

* Only use the copy in the block

* adding 404 templates

* Removed unused class

* rename the prompt

* added spacer to align with what other child themes are doing

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Maggie <maggie.cabrera@automattic.com>
Jason Crist 3 年之前
父节点
当前提交
8cfaa36188

+ 0 - 18
blockbase/404.php

@@ -1,18 +0,0 @@
-<?php
-/**
- * The template for displaying 404 pages (not found)
- *
- * @package Blockbase
- * @since 1.1.1
- */
-get_header();
-?>
-	<main class="container-404">
-		<h1 class="has-text-align-center has-medium-font-size"><?php _e( 'Oops! That page can&rsquo;t be found.', 'blockbase' ); ?></h1>
-
-		<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'blockbase' ); ?></p>
-
-		<?php echo do_blocks('<!-- wp:search {"label":""} /-->'); ?>
-	</main>
-<?php
-get_footer();

+ 0 - 6
blockbase/assets/ponyfill.css

@@ -97,12 +97,6 @@ pre {
 	margin-left: auto;
 }
 
-.container-404 {
-	max-width: var(--wp--custom--layout--content-size);
-	margin-left: auto !important;
-	margin-right: auto !important;
-}
-
 .has-primary-background-color {
 	background-color: var(--wp--custom--color--primary) !important;
 }

+ 10 - 0
blockbase/block-templates/404.html

@@ -0,0 +1,10 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
+<main class="wp-block-group">
+	<!-- wp:pattern {"slug":"blockbase/404"} /-->
+	<!-- wp:search {"label":""} /-->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

+ 0 - 15
blockbase/footer.php

@@ -1,15 +0,0 @@
-<footer class="wp-block-template-part site-footer-container">
-		<?php
-			if ( function_exists( 'block_template_part' ) ) {
-				echo block_template_part( 'footer' );
-			} else {
-				echo gutenberg_block_template_part( 'footer' );
-			}
-		?>
-	</div>
-</footer>
-
-<?php wp_footer(); ?>
-
-</body>
-</html>

+ 6 - 0
blockbase/functions.php

@@ -176,3 +176,9 @@ add_action(
  * Block Styles.
  */
 require get_template_directory() . '/inc/block-styles.php';
+
+/**
+ * Block Patterns.
+ */
+require get_template_directory() . '/inc/block-patterns.php';
+

+ 0 - 22
blockbase/header.php

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html <?php language_attributes(); ?>>
-<head>
-	<meta charset="<?php bloginfo( 'charset' ); ?>" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<link rel="profile" href="https://gmpg.org/xfn/11" />
-	<?php wp_head(); ?>
-</head>
-
-<body <?php body_class(); ?>>
-<?php wp_body_open(); ?>
-
-	<div class="wp-site-blocks">
-		<header class="wp-block-template-part">
-			<?php
-				if ( function_exists( 'block_template_part' ) ) {
-					echo block_template_part( 'header' );
-				} else {
-					echo gutenberg_block_template_part( 'header' );
-				}
-			?>
-		</header>

+ 33 - 0
blockbase/inc/block-patterns.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * Blockbase Theme: Block Patterns
+ *
+ * @package Blockbase
+ */
+if ( ! function_exists( 'blockbase_register_block_patterns' ) ) :
+
+	function blockbase_register_block_patterns() {
+
+		if ( function_exists( 'register_block_pattern_category' ) ) {
+			register_block_pattern_category(
+				'blockbase',
+				array( 'label' => __( 'Blockbase', 'blockbase' ) )
+			);
+		}
+
+		if ( function_exists( 'register_block_pattern' ) ) {
+			$block_patterns = array(
+				'404'
+			);
+
+			foreach ( $block_patterns as $block_pattern ) {
+				register_block_pattern(
+					'blockbase/' . $block_pattern,
+					require __DIR__ . '/patterns/' . $block_pattern . '.php'
+				);
+			}
+		}
+	}
+endif;
+
+add_action( 'init', 'blockbase_register_block_patterns', 9 );

+ 19 - 0
blockbase/inc/patterns/404.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * A 404 page
+ *
+ * @package Blockbase
+ */
+
+return array(
+	'title'      => __( '404', 'blockbase' ),
+	'categories' => array( 'blockbase' ),
+	'inserter'   => false,
+	'content'    => '<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"medium"} -->
+<h1 class="has-text-align-center has-medium-font-size" id="oops-that-page-can-t-be-found">' . esc_html__( "Oops! That page can&rsquo;t be found.", "blockbase" ) . '</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>' . esc_html__( "It looks like nothing was found at this location. Maybe try a search?", "blockbase" ) . '</p>
+<!-- /wp:paragraph -->',
+);

+ 1 - 23
blockbase/index.php

@@ -1,24 +1,2 @@
 <?php
-/**
- * The main template file
- *
- * This is the most generic template file in a WordPress theme
- * and one of the two required files for a theme (the other being style.css).
- * It is used to display a page when nothing more specific matches a query.
- * E.g., it puts together the home page when no home.php file exists.
- *
- * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
- *
- * @package Blockbase
- * @since 1.2.9
- */
-get_header();
-
-// the query
-if ( function_exists( 'block_template_part' ) ) {
-	echo block_template_part( 'index' );
-} else {
-	echo gutenberg_block_template_part( 'index' );
-}
-
-get_footer();
+	# This page intentionally left blank

+ 0 - 7
blockbase/sass/base/_alignment.scss

@@ -54,10 +54,3 @@
 	margin-right: auto;
 	margin-left: auto;
 }
-
-// Mimick the Gutenberg-generated rules of the layout container on the 404 template
-.container-404 {
-	max-width: var(--wp--custom--layout--content-size);
-	margin-left: auto !important;
-	margin-right: auto !important;
-}

+ 0 - 18
skatepark/404.php

@@ -1,18 +0,0 @@
-<?php
-/**
- * The template for displaying 404 pages (not found)
- *
- * @package Skatepark
- * @since 1.1.1
- */
-get_header();
-?>
-	<main class="container-404">
-		<h2 class="wp-block-post-title"><?php _e( 'Oops! That page can&rsquo;t be found.', 'skatepark' ); ?></h2>
-
-		<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'skatepark' ); ?></p>
-
-		<?php echo do_blocks('<!-- wp:search {"label":""} /-->'); ?>
-	</main>
-<?php
-get_footer();

+ 14 - 0
skatepark/block-templates/404.html

@@ -0,0 +1,14 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:spacer {"height":170} -->
+<div style="height:170px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
+<main class="wp-block-group">
+	<!-- wp:pattern {"slug":"blockbase/404"} /-->
+	<!-- wp:search {"label":""} /-->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

+ 0 - 18
videomaker/404.php

@@ -1,18 +0,0 @@
-<?php
-/**
- * The template for displaying 404 pages (not found)
- *
- * @package Blockbase
- * @since 1.1.1
- */
-get_header();
-?>
-	<main class="container-404">
-		<h1 class="has-text-align-center has-large-font-size"><?php _e( 'Oops! That page can&rsquo;t be found.', 'blockbase' ); ?></h1>
-
-		<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'blockbase' ); ?></p>
-
-		<?php echo do_blocks('<!-- wp:search {"label":""} /-->'); ?>
-	</main>
-<?php
-get_footer();

+ 1 - 1
videomaker/assets/theme.css

@@ -80,7 +80,7 @@
 }
 
 a:active {
-	background: var(--wp--custom--color--foreground);
+	background: var(--wp--custom--color--foreground) !important;
 	color: var(--wp--custom--color--background) !important;
 }
 

+ 14 - 0
videomaker/block-templates/404.html

@@ -0,0 +1,14 @@
+<!-- wp:template-part {"area":"header","slug":"header","tagName":"header","layout":{"inherit":true}} /-->
+
+<!-- wp:spacer {"height":170} -->
+<div style="height:170px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
+<main class="wp-block-group">
+	<!-- wp:pattern {"slug":"blockbase/404"} /-->
+	<!-- wp:search {"label":""} /-->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"area":"footer","slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->