From 2ec73579a94927713bfb7fb338650394f2255bcd Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Wed, 5 Nov 2025 11:38:46 -0500 Subject: [PATCH] fix: Display drag-and-drop indicator 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. --- patches/@wordpress+block-editor+14.17.0.patch | 24 +++++++++++++++++++ patches/README.md | 1 + src/components/visual-editor/style.scss | 11 +++++---- src/index.scss | 5 ---- 4 files changed, 31 insertions(+), 10 deletions(-) diff --git a/patches/@wordpress+block-editor+14.17.0.patch b/patches/@wordpress+block-editor+14.17.0.patch index ec98355a8..4a6ee08eb 100644 --- a/patches/@wordpress+block-editor+14.17.0.patch +++ b/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 diff --git a/patches/README.md b/patches/README.md index bda3981dc..976271bf6 100644 --- a/patches/README.md +++ b/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` diff --git a/src/components/visual-editor/style.scss b/src/components/visual-editor/style.scss index 4404210d1..2d96ce03a 100644 --- a/src/components/visual-editor/style.scss +++ b/src/components/visual-editor/style.scss @@ -92,11 +92,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; } diff --git a/src/index.scss b/src/index.scss index 9df2698ec..ea5df25a0 100644 --- a/src/index.scss +++ b/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