I'm developing a custom extension for the block editor that adds visual alignment guides (similar to those found in Figma or Photoshop) around the currently selected block.

While exploring the @wordpress/block-editor package, I noticed that some components (like the block grid visualizer) use the BlockPopover component to position UI elements visually on top of blocks. However, there is no documentation on how to precisely position the popover so it matches the exact size and position of a block.

Inside this package, there is an internal hook called useBlockElement that returns a ref to the active block element, which is exactly what I need. Unfortunately, this hook isn’t publicly exported.

Currently, I can get the selected block’s clientId from the core/block-editor store and attempt to locate its DOM element using a [data-block] selector. But document.querySelector returns null, even after testing various selectors and using observers like MutationObserver.

I don’t want to create a custom block just for this overlay feature, since it would unnecessarily complicate the block structure.

My question: is there a public and reliable way to get the DOM ref of a block from its clientId or from the current selection?