Chris Mok

<p>[searchform] shortcodes with any post, page and even text widget.</p>
<h4>Available Attributes</h4>
<ul>
<li>result_page</li>
<li>label</li>
<li>placeholder</li>
<li>post_type</li>
<li>category_name</li>
<li>taxonomy</li>
<li>sentence</li>
<li>order</li>
<li>orderby</li>
<li>button_text</li>
</ul>
<h4>NEED HELP?</h4>
<p><strong><a href="http://webgna.com/" rel="nofollow ugc">FAQs</a></strong> | <strong><a href="http://webgna.com/" rel="nofollow ugc">Tech Support</a></strong></p>
<h3>Languages Available</h3>
<ul>
<li>English</li>
</ul>


GNA Search Shortcode

[searchform] shortcodes with any post, page and widget. Shortcode Attributes:

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: ^27.9.0</li>
<li>@wordpress/eslint-plugin: ^21.4.0</li>
<li>@wordpress/stylelint-config: ^21.41.0</li>
<li>eslint: ^8.57.1</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!


Lightweight and works great!

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

GNA Search Shortcode vs Search Modal Block