Block Styles: Add the Secondary Search block style on search block (#61)

WordPress · Dec 1, 2022 · 24550ca · 24550ca
1 parent e175506
commit 24550ca
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 0 deletions.
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
@@ -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
@@ -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;
+ }
+}