Site editor: Block settings dropdown remains in place when scrolling

[talldan]

Step-by-step reproduction instructions

1. Ensure you're editing a template with enough content that a scrollbar displays
2. Select a block and open the block settings dropdown
3. Scroll the content

Expected: the block settings dropdown scrolls with the content (matching the toolbar's position)
Actual: the block settings dropdown remains in place while scrolling

Screenshots, screen recording, code snippet

Kapture.2022-07-19.at.16.19.57.mp4

Environment info

Latest trunk

Reproduced using Mac OS / Brave

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[talldan]

I know why this happens, so I'll leave some details.

The block toolbar uses this logic to update its position when scrolling:

gutenberg/packages/components/src/popover/index.js

Lines 325 to 332 in ddd61e4

	useLayoutEffect( () => {
	if ( ownerDocument === document ) {
	return;
	}
	ownerDocument.addEventListener( 'scroll', update );
	return () => ownerDocument.removeEventListener( 'scroll', update );
	}, [ ownerDocument ] );

The toolbar references the block for its position. ownerDocument in the code above is the document of the iframe that the block is inside. The popover listens for a scroll event on the iframe's document, and updates its own position as the iframe is scrolled.

For the block settings dropdown, this doesn't work. It references the button in the block toolbar for its position, and the block toolbar isn't within the iframe. The block toolbar's parent document is the page document, it isn't scrollable so no event is triggered, and the dropdown remains static.