From 6b7cdedc933510ae05666bf12785d967c183e749 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 16 Oct 2024 07:18:14 -0700 Subject: [PATCH] Fix padding appender hook (#66143) * Fix focus inserted default block * Support clicks below the padding in the iframed editor Co-authored-by: t-hamano Co-authored-by: kevin940726 Co-authored-by: afercia --- .../components/layout/use-padding-appender.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/layout/use-padding-appender.js b/packages/edit-post/src/components/layout/use-padding-appender.js index edffc6f3dd07c..ee1484f518d7a 100644 --- a/packages/edit-post/src/components/layout/use-padding-appender.js +++ b/packages/edit-post/src/components/layout/use-padding-appender.js @@ -16,7 +16,13 @@ export function usePaddingAppender( enabled ) { const effect = useRefEffect( ( node ) => { function onMouseDown( event ) { - if ( event.target !== node ) { + if ( + event.target !== node && + // Tests for the parent element because in the iframed editor if the click is + // below the padding the target will be the parent element (html) and should + // still be treated as intent to append. + event.target !== node.parentElement + ) { return; } @@ -31,7 +37,7 @@ export function usePaddingAppender( enabled ) { return; } - event.stopPropagation(); + event.preventDefault(); const blockOrder = registry .select( blockEditorStore ) @@ -50,9 +56,12 @@ export function usePaddingAppender( enabled ) { insertDefaultBlock(); } } - node.addEventListener( 'mousedown', onMouseDown ); + const { ownerDocument } = node; + // Adds the listener on the document so that in the iframed editor clicks below the + // padding can be handled as they too should be treated as intent to append. + ownerDocument.addEventListener( 'mousedown', onMouseDown ); return () => { - node.removeEventListener( 'mousedown', onMouseDown ); + ownerDocument.removeEventListener( 'mousedown', onMouseDown ); }; }, [ registry ]