From 0b8c77da514cb749901c5f9b250737af5c7db6d5 Mon Sep 17 00:00:00 2001
From: Maggie <maggie.cabrera@automattic.com>
Date: Wed, 22 Dec 2021 13:40:43 +0100
Subject: [PATCH] block style for search and new footer pattern

---
 blockbase/assets/ponyfill.css            | 12 +++++++++++
 blockbase/inc/block-patterns.php         |  1 +
 blockbase/inc/block-styles.php           |  8 ++++++++
 blockbase/inc/patterns/footer-search.php | 26 ++++++++++++++++++++++++
 blockbase/sass/blocks/_search.scss       |  8 ++++++++
 5 files changed, 55 insertions(+)
 create mode 100644 blockbase/inc/patterns/footer-search.php

diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css
index 8a8baabcc7..171e6f1880 100644
--- a/blockbase/assets/ponyfill.css
+++ b/blockbase/assets/ponyfill.css
@@ -907,6 +907,10 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
 	font-style: var(--wp--custom--quote--citation--typography--font-style);
 }
 
+.wp-block-search {
+	/* Block Styles */
+}
+
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 	padding: var(--wp--custom--form--border--width);
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
@@ -982,6 +986,14 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
 	opacity: 0.66;
 }
 
+.wp-block-search.is-style-small-search {
+	--wp--custom--button--typography--font-size: calc( 0.8 * var(--wp--preset--font-size--small));
+}
+
+.wp-block-search.is-style-small-search .wp-block-search__input {
+	padding: calc( 0.5 * var(--wp--custom--form--padding));
+}
+
 .wp-block-separator {
 	opacity: var(--wp--custom--separator--opacity);
 }
diff --git a/blockbase/inc/block-patterns.php b/blockbase/inc/block-patterns.php
index ad5828ff66..3192aef6fb 100644
--- a/blockbase/inc/block-patterns.php
+++ b/blockbase/inc/block-patterns.php
@@ -21,6 +21,7 @@ function blockbase_register_block_patterns() {
 				'footer-columns',
 				'footer-left',
 				'footer-primary',
+				'footer-search',
 				'footer-separator',
 				'footer-simple',
 				'footer-small',
diff --git a/blockbase/inc/block-styles.php b/blockbase/inc/block-styles.php
index b32f0834f4..a1707f2163 100644
--- a/blockbase/inc/block-styles.php
+++ b/blockbase/inc/block-styles.php
@@ -49,6 +49,14 @@ function blockbase_register_block_styles() {
 					'style_handle' => 'post-category-icon',
 				)
 			);
+			register_block_style(
+				'core/search',
+				array(
+					'name'         => 'small-search',
+					'label'        => __( 'Small', 'blockbase' ),
+					'style_handle' => 'small-search',
+				)
+			);
 		}
 	}
 endif;
diff --git a/blockbase/inc/patterns/footer-search.php b/blockbase/inc/patterns/footer-search.php
new file mode 100644
index 0000000000..62ccf16772
--- /dev/null
+++ b/blockbase/inc/patterns/footer-search.php
@@ -0,0 +1,26 @@
+<?php
+/**
+ * Footer with Search Block
+ *
+ * @package Blockbase
+ */
+
+return array(
+	'title'      => __( 'Footer with Search Block', 'blockbase' ),
+	'categories' => array( 'blockbase' ),
+	'blockTypes' => array( 'core/template-part/footer' ),
+	'content'    => '<!-- wp:group {"layout":{"inherit":true}} -->
+	<div class="wp-block-group">
+		<!-- wp:group {"style":{"spacing":{"padding":{"top":"80px","bottom":"30px"}}}} -->
+		<div class="wp-block-group" style="padding-top:80px;padding-bottom:30px">
+			<!-- wp:group {"style":{"spacing":{"padding":{"bottom":"30px"}}}} -->
+			<div class="wp-block-group" style="padding-bottom:30px"><!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","className":"is-style-small-search"} /--></div>
+			<!-- /wp:group -->
+			<!-- wp:paragraph {"align":"center"} -->
+			<p class="has-text-align-center">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->',
+);
diff --git a/blockbase/sass/blocks/_search.scss b/blockbase/sass/blocks/_search.scss
index bf113f44c2..ac299fb4b6 100644
--- a/blockbase/sass/blocks/_search.scss
+++ b/blockbase/sass/blocks/_search.scss
@@ -33,4 +33,12 @@
 			opacity: 0.66;
 		}
 	}
+
+	/* Block Styles */
+	&.is-style-small-search{
+		--wp--custom--button--typography--font-size: calc( 0.8 * var(--wp--preset--font-size--small));
+		.wp-block-search__input {
+			padding: calc( 0.5 * var(--wp--custom--form--padding) );
+		}
+	}
 }