Skip to content

Commit

Permalink
Search: Use search block with icon button (#155)
Browse files Browse the repository at this point in the history 
* Search: Use markup from "button inside" and "icon button" search

* Ensure the focus style is visible

* Remove unused attribute
  • Loading branch information
@ryelle
ryelle authored Feb 14, 2022
1 parent 60e7286 commit ee1995d
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 88 deletions.
20 changes: 20 additions & 0 deletions mu-plugins/blocks/global-header-footer/blocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
53 changes: 9 additions & 44 deletions mu-plugins/blocks/global-header-footer/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ); ?>"} -->
Expand Down Expand Up @@ -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; ?>

Expand Down
82 changes: 38 additions & 44 deletions mu-plugins/blocks/global-header-footer/postcss/header/search.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
padding-top: 16px;
background-position: center;
}

&:focus {
outline: 1px dotted currentColor;
}
}

& .wp-block-navigation__responsive-container-open {
Expand Down Expand Up @@ -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;

Expand All @@ -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;
}
}
}
Expand Down

0 comments on commit ee1995d

Please sign in to comment.