Search Block

Go back to the list of Blocks

The Search block allows you to place a search widget on your page or post.

To add a search block, click on the Block Inserter icon.

Adding a search block

You can also type /search and hit the Enter key in a new paragraph block to add one quickly.

Adding a search block using the shortcut

Detailed instructions on adding blocks can be found here.

Block Toolbar

Every block comes with unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.

The Search block shows standard eight buttons:

  • Transform to
  • Drag icon
  • Move handles
  • Change text alignment
  • Toggle search label
  • Change button position
  • Use button with Icon
  • More options
Block settings in the search block

Top ↑

Adding placeholder text

When you add a search block, you have an option to add placeholder text inside the search field. The placeholder text is displayed until the user starts typing in a search term in the search field.

Adding placeholder text in the search block

Transform to

Transform tool in the search block
Transform tool in the search block

When you click on the “Transform” button you can convert the Search block into another block type while keeping the existing content.

Click on the “Transform” button to convert the Search block into a “Columns” or “Group” block. “Group” gives you the ability to change the background color around the Search block.

Drag icon

Drag icon in the search block

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move handles

The up and down arrow icons can be used to shift a block up and down on the page.

Detailed instructions on moving a block within the editor can be found here

Change text alignment

Change text alignment in the search block
  • None
  • Align left – Make the block left-aligned.
  • Align center – Make the block alignment centered.
  • Align right – Make the block right aligned.

Toggle search label

This button can be used to hide the search field label.

Toggle search label in the search block

Change button position

This button can be used to change the position of the search button. There are three options to choose from:

  • Button outside – the default setting.
  • Button inside – the search button is part of the search text field.
  • No button – removes the Search button and only displays the Search text field on the page.
Button outside setting in the search block
Button outside setting

Button inside setting in the search block
Button inside setting
No button setting in the search block
No button setting

Use button with icon

The search button can be either text or icon.

Search button with text in the search block
Search button with text
Search button with icon in the search block
Search button with icon

Clicking on the Search button or the Search title in the search block will display three more buttons in the Block Toolbar – Bold, Italic and More Rich Text controls.

More block settings in the search block

Bold

Bold setting in the search block

You can select the text in the Search title or the Search button and use the “Bold” option or “Ctrl+B” / “Cmd+B” on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic

Italic setting in the search block

You can select the text in the Search title or the Search button and use the “Italic” option or “Ctrl+I” / “Cmd+I” on your keyboard to italicize it, which usually appears slanted to the right.

More Rich Text controls

Highlight

Use the Highlight option to change the color for selected text and its background.

More rich text controls in the search block

Inline code

Use the Inline code feature to format code snippets within your text differently. Not only that, but Inline code formatting also prevents the code to be executed instead of displayed.

Inline image

The Inline image feature allows you to add an image to your block. It has one option: enter the desired pixel width for your image.

Keyboard Input

The Keyboard Input option allows you to add the <kbd> tag to selected text.

Strikethrough

Use the Strikethrough option to place a horizontal line through the middle of the selected text.

Example: Search Block

Subscript

Use the Subscript option to set the selected text slightly below the normal line of type.

Example: Search Block

Superscript

Use the Superscript option to set the selected text slightly above the normal line of type.

Example: Search Block

More Options:

More options in the search block

Hide Block Settings

The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert before

Insert a new block before the selected block(s).

Insert after

Insert a new block after the selected block(s).

Move to

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Lock

Since WordPress 6.0, you can lock the block to disallow moving and/or removing. If you lock the block, “Lock” icon will be shown at the Block Toolbar.

Locking the Search block

For more details about Lock, refer More Options.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Search

With the Remove Search option, you can delete the selected block from your content.

Top ↑

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

Block settings in the search block

Color settings:

You can customize the text color, and background color, for the Search block. The color options available will vary based on the theme.

Color settings  in the search block
Color settings in the Search block

Border settings:

You can configure the border width, border color and the border radius of the Search field inside the Search block from the block settings.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Top ↑

Changelog

  • Updated 2022-06-16
    • Update screenshots, added video for 6.0
    • Updated content for 6.0
    • Added ALT tags for images
  • Updated 2022-06-06
    • Update settings screenshot for 6.0
    • Add “Use button with icon” section
  • Updated 2022-02-04
    • Updated screenshots to 5.9
  • Created 2020-12-03

Was this article helpful? How could it be improved?