Poetry: add header small pattern

- Add spacing sizes to the theme.json as in Twenty Twenty-Four theme. - Replace spacing with pixels values with spacing presets in header pattern. - Convert "Food for thoughts" to Heading 1, instead of Paragraph. - Convert "A collection of valuable thoughts by a very egocentric person." to Site Tagline block, instead of Paragraph. - Add header small pattern (note: added custom style in theme.json to define the align-items as baseline). - Replace header in 404, search and archive templates to use instead header small.
WordPress · Sep 13, 2024 · ede54db · ede54db
1 parent c015c9b
commit ede54db
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 25 deletions.
diff --git a/poetry/parts/header-small.html b/poetry/parts/header-small.html
@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"poetry/header-small"} /-->
diff --git a/poetry/patterns/header-small.php b/poetry/patterns/header-small.php
@@ -0,0 +1,31 @@
+<?php
+/**
+ * Title: header small
+ * Slug: poetry/header-small
+ * Categories: hidden
+ * Inserter: no
+ */
+?>
+<!-- wp:group {"className":"header-small","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group header-small" style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"className":"header-small__container","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
+<div class="wp-block-group header-small__container"><!-- wp:site-title {"level":0,"isLink":false,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"medium"} /-->
+
+<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"2rem"}}} -->
+<h1 class="wp-block-heading" style="font-size:2rem">Food for thoughts</h1>
+<!-- /wp:heading -->
+
+<!-- wp:site-tagline {"style":{"typography":{"lineHeight":"1.5"}}} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:image {"width":"auto","height":"64px","sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/feather.png" alt="" style="width:auto;height:64px"/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
+<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
diff --git a/poetry/patterns/header.php b/poetry/patterns/header.php
@@ -6,19 +6,17 @@
  * Inserter: no
  */
 ?>
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"32px","bottom":"64px"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="padding-top:32px;padding-bottom:64px"><!-- wp:group {"style":{"spacing":{"blockGap":"64px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"88px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group"><!-- wp:site-title {"level":0,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"medium"} /-->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|40","margin":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
+<div class="wp-block-group" style="margin-top:0;margin-bottom:0"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:site-title {"level":0,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"medium"} /-->
 
-<!-- wp:group {"style":{"spacing":{"blockGap":"48px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"0.8"}},"fontSize":"xx-large","fontFamily":"rozha-one"} -->
-<p class="has-rozha-one-font-family has-xx-large-font-size" style="line-height:0.8">Food <br>for thoughts</p>
-<!-- /wp:paragraph -->
+<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:heading {"level":1,"fontSize":"xx-large"} -->
+<h1 class="wp-block-heading has-xx-large-font-size">Food <br>for thoughts</h1>
+<!-- /wp:heading -->
 
-<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5"}},"fontSize":"medium"} -->
-<p class="has-medium-font-size" style="line-height:1.5">A collection of valuable thoughts by a very egocentric person.</p>
-<!-- /wp:paragraph --></div>
+<!-- wp:site-tagline {"style":{"typography":{"lineHeight":"1.5"}},"fontSize":"medium"} /--></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
@@ -28,6 +26,6 @@
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"50px"} -->
-<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
+<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
+<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
diff --git a/poetry/templates/404.html b/poetry/templates/404.html
@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-small","tagName":"header"} /-->
 
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"},"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:heading {"textAlign":"center"} -->

diff --git a/poetry/templates/archive.html b/poetry/templates/archive.html
@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","area":"header"} /-->
+<!-- wp:template-part {"slug":"header-small","area":"header"} /-->
 
 <!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:query-title {"type":"archive","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|40"}}},"fontSize":"x-large"} /-->

diff --git a/poetry/templates/search.html b/poetry/templates/search.html
@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-small","tagName":"header"} /-->
 
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:query-title {"type":"search","style":{"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}}} /-->

diff --git a/poetry/theme.json b/poetry/theme.json
@@ -30,14 +30,42 @@
 			"wideSize": "1200px"
 		},
 		"spacing": {
-			"units": [
-				"%",
-				"px",
-				"em",
-				"rem",
-				"vh",
-				"vw"
-			]
+			"spacingScale": {
+				"steps": 0
+			},
+			"spacingSizes": [
+				{
+					"name": "1",
+					"size": "1rem",
+					"slug": "10"
+				},
+				{
+					"name": "2",
+					"size": "min(1.5rem, 2vw)",
+					"slug": "20"
+				},
+				{
+					"name": "3",
+					"size": "min(2.5rem, 3vw)",
+					"slug": "30"
+				},
+				{
+					"name": "4",
+					"size": "min(4rem, 5vw)",
+					"slug": "40"
+				},
+				{
+					"name": "5",
+					"size": "min(6.5rem, 8vw)",
+					"slug": "50"
+				},
+				{
+					"name": "6",
+					"size": "min(10.5rem, 13vw)",
+					"slug": "60"
+				}
+			],
+			"units": ["%", "px", "em", "rem", "vh", "vw"]
 		},
 		"typography": {
 			"fontFamilies": [
@@ -121,6 +149,11 @@
 		}
 	},
 	"styles": {
+		"blocks": {
+			"core/group": {
+				"css": ".header-small__container {align-items: baseline !important;}"
+			}
+		},
 		"color": {
 			"background": "var(--wp--preset--color--custom-background)"
 		},
@@ -167,6 +200,10 @@
 			"area": "header",
 			"name": "header"
 		},
+		{
+			"area": "header",
+			"name": "header-small"
+		},
 		{
 			"area": "footer",
 			"name": "footer"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!-- wp:pattern {"slug":"poetry/header-small"} /-->