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}); + } + } + } }