diff --git a/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js b/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js index bc82cb9d8efc05..561536643f1c4c 100644 --- a/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js +++ b/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js @@ -63,6 +63,8 @@ function GridItemResizerInner( { * This ref is necessary get the bounding client rect of the resizer, * because it exists outside of the iframe, so its bounding client * rect isn't the same as the block element's. + * It needs to be added to a dummy element because we can't be sure if + * the popover or the resizer are on the page when we need them. */ const resizerRef = useRef( null ); @@ -131,7 +133,6 @@ function GridItemResizerInner( { clientId={ clientId } __unstablePopoverSlot="block-toolbar" additionalStyles={ styles } - __unstableContentRef={ resizerRef } > { event.target.dispatchEvent( @@ -221,6 +221,10 @@ function GridItemResizerInner( { controller.abort(); } } /> +
); } diff --git a/packages/block-editor/src/components/grid-visualizer/style.scss b/packages/block-editor/src/components/grid-visualizer/style.scss index 9d5d306eadaa75..ed3e64cfc372ea 100644 --- a/packages/block-editor/src/components/grid-visualizer/style.scss +++ b/packages/block-editor/src/components/grid-visualizer/style.scss @@ -32,3 +32,10 @@ } } +.block-editor-grid-item-resizer__dummy { + position: absolute; + width: 100%; + height: 100%; + z-index: -1; +} +