Fix: ensure useOnClickOutside hook correctly detects clicks across iframed editor boundaries

[fabiankaegy]

Description of the Change

Update the useOnClickOutside hook to ensure it correctly detects clicks that happen outside / inside the iframed block editor.

This fixes an issue in the Link component that @ncoetzer identified. When the Link component is rendered in a block inside the editor iframe, the link popover didn't properly close when the user clicked outside the element.

The cause for this was that the editor canvas iframe only actually contains the block content. Any additional UI elements such as the <Popover> component get rendered using portals outside of the iframe again. This lead the useOnClickOutside hook to not detect those changes properly and therefore not trigger the callback that should close the popover.

This has been fixed by adding additional listeners that also listen inside / outside the iframe depending on where the element is getting rendered.

Closes #

How to test the Change

Changelog Entry

Fixed - Link Control popover didn't close when rendered inside an iFramed editor.

Credits

Props @fabiankaegy @ncoetzer

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests pass.

[github-actions]

Size Change: +393 B (+0.6%)

Total Size: 65.5 kB

Filename	Size	Change
dist/index.js	65.5 kB	+393 B (+0.6%)

_{compressed-size-action}

[ncoetzer]

@fabiankaegy LGTM 🚀 Thank you for looking into this.

[Antonio-Laguna]

@fabiankaegy this LGTM!

I'd add a comment to make clear this is ONLY applicable within WordPress. You could be tempted if you had a shared codebase to use this elsewhere but it's not ready for that