Welcome to a new installment of the series where I look at the current state of Gutenberg blocks and propose improvements.
In my previous post, I talked about the Table block. This time I’ll be discussing another important component: the Search block.
Since search is a central activity for blogs and other sites that index content, it’s essential to give users the ability to customize the appearance of their search bars so that they don’t look alien or feel disconnected from the design of their sites.
The Search block options are pretty limited at the moment, and the block can only offer a short range of styles. The good news is that just by adding a small group of settings (many of which already exist for other blocks), users will be able to customize their search boxes in many different ways:
With that in mind, let’s have a look at this block.
Toolbar
The current toolbar has three main buttons that perform the following actions:
Showing and hiding the search label.
Changing the position of the search button (outside, inside, or no button).
Toggling between a search button with text or an icon.
To be more consistent with the way other blocks present the options and also to simplify the toolbar, we could move the second and third buttons (“Change button position” and “Use the button with icon”) from the toolbar to the sidebar. In the case of “Use button with icon”, I think this is not a primary action, and also the icon itself doesn’t convey the actual operation behind the button.
We could also add a setting to modify the alignment of the text inside the input field and the position of the text button. Controlling the alignment would allow users to create bars like these ones:
For languages that use right to left scripts like Arabic, Hebrew, or Urdu, we automatically switch the alignment of the text and the position of the search button.
To allow having styles that use the writing direction defined by the language, we could offer four alignment options:
Default (it uses the direction of the selected language)
Left
Center
Right
The last three options would overwrite the direction defined by the selected language.
Sidebars
Let’s review how the sidebar could look like and the sections that it would include:
This section would replace the “Change button position” that we removed from the sidebar, and add a new option: Button only. There’s an open issue that discusses this option here.
When users add a new search bar, they’ll get the default setting (Button outside), but will have the other styles visible on their sidebars for a quick switch.
Display settings
This section would allow adjusting the general width of the block (a feature that is currently present) and also toggling the following settings:
The icon inside the search input.
The icon inside the search button.
Here is a list of variations that those two settings would produce:
Spacing
In this section, users could change the padding of the item and also affect the spacing (the distance between the button and the input field).
There’s an interesting conversation around contextual padding controls in this GitHub issue, which could probably be applied to this block.
Depending on the style (button outside or button inside) the padding could behave differently:
If the style button outside is selected, the padding will affect both the input field and the button.
If the style button inside is selected, the padding will affect the outermost element.
The spacing setting could also be adjusted using a handle in the block itself. The control between the input field and the button would change the spacing, whereas the control in the button would allow resizing the whole block (which is the current behaviour).
Border
I think we should allow users to modify the border of the input field and the button independently for each of the four sides. That would give them great control to create different styles. For instance, they could create search bars with just a bottom border.
There’s an open PR that deals with border color support and border style here.
Typography
Depending on what element is selected, the typography section would affect the font and style of the input field, the text button, or the label.
Color
Like in the typography section, this one would affect the text and background colors of both the input and the button (again, depending on the selection).
As I mentioned at the beginning of this post, if we implement these changes, users will be able to customize their search bars in many different and exciting ways and have more control over the design of their sites.
Wow. Beautiful exploration here! Thanks for sharing your work so clearly and comprehensively. Already excited to get my hands on these potential updates.
Wow. Beautiful exploration here! Thanks for sharing your work so clearly and comprehensively. Already excited to get my hands on these potential updates.
Love seeing these. Keep them coming. Thank you @javiarce 👏👏👏