Title: Search block
Author: Chandrika Sista
Published: December 3, 2020
Last modified: May 25, 2026

---

# Search block

## In this article

 * [Block toolbar](https://wordpress.org/documentation/article/search-block/?output_format=md#block-toolbar)
    - [Adding placeholder text](https://wordpress.org/documentation/article/search-block/?output_format=md#adding-placeholder-text)
    - [Transform to](https://wordpress.org/documentation/article/search-block/?output_format=md#transform-to)
    - [Drag icon](https://wordpress.org/documentation/article/search-block/?output_format=md#drag-icon)
    - [Move arrows](https://wordpress.org/documentation/article/search-block/?output_format=md#move-arrows)
    - [Change text alignment](https://wordpress.org/documentation/article/search-block/?output_format=md#change-text-alignment)
    - [Toggle search label](https://wordpress.org/documentation/article/search-block/?output_format=md#toggle-search-label)
    - [Change button position](https://wordpress.org/documentation/article/search-block/?output_format=md#change-button-position)
    - [Use button with icon](https://wordpress.org/documentation/article/search-block/?output_format=md#use-button-with-icon)
    - [Bold](https://wordpress.org/documentation/article/search-block/?output_format=md#bold)
    - [Italic](https://wordpress.org/documentation/article/search-block/?output_format=md#italic)
    - [More rich text options](https://wordpress.org/documentation/article/search-block/?output_format=md#more-rich-text-options)
    - [More options](https://wordpress.org/documentation/article/search-block/?output_format=md#more-options)
 * [Block settings](https://wordpress.org/documentation/article/search-block/?output_format=md#block-settings)
    - [Display settings](https://wordpress.org/documentation/article/search-block/?output_format=md#display-settings)
    - [Color](https://wordpress.org/documentation/article/search-block/?output_format=md#color)
    - [Typography](https://wordpress.org/documentation/article/search-block/?output_format=md#typography)
    - [Border](https://wordpress.org/documentation/article/search-block/?output_format=md#border)
    - [Dimensions](https://wordpress.org/documentation/article/search-block/?output_format=md#dimensions)
    - [Advanced](https://wordpress.org/documentation/article/search-block/?output_format=md#advanced)
 * [Changelog](https://wordpress.org/documentation/article/search-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/search-block/?output_format=md#wp--skip-link--target)

[Go back to the list of **Blocks**](https://wordpress.org/documentation/article/blocks/)

Use the Search block to place a search widget on your page or post.

![The search block](https://wordpress.org/documentation/files/2023/08/search-block-
1024x502.jpg)

Click **Block inserter **(**+**) icon to open the block inserter pop-up window and
search for the _Search block_.

Demonstration to add a search block

You can also use the keyboard shortcut /search to quickly insert a _Search block_.

Detailed instructions on adding blocks can be found [here](https://wordpress.org/support/article/adding-a-new-block/).

## 󠀁[Block toolbar](https://wordpress.org/documentation/article/search-block/?output_format=md#block-toolbar)󠁿

To view the block toolbar, click on the block, and the toolbar will be displayed.

![Search block toolbar](https://wordpress.org/documentation/files/2023/02/toolbar.
png)

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

### 󠀁[Adding placeholder text](https://wordpress.org/documentation/article/search-block/?output_format=md#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.

![Search block placeholder text](https://wordpress.org/documentation/files/2023/
02/placeholder-text-3-1024x241.png)

### 󠀁[Transform to](https://wordpress.org/documentation/article/search-block/?output_format=md#transform-to)󠁿

![](https://wordpress.org/documentation/files/2020/12/2026-04-22_08-38-1.jpg)

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_, 
_Details_ or _Group_ block. _Group_ block gives you the ability to change the background
color around the _Search block_.

### 󠀁[Drag icon](https://wordpress.org/documentation/article/search-block/?output_format=md#drag-icon)󠁿

![Drag icon on the search block toolbar](https://wordpress.org/documentation/files/
2023/02/drag-icon.png)

To drag and drop the block to a new location on the page template, click and hold
the **drag** icon, then drag it 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 arrows](https://wordpress.org/documentation/article/search-block/?output_format=md#move-arrows)󠁿

![Move arrows on the search block toolbar](https://wordpress.org/documentation/files/
2023/02/move-block-arrows.png)

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](https://wordpress.org/support/article/moving-blocks/)

### 󠀁[Change text alignment](https://wordpress.org/documentation/article/search-block/?output_format=md#change-text-alignment)󠁿

![Alignment tool on the search block toolbar](https://wordpress.org/documentation/
files/2023/02/alignment.png)

Use the change alignment tool to align the _Search block_. The following is a list
of the block align options:

 * 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](https://wordpress.org/documentation/article/search-block/?output_format=md#toggle-search-label)󠁿

![Toggle search button on the search block toolbar](https://wordpress.org/documentation/
files/2023/02/toggle-search-label.png)

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

### 󠀁[Change button position](https://wordpress.org/documentation/article/search-block/?output_format=md#change-button-position)󠁿

![Change button position](https://wordpress.org/documentation/files/2023/08/image4-
1024x531.jpg)

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 only** – displays only the Search button and hides the Search input 
   text field

![Search block with button inside setting](https://wordpress.org/documentation/files/
2023/02/searchblock.png)

Button inside setting

![Search block with no button setting](https://wordpress.org/documentation/files/
2023/02/search-placeholder-1.png)

No button setting

![Button only setting](https://wordpress.org/documentation/files/2023/08/image5.
jpg)

Button only setting

### 󠀁[Use button with icon](https://wordpress.org/documentation/article/search-block/?output_format=md#use-button-with-icon)󠁿

The search button can be either text or icon.

![Search button with icon](https://wordpress.org/documentation/files/2023/02/search-
button-text.png)

Search button with text

![Search button with icon](https://wordpress.org/documentation/files/2023/02/search-
button-with-icon.png)

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.

![Text formatting options on the search block toolbar](https://wordpress.org/documentation/
files/2023/02/text-formatting.png)

### 󠀁[Bold](https://wordpress.org/documentation/article/search-block/?output_format=md#bold)󠁿

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](https://wordpress.org/documentation/article/search-block/?output_format=md#italic)󠁿

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 options](https://wordpress.org/documentation/article/search-block/?output_format=md#more-rich-text-options)󠁿

The drop-down menu to the left of the [More options menu](https://wordpress.org/documentation/article/more-options/)
contains a range of additional rich text editing options such as highlighting, inline
code, strikethrough, and more.

[Read about more rich text editing options.](https://wordpress.org/documentation/article/more-text-editing-overview/)

### 󠀁[More options](https://wordpress.org/documentation/article/search-block/?output_format=md#more-options)󠁿

The Options menu represented by three vertical dots on the far right of the toolbar
gives you more features such as the ability to duplicate or remove the block.

[Read about these and other settings.](https://wordpress.org/documentation/article/more-options/)

## 󠀁[Block settings](https://wordpress.org/documentation/article/search-block/?output_format=md#block-settings)󠁿

The block settings panel contains customization options specific to the block. To
open it, select the block and click the **Settings** icon next to the **Publish **
button.

![How to open the block settings sidebar ](https://wordpress.org/documentation/files/
2023/08/image6-1-300x71.jpg)

### 󠀁[Display settings](https://wordpress.org/documentation/article/search-block/?output_format=md#display-settings)󠁿

It’s possible to adjust the **Search**_ _block width with the help of the Display
Settings:

![Search block display settings](https://wordpress.org/documentation/files/2023/
02/display-settings.png)

Alternatively, you can drag the block itself with your mouse:

![Search block drag tool](https://wordpress.org/documentation/files/2023/02/button-
drag.png)

### 󠀁[Color](https://wordpress.org/documentation/article/search-block/?output_format=md#color)󠁿

The **Search**_ _block_ _provides Color settings options to change the text and 
background colors.

For details, refer to this support article: [Color settings overview](https://wordpress.org/support/article/colors-settings-overview/)

### 󠀁[Typography](https://wordpress.org/documentation/article/search-block/?output_format=md#typography)󠁿

The **Search**_ _block_ _provides typography settings to change the font family,
size, appearance, line height, letter case, letter spacing, and decoration.

For details, refer to this support article: [](https://wordpress.org/support/article/colors-settings-overview/)
[Typography settings overview](https://wordpress.org/support/article/typography-settings-overview/)

### 󠀁[Border](https://wordpress.org/documentation/article/search-block/?output_format=md#border)󠁿

The **Search**_ _block provides border settings options to change border and radius
size.

![Search block border settings](https://wordpress.org/documentation/files/2023/02/
border.png)

For details, refer to this support article: [Border settings overview](https://wordpress.org/documentation/article/border-settings-overview/)

### 󠀁[Dimensions](https://wordpress.org/documentation/article/search-block/?output_format=md#dimensions)󠁿

The **Search** block provides dimension settings options to change padding and margin
size.

![](https://wordpress.org/documentation/files/2020/12/2026-04-22_08-32.jpg)

For details, refer to this support article: [Dimension settings overview](https://wordpress.org/documentation/article/dimension-controls-overview/)

### 󠀁[Advanced](https://wordpress.org/documentation/article/search-block/?output_format=md#advanced)󠁿

The Search block provides the following Advanced settings options: HTML anchor, 
Additional CSS Class(es), and Styles.

[Learn more about advanced settings](https://wordpress.org/documentation/article/advanced-settings-overview/)

## 󠀁[Changelog](https://wordpress.org/documentation/article/search-block/?output_format=md#changelog)󠁿

 * Updated 2026-04-22
    - Add dimension support since 6.7 – (rollybueno)
    - Updated “Transform to” screenshot – (rollybueno)
 * Updated 2023-08-24
    - Updated screennshots and videos for 6.3
 * Updated 2023-06-20
    - Updated rich text options section
 * Updated 2023-02-07
    - Updated screenshots
    - Fixed formatting
 * Updated 2022-11-26
    - Removed redundant content
 * Updated 2022-06-16
    - Updated 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? 󠀁[Cancel reply](https://wordpress.org/documentation/article/search-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Fsearch-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

December 3, 2020

Last updated

May 25, 2026