Add resize observer for block

WordPress · Aug 19, 2022 · cbb5ee1 · cbb5ee1
1 parent 5a8c121
commit cbb5ee1
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js
@@ -92,8 +92,19 @@ export default function useBlockToolbarPopoverProps( {
 		const view = contentElement?.ownerDocument?.defaultView;
 		view?.addEventHandler?.( 'resize', updateProps );
 
+		// Update the toolbar props on block resize.
+		let resizeObserver;
+		if ( view.ResizeObserver ) {
+			resizeObserver = new view.ResizeObserver( updateProps );
+			resizeObserver.observe( selectedBlockElement );
+		}
+
 		return () => {
 			view?.removeEventHandler?.( 'resize', updateProps );
+
+			if ( resizeObserver ) {
+				resizeObserver.disconnect();
+			}
 		};
 
 		// The deps will update the toolbar props if: