From ee1995d3970487832dfc9261b30b85c094a115a1 Mon Sep 17 00:00:00 2001 From: Kelly Dwan <ryelle@users.noreply.github.com> Date: Mon, 14 Feb 2022 13:18:57 -0500 Subject: [PATCH] Search: Use search block with icon button (#155) * Search: Use markup from "button inside" and "icon button" search * Ensure the focus style is visible * Remove unused attribute --- .../blocks/global-header-footer/blocks.php | 20 +++++ .../blocks/global-header-footer/header.php | 53 ++---------- .../postcss/header/search.pcss | 82 +++++++++---------- 3 files changed, 67 insertions(+), 88 deletions(-) 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(), "<svg width='10' height='7' viewBox='0 0 10 7' stroke-width='1.2' xmlns='http://www.w3.org/2000/svg'><path d='M0.416667 1.33325L5 5.49992L9.58331 1.33325'></path></svg>", $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', +); + ?> <!-- wp:group {"tagName":"header","align":"full","className":"<?php echo esc_attr( $container_class ); ?>"} --> @@ -89,51 +97,8 @@ <!-- /wp:navigation --> <?php if ( $show_search ) : ?> - <!-- - The search block is inside a navigation submenu, because that provides the exact functionality the design - calls for. It also provides a consistent experience with the primary navigation menu, with respect to - keyboard navigation, ARIA states, etc. It also saves having to write custom code for all the interactions. - --> <!-- wp:navigation {"orientation":"vertical","className":"global-header__search","overlayMenu":"always"} --> - <!-- wp:html --> - <!-- - This markup is forked from the `wp:search` block. The only reason we're not using that, is because the - `action` URL can't be customized. - - @link https://github.com/WordPress/gutenberg/issues/35572 - - The only things that changed were: - - 1) The instance ID was changed to `99`, to make it likely to be unique. - 2) Internationalizing the labels. See https://github.com/WordPress/gutenberg/issues/36061 and - related issues for a possible future alternative. - - If that issue is ever resolved, we should be able to replace this with the Search block, without having - to change any CSS. - --> - <form - role="search" - method="get" - action="https://wordpress.org/search/do-search.php" - class="wp-block-search__button-outside wp-block-search__text-button global-header__search-form wp-block-search" - > - <label for="wp-block-search__input-99" class="wp-block-search__label"> - <?php echo esc_html_x( 'Search', 'button label', 'wporg' ); ?> - </label> - <div class="wp-block-search__inside-wrapper"> - <input - type="search" - id="wp-block-search__input-99" - class="wp-block-search__input" - name="s" - value="" - placeholder="<?php echo esc_attr_x( 'Search WP.org...', 'input field placeholder', 'wporg' ); ?>" - required="" - > - <button type="submit" class="wp-block-search__button" aria-label="<?php echo esc_attr_x( 'Submit search', 'button label', 'wporg' ); ?>"></button> - </div> - </form> - <!-- /wp:html --> + <!-- wp:search <?php echo wp_json_encode( $search_args ); ?> /--> <!-- /wp:navigation --> <?php endif; ?> 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; } } }