diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
index 24a931dc791754..94610af8fcda1a 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
@@ -17,28 +17,32 @@ import BlockControls from '../block-controls';
import FormatToolbar from './format-toolbar';
import { store as blockEditorStore } from '../../store';
-function InlineSelectionToolbar( { value, anchorRef, activeFormats } ) {
+function InlineSelectionToolbar( {
+ value,
+ editableContentRef,
+ activeFormats,
+} ) {
const lastFormat = activeFormats[ activeFormats.length - 1 ];
const lastFormatType = lastFormat?.type;
const settings = useSelect(
( select ) => select( richTextStore ).getFormatType( lastFormatType ),
[ lastFormatType ]
);
- const selectionRef = useAnchorRef( {
- ref: anchorRef,
+ const popoverAnchor = useAnchorRef( {
+ ref: editableContentRef,
value,
settings,
} );
- return ;
+ return ;
}
-function InlineToolbar( { anchorRef } ) {
+function InlineToolbar( { popoverAnchor } ) {
return (
@@ -51,14 +55,14 @@ function InlineToolbar( { anchorRef } ) {
);
}
-const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
+const FormatToolbarContainer = ( { inline, editableContentRef, value } ) => {
const hasInlineToolbar = useSelect(
( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
[]
);
if ( inline ) {
- return ;
+ return ;
}
if ( hasInlineToolbar ) {
@@ -70,7 +74,7 @@ const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
return (
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 21c004b225f6c5..ae0942349b90c8 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -354,7 +354,7 @@ function RichTextWrapper(
{ isSelected && hasFormats && (
) }
diff --git a/packages/components/src/autocomplete/autocompleter-ui.js b/packages/components/src/autocomplete/autocompleter-ui.js
index c909aa6a4a5783..c25dcfb4030189 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.js
+++ b/packages/components/src/autocomplete/autocompleter-ui.js
@@ -35,7 +35,7 @@ export function getAutoCompleterUI( autocompleter ) {
contentRef,
} ) {
const [ items ] = useItems( filterValue );
- const anchorRef = useAnchorRef( { ref: contentRef, value } );
+ const popoverAnchor = useAnchorRef( { ref: contentRef, value } );
useLayoutEffect( () => {
onChangeOptions( items );
@@ -54,7 +54,7 @@ export function getAutoCompleterUI( autocompleter ) {
onClose={ onReset }
position="top right"
className="components-autocomplete__popover"
- anchorRef={ anchorRef }
+ anchor={ popoverAnchor }
>