From 25dc4b26abc4405adf9e2ab0063821348862fc60 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 24 Nov 2020 17:08:37 +1000
Subject: [PATCH] Add rounded block style to search block

---
 packages/block-library/src/search/index.js   | 10 +++++++++-
 packages/block-library/src/search/style.scss | 15 +++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js
index 85819da5c8acde..e85af96ad4d57a 100644
--- a/packages/block-library/src/search/index.js
+++ b/packages/block-library/src/search/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { search as icon } from '@wordpress/icons';
 
 /**
@@ -23,4 +23,12 @@ export const settings = {
 	example: {},
 	variations,
 	edit,
+	styles: [
+		{
+			name: 'default',
+			label: _x( 'Default', 'block style' ),
+			isDefault: true,
+		},
+		{ name: 'rounded', label: _x( 'Rounded', 'block style' ) },
+	],
 };
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index f5972a44658425..2f7b85279dc4d1 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -59,5 +59,20 @@
 			padding: 0.125em 0.5em;
 		}
 	}
+
+	&.is-style-rounded {
+		.wp-block-search__inside-wrapper,
+		.wp-block-search__input,
+		.wp-block-search__button {
+			border-radius: var(--wp--search--border-radius, 50px);
+		}
+
+		&.wp-block-search__button-inside {
+			.wp-block-search__input,
+			.wp-block-search__button {
+				border-radius: calc(var(--wp--search--border-radius, 50px) - #{$grid-unit-05});
+			}
+		}
+	}
 }