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