Fix padding appender hook (#66143)

* Fix focus inserted default block

* Support clicks below the padding in the iframed editor

Co-authored-by: t-hamano <[email protected]>
Co-authored-by: kevin940726 <[email protected]>
Co-authored-by: afercia <[email protected]>

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 ]