Post/site/template editors: clear selection on iframe html element cl…

…ick, fix bottom click redirect (#31385)
WordPress · May 17, 2021 · a939c4f · a939c4f
1 parent 5a2a966
commit a939c4f
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 20 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -21,6 +21,7 @@ import { store as blockEditorStore } from '../../store';
 import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
 import BlockToolsBackCompat from '../block-tools/back-compat';
+import { useBlockSelectionClearer } from '../block-selection-clearer';
 
 export const IntersectionObserver = createContext();
 
@@ -48,6 +49,7 @@ function Root( { className, children } ) {
 	return (
 		<div
 			ref={ useMergeRefs( [
+				useBlockSelectionClearer(),
 				useBlockDropZone(),
 				useInBetweenInserter(),
 			] ) }

diff --git a/packages/block-editor/src/components/block-selection-clearer/index.js b/packages/block-editor/src/components/block-selection-clearer/index.js
@@ -9,7 +9,14 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 
-export function useBlockSelectionClearer( onlySelfClicks = false ) {
+/**
+ * Pass the returned ref callback to an element that should clear block
+ * selection. Selection will only be cleared if the element is clicked directly,
+ * not if a child element is clicked.
+ *
+ * @return {import('react').RefCallback} Ref callback.
+ */
+export function useBlockSelectionClearer() {
 	const { hasSelectedBlock, hasMultiSelection } = useSelect(
 		blockEditorStore
 	);
@@ -22,11 +29,8 @@ export function useBlockSelectionClearer( onlySelfClicks = false ) {
 					return;
 				}
 
-				// Only handle clicks on the canvas, not the content.
-				if (
-					event.target.closest( '.wp-block' ) ||
-					( onlySelfClicks && event.target !== node )
-				) {
+				// Only handle clicks on the element, not the children.
+				if ( event.target !== node ) {
 					return;
 				}
 

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -11,6 +11,11 @@ import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import { useBlockSelectionClearer } from '../block-selection-clearer';
+
 const BODY_CLASS_NAME = 'editor-styles-wrapper';
 const BLOCK_PREFIX = 'wp-block';
 
@@ -136,14 +141,15 @@ function setHead( doc, head ) {
 function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
 	const [ iframeDocument, setIframeDocument ] = useState();
 
+	const clearerRef = useBlockSelectionClearer();
 	const setRef = useCallback( ( node ) => {
 		if ( ! node ) {
 			return;
 		}
 
 		function setDocumentIfReady() {
 			const { contentDocument } = node;
-			const { readyState, body } = contentDocument;
+			const { readyState, body, documentElement } = contentDocument;
 
 			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
 				return false;
@@ -161,6 +167,8 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
 			bubbleEvents( contentDocument );
 			setBodyClassName( contentDocument );
 			setIframeDocument( contentDocument );
+			clearerRef( documentElement );
+			clearerRef( body );
 
 			return true;
 		}

diff --git a/packages/block-editor/src/components/use-canvas-click-redirect/index.js b/packages/block-editor/src/components/use-canvas-click-redirect/index.js
@@ -37,6 +37,13 @@ export function useCanvasClickRedirect() {
 				return;
 			}
 
+			const { bottom } = target.getBoundingClientRect();
+
+			// Ensure the click is below the last block.
+			if ( event.clientY < bottom ) {
+				return;
+			}
+
 			placeCaretAtHorizontalEdge( target, true );
 			event.preventDefault();
 		}

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -159,7 +159,7 @@ export default function VisualEditor( { styles } ) {
 		useBlockSelectionClearer(),
 	] );
 
-	const blockSelectionClearerRef = useBlockSelectionClearer( true );
+	const blockSelectionClearerRef = useBlockSelectionClearer();
 
 	const [ , RecursionProvider ] = useNoRecursiveRenders(
 		wrapperUniqueId,

diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
@@ -33,12 +33,6 @@
 	// color doesn't show through.
 	background-color: $white;
 	flex: 1;
-
-	cursor: text;
-
-	> * {
-		cursor: auto;
-	}
 }
 
 // Ideally this wrapper div is not needed but if we want to match the positioning of blocks

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -14,7 +14,6 @@ import {
 	BlockTools,
 	__unstableBlockSettingsMenuFirstItem,
 	__experimentalUseResizeCanvas as useResizeCanvas,
-	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 	__unstableUseTypingObserver as useTypingObserver,
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 	__unstableEditorStyles as EditorStyles,
@@ -57,11 +56,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const resizedCanvasStyles = useResizeCanvas( deviceType, true );
 	const ref = useMouseMoveTypingReset();
 	const contentRef = useRef();
-	const mergedRefs = useMergeRefs( [
-		contentRef,
-		useBlockSelectionClearer(),
-		useTypingObserver(),
-	] );
+	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 
 	return (
 		<BlockEditorProvider