change: results wrapper

build/block-finder.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '677f28795b4f66f7d30f');
+<?php return array('dependencies' => array(), 'version' => '8ba02d3ad6c07bef19ba');

src/Functions.php

@@ -61,17 +61,17 @@ public function findBlockForm()
         });
 
         echo '<form id="block-finder-form">';
-        echo '<label for="post-type-selector">Select a post type:</label>';
+        echo '<label for="post-type-selector">Select a post type you wish to search in</label>';
         echo '<select id="post-type-selector" name="post_type">';
-        echo '<option value="">Select a post type</option>'; // Default option
+        echo '<option value="">-- Select post type --</option>';
         foreach ($gutenberg_post_types as $post_type) {
             echo '<option value="' . esc_attr($post_type->name) . '">' . esc_html($post_type->label) . '</option>';
         }
         echo '</select>';
 
-        echo '<label for="block-finder-selector">Select a block to return a list of where it is being used on your site.</label>';
+        echo '<label for="block-finder-selector">Select a block you would like to search for</label>';
         echo '<select id="block-finder-selector" name="block">';
-        echo '<option value="">Select a block to find</option>'; // Default option
+        echo '<option value="">-- Select block --</option>';
         foreach ($inserter_blocks as $block_name => $block_type) {
             if (!empty($block_type->title)) {
                 echo '<option value="' . esc_attr($block_name) . '">' . esc_html($block_type->title) . '</option>';

src/script.js

@@ -19,7 +19,8 @@ document.addEventListener('DOMContentLoaded', () => {
 		// Show loading indicator
 		submitButton.disabled = true;
 		submitButton.textContent = 'Finding blocks...';
-		resultsContainer.innerHTML = '<p>Loading results...</p>';
+		resultsContainer.innerHTML =
+			'<p id="block-results-loading">Loading results...</p>';
 
 		if (postType === '' || block === '') {
 			resultsContainer.innerHTML =

src/styles.css

@@ -1,63 +1,68 @@
 #block-finder-form label {
-  padding-bottom: 16px;
+	padding-bottom: 16px;
 }
 
-#block-finder-selector, #post-type-selector {
-  display: block;
-  margin-bottom: 10px;
-  padding: 5px;
-  width: 100%;
-  max-width: 400px;
+#block-finder-selector,
+#post-type-selector {
+	display: block;
+	margin-bottom: 10px;
+	padding: 2px 8px;
+	width: 100%;
+	max-width: 400px;
+}
+
+#block-results-loading {
+	padding: 14px 12px;
 }
 
 #block-finder-results {
-  background-color: #f2f2f2;
-  margin-top: 15px;
+	background-color: #f2f2f2;
+	margin-top: 15px;
 }
 
 #block-finder-results h3 {
-  font-weight: 700;
-  border-bottom: 1px solid #b9b9b9;
-  padding: 14px 12px;
-  margin: 0;
+	font-weight: 700;
+	border-bottom: 1px solid #b9b9b9;
+	padding: 14px 12px;
+	margin: 0;
 }
 
 #block-finder-results ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
 }
 
 #block-finder-results li {
-  display: flex;
-  gap: 8px;
-  padding: 14px 12px;
-  margin-bottom: 0;
-  border-bottom: 1px dotted #b9b9b9;
+	display: flex;
+	gap: 8px;
+	padding: 14px 12px;
+	margin-bottom: 0;
+	border-bottom: 1px dotted #b9b9b9;
 }
 
 #block-finder-results li:last-child {
-  border-bottom: none;
+	border-bottom: none;
 }
 
 #block-finder-results span {
-  margin-left: auto;
-  display: flex;
-  gap: 8px;
-  align-items: center;
+	margin-left: auto;
+	display: flex;
+	gap: 8px;
+	align-items: center;
 }
 
 #block-finder-results a {
-  font-weight: 500;
-  color: #0073aa;
-  text-decoration: none;
+	font-weight: 500;
+	color: #0073aa;
+	text-decoration: none;
 }
 
 #block-finder-results a:last-child {
-  border-left: 1px solid #b9b9b9;
-  padding-left: 8px;
+	border-left: 1px solid #b9b9b9;
+	padding-left: 8px;
 }
 
 #block-finder-results a:hover {
-  text-decoration: underline;
+	text-decoration: underline;
 }