plugin development - Gutenberg's Popover component position relative to the focused element

admin管理员组

文章数量:1189208

I am developing a site where we want to use Gutenberg's Popover component to show custom options in the Popover when a specific key is entered in the block editor. I have used KeyboardShortcuts component to register a new shortcut, now I am trying to integrate the Popover. For some reason, Popover is not getting positioned relative to the focused element in the block editor and it shows in the left corner of the document.

How could we position it in the block editor just like Blocks popover?

Core Block Popover position:

Custom Popover position:

Here is my code:

const [ popoverAnchor, setPopoverAnchor ] = useState()
const [ isAllSelected, setIsAllSelected ] = useState( false )
const selectAll = ( e ) => {
    document.activeElement.setAttribute( 'ref', setPopoverAnchor )
    setTimeout( () => {
        setIsAllSelected( true )
    }, 1000 )
}

return (
    <div>
        <KeyboardShortcuts
            shortcuts={ {
                'mod+/': selectAll,
            } }
            bindGlobal="true"
        />
        [cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }
        { isAllSelected && <Popover anchor={ popoverAnchor } yAxis="top" xAxis="right">Popover is toggled!</Popover> }
    </div>
)

本文标签： plugin developmentGutenberg39s Popover component position relative to the focused element