Add Searchbar Pattern/Block Styles #25
Conversation
Unfortunately there isn't a theme.json-y way of working with block styles, so what you've got is probably the best even with all the A scan of the code looks good, but I don't have a local env for showcase right now, so I'll leave the detailed review for someone else :) |
|
Lacking experience here but yeah the swath of From an a11y standpoint might be worth reviewing whether placeholder is necessary. Some recent feedback on Learn suggested it was too verbose: https://wordpress.slack.com/archives/C02RP4X03/p1663279430556099 Same as @ryelle with the local env, maybe @renintw can run it? |
The latest designs remove the label so I'll turn it off. |
|
|
||
| ?> | ||
|
|
||
| <!-- wp:search {"showLabel":false,"placeholder":"<?php esc_attr_e( 'Search sites...', 'wporg' ); ?>","width":100,"widthUnit":"%","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control"} /--> |
There was a problem hiding this comment.
"showLabel":false hides the label visually, but it's still there in the content (using the default label, "Search"), so the feedback about the overly verbose placeholder from here still applies.
There was a problem hiding this comment.
I should have verified. Thanks.
|
Opened issue specific to redundant voice over: |
This PR adds a pattern for the search bar which extends
core/searchwith block styles. This PR also introduces a style component that imports a style sheet the same way we do inwporg-main-2022. See this pull request for background info.To be honest, this is the first time I have created block styles and I'm okay if there's a better
theme.jsonway of doing it and I have to backtrack a bit. I had to use a lot of!importantdeclarations to fight specificity. I'm wondering if that's the result of this being the wrong approach.Additionally, I called this the secondary search bar because based on history, there is usually a large one that is included in the header. This search bar style seems to be only used in archive-like scenarios.
See: #9
Variations
Note: Disregard the placeholder "Search Patterns". Updated the placeholder after the screenshots. 😆
Label, Button Inside, Icon This variation is currently in the designs.
Label, Button Inside, Text
Label, Button Outside, Icon
Label, Button Outside, Text
