From 554b1c0ab824409d69902764b8baf2731e515123 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Tue, 8 Jun 2021 11:38:34 -0700
Subject: [PATCH] Use anchorRef to correctly position URLPopover for social
 link

---
 .../block-library/src/social-link/edit.js     | 72 ++++++++++++-------
 1 file changed, 45 insertions(+), 27 deletions(-)

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 81aaeba0f99e75..6e916eff5a5229 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -12,7 +12,7 @@ import {
 	URLInput,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { Fragment, useState } from '@wordpress/element';
+import { Fragment, useState, useRef } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -27,6 +27,42 @@ import { keyboardReturn } from '@wordpress/icons';
  */
 import { getIconBySite, getNameBySite } from './social-list';
 
+const SocialLinkURLPopover = ( {
+	url,
+	setAttributes,
+	setPopover,
+	anchorRef,
+} ) => (
+	<URLPopover
+		anchorRef={ anchorRef?.current }
+		onClose={ () => setPopover( false ) }
+	>
+		<form
+			className="block-editor-url-popover__link-editor"
+			onSubmit={ ( event ) => {
+				event.preventDefault();
+				setPopover( false );
+			} }
+		>
+			<div className="block-editor-url-input">
+				<URLInput
+					value={ url }
+					onChange={ ( nextURL ) =>
+						setAttributes( { url: nextURL } )
+					}
+					placeholder={ __( 'Enter address' ) }
+					disableSuggestions={ true }
+				/>
+			</div>
+			<Button
+				icon={ keyboardReturn }
+				label={ __( 'Apply' ) }
+				type="submit"
+			/>
+		</form>
+	</URLPopover>
+);
+
 const SocialLinkEdit = ( {
 	attributes,
 	context,
@@ -40,6 +76,7 @@ const SocialLinkEdit = ( {
 		'wp-social-link__is-incomplete': ! url,
 	} );
 
+	const ref = useRef();
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
 	const blockProps = useBlockProps( {
@@ -76,34 +113,15 @@ const SocialLinkEdit = ( {
 				</PanelBody>
 			</InspectorControls>
 			<li { ...blockProps }>
-				<Button onClick={ () => setPopover( true ) }>
+				<Button ref={ ref } onClick={ () => setPopover( true ) }>
 					<IconComponent />
 					{ isSelected && showURLPopover && (
-						<URLPopover onClose={ () => setPopover( false ) }>
-							<form
-								className="block-editor-url-popover__link-editor"
-								onSubmit={ ( event ) => {
-									event.preventDefault();
-									setPopover( false );
-								} }
-							>
-								<div className="block-editor-url-input">
-									<URLInput
-										value={ url }
-										onChange={ ( nextURL ) =>
-											setAttributes( { url: nextURL } )
-										}
-										placeholder={ __( 'Enter address' ) }
-										disableSuggestions={ true }
-									/>
-								</div>
-								<Button
-									icon={ keyboardReturn }
-									label={ __( 'Apply' ) }
-									type="submit"
-								/>
-							</form>
-						</URLPopover>
+						<SocialLinkURLPopover
+							url={ url }
+							setAttributes={ setAttributes }
+							setPopover={ setPopover }
+							anchorRef={ ref }
+						/>
 					) }
 				</Button>
 			</li>