diff --git a/components/popover/index.js b/components/popover/index.js
index f70a5c552970bf..55167d806623e1 100644
--- a/components/popover/index.js
+++ b/components/popover/index.js
@@ -190,6 +190,7 @@ class Popover extends Component {
 			children,
 			className,
 			onClickOutside = onClose,
+			noArrow = false,
 			// Disable reason: We generate the `...contentProps` rest as remainder
 			// of props which aren't explicitly handled by this component.
 			/* eslint-disable no-unused-vars */
@@ -219,6 +220,7 @@ class Popover extends Component {
 			'is-' + xAxis,
 			{
 				'is-mobile': isMobile,
+				'no-arrow': noArrow,
 			}
 		);
 
diff --git a/components/popover/style.scss b/components/popover/style.scss
index 4988949a7b0466..5e30b0932d7579 100644
--- a/components/popover/style.scss
+++ b/components/popover/style.scss
@@ -1,3 +1,5 @@
+$arrow-size: 8px;
+
 .components-popover {
 	position: fixed;
 	z-index: z-index( ".components-popover" );
@@ -10,15 +12,15 @@
 		bottom: 0;
 	}
 
-	&:not(.is-mobile) {
+	&:not(.no-arrow):not(.is-mobile) {
 		margin-left: 2px;
 
 		&:before {
-			border: 8px solid $light-gray-500;
+			border: $arrow-size solid $light-gray-500;
 		}
 
 		&:after {
-			border: 8px solid $white;
+			border: $arrow-size solid $white;
 		}
 
 		&:before,
@@ -34,11 +36,10 @@
 		}
 
 		&.is-top {
-			bottom: 100%;
-			margin-top: -8px;
+			margin-top: - $arrow-size;
 
 			&:before {
-				bottom: -8px;
+				bottom: - $arrow-size;
 			}
 
 			&:after {
@@ -53,12 +54,10 @@
 		}
 
 		&.is-bottom {
-			top: 100%;
 			margin-top: 8px;
-			z-index: z-index( ".components-popover.is-bottom" );
 
 			&:before {
-				top: -8px;
+				top: -$arrow-size;
 			}
 
 			&:after {
@@ -72,6 +71,17 @@
 			}
 		}
 	}
+
+	&:not(.is-mobile) {
+		&.is-top {
+			bottom: 100%;
+		}
+
+		&.is-bottom {
+			top: 100%;
+			z-index: z-index( ".components-popover.is-bottom" );
+		}
+	}
 }
 
 .components-popover__content {
diff --git a/core-blocks/image/editor.scss b/core-blocks/image/editor.scss
index fb3f16572c3580..be7a784f71ee77 100644
--- a/core-blocks/image/editor.scss
+++ b/core-blocks/image/editor.scss
@@ -98,7 +98,7 @@
 	}
 }
 
-.editor-block-list__block[data-type="core/image"] .editor-block-toolbar .editor-format-toolbar__link-modal {
+.editor-block-list__block[data-type="core/image"] .editor-block-toolbar .editor-url-input__button-modal {
 	position: absolute;
 	left: 0;
 	right: 0;
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index 3a974e299d9f03..e20891d9740e41 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -20,8 +20,6 @@ $z-layers: (
 	'.editor-block-switcher__menu': 5,
 	'.components-popover__close': 5,
 	'.editor-block-list__insertion-point': 5,
-	'.editor-format-toolbar__link-modal': 81, // should appear above block controls
-	'.editor-format-toolbar__link-container': 81, // link suggestions should also
 	'.core-blocks-gallery-item__inline-menu': 20,
 	'.editor-url-input__suggestions': 30,
 	'.edit-post-header': 30,
diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss
index 606f0f0089d1b0..663f6319c711c9 100644
--- a/edit-post/assets/stylesheets/main.scss
+++ b/edit-post/assets/stylesheets/main.scss
@@ -121,7 +121,8 @@ body.gutenberg-editor-page {
 // @todo submit as upstream patch as well
 .edit-post-sidebar,
 .editor-post-publish-panel,
-.editor-block-list__block {
+.editor-block-list__block,
+.components-popover {
 	.input-control, // upstream name is .regular-text
 	input[type=text],
 	input[type=search],
diff --git a/editor/components/rich-text/format-toolbar/index.js b/editor/components/rich-text/format-toolbar/index.js
index b3141db48e856d..97c651c64ecb7f 100644
--- a/editor/components/rich-text/format-toolbar/index.js
+++ b/editor/components/rich-text/format-toolbar/index.js
@@ -9,6 +9,7 @@ import {
 	ToggleControl,
 	Toolbar,
 	withSpokenMessages,
+	Popover,
 } from '@wordpress/components';
 import { keycodes } from '@wordpress/utils';
 import { prependHTTP } from '@wordpress/url';
@@ -166,7 +167,7 @@ class FormatToolbar extends Component {
 	}
 
 	render() {
-		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [] } = this.props;
+		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [], selectedNodeId } = this.props;
 		const { linkValue, settingsVisible, opensInNewWindow } = this.state;
 		const isAddingLink = formats.link && formats.link.isAdding;
 
@@ -208,58 +209,64 @@ class FormatToolbar extends Component {
 				{ ( isAddingLink || formats.link ) && (
 					<Fill name="RichText.Siblings">
 						<div className="editor-format-toolbar__link-container" style={ { ...focusPosition } }>
-							{ isAddingLink && (
+							<Popover
+								position="bottom center"
+								focusOnMount={ !! isAddingLink }
+								key={ selectedNodeId /* Used to force rerender on change */ }
+							>
+								{ isAddingLink && (
 								// Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
 								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-								<form
-									className="editor-format-toolbar__link-modal"
-									onKeyPress={ stopKeyPropagation }
-									onKeyDown={ this.onKeyDown }
-									onSubmit={ this.submitLink }>
-									<div className="editor-format-toolbar__link-modal-line">
-										<UrlInput value={ linkValue } onChange={ this.onChangeLinkValue } />
-										<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
-										<IconButton
-											className="editor-format-toolbar__link-settings-toggle"
-											icon="ellipsis"
-											label={ __( 'Link Settings' ) }
-											onClick={ this.toggleLinkSettingsVisibility }
-											aria-expanded={ settingsVisible }
-										/>
-									</div>
-									{ linkSettings }
-								</form>
+									<form
+										className="editor-format-toolbar__link-modal"
+										onKeyPress={ stopKeyPropagation }
+										onKeyDown={ this.onKeyDown }
+										onSubmit={ this.submitLink }>
+										<div className="editor-format-toolbar__link-modal-line">
+											<UrlInput value={ linkValue } onChange={ this.onChangeLinkValue } />
+											<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
+											<IconButton
+												className="editor-format-toolbar__link-settings-toggle"
+												icon="ellipsis"
+												label={ __( 'Link Settings' ) }
+												onClick={ this.toggleLinkSettingsVisibility }
+												aria-expanded={ settingsVisible }
+											/>
+										</div>
+										{ linkSettings }
+									</form>
 								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-							) }
+								) }
 
-							{ formats.link && ! isAddingLink && (
+								{ formats.link && ! isAddingLink && (
 								// Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
 								/* eslint-disable jsx-a11y/no-static-element-interactions */
-								<div
-									className="editor-format-toolbar__link-modal"
-									onKeyPress={ stopKeyPropagation }
-								>
-									<div className="editor-format-toolbar__link-modal-line">
-										<a
-											className="editor-format-toolbar__link-value"
-											href={ formats.link.value }
-											target="_blank"
-										>
-											{ formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) }
-										</a>
-										<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
-										<IconButton
-											className="editor-format-toolbar__link-settings-toggle"
-											icon="ellipsis"
-											label={ __( 'Link Settings' ) }
-											onClick={ this.toggleLinkSettingsVisibility }
-											aria-expanded={ settingsVisible }
-										/>
+									<div
+										className="editor-format-toolbar__link-modal"
+										onKeyPress={ stopKeyPropagation }
+									>
+										<div className="editor-format-toolbar__link-modal-line">
+											<a
+												className="editor-format-toolbar__link-value"
+												href={ formats.link.value }
+												target="_blank"
+											>
+												{ formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) }
+											</a>
+											<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
+											<IconButton
+												className="editor-format-toolbar__link-settings-toggle"
+												icon="ellipsis"
+												label={ __( 'Link Settings' ) }
+												onClick={ this.toggleLinkSettingsVisibility }
+												aria-expanded={ settingsVisible }
+											/>
+										</div>
+										{ linkSettings }
 									</div>
-									{ linkSettings }
-								</div>
 								/* eslint-enable jsx-a11y/no-static-element-interactions */
-							) }
+								) }
+							</Popover>
 						</div>
 					</Fill>
 				) }
diff --git a/editor/components/rich-text/format-toolbar/style.scss b/editor/components/rich-text/format-toolbar/style.scss
index 13f20e839f222e..a971cbfe070d14 100644
--- a/editor/components/rich-text/format-toolbar/style.scss
+++ b/editor/components/rich-text/format-toolbar/style.scss
@@ -2,36 +2,14 @@
 	display: inline-flex;
 }
 
-.editor-format-toolbar__link-modal {
-	position: relative;
-	box-shadow: $shadow-popover;
-	border: 1px solid $light-gray-500;
-	background: $white;
-	display: flex;
-	flex-direction: column;
-	font-family: $default-font;
-	font-size: $default-font-size;
-	line-height: $default-line-height;
-	z-index: z-index( '.editor-format-toolbar__link-modal' );
-
-	.edit-post-header-toolbar__block-toolbar & {
-		position: absolute;
-		left: 0;
-		right: 0;
-	}
-}
-
 .editor-format-toolbar__link-container {
 	position: absolute;
 	transform: translateX( -50% );
-	z-index: z-index( '.editor-format-toolbar__link-container' );
 }
 
 .editor-format-toolbar__link-modal-line {
 	display: flex;
 	flex-direction: row;
-	flex-grow: 1;
-	flex-shrink: 1;
 	min-width: 0;
 	align-items: flex-start;
 
@@ -40,6 +18,10 @@
 		width: $icon-button-size;
 		height: $icon-button-size;
 	}
+
+	.editor-url-input {
+		flex-grow: 1;
+	}
 }
 
 .editor-format-toolbar__link-settings-toggle .dashicon {
diff --git a/editor/components/rich-text/index.js b/editor/components/rich-text/index.js
index 9542381355820d..b65eb2eabe27fc 100644
--- a/editor/components/rich-text/index.js
+++ b/editor/components/rich-text/index.js
@@ -446,11 +446,10 @@ export class RichText extends Component {
 	getFocusPosition( position ) {
 		// The container is relatively positioned.
 		const containerPosition = this.containerRef.current.getBoundingClientRect();
-		const toolbarOffset = { top: 10, left: 0 };
 
 		return {
-			top: position.top - containerPosition.top + ( position.height ) + toolbarOffset.top,
-			left: position.left - containerPosition.left + ( position.width / 2 ) + toolbarOffset.left,
+			top: position.top - containerPosition.top + position.height,
+			left: position.left - containerPosition.left + ( position.width / 2 ),
 		};
 	}
 
diff --git a/editor/components/url-input/button.js b/editor/components/url-input/button.js
index 0ebd3b835f8670..f42120c8ec6a33 100644
--- a/editor/components/url-input/button.js
+++ b/editor/components/url-input/button.js
@@ -52,9 +52,10 @@ class UrlInputButton extends Component {
 				/>
 				{ expanded &&
 					<form
-						className="editor-format-toolbar__link-modal"
-						onSubmit={ this.submitLink }>
-						<div className="editor-format-toolbar__link-modal-line">
+						className="editor-url-input__button-modal"
+						onSubmit={ this.submitLink }
+					>
+						<div className="editor-url-input__button-modal-line">
 							<IconButton
 								className="editor-url-input__back"
 								icon="arrow-left-alt"
diff --git a/editor/components/url-input/index.js b/editor/components/url-input/index.js
index 564ec113ee6aa9..21d1e98ef5578a 100644
--- a/editor/components/url-input/index.js
+++ b/editor/components/url-input/index.js
@@ -10,9 +10,9 @@ import { stringify } from 'querystringify';
  * WordPress dependencies
  */
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { keycodes, decodeEntities } from '@wordpress/utils';
-import { Spinner, withInstanceId, withSpokenMessages } from '@wordpress/components';
+import { Spinner, withInstanceId, withSpokenMessages, Popover } from '@wordpress/components';
 
 const { UP, DOWN, ENTER } = keycodes;
 
@@ -183,53 +183,56 @@ class UrlInput extends Component {
 		const { showSuggestions, posts, selectedSuggestion, loading } = this.state;
 		/* eslint-disable jsx-a11y/no-autofocus */
 		return (
-			<div className="editor-url-input">
-				<input
-					autoFocus={ autoFocus }
-					type="text"
-					aria-label={ __( 'URL' ) }
-					required
-					value={ value }
-					onChange={ this.onChange }
-					onInput={ stopEventPropagation }
-					placeholder={ __( 'Paste URL or type' ) }
-					onKeyDown={ this.onKeyDown }
-					role="combobox"
-					aria-expanded={ showSuggestions }
-					aria-autocomplete="list"
-					aria-owns={ `editor-url-input-suggestions-${ instanceId }` }
-					aria-activedescendant={ selectedSuggestion !== null ? `editor-url-input-suggestion-${ instanceId }-${ selectedSuggestion }` : undefined }
-				/>
-
-				{ ( loading ) && <Spinner /> }
+			<Fragment>
+				<div className="editor-url-input">
+					<input
+						autoFocus={ autoFocus }
+						type="text"
+						aria-label={ __( 'URL' ) }
+						required
+						value={ value }
+						onChange={ this.onChange }
+						onInput={ stopEventPropagation }
+						placeholder={ __( 'Paste URL or type' ) }
+						onKeyDown={ this.onKeyDown }
+						role="combobox"
+						aria-expanded={ showSuggestions }
+						aria-autocomplete="list"
+						aria-owns={ `editor-url-input-suggestions-${ instanceId }` }
+						aria-activedescendant={ selectedSuggestion !== null ? `editor-url-input-suggestion-${ instanceId }-${ selectedSuggestion }` : undefined }
+					/>
+
+					{ ( loading ) && <Spinner /> }
+				</div>
 
 				{ showSuggestions && !! posts.length &&
-					<div
-						id={ `editor-url-input-suggestions-${ instanceId }` }
-						tabIndex="-1"
-						className="editor-url-input__suggestions"
-						ref={ this.bindListNode }
-						role="listbox"
-					>
-						{ posts.map( ( post, index ) => (
-							<button
-								key={ post.id }
-								role="option"
-								tabIndex="-1"
-								id={ `editor-url-input-suggestion-${ instanceId }-${ index }` }
-								ref={ this.bindSuggestionNode( index ) }
-								className={ classnames( 'editor-url-input__suggestion', {
-									'is-selected': index === selectedSuggestion,
-								} ) }
-								onClick={ () => this.selectLink( post.link ) }
-								aria-selected={ index === selectedSuggestion }
-							>
-								{ decodeEntities( post.title.rendered ) || __( '(no title)' ) }
-							</button>
-						) ) }
-					</div>
+					<Popover position="bottom" noArrow focusOnMount={ false }>
+						<div
+							className="editor-url-input__suggestions"
+							id={ `editor-url-input-suggestions-${ instanceId }` }
+							ref={ this.bindListNode }
+							role="listbox"
+						>
+							{ posts.map( ( post, index ) => (
+								<button
+									key={ post.id }
+									role="option"
+									tabIndex="-1"
+									id={ `editor-url-input-suggestion-${ instanceId }-${ index }` }
+									ref={ this.bindSuggestionNode( index ) }
+									className={ classnames( 'editor-url-input__suggestion', {
+										'is-selected': index === selectedSuggestion,
+									} ) }
+									onClick={ () => this.selectLink( post.link ) }
+									aria-selected={ index === selectedSuggestion }
+								>
+									{ decodeEntities( post.title.rendered ) || __( '(no title)' ) }
+								</button>
+							) ) }
+						</div>
+					</Popover>
 				}
-			</div>
+			</Fragment>
 		);
 		/* eslint-enable jsx-a11y/no-autofocus */
 	}
diff --git a/editor/components/url-input/style.scss b/editor/components/url-input/style.scss
index ecef24b3941d95..3789f52fc5d6ba 100644
--- a/editor/components/url-input/style.scss
+++ b/editor/components/url-input/style.scss
@@ -1,19 +1,19 @@
 // Link input
-$input-padding: 10px;
+$input-padding: 8px;
 $input-size: 230px;
 
 .editor-block-list__block .editor-url-input,
-.editor-block-toolbar .editor-url-input {
+.components-popover .editor-url-input,
+.editor-url-input {
 	width: 100%;
 	flex-grow: 1;
 	position: relative;
-	width: $input-size;
+	padding: 1px;
 
 	input[type=text] {
 		width: 100%;
 		padding: $input-padding;
 		border: none;
-		margin: 0;
 
 		&::-ms-clear {
 			display: none;
@@ -23,24 +23,17 @@ $input-size: 230px;
 	.spinner {
 		position: absolute;
 		right: 0;
-		top: 10px;
+		top: $input-padding;
 		margin: 0;
 	}
 }
 
 // Suggestions
 .editor-url-input__suggestions {
-	position: absolute;
-	background: $white;
-	box-shadow: $shadow-popover;
-	border: 1px solid $light-gray-500;
 	max-height: 200px;
-	overflow-y: scroll;
 	transition: all .15s ease-in-out;
 	list-style: none;
-	margin: 0 -1px;
 	padding: 4px 0;
-	width: $input-size + $icon-button-size * 2 + 2px; // add borders
 }
 
 // Hide suggestions on mobile until we @todo find a better way to show them
@@ -96,7 +89,23 @@ $input-size: 230px;
 	}
 }
 
-.editor-url-input__button .editor-url-input__suggestions {
-	left: -40px;
-	right: -32px;
+.editor-url-input__button-modal {
+	box-shadow: $shadow-popover;
+	border: 1px solid $light-gray-500;
+	background: $white;
+}
+
+.editor-url-input__button-modal-line {
+	display: flex;
+	flex-direction: row;
+	flex-grow: 1;
+	flex-shrink: 1;
+	min-width: 0;
+	align-items: flex-start;
+
+	.components-button {
+		flex-shrink: 0;
+		width: $icon-button-size;
+		height: $icon-button-size;
+	}
 }