From c1e342b1153b37f996294a1415b18845d1cefbc9 Mon Sep 17 00:00:00 2001
From: Amor Kumar <contact@amorkumar.com>
Date: Thu, 3 Aug 2023 15:55:25 -0400
Subject: [PATCH] Overhaul templates, ensuring proper alignment

---
 inc/hooks/wrap-core-blocks.php | 44 ----------------------------------
 parts/content.html             | 15 ------------
 parts/footer.html              | 10 +-------
 parts/header.html              | 14 +----------
 patterns/footer.php            | 18 ++++++++++++++
 patterns/header.php            | 22 +++++++++++++++++
 patterns/query.php             | 34 ++++++++++++++++++++++++++
 templates/blank.html           |  5 ++++
 templates/index.html           | 19 ++++++++++++---
 templates/no-title.html        | 13 ++++++++++
 templates/page.html            | 18 ++++++++++++++
 theme.json                     |  6 ++++-
 12 files changed, 133 insertions(+), 85 deletions(-)
 delete mode 100644 inc/hooks/wrap-core-blocks.php
 delete mode 100644 parts/content.html
 create mode 100644 patterns/footer.php
 create mode 100644 patterns/header.php
 create mode 100644 patterns/query.php
 create mode 100644 templates/no-title.html
 create mode 100644 templates/page.html

diff --git a/inc/hooks/wrap-core-blocks.php b/inc/hooks/wrap-core-blocks.php
deleted file mode 100644
index 75a694d..0000000
--- a/inc/hooks/wrap-core-blocks.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-/**
- * Wrap core blocks with a class.
- *
- * @package wd_f
- */
-
-namespace WebDevStudios\wd_f;
-
-/**
- * Wrap core blocks with a wp-block-* class.
- *
- * Not all core blocks have these classes. This function will add these classes
- * to core blocks that don't have them.
- *
- * @author WebDevStudios
- *
- * @param string $block_content The content of the block (what will render).
- * @param string $block         The block's name.
- */
-function wrap_core_blocks( $block_content, $block ) {
-
-	$blocks_to_wrap = [
-		'heading'   => 'core/heading',
-		'paragraph' => 'core/paragraph',
-		'html'      => 'core/html',
-		'list'      => 'core/list',
-	];
-
-	foreach ( $blocks_to_wrap as $block_class => $block_name ) {
-		if ( $block_name === $block['blockName'] ) {
-			$block_content = '<span class="wp-block-' . $block_class . '">' . $block_content . '</span>';
-		}
-	}
-
-	// The core/freeform block doesn't have a block name. So we need to check for null to wrap it...
-	if ( null === $block['blockName'] && ! empty( $block_content ) && ! ctype_space( $block_content ) ) {
-		$block_content = '<span class="wp-block-freeform">' . $block_content . '</span>';
-	}
-
-	return $block_content;
-}
-
-add_filter( 'render_block', __NAMESPACE__ . '\wrap_core_blocks', 10, 2 );
diff --git a/parts/content.html b/parts/content.html
deleted file mode 100644
index 21e4b38..0000000
--- a/parts/content.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- wp:group {"tagName":"main","layout":{"type":"constrained","wideSize":"100vw","contentSize":"80vw"}} -->
-<main class="wp-block-group"><!-- wp:spacer {"height":"50px"} -->
-<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:post-featured-image {"width":"100%","height":"400px","style":{"spacing":{"margin":{"top":"var:preset|spacing|20","right":"0","bottom":"var:preset|spacing|20","left":"0"}}}} /-->
-
-<!-- wp:post-title /-->
-
-<!-- wp:post-content /-->
-
-<!-- wp:spacer -->
-<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer --></main>
-<!-- /wp:group -->
diff --git a/parts/footer.html b/parts/footer.html
index 5dfcb91..2df65f9 100644
--- a/parts/footer.html
+++ b/parts/footer.html
@@ -1,9 +1 @@
-<!-- wp:group {"tagName":"footer","style":{"elements":{"link":{"color":{"text":"var:preset|color|tertiary-300"}}},"spacing":{"blockGap":"var:preset|spacing|40"}},"backgroundColor":"primary-300","textColor":"secondary-100","layout":{"type":"constrained","wideSize":"100vw"}} -->
-<footer class="wp-block-group has-secondary-100-color has-primary-300-background-color has-text-color has-background has-link-color"><!-- wp:image {"align":"center","id":189,"width":150,"sizeSlug":"medium","linkDestination":"none"} -->
-<figure class="wp-block-image aligncenter size-medium is-resized"><img src="/wp-content/themes/wd_f/src/images/wds-light-transparent-300x76.png" alt="" class="wp-image-189" width="150"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
-<p class="has-text-align-center has-small-font-size">Proudly powered by WordPress. Hosted by WP Engine. WebDevStudios is a <strong><a href="https://wd3.co/">WD3</a></strong> Party</p>
-<!-- /wp:paragraph --></footer>
-<!-- /wp:group -->
+<!-- wp:pattern {"slug":"wds/footer"} /-->
diff --git a/parts/header.html b/parts/header.html
index 663ec6c..cff340f 100644
--- a/parts/header.html
+++ b/parts/header.html
@@ -1,13 +1 @@
-<!-- wp:group {"tagName":"header","style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"constrained","wideSize":"100vw","contentSize":"80vw"}} -->
-<header class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)"><!-- wp:columns {"verticalAlignment":"center"} -->
-<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%","layout":{"type":"constrained"}} -->
-<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group"><!-- wp:site-logo {"width":200,"shouldSyncIcon":true} /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:column -->
-
-<!-- wp:column {"verticalAlignment":"center","width":"50%","layout":{"type":"constrained"}} -->
-<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:navigation {"ref":187,"overlayBackgroundColor":"secondary-200","overlayTextColor":"primary-300","layout":{"type":"flex","justifyContent":"right"},"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"fontSize":"medium"} /--></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns --></header>
-<!-- /wp:group -->
+<!-- wp:pattern {"slug":"wds/header"} /-->
diff --git a/patterns/footer.php b/patterns/footer.php
new file mode 100644
index 0000000..75c6302
--- /dev/null
+++ b/patterns/footer.php
@@ -0,0 +1,18 @@
+<?php
+/**
+ * Title: Footer
+ * Slug: wds/footer
+ * Description: Footer with site logo and menus.
+ * Categories: footer
+ * Block Types: core/template-part/footer
+ */
+?>
+<!-- wp:group {"tagName":"footer","style":{"elements":{"link":{"color":{"text":"var:preset|color|tertiary-300"}}},"spacing":{"blockGap":"var:preset|spacing|40"}},"backgroundColor":"primary-300","textColor":"secondary-100","layout":{"type":"constrained","wideSize":"100vw"}} -->
+<footer class="wp-block-group has-secondary-100-color has-primary-300-background-color has-text-color has-background has-link-color"><!-- wp:image {"align":"center","id":189,"width":150,"sizeSlug":"medium","linkDestination":"none"} -->
+<figure class="wp-block-image aligncenter size-medium is-resized"><img src="<?php echo esc_url( get_theme_file_uri( 'src/images/wds-light-transparent-300x76.png' ) ) ?>" alt="" class="wp-image-189" width="150"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
+<p class="has-text-align-center has-small-font-size">Proudly powered by WordPress. Hosted by WP Engine. WebDevStudios is a <strong><a href="https://wd3.co/">WD3</a></strong> Party</p>
+<!-- /wp:paragraph --></footer>
+<!-- /wp:group -->
diff --git a/patterns/header.php b/patterns/header.php
new file mode 100644
index 0000000..72a83c4
--- /dev/null
+++ b/patterns/header.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Title: Header
+ * Slug: wds/header
+ * Description: Header with site logo and navigation.
+ * Categories: header
+ * Block Types: core/template-part/header
+ */
+?>
+<!-- wp:group {"tagName":"header","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"backgroundColor":"primary-300","textColor":"secondary-100","layout":{"type":"constrained","wideSize":"100vw","contentSize":"80vw"}} -->
+<header class="wp-block-group has-secondary-100-color has-primary-300-background-color has-text-color has-background" style="margin-top:0;margin-bottom:0"><!-- wp:columns {"verticalAlignment":"center"} -->
+<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%","layout":{"type":"constrained"}} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:image {"align":"center","id":189,"width":150,"sizeSlug":"medium","linkDestination":"none"} -->
+<figure class="wp-block-image aligncenter size-medium is-resized"><img src="<?php echo esc_url( get_theme_file_uri( 'src/images/wds-light-transparent-300x76.png' ) ) ?>" alt="" class="wp-image-189" width="150"/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center","width":"50%","layout":{"type":"constrained"}} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:navigation {"ref":187,"overlayBackgroundColor":"secondary-200","overlayTextColor":"primary-300","layout":{"type":"flex","justifyContent":"right"},"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"fontSize":"medium"} /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></header>
+<!-- /wp:group -->
diff --git a/patterns/query.php b/patterns/query.php
new file mode 100644
index 0000000..48bac82
--- /dev/null
+++ b/patterns/query.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * Title: Default Query
+ * Slug: wds/query
+ * Description: Query of posts in stack view.
+ * Categories: hidden
+ * Inserter: false
+ */
+?>
+<!-- wp:query {"queryId":0,"query":{"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","type":"constrained","inherit":true,"perPage":1},"displayLayout":{"type":"list"},"layout":{"type":"default"}} -->
+<div class="wp-block-query">
+<!-- wp:post-template -->
+<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}}} -->
+<div class="wp-block-group">
+<!-- wp:post-title {"isLink":true} /-->
+<!-- wp:group {"style":{"spacing":{"blockGap":"5px","margin":{"bottom":"30px"}}},"layout":{"type":"flex"},"fontSize":"small"} -->
+<div class="wp-block-group has-small-font-size" style="margin-bottom:30px">
+<!-- wp:post-date /-->
+<!-- wp:paragraph -->
+<p>·</p>
+<!-- /wp:paragraph -->
+<!-- wp:post-author-name {"isLink":true} /-->
+</div>
+<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+<!-- wp:post-excerpt {"moreText":"Read More"} /-->
+<!-- /wp:post-template -->
+<!-- wp:query-pagination -->
+<!-- wp:query-pagination-previous /-->
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination -->
+</div>
+<!-- /wp:query -->
diff --git a/templates/blank.html b/templates/blank.html
index e69de29..649ce26 100644
--- a/templates/blank.html
+++ b/templates/blank.html
@@ -0,0 +1,5 @@
+<!-- wp:group {"tagName":"main"} -->
+<main class="wp-block-group">
+	<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
+</main>
+<!-- /wp:group -->
diff --git a/templates/index.html b/templates/index.html
index e5cead7..08028bf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,3 +1,16 @@
-<!-- wp:template-part {"slug":"header"} /-->
-<!-- wp:template-part {"slug":"content"} /-->
-<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"header","theme":"wd_f"} /-->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
+<main
+	class="wp-block-group"
+	style="
+		margin-top: 0;
+		padding-top: var( --wp--preset--spacing--70 );
+		padding-bottom: var( --wp--preset--spacing--70 );
+	"
+>
+	<!-- wp:pattern {"slug":"wds/query", "layout":"constrained"} /-->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","theme":"wd_f"} /-->
diff --git a/templates/no-title.html b/templates/no-title.html
new file mode 100644
index 0000000..a60610e
--- /dev/null
+++ b/templates/no-title.html
@@ -0,0 +1,13 @@
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}}} -->
+<main
+	class="wp-block-group"
+	style="
+		padding-top: var( --wp--preset--spacing--70 );
+		padding-bottom: var( --wp--preset--spacing--70 );
+	"
+>
+	<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
+</main>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->
diff --git a/templates/page.html b/templates/page.html
new file mode 100644
index 0000000..63a94d5
--- /dev/null
+++ b/templates/page.html
@@ -0,0 +1,18 @@
+<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}}} -->
+<main
+	class="wp-block-group"
+	style="
+		margin-top: 0;
+		padding-top: var( --wp--preset--spacing--70 );
+		padding-bottom: var( --wp--preset--spacing--70 );
+	"
+>
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group"><!-- wp:post-title {"level":1} /--></div>
+	<!-- /wp:group -->
+
+	<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
+</main>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->
diff --git a/theme.json b/theme.json
index 99e4a0f..c0c8041 100644
--- a/theme.json
+++ b/theme.json
@@ -412,7 +412,11 @@
 	"customTemplates": [
 		{
 			"name": "blank",
-			"title": "Blank Tempate"
+			"title": "Blank"
+		},
+		{
+			"name": "no-title",
+			"title": "No Title"
 		}
 	],
 	"version": 2,