Add header block patterns.

quadrat/inc/block-patterns.php

@@ -25,6 +25,10 @@ if ( ! function_exists( 'quadrat_register_block_patterns' ) ) :
 				'cover-with-heading',
 				'headlines-and-buttons',
 				'listen-to-the-podcast',
+				'header-site-title-navigation',
+				'header-with-social-links',
+				'header-two-navigation-areas',
+				'centered-header'
 			);
 
 			if ( class_exists( 'WP_Block_Type_Registry' ) && \WP_Block_Type_Registry::get_instance()->is_registered( 'jetpack/subscriptions' ) ) {

quadrat/inc/patterns/centered-header.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * Centered header.
+ *
+ * @package Quadrat
+ */
+
+return array(
+	'title'      => __( 'Centered page header', 'quadrat' ),
+	'categories'    => array( 'page-header' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"2em","right":"2em","bottom":"2em","left":"2em"}}}} -->
+					<div class="wp-block-group alignfull" style="padding-top:2em;padding-right:2em;padding-bottom:2em;padding-left:2em"><!-- wp:site-logo {"align":"center"} /-->
+
+					<!-- wp:site-title {"textAlign":"center","style":{"typography":{"fontSize":"48px","textTransform":"capitalize","lineHeight":"1.1"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} /-->
+
+					<!-- wp:site-tagline {"textAlign":"center"} /-->
+
+					<!-- wp:spacer {"height":50} -->
+					<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+					<!-- /wp:spacer -->
+
+					<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"center","isResponsive":true} /--></div>
+					<!-- /wp:group -->',
+);

quadrat/inc/patterns/header-site-title-navigation.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Header with title and navigation.
+ *
+ * @package Quadrat
+ */
+
+return array(
+	'title'      => __( 'Header with title and navigation', 'quadrat' ),
+	'categories'    => array( 'page-header' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:columns {"align":"full","className":"alignfull are-vertically-aligned-center"} -->
+					<div class="wp-block-columns alignfull are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"33.33%","style":{"spacing":{"padding":{"top":"10px","right":"20px","bottom":"10px","left":"20px"}}}} -->
+					<div class="wp-block-column is-vertically-aligned-center" style="padding-top:10px;padding-right:20px;padding-bottom:10px;padding-left:20px;flex-basis:33.33%"><!-- wp:site-title {"fontSize":"normal"} /--></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column {"verticalAlignment":"center","width":"66.66%","style":{"spacing":{"padding":{"top":"10px","right":"20px","bottom":"10px","left":"20px"}}}} -->
+					<div class="wp-block-column is-vertically-aligned-center" style="padding-top:10px;padding-right:20px;padding-bottom:10px;padding-left:20px;flex-basis:66.66%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right","isResponsive":true} /--></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns -->',
+);

quadrat/inc/patterns/header-two-navigation-areas.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Header with two navigation areas.
+ *
+ * @package Quadrat
+ */
+
+return array(
+	'title'      => __( 'Header with two navigation areas and logo', 'quadrat' ),
+	'categories'    => array( 'page-header' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:columns {"verticalAlignment":"center","align":"full"} -->
+					<div class="wp-block-columns alignfull are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
+					<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} /--></div>
+					<!-- /wp:column -->
+					<!-- wp:column {"verticalAlignment":"center","width":"120px","style":{"spacing":{"padding":{"top":"40px","bottom":"40px"}}}} -->
+					<div class="wp-block-column is-vertically-aligned-center" style="padding-top:40px;padding-bottom:40px;flex-basis:120px"><!-- wp:site-logo {"align":"center","width":80,"className":"is-style-rounded"} /--></div>
+					<!-- /wp:column -->
+					<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
+					<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"left"} /--></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns -->',
+);

quadrat/inc/patterns/header-with-social-links.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Header with social links.
+ *
+ * @package Quadrat
+ */
+
+return array(
+	'title'      => __( 'Header with social links', 'quadrat' ),
+	'categories'    => array( 'page-header' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:columns {"verticalAlignment":"center","align":"full"} -->
+					<div class="wp-block-columns alignfull are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
+					<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"left","isResponsive":true} /--></div>
+					<!-- /wp:column -->
+					<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
+					<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:site-title {"textAlign":"center"} /--></div>
+					<!-- /wp:column -->
+					<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
+					<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:social-links {"iconColor":"pink","iconColorValue":"#FFD1D1","className":"items-justified-right is-style-logos-only"} -->
+					<ul class="wp-block-social-links has-icon-color items-justified-right is-style-logos-only"><!-- wp:social-link {"url":"#","service":"twitter"} /-->
+					<!-- wp:social-link {"url":"#","service":"instagram"} /-->
+					<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>
+					<!-- /wp:social-links --></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns -->',
+);