Fix popover positioning

WordPress · Oct 27, 2022 · cb5967f · cb5967f
1 parent 65a57c0
commit cb5967f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 26 deletions.
diff --git a/packages/block-editor/src/components/block-alignment-visualizer/index.js b/packages/block-editor/src/components/block-alignment-visualizer/index.js
@@ -229,40 +229,54 @@ export default function BlockAlignmentVisualizer( {
 				</head>
 				<body className="editor-styles-wrapper">
 					{ alignments.map( ( alignment ) => (
-						<div
+						<BlockAlignmentVisualizerStep
 							key={ alignment.name }
-							className={ classnames(
-								'block-editor__alignment-visualizer-step',
-								{
-									[ `is-content-justification-${ layout.justifyContent }` ]:
-										layout.justifyContent,
-								}
-							) }
-						>
-							<div
-								className={ classnames(
-									'block-editor__alignment-visualizer-step-inner',
-									alignment.className
-								) }
-							>
-								<Popover
-									className="block-editor__alignment-visualizer-step-label-popover"
-									placement="top-end"
-									flip
-								>
-									<div className="block-editor__alignment-visualizer-step-label">
-										{ alignment.label }
-									</div>
-								</Popover>
-							</div>
-						</div>
+							alignment={ alignment }
+							justification={ layout.justifyContent }
+						/>
 					) ) }
 				</body>
 			</Iframe>
 		</Popover>
 	);
 }
 
+function BlockAlignmentVisualizerStep( { alignment, justification } ) {
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+
+	return (
+		<>
+			<div
+				className={ classnames(
+					'block-editor__alignment-visualizer-step',
+					{
+						[ `is-content-justification-${ justification }` ]:
+							justification,
+					}
+				) }
+			>
+				<div
+					className={ classnames(
+						'block-editor__alignment-visualizer-step-inner',
+						alignment.className
+					) }
+					ref={ setPopoverAnchor }
+				/>
+			</div>
+			<Popover
+				anchor={ popoverAnchor }
+				className="block-editor__alignment-visualizer-step-label-popover"
+				placement="top-end"
+				flip
+			>
+				<div className="block-editor__alignment-visualizer-step-label">
+					{ alignment.label }
+				</div>
+			</Popover>
+		</>
+	);
+}
+
 function Iframe( { children, ...props } ) {
 	const [ iframeDocument, setIframeDocument ] = useState( null );
 

diff --git a/packages/block-editor/src/components/block-alignment-visualizer/style.scss b/packages/block-editor/src/components/block-alignment-visualizer/style.scss
@@ -17,6 +17,7 @@
 .block-editor__alignment-visualizer-step-label-popover .components-popover__content {
 	outline: none;
 	box-shadow: none;
+	background: none;
 }
 
 .block-editor__alignment-visualizer-step-label {