diff --git a/mu-plugins/blocks/global-header-footer/blocks.php b/mu-plugins/blocks/global-header-footer/blocks.php index 42515d0c2..c60c88dd9 100644 --- a/mu-plugins/blocks/global-header-footer/blocks.php +++ b/mu-plugins/blocks/global-header-footer/blocks.php @@ -16,6 +16,7 @@ add_action( 'wp_head', __NAMESPACE__ . '\preload_google_fonts' ); add_filter( 'style_loader_src', __NAMESPACE__ . '\update_google_fonts_url', 10, 2 ); add_filter( 'render_block_core/navigation-link', __NAMESPACE__ . '\swap_submenu_arrow_svg' ); +add_filter( 'render_block_core/search', __NAMESPACE__ . '\swap_header_search_action', 10, 2 ); /** * Register block types @@ -1084,3 +1085,22 @@ function( $val, $key ) use ( &$urls ) { function swap_submenu_arrow_svg( $block_content ) { return str_replace( block_core_navigation_link_render_submenu_icon(), "", $block_content ); } + +/** + * Replace the search action url with the custom attribute. + * + * @param string $block_content The block content about to be appended. + * @param array $block The block details. + * @return string The filtered block content. + */ +function swap_header_search_action( $block_content, $block ) { + if ( ! empty( $block['attrs']['formAction'] ) ) { + $block_content = str_replace( + 'action="' . esc_url( home_url( '/' ) ) . '"', + 'action="' . esc_url( $block['attrs']['formAction'] ) . '"', + $block_content + ); + } + + return $block_content; +} diff --git a/mu-plugins/blocks/global-header-footer/header.php b/mu-plugins/blocks/global-header-footer/header.php index 12dbd21c1..b9e34fec1 100644 --- a/mu-plugins/blocks/global-header-footer/header.php +++ b/mu-plugins/blocks/global-header-footer/header.php @@ -18,6 +18,14 @@ $container_class .= ' global-header__has-locale-title'; } +$search_args = array( + 'label' => _x( 'Search', 'button label', 'wporg' ), + 'placeholder' => _x( 'Search WP.org...', 'input field placeholder', 'wporg' ), + 'buttonPosition' => 'button-inside', + 'buttonUseIcon' => true, + 'formAction' => 'https://wordpress.org/search/do-search.php', +); + ?> @@ -89,51 +97,8 @@ - - - -
- + diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss index 7b5829813..75444b272 100644 --- a/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss +++ b/mu-plugins/blocks/global-header-footer/postcss/header/search.pcss @@ -27,6 +27,10 @@ padding-top: 16px; background-position: center; } + + &:focus { + outline: 1px dotted currentColor; + } } & .wp-block-navigation__responsive-container-open { @@ -62,17 +66,25 @@ } } - & .global-header__search-form { + & .wp-block-search { margin-top: 0; width: 100%; @media (--tablet) { padding: 20px; - width: auto; + } + + & .wp-block-search__inside-wrapper { + padding: 0; + border: none; + border-radius: 2px; + background-color: var(--wp--preset--color--white); + color: var(--wp--preset--color--black); + font-size: inherit; } & .wp-block-search__label { - display: inline-block; + display: block; margin-bottom: 20px; font-size: 21px; @@ -92,63 +104,45 @@ } } - & .wp-block-search__inside-wrapper { - position: relative; - - &:focus-within { - outline: 1px dotted currentColor; - } - } - & .wp-block-search__input { - width: 100%; - padding: var(--wp--custom--form--padding); - padding-right: 50px; /* Prevent user input from running into icon. */ - border: none; - border-radius: 2px; - background-color: var(--wp--preset--color--white); - color: var(--wp--preset--color--black); - font-size: inherit; -webkit-appearance: none; /* Remove duplicate magnifying glass icon on Safari-mobile. */ + padding: var(--wp--custom--form--padding); + box-shadow: none; @media (--tablet) { - padding-right: 35px; /* Prevent user input from running into icon. */ - padding-top: calc(0.5 * var(--wp--custom--form--padding)); - padding-bottom: calc(0.5 * var(--wp--custom--form--padding)); - } - - &:focus { - outline: none; + padding: calc(var(--wp--custom--form--padding) * 0.5) var(--wp--custom--form--padding); } &::placeholder { color: #6a6a6a; opacity: 1; } + + &:focus { + outline: revert; + } } & .wp-block-search__button { - position: absolute; - right: 0; - top: 0; - width: 20px; - height: 100%; - mask-image: url(../images/search.svg); - mask-size: 20px auto; - mask-repeat: no-repeat; - mask-position: center; - background-color: var(--wp--preset--color--dark-grey); - margin: 0 30px; - padding: 0; + padding: 8px 12px; + background-color: transparent; + color: var(--wp--preset--color--black); - @media (--tablet) { - width: 13px; - mask-size: 13px auto; - margin: 0 12px; + & svg { + fill: currentColor; + height: 32px; + width: 32px; + + @media (--tablet) { + min-height: 20px; + height: 20px; + min-width: 20px; + width: 20px; + } } - &:hover { - cursor: pointer; + &:focus { + outline: revert; } } }