Add rounded block style to search block

WordPress · Nov 24, 2020 · 25dc4b2 · 25dc4b2
1 parent df2e65b
commit 25dc4b2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git 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
@@ -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});
+			}
+		}
+	}
 }