A Walk Around… The Search Block

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

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

Searchbox Inventory for WordPress.org

Here’s the documentation of all the searchboxes I found across WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. Feel free to doublecheck me. Included screenshots for cases different from the standard headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. searchbox.

Homepage – https://wordpress.org/

  • Standard Searchbox in header (Searches Documentation/Codex)
  • Screenshot: http://cl.ly/2u2M0R0J0H3X2h2B2C2d

Showcase – https://wordpress.org/showcase/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • Site Searchbox in Right Column (Searches entire Showcase/Same search parameters regardless of TagTag Tag is one of the pre-defined taxonomies in WordPress. Users can add tags to their WordPress posts along with categories. However, while a category may cover a broad range of topics, tags are smaller in scope and focused to specific topics. Think of them as keywords used for topics discussed in a particular post. or Flavor)
  • Screenshot: http://cl.ly/130G1e0J0y43073a2B0m

Extend – https://wordpress.org/extend/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • Extend/Plugins – https://wordpress.org/extend/plugins/
    • Standard Searchbox in the header (Searches Documentation/Codex)
    • PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party search box in main content area (Searches plugin directory)
    • Screenshot: http://cl.ly/0G0o3x1v0d121V2v0Q0Q
    • Extend/Plugins/Search – ex. https://wordpress.org/extend/plugins/search.php?q=jetpack&sort=
      • Standard Searchbox in the header (Searches Documentation/Codex)
      • Plugin Searchbox in main body (searches plugin directory)
      • Screenshot: http://cl.ly/441t10200i2z1h0h1501
    • Extend/Plugins/Tags – ex. https://wordpress.org/extend/plugins/tags/widget
      • Standard Searchbox in the header (Searches Documentation/Codex)
      • Plugin Searchbox in left column (Searches entire plugin directory)
      • Screenshot: http://cl.ly/0A1P1I0I3G370V1f2g0l
    • Extend/Plugins/Developer Center – ex. https://wordpress.org/extend/plugins/about/
      • Standard Searchbox in the header (Searches Documentation/Codex)
      • Plugin Searchbox in left column (Searches entire plugin directory)
      • Screenshot: http://cl.ly/0A1P1I0I3G370V1f2g0l
      • All subpages with the same scheme.
  • Extend/Themes – https://wordpress.org/extend/themes/
    • Standard Searchbox in the header (Searches Documentation/Codex)
    • Theme Directory search box in main content area (Searches theme directory)
    • Screenshot: http://cl.ly/3o1F0v370U0v012m0q3h
    • Subpages only have the standard Searchbox in the header
  • Extend/Ideas – https://wordpress.org/extend/mobile/
    • Standard Searchbox in the header (Searches Documentation/Codex)
    • Idea Searchbox in the main body (Searches Ideas Forum)
    • Screenshot: http://cl.ly/3T1D290G082U0V0p0P2c
    • Extend/Ideas/Search – ex. https://wordpress.org/extend/ideas/search.php?search=database&forum_id=0
      • Standard Searchbox in the header (Searches Documentation/Codex)
      • Not as pretty Idea Search in the main body (Searches Ideas Forum)
      • Screenshot: http://cl.ly/1j1R4046181I1r0x0J0N

About – https://wordpress.org/about/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • All Subpages have the same searchbox scheme

Docs – https://codex.wordpress.org/Main_Page

  • Standard Searchbox in the header (Searches Documentation/Codex, has different placeholder text: Search the Codex vs Search WordPress.org)
  • All Subpages have the same searchbox scheme

Blog – https://wordpress.org/news/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • All Subpages have the same searchbox scheme

Forums – https://wordpress.org/support/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • Forum Searchbox in the left column
  • Screenshot: http://cl.ly/423B3N0i280e1N133R2J
  • Subpages and Forum Templates only have the standard Searchbox in the header

Hosting – https://wordpress.org/hosting/

  • Standard Searchbox in the header (Searches Documentation/Codex)

Download – https://wordpress.org/download/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • Subpages and Forum Templates only have the standard Searchbox in the header

Also, found this to be a little unsightly: when on the Hosting page, the active tab in the main navigation touches up against the Downlaod tab. Could we add some margin here? Screenshot: http://cl.ly/101U161b411q19461x1D

#search, #wordpress-org