{"id":204076,"date":"2024-11-23T14:45:28","date_gmt":"2024-11-23T14:45:28","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/search-modal-block\/"},"modified":"2025-11-12T16:22:58","modified_gmt":"2025-11-12T16:22:58","slug":"search-modal-block","status":"publish","type":"plugin","link":"https:\/\/kea.wordpress.org\/plugins\/search-modal-block\/","author":8048003,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.2.0","stable_tag":"1.2.0","tested":"6.9.4","requires":"6.1","requires_php":"7.4","requires_plugins":null,"header_name":"Search Modal Block","header_author":"Phil Hoyt","header_description":"Responsive search modal block.","assets_banners_color":"c2c2c2","last_updated":"2025-11-12 16:22:58","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/philhoyt\/search-modal-block","header_author_uri":"https:\/\/philhoyt.com","rating":5,"author_block_rating":0,"active_installs":40,"downloads":1176,"num_ratings":2,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.1":{"tag":"1.0.1","author":"philhoyt","date":"2024-11-25 00:11:58"},"1.1.0":{"tag":"1.1.0","author":"philhoyt","date":"2025-06-03 15:44:14"},"1.2.0":{"tag":"1.2.0","author":"philhoyt","date":"2025-11-12 16:22:58"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":2},"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3195522,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3195522,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3195522,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":{"ph\/search-modal":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"ph\/search-modal","version":"1.2.0","title":"Search Modal Block","category":"widgets","icon":"search","description":"Add an elegant popup search interface to your site with customizable text and accessible design.","keywords":["search","modal","popup"],"example":{},"supports":{"html":false},"attributes":{"blockId":{"type":"string","default":""},"placeholderText":{"type":"string","default":"Search..."},"buttonText":{"type":"string","default":"Search"},"labelText":{"type":"string","default":"Search for:"},"showLabel":{"type":"boolean","default":false},"iconUrl":{"type":"string","default":""},"iconSize":{"type":"string","default":"1.5rem"}},"textdomain":"search-modal-block","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css","viewScript":"file:.\/view.js"}},"tagged_versions":["1.0.1","1.1.0","1.2.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3195522,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3195522,"resolution":"2","location":"assets","locale":""}},"screenshots":{"1":"The search modal block in the block editor with customizable settings.","2":"The search modal displayed on the frontend after being triggered by the search icon."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1220,613,234988,944,4938],"plugin_category":[],"plugin_contributors":[234989],"plugin_business_model":[],"class_list":["post-204076","plugin","type-plugin","status-publish","hentry","plugin_tags-block","plugin_tags-modal","plugin_tags-popup-search","plugin_tags-search","plugin_tags-search-form","plugin_contributors-philhoyt","plugin_committers-philhoyt"],"banners":{"banner":"https:\/\/ps.w.org\/search-modal-block\/assets\/banner-772x250.png?rev=3195522","banner_2x":"https:\/\/ps.w.org\/search-modal-block\/assets\/banner-1544x500.png?rev=3195522","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/search-modal-block\/assets\/icon-256x256.png?rev=3195522","icon_2x":"https:\/\/ps.w.org\/search-modal-block\/assets\/icon-256x256.png?rev=3195522","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/search-modal-block\/assets\/screenshot-1.png?rev=3195522","caption":"The search modal block in the block editor with customizable settings."},{"src":"https:\/\/ps.w.org\/search-modal-block\/assets\/screenshot-2.png?rev=3195522","caption":"The search modal displayed on the frontend after being triggered by the search icon."}],"raw_content":"<!--section=description-->\n<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>\n\n<p><strong>Key Features:<\/strong><\/p>\n\n<ul>\n<li>Clean, minimal design that works with any theme<\/li>\n<li>Fully responsive layout<\/li>\n<li>Accessibility-ready with ARIA labels and keyboard navigation<\/li>\n<li>Customizable text elements:\n\n<ul>\n<li>Search input placeholder<\/li>\n<li>Search button text<\/li>\n<li>Screen reader labels<\/li>\n<\/ul><\/li>\n<li>Focus-visible support for better keyboard navigation<\/li>\n<li>Seamless integration with WordPress search<\/li>\n<\/ul>\n\n<p><strong>Perfect For:<\/strong><\/p>\n\n<ul>\n<li>Minimalist themes needing an elegant search solution<\/li>\n<li>Sites wanting to improve their search UX<\/li>\n<li>Accessibility-focused websites<\/li>\n<li>Any WordPress site using the block editor<\/li>\n<\/ul>\n\n<h3>Development<\/h3>\n\n<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>\n\n<h4>Building from Source<\/h4>\n\n<p>To build the plugin from source:<\/p>\n\n<ol>\n<li>Clone the repository<\/li>\n<li>Install dependencies with <code>npm install<\/code><\/li>\n<li>Run <code>npm run build<\/code> to build the production files<\/li>\n<li>For development, use <code>npm run start<\/code> to start the development server<\/li>\n<\/ol>\n\n<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>\n\n<h4>Development Dependencies<\/h4>\n\n<ul>\n<li>@wordpress\/scripts: ^27.9.0<\/li>\n<li>@wordpress\/eslint-plugin: ^21.4.0<\/li>\n<li>@wordpress\/stylelint-config: ^21.41.0<\/li>\n<li>eslint: ^8.57.1<\/li>\n<\/ul>\n\n<p>The complete source code is available on GitHub: https:\/\/github.com\/philhoyt\/search-modal-block<\/p>\n\n<h3>Credits<\/h3>\n\n<p>This plugin uses the following third-party libraries:<\/p>\n\n<ul>\n<li><a href=\"https:\/\/micromodal.vercel.app\/\">MicroModal<\/a> - A lightweight, configurable modal library for web applications.<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n<li>Go to the block editor and search for \"Search Modal Block\" in the block inserter to add it to your content.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='how%20do%20i%20customize%20the%20search%20button%20appearance%3F'><h3>How do I customize the search button appearance?<\/h3><\/dt>\n<dd><p>The search button inherits your theme's colors by default. You can customize its appearance using your theme's custom CSS or the WordPress site editor.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>WordPress 6.9<\/li>\n<li>Fixed form action URL to work correctly on subdirectory and multisite installations<\/li>\n<li>Improved accessibility with proper ARIA labels and modal title<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Added ability to upload custom icons for the search button<\/li>\n<li>Added icon size controls with preset sizes (S, M, L, XL) and custom size option<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Include assets for .org<\/li>\n<li>Include src for .org<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release with search modal block functionality<\/li>\n<li>Customizable placeholder text, button text, and label text<\/li>\n<li>Responsive and accessible design<\/li>\n<li>Integration with WordPress search functionality<\/li>\n<li>Focus-visible support for enhanced keyboard navigation<\/li>\n<\/ul>","raw_excerpt":"A customizable search modal block that adds an elegant and accessible search experience to your WordPress site.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/204076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=204076"}],"author":[{"embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/philhoyt"}],"wp:attachment":[{"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=204076"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=204076"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=204076"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=204076"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=204076"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=204076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}