Merge pull request WordPress#52 from WordPress/add/headers

Add headers Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: juanfra <juanfra@git.wordpress.org>
kafleg · Aug 20, 2024 · 191133f · 191133f
2 parents 1146f76 + 320d10b
commit 191133f
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 21 deletions.
diff --git a/parts/header.html b/parts/header.html
@@ -1,18 +1 @@
-<!-- wp:group {"layout":{"inherit":"true"}} -->
-<div class="wp-block-group">
-	<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
-	<div class="wp-block-group alignwide">
-
-		<!-- wp:group {"layout":{"type":"flex"}} -->
-		<div class="wp-block-group">
-			<!-- wp:site-logo /-->
-			<!-- wp:site-title /-->
-		</div>
-		<!-- /wp:group -->
-
-		<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
-
-	</div>
-	<!-- /wp:group -->
-</div>
-<!-- /wp:group -->
+<!-- wp:pattern {"slug":"twentytwentyfive/header"} /-->
diff --git a/patterns/header-centered.php b/patterns/header-centered.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * Title: Centered Header
+ * Slug: twentytwentyfive/header-centered
+ * Categories: header
+ * Block Types: core/template-part/header
+ * Description: Header with centered site title and navigation
+ *
+ * @package WordPress
+ * @subpackage Twenty_Twenty_Five
+ * @since Twenty Twenty-Five 1.0
+ */
+
+?>
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|30","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--50)">
+	<!-- wp:site-title {"level":0,"textAlign":"center","align":"wide","fontSize":"large"} /-->
+	<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group alignwide">
+		<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"center"}} /-->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
diff --git a/patterns/header-columns.php b/patterns/header-columns.php
@@ -0,0 +1,30 @@
+<?php
+/**
+ * Title: Header with columns
+ * Slug: twentytwentyfive/header-columns
+ * Categories: header
+ * Block Types: core/template-part/header
+ * Description: Header with site title and navigation in columns
+ *
+ * @package WordPress
+ * @subpackage Twenty_Twenty_Five
+ * @since Twenty Twenty-Five 1.0
+ */
+
+?>
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|60","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
+<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--50)">
+	<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20","padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+		<!-- wp:site-title {"level":0} /-->
+		<!-- wp:site-tagline /-->
+	</div>
+	<!-- /wp:group -->
+	<!-- wp:group {"layout":{"type":"constrained","justifyContent":"left"}} -->
+	<div class="wp-block-group">
+		<!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /-->
+	</div>
+	<!-- /wp:group -->
+	<!-- wp:site-logo /-->
+</div>
+<!-- /wp:group -->
diff --git a/patterns/header-large-title.php b/patterns/header-large-title.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * Title: Header with large title
+ * Slug: twentytwentyfive/header-large-title
+ * Categories: header
+ * Block Types: core/template-part/header
+ * Description: Header with large site title and right aligned navigation
+ *
+ * @package WordPress
+ * @subpackage Twenty_Twenty_Five
+ * @since Twenty Twenty-Five 1.0
+ */
+
+?>
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
+<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--50)">
+	<!-- wp:site-title {"level":0,"style":{"typography":{"fontSize":"100px"}}} /-->
+	<!-- wp:group {"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group" style="padding-right:0;padding-left:0">
+		<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right","orientation":"vertical"}} /-->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
diff --git a/patterns/header.php b/patterns/header.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * Title: Header
+ * Slug: twentytwentyfive/header
+ * Categories: header
+ * Block Types: core/template-part/header
+ * Description: Header with site title and navigation
+ *
+ * @package WordPress
+ * @subpackage Twenty_Twenty_Five
+ * @since Twenty Twenty-Five 1.0
+ */
+
+?>
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--50)">
+	<!-- wp:site-title {"level":0} /-->
+	<!-- wp:group {"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group" style="padding-right:0;padding-left:0">
+		<!-- wp:navigation /-->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
diff --git a/templates/index.html b/templates/index.html
@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->
 
 <!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
 <main class="wp-block-query">

diff --git a/theme.json b/theme.json
@@ -110,16 +110,46 @@
 				"left": "var(--wp--preset--spacing--50)",
 				"right": "var(--wp--preset--spacing--50)"
 			}
+		},
+		"blocks":{
+			"core/site-title": {
+				"typography": {
+					"fontSize": "var:preset|fontSize|medium",
+					"fontWeight": "700",
+					"letterSpacing": "-2"
+				},
+				"elements": {
+					"link": {
+						"typography": {
+							"textDecoration": "none"
+						}
+					}
+				}
+			},
+			"core/site-tagline": {
+				"typography": {
+					"fontSize": "var:preset|fontSize|small",
+					"letterSpacing": "-1"
+				}
+			},
+			"core/navigation": {
+				"typography": {
+					"fontSize": "var:preset|fontSize|small",
+					"letterSpacing": "-1"
+				}
+			}
 		}
 	},
 	"templateParts": [
 		{
 			"area": "header",
-			"name": "Header"
+			"name": "header",
+			"title": "Header"
 		},
 		{
 			"area": "footer",
-			"name": "Footer"
+			"name": "footer",
+			"title": "Footer"
 		}
 	]
 }