Content · Gutenberg
Search Bar block for WordPress
Styled search field and button for site search with live AJAX suggestions option.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Styled search field and button for site search with live AJAX suggestions option.
Inspector panels on this block: Search Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “Style — Alignment” options: Left, Center, Right, Full Width.
Where to find it
Gutenberg inserter → Content → search “Search Bar” (block name `blockenberg/search-bar` in block.json). Style it in the sidebar after insert.
How to use Search Bar block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Search Bar”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Search Settings. Set “Placeholder”, “Show Button”, “Button Icon”, “Button Label”.
- Check the published page. The view script reads HTML data attributes: data-live. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Placeholder | Text field in the inspector. block.json default: Search…. Saved as `placeholder`. |
| Show Button | On/off toggle in the inspector. On by default. Saved as `showBtn`. |
| Button Icon | On/off toggle in the inspector. On by default. Saved as `btnIcon`. |
| Button Label | Text field in the inspector. block.json default: Search. Saved as `btnLabel`. |
| Live AJAX Search | On/off toggle in the inspector. Off by default. Saved as `liveSearch`. |
| Style — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right; Full Width. block.json default: center. Saved as `alignment`. |
| Max Width (px) | Numeric range control in the inspector. Range 200–960. block.json default: 560. Saved as `maxWidth`. |
| Field Height (px) | Numeric range control in the inspector. Range 32–80. block.json default: 48. Saved as `fieldHeight`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `borderRadius`. |
| Font Size (px) | Numeric range control in the inspector. Range 12–24. block.json default: 15. Saved as `fontSize`. |
| Field Background | Color control in the inspector. block.json default: #ffffff. Saved as `fieldBg`. |
| Field Border | Color control in the inspector. block.json default: #d1d5db. Saved as `fieldBorder`. |
| Field Text | Color control in the inspector. block.json default: #111827. Saved as `fieldText`. |
| Button Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnText`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-live.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
When this is the right block
- Styled search field and button for site search with live AJAX suggestions option — that is the job of Search Bar, not a generic content block.
- Use it when you need the editor control labeled “Placeholder”, which exists on this block’s inspector.
- It matches pages about search, find, bar.
- Inserter grouping: articles, cards, lists, and long-form layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Search Bar block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Search Bar”. It sits under Content. After insert, open Search Settings and set “Placeholder”, “Show Button”, “Button Icon”, “Button Label”.
What makes Search Bar different from other Blockenberg blocks?
Styled search field and button for site search with live AJAX suggestions option. Inspector labels on this block include “Placeholder”, “Show Button”, “Button Icon”, “Button Label”.
Is the Search Bar Gutenberg block free?
Yes. Search Bar ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Search Bar to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Search Settings).
Related content blocks
Progress Bar
Display animated progress bars with customizable styles and labels.
Step Progress
Horizontal wizard progress bar showing current step out of N with labels and colors.
Accordion
Collapsible accordion panels for FAQ, features, and more.
Accordion Table
A data table where each row expands on click to reveal rich detail content — specs, bullet points, sub-data, or notes. Perfect for pricing tiers, product specs, API docs, and comparison matrices.
Alert / Notice
Info, success, warning or error notice block with icon, title and body text. Pure CSS — zero JS.
Big Stat
Display a single large impactful statistic with prefix, suffix, label, and multiple visual styles.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Search Bar from the Gutenberg inserter.