fix: Display drag-and-drop indicator (#217)

Communicate the destination position for a dragged block.

The popover used for this feature was hidden previously because it
disrupts tap/click events in the block inserter, requiring two taps to
insert a block.

These changes continue hiding the "add block" button popover displayed
alongside empty text blocks, but allows the insertion point indicator to
now be displayed. We disable the insertion point display from the block
inserter only by detecting touch devices (as best possible) and prevent
the relevant `onMouseEnter` event callback triggering the `onHover`
callback.

Author: dcalhoun

patches/@wordpress+block-editor+14.17.0.patch

@@ -1,3 +1,27 @@
+diff --git a/node_modules/@wordpress/block-editor/build-module/components/inserter-list-item/index.js b/node_modules/@wordpress/block-editor/build-module/components/inserter-list-item/index.js
+index 89a3bbc..8564798 100644
+--- a/node_modules/@wordpress/block-editor/build-module/components/inserter-list-item/index.js
++++ b/node_modules/@wordpress/block-editor/build-module/components/inserter-list-item/index.js
+@@ -28,6 +28,10 @@ function InserterListItem({
+   ...props
+ }) {
+   const isDraggingRef = useRef(false);
++  const isTouchDeviceRef = useRef(
++    window.matchMedia( '(hover: none)' ).matches ||
++    window.matchMedia( '(pointer: coarse)' ).matches
++  );
+   const itemIconStyle = item.icon ? {
+     backgroundColor: item.icon.background,
+     color: item.icon.foreground
+@@ -80,7 +84,7 @@ function InserterListItem({
+           }
+         },
+         onMouseEnter: () => {
+-          if (isDraggingRef.current) {
++          if (isDraggingRef.current || isTouchDeviceRef.current) {
+             return;
+           }
+           onHover(item);
 diff --git a/node_modules/@wordpress/block-editor/build-module/components/inserter/index.js b/node_modules/@wordpress/block-editor/build-module/components/inserter/index.js
 index 78b9b8f..9a8efb8 100644
 --- a/node_modules/@wordpress/block-editor/build-module/components/inserter/index.js

patches/README.md

@@ -11,6 +11,7 @@ Existing patches should be described and justified here.
 -   Expose an `open` prop on the `Inserter` component, allowing toggling the inserter visibility via the quick inserter's "Browse all" button.
 -   Disable `stripExperimentalSettings` in the `BlockEditorProvider` component so that the Patterns and Media inserter tabs function.
 -   Allow setting popover props for the `Inserter` component, so we can improve the mobile screen reader experience by marking it as a modal dialog.
+-   Prevent the insertion point popover from appearing on touch devices in `InserterListItem`. The popover (triggered by `onMouseEnter`) disrupts tap/click events, requiring users to tap inserter items twice before they are inserted.
 
 ### `@wordpress/block-library`
 

src/components/visual-editor/style.scss

@@ -90,11 +90,12 @@
 	width: 100%;
 }
 
-// Hide the inserter popover displayed between blocks when hovering between
-// blocks or hovering over a block type in the inserter. Its presence is less
-// useful for touch devices and steals focus away from the inserter, which
-// results in needing to tap a block type twice to insert it.
-.gutenberg-kit-visual-editor .block-editor-block-popover {
+// Hide the inline inserter popover displayed from the "Add block" button
+// positioned alongside empty text blocks. Its presence is less useful for touch
+// devices and steals focus away from the inserter, which results in needing to
+// tap a block type twice to insert it.
+.gutenberg-kit-visual-editor
+	.block-editor-block-list__block-side-inserter-popover {
 	display: none;
 }
 

src/index.scss

@@ -73,11 +73,6 @@ $baseline-interactive-font-size: 17px;
 		width: 320px;
 	}
 
-	// Hide the inline insterter shown inside the block list
-	.block-editor-block-list__block-side-inserter-popover {
-		display: none;
-	}
-
 	/* Inserter (Mobile Design) */
 
 	// Inserter tab buttons