feat(workspace-search): UI Improvements

packages/blockly/core/dragging/block_drag_strategy.ts

@@ -257,10 +257,10 @@ export class BlockDragStrategy implements IDragStrategy {
             recordUndo: true,
           },
         ) as BlockSvg;
-        newBlock.setDragging(true);
         eventUtils.setRecordUndo(false);
         newBlock.render();
         this.positionNewBlock(this.block, newBlock);
+        newBlock.setDragging(true);
         eventUtils.setRecordUndo(true);
 
         return newBlock;

packages/blockly/core/workspace_svg.ts

@@ -3046,15 +3046,26 @@ export class WorkspaceSvg
 
   /** See IFocusableTree.onTreeBlur. */
   onTreeBlur(nextTree: IFocusableTree | null): void {
-    // If the flyout loses focus, make sure to close it unless focus is being
-    // lost to the toolbox or ephemeral focus.
-    if (this.isFlyout && this.targetWorkspace) {
-      // Only hide the flyout if the flyout's workspace is losing focus and that
-      // focus isn't returning to the flyout itself, the toolbox, or ephemeral.
-      if (getFocusManager().ephemeralFocusTaken()) return;
-      const toolbox = this.targetWorkspace.getToolbox();
-      if (toolbox && nextTree === toolbox) return;
-      if (isAutoHideable(toolbox)) toolbox.autoHide(false);
+    // Close the flyout when it loses focus, except for the toolbox or while
+    // overlay UI is open (dropdowns, dialogs).
+    if (!this.isFlyout || !this.targetWorkspace) return;
+
+    const toolbox = this.targetWorkspace.getToolbox();
+
+    // Keep the flyout open when focus moves to the toolbox.
+    if (toolbox && nextTree === toolbox) return;
+
+    // Keep it open for overlay UI, but not when the user is going to the
+    // workspace (for example dragging a block from the flyout).
+    if (
+      getFocusManager().ephemeralFocusTaken() &&
+      nextTree !== this.targetWorkspace
+    ) {
+      return;
+    }
+
+    if (isAutoHideable(toolbox)) {
+      toolbox.autoHide(false);
     }
   }
 

packages/plugins/workspace-search/README.md

@@ -41,7 +41,7 @@ To open workspace search use either command + f or control + f. To close the sea
 - `setSearchPlaceholder`: Sets the placeholder text for the search bar text input.
 - `addActionBtn`: Add a button to the action div. This must be called after the init function has been called.
 - `clearBlocks`: Clears the selection group and current block.
-- `searchAndHighlight`: Searches the workspace for the current search term and highlights matching blocks.
+- `searchAndHighlight`: Searches the workspace for the current search term, highlights matching blocks, and greys non-matching blocks.
 
 ## Styling
 
@@ -80,8 +80,9 @@ Here are additional CSS classes to style your search bar:
 - `blockly-ws-search-content`: Applies to the search content.
 - `blockly-ws-search-input`: Applies to the input wrapper. (Default: `border: none;`)
 - `blockly-ws-search-actions`: Applies to the action div.
-- `blockly-ws-search-current`: Highlights the provided block as the "current selection". (Default: `fill: grey;`)
-- `blockly-ws-search-highlight`: Adds highlight to the provided blocks. (Default: `fill: black;`)
+- `blockly-ws-search-current`: Highlights the provided block as the "current selection". (Default: `filter: saturate(3) drop-shadow(0 0 8px var(--blockly-active-node-color));`)
+- `blockly-ws-search-highlight`: Optionally adds highlight to the provided blocks. (Default: none.)
+- `blockly-ws-search-greyed`: Applied to each non-matching block's `.blocklyPath`. (Default: `fill: lightgrey; stroke: dimgrey;`)
 
 ## License
 

packages/plugins/workspace-search/src/css.ts

@@ -41,11 +41,14 @@ const arrowUpSvgDataUri =
 /**
  * CSS for workspace search.
  */
-const cssContent = `path.blocklyPath.blockly-ws-search-highlight {
-    fill: #000;
-  }
+const cssContent = `path.blocklyPath.blockly-ws-search-highlight {}
   path.blocklyPath.blockly-ws-search-highlight.blockly-ws-search-current {
-    fill: grey;
+    filter: saturate(3)
+    drop-shadow(0 0 8px var(--blockly-active-node-color));
+  }
+  path.blocklyPath.blockly-ws-search-greyed {
+    fill: lightgrey;
+    stroke: dimgrey;
   }
   .blockly-ws-search-close-btn {
     background: url(${closeSvgDataUri}) no-repeat top left;