diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index 6bea16e9cd5bd..6c0d9d034f0a2 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -179,7 +179,7 @@ function BlockPopoverInbetween( { key={ nextClientId + '--' + rootClientId } { ...props } className={ classnames( - 'block-editor-block-popover', + 'block-editor-block-popover block-editor-block-popover-in-between', props.className ) } __unstableForcePosition diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js index 96e3fb1043d71..1629b27ef17b0 100644 --- a/packages/block-editor/src/components/block-tools/insertion-point.js +++ b/packages/block-editor/src/components/block-tools/insertion-point.js @@ -24,7 +24,7 @@ function InsertionPointPopover( { __unstablePopoverSlot, __unstableContentRef, } ) { - const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore ); + const { hideInsertionPoint } = useDispatch( blockEditorStore ); const openRef = useContext( InsertionPointOpenRef ); const ref = useRef(); const { @@ -74,12 +74,6 @@ function InsertionPointPopover( { const disableMotion = useReducedMotion(); - function onClick( event ) { - if ( event.target === ref.current && nextClientId ) { - selectBlock( nextClientId, -1 ); - } - } - function onFocus( event ) { // Only handle click on the wrapper specifically, and not an event // bubbled from the inserter itself. @@ -190,11 +184,8 @@ function InsertionPointPopover( { exit="start" ref={ ref } tabIndex={ -1 } - onClick={ onClick } onFocus={ onFocus } - className={ classnames( className, { - 'is-with-inserter': isInserterShown, - } ) } + className={ className } onHoverEnd={ maybeHideInserterPoint } > * { + pointer-events: none; +} + .block-editor-block-list__insertion-point { position: absolute; top: 0; @@ -29,6 +34,7 @@ // This is the clickable plus. .block-editor-block-list__insertion-point-inserter { + pointer-events: all; // Don't show on mobile. display: none; position: absolute; diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js index dfd44e828c7f8..aecaa479b46c6 100644 --- a/packages/block-editor/src/components/writing-flow/index.js +++ b/packages/block-editor/src/components/writing-flow/index.js @@ -21,6 +21,7 @@ import useSelectAll from './use-select-all'; import useDragSelection from './use-drag-selection'; import useSelectionObserver from './use-selection-observer'; import useClickSelection from './use-click-selection'; +import useClickRedirect from './use-click-redirect'; import useInput from './use-input'; import { store as blockEditorStore } from '../../store'; @@ -39,6 +40,7 @@ export function useWritingFlow() { useDragSelection(), useSelectionObserver(), useClickSelection(), + useClickRedirect(), useMultiSelection(), useSelectAll(), useArrowNav(), diff --git a/packages/block-editor/src/components/writing-flow/use-click-redirect.js b/packages/block-editor/src/components/writing-flow/use-click-redirect.js new file mode 100644 index 0000000000000..d49ffd7fae024 --- /dev/null +++ b/packages/block-editor/src/components/writing-flow/use-click-redirect.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ +import { useRefEffect } from '@wordpress/compose'; + +export default function useClickSelection() { + return useRefEffect( ( node ) => { + function onMouseDown() { + node.contentEditable = true; + // Firefox doesn't automatically move focus. + node.focus(); + // The selection observer will turn off contentEditable after a + // selection change. + } + + node.addEventListener( 'mousedown', onMouseDown ); + + return () => { + node.removeEventListener( 'mousedown', onMouseDown ); + }; + }, [] ); +}