Add orientation

WordPress · Oct 13, 2021 · b794c26 · b794c26
1 parent 73939a0
commit b794c26
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 24 deletions.
diff --git a/packages/block-editor/src/components/block-list/use-in-between-click-redirect.js b/packages/block-editor/src/components/block-list/use-in-between-click-redirect.js
@@ -83,22 +83,31 @@ function getClosestDescendentElementFromPointInDirection(
  * descendent if descendents are found in more than one direction (so that the
  * point falls in-between descendents).
  *
- * @param {HTMLElement} target Target element to check within.
- * @param {number}      x      X coordinate to check.
- * @param {number}      y      Y coordinate to check.
+ * @param {HTMLElement} target      Target element to check within.
+ * @param {number}      x           X coordinate to check.
+ * @param {number}      y           Y coordinate to check.
+ * @param {string}      orientation Orientation of the block list.
  *
  * @return {HTMLElement|undefined} The closest descendent element if the point
  *                                 is found to be in-between descendents.
  */
-function getClosestInBetweenDescendentElementFromPoint( target, x, y ) {
-	const directions = [
-		[ 1, 0 ],
-		[ 0, 1 ],
-		[ -1, 0 ],
-		[ 0, -1 ],
-	];
-
-	let count = 0;
+function getClosestInBetweenDescendentElementFromPoint(
+	target,
+	x,
+	y,
+	orientation
+) {
+	const directions =
+		orientation === 'horizontal'
+			? [
+					[ 1, 0 ],
+					[ -1, 0 ],
+			  ]
+			: [
+					[ 0, 1 ],
+					[ 0, -1 ],
+			  ];
+
 	let closestOffset;
 	let closestElement;
 
@@ -116,18 +125,12 @@ function getClosestInBetweenDescendentElementFromPoint( target, x, y ) {
 
 		const [ element, offset ] = result;
 
-		count++;
-
 		if ( ! closestOffset || offset < closestOffset ) {
 			closestOffset = offset;
 			closestElement = element;
 		}
 	}
 
-	if ( count < 2 ) {
-		return;
-	}
-
 	return closestElement;
 }
 
@@ -137,9 +140,11 @@ function getClosestInBetweenDescendentElementFromPoint( target, x, y ) {
  * focusable elements are easier to focus. The redirect only happens if the
  * click happens in-between two child elements.
  *
+ * @param {string} orientation Orientation of the block list.
+ *
  * @return {Function} Ref callback.
  */
-export function useInBetweenClickRedirect() {
+export function useInBetweenClickRedirect( orientation ) {
 	return useRefEffect( ( node ) => {
 		function onMouseMove( event ) {
 			const { clientX, clientY, target } = event;
@@ -152,7 +157,8 @@ export function useInBetweenClickRedirect() {
 			const closestElement = getClosestInBetweenDescendentElementFromPoint(
 				target,
 				clientX,
-				clientY
+				clientY,
+				orientation
 			);
 
 			if ( ! closestElement ) {

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
@@ -180,10 +180,8 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 
 	const ref = useMergeRefs( [
 		props.ref,
-		useInBetweenClickRedirect(),
-		useBlockDropZone( {
-			rootClientId: clientId,
-		} ),
+		useInBetweenClickRedirect( props.orientation ),
+		useBlockDropZone( { rootClientId: clientId } ),
 	] );
 
 	const innerBlocksProps = {