A customizable search modal block that adds an elegant and accessible search experience to your WordPress site.

philhoyt

<p>The Search Modal Block enhances your WordPress site with a modern, popup search interface that’s both beautiful and functional. Built specifically for the block editor (Gutenberg), it provides a seamless way to add search functionality to any part of your content.</p>
<p><strong>Key Features:</strong></p>
<ul>
<li>Clean, minimal design that works with any theme</li>
<li>Fully responsive layout</li>
<li>Accessibility-ready with ARIA labels and keyboard navigation</li>
<li>Customizable text elements:
<ul>
<li>Search input placeholder</li>
<li>Search button text</li>
<li>Screen reader labels</li>
</ul>
</li>
<li>Focus-visible support for better keyboard navigation</li>
<li>Seamless integration with WordPress search</li>
</ul>
<p><strong>Perfect For:</strong></p>
<ul>
<li>Minimalist themes needing an elegant search solution</li>
<li>Sites wanting to improve their search UX</li>
<li>Accessibility-focused websites</li>
<li>Any WordPress site using the block editor</li>
</ul>
<h3>Development</h3>
<p>This block is built using the WordPress Create Block tool, ensuring compatibility with modern WordPress standards and practices. The source code is available in the plugin’s <code>/src</code> directory.</p>
<h4>Building from Source</h4>
<p>To build the plugin from source:</p>
<ol>
<li>Clone the repository</li>
<li>Install dependencies with <code>npm install</code></li>
<li>Run <code>npm run build</code> to build the production files</li>
<li>For development, use <code>npm run start</code> to start the development server</li>
</ol>
<p>The build process uses @wordpress/scripts to compile and minify the JavaScript and CSS files. The source code for the compiled files in the <code>/build</code> directory can be found in the <code>/src</code> directory.</p>
<h4>Development Dependencies</h4>
<ul>
<li>@wordpress/scripts: ^32.4.1</li>
<li>@wordpress/eslint-plugin: ^25.4.1</li>
<li>@wordpress/stylelint-config: ^23.40.1</li>
<li>eslint: ^9.39.4</li>
</ul>
<p>The complete source code is available on GitHub: https://github.com/philhoyt/search-modal-block</p>
<h3>Credits</h3>
<p>This plugin uses the following third-party libraries:</p>
<ul>
<li><a href="https://micromodal.vercel.app/" rel="nofollow ugc">MicroModal</a> – A lightweight, configurable modal library for web applications.</li>
</ul>


Search Modal Block


I tried this plugin just now for a site that I am building. It does its focused task very well! I wish the function were there in core, but this one fills the gap perfectly! Thanks to the developer for building and sharing this!


Alternatives to Search Modal Block

Top alternatives