From dd598becadffdb0a7c02d33b393a3b829a14c4a1 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Wed, 30 Nov 2022 13:42:04 -0500 Subject: [PATCH] Block Styles: Add the Secondary Search block style on search block --- .../wporg-parent-2021/inc/block-styles.php | 9 +++ .../wporg-parent-2021/sass/block-styles.scss | 67 +++++++++++++++++++ 2 files changed, 76 insertions(+) diff --git a/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php b/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php index 3d67bd2d..1c81c8e3 100644 --- a/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php +++ b/source/wp-content/themes/wporg-parent-2021/inc/block-styles.php @@ -148,6 +148,15 @@ function setup_block_styles() { 'style_handle' => STYLE_HANDLE, ) ); + + register_block_style( + 'core/search', + array( + 'name' => 'secondary-search-control', + 'label' => __( 'Secondary', 'wporg' ), + 'style_handle' => STYLE_HANDLE, + ) + ); } /** diff --git a/source/wp-content/themes/wporg-parent-2021/sass/block-styles.scss b/source/wp-content/themes/wporg-parent-2021/sass/block-styles.scss index cca2ce18..d6ef2a80 100644 --- a/source/wp-content/themes/wporg-parent-2021/sass/block-styles.scss +++ b/source/wp-content/themes/wporg-parent-2021/sass/block-styles.scss @@ -518,3 +518,70 @@ } } } + +/** + * Secondary Search style + */ + +.is-style-secondary-search-control { + // Set the custom properties so hover/focus/etc still work. + --wp--custom--button--color--text: var(--wp--preset--color--charcoal-1); + --wp--custom--button--color--background: transparent; + --wp--custom--button--hover--color--text: var(--wp--preset--color--charcoal-1); + --wp--custom--button--hover--color--background: var(--wp--preset--color--light-grey-2); + // Set a local custom property so child themes can set this in one place. + --local--border-color: var(--wp--preset--color--charcoal-1); + + display: flex; + align-items: center; + + > label { + flex: 0; + font-size: var(--wp--preset--font-size--extra-small); + padding-right: var(--wp--preset--spacing--10); + } + + input[type="search"] { + border: none; + font-size: var(--wp--preset--font-size--extra-small); + padding: 0 var(--wp--preset--spacing--10) !important; + } + + &.wp-block-search__no-button input[type="search"] { + min-height: var(--wp--preset--spacing--40); + border: 1px solid var(--local--border-color); + border-radius: var(--wp--custom--button--border--radius); + } + + &.wp-block-search__button-inside { + .wp-block-search__inside-wrapper { + border: 1px solid var(--local--border-color) !important; + border-radius: var(--wp--custom--button--border--radius); + } + + button[type="submit"] { + margin: 2px; + } + } + + &.wp-block-search__button-outside { + input[type="search"] { + border: 1px solid var(--local--border-color) !important; + border-radius: var(--wp--custom--button--border--radius); + } + + button[type="submit"] { + border: 1px solid var(--local--border-color) !important; + } + } + + &.wp-block-search__icon-button button[type="submit"] { + padding: calc(var(--wp--preset--spacing--10) / 2) !important; + } + + &.wp-block-search__text-button button[type="submit"] { + border: 1px solid var(--local--border-color) !important; + font-size: var(--wp--preset--font-size--extra-small); + padding: var(--wp--preset--spacing--10) !important; + } +}