Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search: Use search block with icon button #155

Merged
merged 3 commits into from
Feb 14, 2022
Merged

Search: Use search block with icon button #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
82f8373
Search: Use markup from "button inside" and "icon button" search
ryelle Jan 18, 2022
4825d78
Ensure the focus style is visible
ryelle Feb 11, 2022
d50d508
Remove unused attribute
ryelle Feb 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions mu-plugins/blocks/global-header-footer/blocks.php
View file
Open in desktop
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
Open in desktop
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.
-->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was removing the above comment intentional? It's not related to how the search block was forked, and still seems like helpful documentation to me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought it was outdated since the submenu wrapper was removed in #119, but I guess it could be referring to the nav wrapper itself? Feel free to put it back, if so.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think it's there to address the confusion over why a search box would be inside a menu.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

restored in 1951c16

<!-- 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
Open in desktop
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