Welcome to a new installment of the series where I look at the current state of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ blocks and propose improvements.

In my previous post, I talked about the Table blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. 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 sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. 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:

• Styles
• Display Settings
• Spacing Settings
• Border Settings
• Typography
• Color

Styles

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.

You can check all the designs I presented in this post in this Figma file and follow the development status in this GitHub search.

And as always, if you have any thoughts or feedback for this block, please drop a comment below. Thank you!

#blocks, #design, #gutenberg, #search, #site-editor