Add header block patterns (#74)

* Add header block patterns * Remove empty paragraph block. * Register title nav social pattern. * Add text-only header with stacked tagline. * Fix pattern slug. * Reorder patterns, add missing comma. * Use preset color variables for the social links block. * Tidy up margin for stacked title/tagline patterns. * Add additional patterns. * Fix PHPCS errors. * Fix PHPCS errors. * Update all patterns to use a header tagName. * Use links instead of two page lists. * Remove tagNames to avoid duplication.
WordPress · Oct 12, 2021 · 82114d0 · 82114d0
1 parent 6896110
commit 82114d0
Show file tree

Hide file tree

Showing 19 changed files with 407 additions and 1 deletion.
diff --git a/block-template-parts/header.html b/block-template-parts/header.html
@@ -3,7 +3,7 @@
 <div class="wp-block-group">
 <!-- wp:site-logo {"width":64} /-->
 
-<!-- wp:site-title /--></div>
+<!-- wp:site-title {"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /--></div>
 <!-- /wp:group -->
 
 <!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->

diff --git a/functions.php b/functions.php
@@ -70,3 +70,6 @@ function twentytwentytwo_get_font_face_styles() {
 		";
 	}
 endif;
+
+// Add block patterns
+require get_template_directory() . '/inc/block-patterns.php';
diff --git a/inc/block-patterns.php b/inc/block-patterns.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * Twenty Twenty-Two: Block Patterns
+ *
+ * @since 1.0
+ */
+
+if ( ! function_exists( 'twentytwentytwo_register_block_patterns' ) ) :
+	function twentytwentytwo_register_block_patterns() {
+		if ( function_exists( 'register_block_pattern_category' ) ) {
+			register_block_pattern_category(
+				'twentytwentytwo-headers',
+				array( 'label' => __( 'Twenty Twenty-Two Headers', 'twentytwentytwo' ) )
+			);
+		}
+		if ( function_exists( 'register_block_pattern' ) ) {
+			$block_patterns = array(
+				'header-default',
+				'header-with-tagline',
+				'header-text-only-with-stacked-tagline',
+				'header-text-only',
+				'header-text-only-with-tagline',
+				'header-text-only-all-caps-with-tagline',
+				'header-logo-navigation',
+				'header-logo-navigation-social',
+				'header-title-navigation-social',
+				'header-logo-navigation-offset-tagline',
+				'header-stacked',
+				'header-large-dark',
+				'header-centered-logo',
+				'header-centered-logo-in-navigation',
+				'header-centered-title-navigation-social',
+				'header-title-and-button',
+			);
+
+			foreach ( $block_patterns as $block_pattern ) {
+				register_block_pattern(
+					'twentytwentytwo/' . $block_pattern,
+					require __DIR__ . '/patterns/' . $block_pattern . '.php'
+				);
+			}
+		}
+	}
+endif;
+add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );
diff --git a/inc/patterns/header-centered-logo-in-navigation.php b/inc/patterns/header-centered-logo-in-navigation.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Header with centered Logo in Navigation block pattern
+ */
+return array(
+	'title'      => __( 'Header with centered Logo in Navigation', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"center"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:navigation-link {"isTopLevelLink":true} /-->
+
+					<!-- wp:navigation-link {"isTopLevelLink":true} /-->
+
+					<!-- wp:site-logo {"width":90} /-->
+
+					<!-- wp:navigation-link {"isTopLevelLink":true} /-->
+
+					<!-- wp:navigation-link {"isTopLevelLink":true} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-centered-logo.php b/inc/patterns/header-centered-logo.php
@@ -0,0 +1,26 @@
+<?php
+/**
+ * Header with centered Logo block pattern
+ */
+return array(
+	'title'      => __( 'Header with centered Logo', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:columns {"verticalAlignment":"center"} -->
+					<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
+					<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"400","textTransform":"uppercase"}}} /--></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column {"width":"64px"} -->
+					<div class="wp-block-column" style="flex-basis:64px"><!-- wp:site-logo {"width":64} /--></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column {"verticalAlignment":"center"} -->
+					<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-centered-title-navigation-social.php b/inc/patterns/header-centered-title-navigation-social.php
@@ -0,0 +1,30 @@
+<?php
+/**
+ * Centered title with Navigation and Social Links Header block pattern
+ */
+return array(
+	'title'      => __( 'Centered title with Navigation and Social Links Header', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:columns {"verticalAlignment":"center"} -->
+					<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
+					<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"left","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column {"width":""} -->
+					<div class="wp-block-column"><!-- wp:site-title {"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"700"}}} /--></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column {"verticalAlignment":"center"} -->
+					<div class="wp-block-column is-vertically-aligned-center"><!-- wp:social-links {"iconColor":"foreground","iconColorValue":"var(--wp--preset--color--foreground)","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"right"}} -->
+					<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"twitter"} /-->
+
+					<!-- wp:social-link {"url":"#","service":"instagram"} /--></ul>
+					<!-- /wp:social-links --></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-default.php b/inc/patterns/header-default.php
@@ -0,0 +1,21 @@
+<?php
+/**
+ * Default Header block pattern
+ */
+return array(
+	'title'      => __( 'Default Header', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:group {"layout":{"type":"flex"}} -->
+					<div class="wp-block-group">
+					<!-- wp:site-logo {"width":64} /-->
+
+					<!-- wp:site-title {"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /--></div>
+					<!-- /wp:group -->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-large-dark.php b/inc/patterns/header-large-dark.php
@@ -0,0 +1,29 @@
+<?php
+/**
+ * Large Header block pattern
+ */
+return array(
+	'title'      => __( 'Large Header', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"0px","right":"max(1.25rem, 5vw)","bottom":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
+					<div class="wp-block-group has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:0px;padding-right:max(1.25rem, 5vw);padding-bottom:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:group {"layout":{"type":"flex"}} -->
+					<div class="wp-block-group">
+					<!-- wp:site-logo {"width":64} /-->
+
+					<!-- wp:site-title {"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /--></div>
+					<!-- /wp:group -->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->
+
+					<!-- wp:columns {"align":"wide"} -->
+					<div class="wp-block-columns alignwide"><!-- wp:column -->
+					<div class="wp-block-column"><!-- wp:site-tagline {"style":{"typography":{"fontFamily":"var:preset|font-family|source-serif-pro","fontWeight":"300","fontSize":"clamp(4rem, 8vw, 6.25rem)","lineHeight":"1.15"}}} /--></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-logo-navigation-offset-tagline.php b/inc/patterns/header-logo-navigation-offset-tagline.php
@@ -0,0 +1,28 @@
+<?php
+/**
+ * Logo, Navigation, and offset Tagline Header block pattern
+ */
+return array(
+	'title'      => __( 'Logo, Navigation, and offset Tagline Header', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem"}}}} -->
+					<div class="wp-block-group alignwide" style="padding-bottom:8rem"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw)"><!-- wp:site-logo {"width":64} /-->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->
+
+					<!-- wp:columns {"isStackedOnMobile":false,"align":"wide"} -->
+					<div class="wp-block-columns alignwide is-not-stacked-on-mobile"><!-- wp:column {"width":"64px"} -->
+					<div class="wp-block-column" style="flex-basis:64px"></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column {"width":"380px"} -->
+					<div class="wp-block-column" style="flex-basis:380px"><!-- wp:site-tagline {"fontSize":"small"} /--></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-logo-navigation-social.php b/inc/patterns/header-logo-navigation-social.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Logo, Navigation, and Social Links Header block pattern
+ */
+return array(
+	'title'      => __( 'Logo, Navigation, and Social Links Header', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:site-logo {"width":64} /-->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+
+					<!-- wp:social-links {"iconColor":"foreground","iconColorValue":"var(--wp--preset--color--foreground)","className":"is-style-logos-only"} -->
+					<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"instagram"} /-->
+
+					<!-- wp:social-link {"url":"#","service":"twitter"} /--></ul>
+					<!-- /wp:social-links -->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-logo-navigation.php b/inc/patterns/header-logo-navigation.php
@@ -0,0 +1,16 @@
+<?php
+/**
+ * Logo and Navigation Header
+ */
+return array(
+	'title'      => __( 'Logo and Navigation Header', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:site-logo {"width":64} /-->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-stacked.php b/inc/patterns/header-stacked.php
@@ -0,0 +1,26 @@
+<?php
+/**
+ * Logo and Navigation Header block pattern
+ */
+return array(
+	'title'      => __( 'Logo and Navigation Header', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:site-logo {"align":"center","width":128} /-->
+
+					<!-- wp:spacer {"height":10} -->
+					<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
+					<!-- /wp:spacer -->
+
+					<!-- wp:site-title {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"400","textTransform":"uppercase"}}} /-->
+
+					<!-- wp:spacer {"height":10} -->
+					<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
+					<!-- /wp:spacer -->
+
+					<!-- wp:navigation {"itemsJustification":"center","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-text-only-all-caps-with-tagline.php b/inc/patterns/header-text-only-all-caps-with-tagline.php
@@ -0,0 +1,20 @@
+<?php
+/**
+ * Text-only Header with Tagline and all-caps Title block pattern
+ */
+return array(
+	'title'      => __( 'Text-only Header with Tagline and all-caps Title', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:group {"layout":{"type":"flex","justifyContent":"left"}} -->
+					<div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase"}}} /-->
+
+					<!-- wp:site-tagline {"fontSize":"small","style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /--></div>
+					<!-- /wp:group -->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-text-only-with-stacked-tagline.php b/inc/patterns/header-text-only-with-stacked-tagline.php
@@ -0,0 +1,20 @@
+<?php
+/**
+ * Text-only Header with stacked Tagline block pattern
+ */
+return array(
+	'title'      => __( 'Text-only Header with stacked Tagline', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:group -->
+					<div class="wp-block-group"><!-- wp:site-title {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}},"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
+
+					<!-- wp:site-tagline {"style":{"spacing":{"margin":{"top":"0.25em","bottom":"0px"}},"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /--></div>
+					<!-- /wp:group -->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-text-only-with-tagline.php b/inc/patterns/header-text-only-with-tagline.php
@@ -0,0 +1,20 @@
+<?php
+/**
+ * Text-only Header with Tagline block pattern
+ */
+return array(
+	'title'      => __( 'Text-only Header with Tagline', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:group {"layout":{"type":"flex","justifyContent":"left"}} -->
+					<div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
+
+					<!-- wp:site-tagline {"fontSize":"small","style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /--></div>
+					<!-- /wp:group -->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-text-only.php b/inc/patterns/header-text-only.php
@@ -0,0 +1,16 @@
+<?php
+/**
+ * Text-only Header block pattern
+ */
+return array(
+	'title'      => __( 'Text-only Header', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:site-title {"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}}} /-->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->',
+);
diff --git a/inc/patterns/header-title-and-button.php b/inc/patterns/header-title-and-button.php
@@ -0,0 +1,16 @@
+<?php
+/**
+ * Title and Button Header block pattern
+ */
+return array(
+	'title'      => __( 'Title and Button Header', 'twentytwentytwo' ),
+	'categories' => array( 'twentytwentytwo-headers' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"8rem","top":"max(1.25rem, 5vw)"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+					<div class="wp-block-group alignwide" style="padding-top:max(1.25rem, 5vw);padding-bottom:8rem"><!-- wp:site-title {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}},"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
+
+					<!-- wp:navigation {"itemsJustification":"right","isResponsive":true} -->
+					<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+					<!-- /wp:navigation --></div>
+					<!-- /wp:group -->',
+);