diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index ba308587885283..af3dbcd2d3b48e 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -656,6 +656,7 @@ export class RichText extends Component { if ( document.activeElement !== this.editor.getBody() ) { return; } + const formatNames = this.props.formattingControls; const formats = this.editor.formatter.matchAll( formatNames ).reduce( ( accFormats, activeFormat ) => { accFormats[ activeFormat ] = { @@ -666,7 +667,15 @@ export class RichText extends Component { return accFormats; }, {} ); - const rect = getRectangleFromRange( this.editor.selection.getRng() ); + let rect; + const selectedAnchor = find( parents, ( node ) => node.tagName === 'A' ); + if ( selectedAnchor ) { + // If we selected a link, position the Link UI below the link + rect = selectedAnchor.getBoundingClientRect(); + } else { + // Otherwise, position the Link UI below the cursor or text selection + rect = getRectangleFromRange( this.editor.selection.getRng() ); + } const focusPosition = this.getFocusPosition( rect ); this.setState( { formats, focusPosition, selectedNodeId: this.state.selectedNodeId + 1 } );