検索ブロック

Go back to the list of Blocks

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

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

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

Detailed instructions on adding blocks can be found here.

Block Toolbar 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 five buttons:

  • Transform to
  • Moving handles
  • Change alignment
  • Toggle Search Label
  • Change Button Position
  • Use Button with Icon
  • More options

Adding placeholder text

When you add a search block, there is an option to add placeholder text that will show up in the search field until the user types in the search term.

Transform to:

When you click on the “Transform” button you can convert the Search block into another block type, by using the existing content.

You can transform the Quote block into “Group” block. This would give you the ability to change the background color around the Search block.

Moving handles

The drag handle can be used to drag the block to move it to a different location in your document.

The up and down arrow icons can be used to shift a block up and down in your document.

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

Change alignment – Use reusable block 

Alignment-dropdown

Alignment:

  • Align Left
  • Align Center
  • Align Right
  • Wide Width (if supported by your Theme)
  • Full Width (if supported by your Theme)

Toggle Search Label

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

Change Button Position

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

  • No Button
  • Button Outside – Default
  • Button Inside

No Button – Removes the Search button entirely. Only the Search Text field shows on the page.

Button Inside – The search button is part of the search text field.

More Options:

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.

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the embed block.

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 Block

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

トップ ↑

Block Settings 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.

The block settings can be found in the sidebar.

The width of the search block can be set in 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.

Changelog

  • Created 2020-12-03

この記事は役に立ちましたか ? どうすればさらに改善できますか ?