Move GridResizerBoundsContext.Provider rendering to GridTools and m…

…ake `GridTools` accept children.

packages/block-editor/src/hooks/grid-visualizer.js

@@ -4,7 +4,7 @@
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
-import { createContext, forwardRef, useState } from '@wordpress/element';
+import { createContext, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ function GridLayoutSync( props ) {
 	useGridLayoutSync( props );
 }
 
-const GridTools = forwardRef( ( { clientId, layout }, ref ) => {
+function GridTools( { clientId, layout, children } ) {
 	const { hasSelection, isDragging } = useSelect( ( select ) => {
 		const { isBlockSelected, hasSelectedInnerBlock, isDraggingBlocks } =
 			select( blockEditorStore );
@@ -31,38 +31,37 @@ const GridTools = forwardRef( ( { clientId, layout }, ref ) => {
 		};
 	} );
 
+	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
+	const [ resizerBounds, setResizerBounds ] = useState();
+
 	return (
-		<>
+		<GridResizerBoundsContext.Provider value={ resizerBounds }>
 			<GridLayoutSync clientId={ clientId } />
 			{ ( hasSelection || isDragging ) && (
 				<GridVisualizer
 					clientId={ clientId }
 					parentLayout={ layout }
-					contentRef={ ref }
+					contentRef={ setResizerBounds }
 				/>
 			) }
-		</>
+			{ children }
+		</GridResizerBoundsContext.Provider>
 	);
-} );
+}
 
 const addGridVisualizerToBlockEdit = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
-		const [ resizerBounds, setResizerBounds ] = useState();
-
 		if ( props.attributes.layout?.type !== 'grid' ) {
 			return <BlockEdit key="edit" { ...props } />;
 		}
 
 		return (
-			<GridResizerBoundsContext.Provider value={ resizerBounds }>
-				<GridTools
-					clientId={ props.clientId }
-					layout={ props.attributes.layout }
-					ref={ setResizerBounds }
-				/>
+			<GridTools
+				clientId={ props.clientId }
+				layout={ props.attributes.layout }
+			>
 				<BlockEdit key="edit" { ...props } />
-			</GridResizerBoundsContext.Provider>
+			</GridTools>
 		);
 	},
 	'addGridVisualizerToBlockEdit'