diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index d03b11d0a84f7a..951df53592ae33 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -284,7 +284,7 @@ class WritingFlow extends Component {
 		if ( ! isVertical ) {
 			this.verticalRect = null;
 		} else if ( ! this.verticalRect ) {
-			this.verticalRect = computeCaretRect( target );
+			this.verticalRect = computeCaretRect();
 		}
 
 		if ( isShift ) {
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 65c44bb660ef38..ce378c0b09e3a8 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -43,7 +43,6 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
-export { default as __unstablePositionedAtSelection } from './positioned-at-selection';
 export { default as QueryControls } from './query-controls';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index bdf1b5c0c7c624..4515cd2facfe78 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -282,6 +282,7 @@ class Popover extends Component {
 			getAnchorRect,
 			expandOnMobile,
 			animate = true,
+			anchorRect,
 			/* eslint-enable no-unused-vars */
 			...contentProps
 		} = this.props;
diff --git a/packages/components/src/positioned-at-selection/index.js b/packages/components/src/positioned-at-selection/index.js
deleted file mode 100644
index 37c039d77777df..00000000000000
--- a/packages/components/src/positioned-at-selection/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { getOffsetParent, getRectangleFromRange } from '@wordpress/dom';
-
-/**
- * Returns a style object for applying as `position: absolute` for an element
- * relative to the bottom-center of the current selection. Includes `top` and
- * `left` style properties.
- *
- * @return {Object} Style object.
- */
-function getCurrentCaretPositionStyle() {
-	const selection = window.getSelection();
-
-	// Unlikely, but in the case there is no selection, return empty styles so
-	// as to avoid a thrown error by `Selection#getRangeAt` on invalid index.
-	if ( selection.rangeCount === 0 ) {
-		return {};
-	}
-
-	// Get position relative viewport.
-	const rect = getRectangleFromRange( selection.getRangeAt( 0 ) );
-	let top = rect.top + rect.height;
-	let left = rect.left + ( rect.width / 2 );
-
-	// Offset by positioned parent, if one exists.
-	const offsetParent = getOffsetParent( selection.anchorNode );
-	if ( offsetParent ) {
-		const parentRect = offsetParent.getBoundingClientRect();
-		top -= parentRect.top;
-		left -= parentRect.left;
-	}
-
-	return { top, left };
-}
-
-/**
- * Component which renders itself positioned under the current caret selection.
- * The position is calculated at the time of the component being mounted, so it
- * should only be mounted after the desired selection has been made.
- *
- * @type {WPComponent}
- */
-export default class PositionedAtSelection extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.state = {
-			style: getCurrentCaretPositionStyle(),
-		};
-	}
-
-	render() {
-		const { children } = this.props;
-		const { style } = this.state;
-
-		return (
-			<div className="editor-format-toolbar__selection-position block-editor-format-toolbar__selection-position" style={ style }>
-				{ children }
-			</div>
-		);
-	}
-}
diff --git a/packages/dom/README.md b/packages/dom/README.md
index 1212dea1f4f5d5..d52e47552f342e 100644
--- a/packages/dom/README.md
+++ b/packages/dom/README.md
@@ -18,10 +18,6 @@ npm install @wordpress/dom --save
 
 Get the rectangle for the selection in a container.
 
-_Parameters_
-
--   _container_ `Element`: Editable container.
-
 _Returns_
 
 -   `?DOMRect`: The rectangle.
diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
index aba561f992d593..b676448ec4424f 100644
--- a/packages/dom/src/dom.js
+++ b/packages/dom/src/dom.js
@@ -235,15 +235,9 @@ export function getRectangleFromRange( range ) {
 /**
  * Get the rectangle for the selection in a container.
  *
- * @param {Element} container Editable container.
- *
  * @return {?DOMRect} The rectangle.
  */
-export function computeCaretRect( container ) {
-	if ( ! container.isContentEditable ) {
-		return;
-	}
-
+export function computeCaretRect() {
 	const selection = window.getSelection();
 	const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null;
 
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index 2e2bc942de76b3..c4934e59a8e3cc 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -1,12 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG, TextControl, Popover, IconButton, __unstablePositionedAtSelection } from '@wordpress/components';
+import { Path, SVG, TextControl, Popover, IconButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, useMemo } from '@wordpress/element';
 import { insertObject } from '@wordpress/rich-text';
 import { MediaUpload, RichTextToolbarButton, MediaUploadCheck } from '@wordpress/block-editor';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
+import { computeCaretRect } from '@wordpress/dom';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -14,6 +15,17 @@ const name = 'core/image';
 
 const stopKeyPropagation = ( event ) => event.stopPropagation();
 
+const PopoverAtImage = ( { dependencies, ...props } ) => {
+	return (
+		<Popover
+			position="bottom center"
+			focusOnMount={ false }
+			anchorRect={ useMemo( () => computeCaretRect(), dependencies ) }
+			{ ...props }
+		/>
+	);
+};
+
 export const image = {
 	name,
 	title: __( 'Image' ),
@@ -81,9 +93,6 @@ export const image = {
 		render() {
 			const { value, onChange, isObjectActive, activeObjectAttributes } = this.props;
 			const { style } = activeObjectAttributes;
-			// Rerender PositionedAtSelection when the selection changes or when
-			// the width changes.
-			const key = value.start + style;
 
 			return (
 				<MediaUploadCheck>
@@ -113,10 +122,11 @@ export const image = {
 							return null;
 						} }
 					/> }
-					{ isObjectActive && <__unstablePositionedAtSelection key={ key }>
-						<Popover
-							position="bottom center"
-							focusOnMount={ false }
+					{ isObjectActive &&
+						<PopoverAtImage
+							// Reposition Popover when the selection changes or
+							// when the width changes.
+							dependencies={ [ style, value.start ] }
 						>
 							{ // Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
 							/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ }
@@ -154,8 +164,8 @@ export const image = {
 								<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
 							</form>
 							{ /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */ }
-						</Popover>
-					</__unstablePositionedAtSelection> }
+						</PopoverAtImage>
+					}
 				</MediaUploadCheck>
 			);
 		}