From 43897bd3e36a3125efb2d3eccdfabe6595e92003 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 14 Sep 2021 15:54:38 +1000
Subject: [PATCH] Adding container ref to try to position the popover

---
 .../block-editor/src/components/block-styles/index.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 75a1608e2a4a9b..d3170d3937171e 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useState } from '@wordpress/element';
+import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { _x } from '@wordpress/i18n';
@@ -83,6 +83,8 @@ function BlockStyles( {
 		[ setHoveredStyle ]
 	);
 
+	const stylesContainerRef = useRef();
+
 	if ( ! styles || styles.length === 0 ) {
 		return null;
 	}
@@ -113,8 +115,11 @@ function BlockStyles( {
 		onSwitch();
 	};
 
+	// const getAnchorRect = () =>
+	// 	stylesContainerRef?.current?.getBoundingClientRect();
+
 	return (
-		<div className="block-editor-block-styles">
+		<div className="block-editor-block-styles" ref={ stylesContainerRef }>
 			<div className="block-editor-block-styles__variants">
 				{ renderedStyles.map( ( style ) => {
 					const buttonText = style.label || style.name;
@@ -155,6 +160,8 @@ function BlockStyles( {
 					className="block-editor-block-styles__popover"
 					position="middle left"
 					focusOnMount={ false }
+					anchorRef={ stylesContainerRef?.current }
+					//getAnchorRect={ getAnchorRect }
 				>
 					<BlockStylesPreviewPanel
 						activeStyle={ activeStyle }