@wordpress/block-editor 15.4.1-next.f56bd8138.0 → 15.5.1-next.47f435fc9.0

package/build/components/grid/grid-item-resizer.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_components","require","_element","_useBlockRefs","_cover","_interopRequireDefault","_utils","_jsxRuntime","GridItemResizer","clientId","bounds","onChange","parentLayout","blockElement","useBlockElement","rootBlockElement","parentElement","isManualPlacement","jsx","GridItemResizerInner","isManualGrid","window","__experimentalEnableGridInteractivity","resizeDirection","setResizeDirection","useState","enableSide","setEnableSide","top","bottom","left","right","useEffect","observer","ResizeObserver","blockClientRect","getBoundingClientRect","rootBlockClientRect","observe","disconnect","justification","alignment","styles","display","justifyContent","alignItems","default","className","__unstablePopoverSlot","additionalStyles","children","ResizableBox","size","width","height","enable","bottomLeft","bottomRight","topLeft","topRight","boundsByDirection","onPointerDown","target","pointerId","setPointerCapture","onResizeStart","event","direction","onResizeStop","boxElement","columnGap","parseFloat","getComputedCSS","rowGap","gridColumnTracks","getGridTracks","gridRowTracks","rect","DOMRect","offsetLeft","offsetTop","offsetWidth","offsetHeight","columnStart","getClosestTrack","rowStart","columnEnd","rowEnd","columnSpan","rowSpan","undefined"],"sources":["@wordpress/block-editor/src/components/grid/grid-item-resizer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ResizableBox } from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { getComputedCSS, getGridTracks, getClosestTrack } from './utils';\n\nexport function GridItemResizer( {\n\tclientId,\n\tbounds,\n\tonChange,\n\tparentLayout,\n} ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst rootBlockElement = blockElement?.parentElement;\n\tconst { isManualPlacement } = parentLayout;\n\n\tif ( ! blockElement || ! rootBlockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GridItemResizerInner\n\t\t\tclientId={ clientId }\n\t\t\tbounds={ bounds }\n\t\t\tblockElement={ blockElement }\n\t\t\trootBlockElement={ rootBlockElement }\n\t\t\tonChange={ onChange }\n\t\t\tisManualGrid={\n\t\t\t\tisManualPlacement &&\n\t\t\t\twindow.__experimentalEnableGridInteractivity\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction GridItemResizerInner( {\n\tclientId,\n\tbounds,\n\tblockElement,\n\trootBlockElement,\n\tonChange,\n\tisManualGrid,\n} ) {\n\tconst [ resizeDirection, setResizeDirection ] = useState( null );\n\tconst [ enableSide, setEnableSide ] = useState( {\n\t\ttop: false,\n\t\tbottom: false,\n\t\tleft: false,\n\t\tright: false,\n\t} );\n\n\tuseEffect( () => {\n\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\tconst blockClientRect = blockElement.getBoundingClientRect();\n\t\t\tconst rootBlockClientRect =\n\t\t\t\trootBlockElement.getBoundingClientRect();\n\t\t\tsetEnableSide( {\n\t\t\t\ttop: blockClientRect.top > rootBlockClientRect.top,\n\t\t\t\tbottom: blockClientRect.bottom < rootBlockClientRect.bottom,\n\t\t\t\tleft: blockClientRect.left > rootBlockClientRect.left,\n\t\t\t\tright: blockClientRect.right < rootBlockClientRect.right,\n\t\t\t} );\n\t\t} );\n\t\tobserver.observe( blockElement );\n\t\treturn () => observer.disconnect();\n\t}, [ blockElement, rootBlockElement ] );\n\n\tconst justification = {\n\t\tright: 'left',\n\t\tleft: 'right',\n\t};\n\n\tconst alignment = {\n\t\ttop: 'flex-end',\n\t\tbottom: 'flex-start',\n\t};\n\n\tconst styles = {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\t...( justification[ resizeDirection ] && {\n\t\t\tjustifyContent: justification[ resizeDirection ],\n\t\t} ),\n\t\t...( alignment[ resizeDirection ] && {\n\t\t\talignItems: alignment[ resizeDirection ],\n\t\t} ),\n\t};\n\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-item-resizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"__unstable-block-tools-after\"\n\t\t\tadditionalStyles={ styles }\n\t\t>\n\t\t\t<ResizableBox\n\t\t\t\tclassName=\"block-editor-grid-item-resizer__box\"\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t} }\n\t\t\t\tenable={ {\n\t\t\t\t\tbottom: enableSide.bottom,\n\t\t\t\t\tbottomLeft: false,\n\t\t\t\t\tbottomRight: false,\n\t\t\t\t\tleft: enableSide.left,\n\t\t\t\t\tright: enableSide.right,\n\t\t\t\t\ttop: enableSide.top,\n\t\t\t\t\ttopLeft: false,\n\t\t\t\t\ttopRight: false,\n\t\t\t\t} }\n\t\t\t\tbounds={ bounds }\n\t\t\t\tboundsByDirection\n\t\t\t\tonPointerDown={ ( { target, pointerId } ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * Captures the pointer to avoid hiccups while dragging over objects\n\t\t\t\t\t * like iframes and ensures that the event to end the drag is\n\t\t\t\t\t * captured by the target (resize handle) whether or not it’s under\n\t\t\t\t\t * the pointer.\n\t\t\t\t\t */\n\t\t\t\t\ttarget.setPointerCapture( pointerId );\n\t\t\t\t} }\n\t\t\t\tonResizeStart={ ( event, direction ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * The container justification and alignment need to be set\n\t\t\t\t\t * according to the direction the resizer is being dragged in,\n\t\t\t\t\t * so that it resizes in the right direction.\n\t\t\t\t\t */\n\t\t\t\t\tsetResizeDirection( direction );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, boxElement ) => {\n\t\t\t\t\tconst columnGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'column-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst rowGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'row-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst gridColumnTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-columns'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolumnGap\n\t\t\t\t\t);\n\t\t\t\t\tconst gridRowTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-rows'\n\t\t\t\t\t\t),\n\t\t\t\t\t\trowGap\n\t\t\t\t\t);\n\t\t\t\t\tconst rect = new window.DOMRect(\n\t\t\t\t\t\tblockElement.offsetLeft + boxElement.offsetLeft,\n\t\t\t\t\t\tblockElement.offsetTop + boxElement.offsetTop,\n\t\t\t\t\t\tboxElement.offsetWidth,\n\t\t\t\t\t\tboxElement.offsetHeight\n\t\t\t\t\t);\n\t\t\t\t\tconst columnStart =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.left ) + 1;\n\t\t\t\t\tconst rowStart =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.top ) + 1;\n\t\t\t\t\tconst columnEnd =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.right, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tconst rowEnd =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.bottom, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tcolumnSpan: columnEnd - columnStart + 1,\n\t\t\t\t\t\trowSpan: rowEnd - rowStart + 1,\n\t\t\t\t\t\tcolumnStart: isManualGrid ? columnStart : undefined,\n\t\t\t\t\t\trowStart: isManualGrid ? rowStart : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/grid/grid-item-resizer.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ResizableBox } from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { getComputedCSS, getGridTracks, getClosestTrack } from './utils';\n\nexport function GridItemResizer( {\n\tclientId,\n\tbounds,\n\tonChange,\n\tparentLayout,\n} ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst rootBlockElement = blockElement?.parentElement;\n\tconst { isManualPlacement } = parentLayout;\n\n\tif ( ! blockElement || ! rootBlockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GridItemResizerInner\n\t\t\tclientId={ clientId }\n\t\t\tbounds={ bounds }\n\t\t\tblockElement={ blockElement }\n\t\t\trootBlockElement={ rootBlockElement }\n\t\t\tonChange={ onChange }\n\t\t\tisManualGrid={\n\t\t\t\tisManualPlacement &&\n\t\t\t\twindow.__experimentalEnableGridInteractivity\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction GridItemResizerInner( {\n\tclientId,\n\tbounds,\n\tblockElement,\n\trootBlockElement,\n\tonChange,\n\tisManualGrid,\n} ) {\n\tconst [ resizeDirection, setResizeDirection ] = useState( null );\n\tconst [ enableSide, setEnableSide ] = useState( {\n\t\ttop: false,\n\t\tbottom: false,\n\t\tleft: false,\n\t\tright: false,\n\t} );\n\n\tuseEffect( () => {\n\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\tconst blockClientRect = blockElement.getBoundingClientRect();\n\t\t\tconst rootBlockClientRect =\n\t\t\t\trootBlockElement.getBoundingClientRect();\n\t\t\tsetEnableSide( {\n\t\t\t\ttop: blockClientRect.top > rootBlockClientRect.top,\n\t\t\t\tbottom: blockClientRect.bottom < rootBlockClientRect.bottom,\n\t\t\t\tleft: blockClientRect.left > rootBlockClientRect.left,\n\t\t\t\tright: blockClientRect.right < rootBlockClientRect.right,\n\t\t\t} );\n\t\t} );\n\t\tobserver.observe( blockElement );\n\t\treturn () => observer.disconnect();\n\t}, [ blockElement, rootBlockElement ] );\n\n\tconst justification = {\n\t\tright: 'left',\n\t\tleft: 'right',\n\t};\n\n\tconst alignment = {\n\t\ttop: 'flex-end',\n\t\tbottom: 'flex-start',\n\t};\n\n\tconst styles = {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\t...( justification[ resizeDirection ] && {\n\t\t\tjustifyContent: justification[ resizeDirection ],\n\t\t} ),\n\t\t...( alignment[ resizeDirection ] && {\n\t\t\talignItems: alignment[ resizeDirection ],\n\t\t} ),\n\t};\n\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-item-resizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"__unstable-block-tools-after\"\n\t\t\tadditionalStyles={ styles }\n\t\t>\n\t\t\t<ResizableBox\n\t\t\t\tclassName=\"block-editor-grid-item-resizer__box\"\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t} }\n\t\t\t\tenable={ {\n\t\t\t\t\tbottom: enableSide.bottom,\n\t\t\t\t\tbottomLeft: false,\n\t\t\t\t\tbottomRight: false,\n\t\t\t\t\tleft: enableSide.left,\n\t\t\t\t\tright: enableSide.right,\n\t\t\t\t\ttop: enableSide.top,\n\t\t\t\t\ttopLeft: false,\n\t\t\t\t\ttopRight: false,\n\t\t\t\t} }\n\t\t\t\tbounds={ bounds }\n\t\t\t\tboundsByDirection\n\t\t\t\tonPointerDown={ ( { target, pointerId } ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * Captures the pointer to avoid hiccups while dragging over objects\n\t\t\t\t\t * like iframes and ensures that the event to end the drag is\n\t\t\t\t\t * captured by the target (resize handle) whether or not it\u2019s under\n\t\t\t\t\t * the pointer.\n\t\t\t\t\t */\n\t\t\t\t\ttarget.setPointerCapture( pointerId );\n\t\t\t\t} }\n\t\t\t\tonResizeStart={ ( event, direction ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * The container justification and alignment need to be set\n\t\t\t\t\t * according to the direction the resizer is being dragged in,\n\t\t\t\t\t * so that it resizes in the right direction.\n\t\t\t\t\t */\n\t\t\t\t\tsetResizeDirection( direction );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, boxElement ) => {\n\t\t\t\t\tconst columnGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'column-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst rowGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'row-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst gridColumnTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-columns'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolumnGap\n\t\t\t\t\t);\n\t\t\t\t\tconst gridRowTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-rows'\n\t\t\t\t\t\t),\n\t\t\t\t\t\trowGap\n\t\t\t\t\t);\n\t\t\t\t\tconst rect = new window.DOMRect(\n\t\t\t\t\t\tblockElement.offsetLeft + boxElement.offsetLeft,\n\t\t\t\t\t\tblockElement.offsetTop + boxElement.offsetTop,\n\t\t\t\t\t\tboxElement.offsetWidth,\n\t\t\t\t\t\tboxElement.offsetHeight\n\t\t\t\t\t);\n\t\t\t\t\tconst columnStart =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.left ) + 1;\n\t\t\t\t\tconst rowStart =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.top ) + 1;\n\t\t\t\t\tconst columnEnd =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.right, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tconst rowEnd =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.bottom, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tcolumnSpan: columnEnd - columnStart + 1,\n\t\t\t\t\t\trowSpan: rowEnd - rowStart + 1,\n\t\t\t\t\t\tcolumnStart: isManualGrid ? columnStart : undefined,\n\t\t\t\t\t\trowStart: isManualGrid ? rowStart : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["BlockPopoverCover"]
+}

package/build/components/grid/grid-visualizer.js

@@ -1,181 +1,218 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var grid_visualizer_exports = {};
+__export(grid_visualizer_exports, {
+  GridVisualizer: () => GridVisualizer
 });
-exports.GridVisualizer = GridVisualizer;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _element = require("@wordpress/element");
-var _data = require("@wordpress/data");
-var _compose = require("@wordpress/compose");
-var _useBlockRefs = require("../block-list/use-block-props/use-block-refs");
-var _cover = _interopRequireDefault(require("../block-popover/cover"));
-var _utils = require("./utils");
-var _store = require("../../store");
-var _useGetNumberOfBlocksBeforeCell = require("./use-get-number-of-blocks-before-cell");
-var _buttonBlockAppender = _interopRequireDefault(require("../button-block-appender"));
-var _lockUnlock = require("../../lock-unlock");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function GridVisualizer({
-  clientId,
-  contentRef,
-  parentLayout
-}) {
-  const isDistractionFree = (0, _data.useSelect)(select => select(_store.store).getSettings().isDistractionFree, []);
-  const gridElement = (0, _useBlockRefs.useBlockElement)(clientId);
+module.exports = __toCommonJS(grid_visualizer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+var import_data = require("@wordpress/data");
+var import_compose = require("@wordpress/compose");
+var import_use_block_refs = require("../block-list/use-block-props/use-block-refs");
+var import_cover = __toESM(require("../block-popover/cover"));
+var import_utils = require("./utils");
+var import_store = require("../../store");
+var import_use_get_number_of_blocks_before_cell = require("./use-get-number-of-blocks-before-cell");
+var import_button_block_appender = __toESM(require("../button-block-appender"));
+var import_lock_unlock = require("../../lock-unlock");
+function GridVisualizer({ clientId, contentRef, parentLayout }) {
+  const isDistractionFree = (0, import_data.useSelect)(
+    (select) => select(import_store.store).getSettings().isDistractionFree,
+    []
+  );
+  const gridElement = (0, import_use_block_refs.useBlockElement)(clientId);
   if (isDistractionFree || !gridElement) {
     return null;
   }
   const isManualGrid = parentLayout?.isManualPlacement && window.__experimentalEnableGridInteractivity;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerGrid, {
-    gridClientId: clientId,
-    gridElement: gridElement,
-    isManualGrid: isManualGrid,
-    ref: contentRef
-  });
-}
-const GridVisualizerGrid = (0, _element.forwardRef)(({
-  gridClientId,
-  gridElement,
-  isManualGrid
-}, ref) => {
-  const [gridInfo, setGridInfo] = (0, _element.useState)(() => (0, _utils.getGridInfo)(gridElement));
-  const [isDroppingAllowed, setIsDroppingAllowed] = (0, _element.useState)(false);
-  (0, _element.useEffect)(() => {
-    const resizeCallback = () => setGridInfo((0, _utils.getGridInfo)(gridElement));
-    // Both border-box and content-box are observed as they may change
-    // independently. This requires two observers because a single one
-    // can’t be made to monitor both on the same element.
-    const borderBoxSpy = new window.ResizeObserver(resizeCallback);
-    borderBoxSpy.observe(gridElement, {
-      box: 'border-box'
-    });
-    const contentBoxSpy = new window.ResizeObserver(resizeCallback);
-    contentBoxSpy.observe(gridElement);
-    return () => {
-      borderBoxSpy.disconnect();
-      contentBoxSpy.disconnect();
-    };
-  }, [gridElement]);
-  (0, _element.useEffect)(() => {
-    function onGlobalDrag() {
-      setIsDroppingAllowed(true);
-    }
-    function onGlobalDragEnd() {
-      setIsDroppingAllowed(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    GridVisualizerGrid,
+    {
+      gridClientId: clientId,
+      gridElement,
+      isManualGrid,
+      ref: contentRef
     }
-    document.addEventListener('drag', onGlobalDrag);
-    document.addEventListener('dragend', onGlobalDragEnd);
-    return () => {
-      document.removeEventListener('drag', onGlobalDrag);
-      document.removeEventListener('dragend', onGlobalDragEnd);
-    };
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cover.default, {
-    className: (0, _clsx.default)('block-editor-grid-visualizer', {
-      'is-dropping-allowed': isDroppingAllowed
-    }),
-    clientId: gridClientId,
-    __unstablePopoverSlot: "__unstable-block-tools-after",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: ref,
-      className: "block-editor-grid-visualizer__grid",
-      style: gridInfo.style,
-      children: isManualGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ManualGridVisualizer, {
-        gridClientId: gridClientId,
-        gridInfo: gridInfo
-      }) : Array.from({
-        length: gridInfo.numItems
-      }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerCell, {
-        color: gridInfo.currentColor
-      }, i))
-    })
-  });
-});
-function ManualGridVisualizer({
-  gridClientId,
-  gridInfo
-}) {
-  const [highlightedRect, setHighlightedRect] = (0, _element.useState)(null);
-  const gridItemStyles = (0, _data.useSelect)(select => {
-    const {
-      getBlockOrder,
-      getBlockStyles
-    } = (0, _lockUnlock.unlock)(select(_store.store));
-    const blockOrder = getBlockOrder(gridClientId);
-    return getBlockStyles(blockOrder);
-  }, [gridClientId]);
-  const occupiedRects = (0, _element.useMemo)(() => {
+  );
+}
+const GridVisualizerGrid = (0, import_element.forwardRef)(
+  ({ gridClientId, gridElement, isManualGrid }, ref) => {
+    const [gridInfo, setGridInfo] = (0, import_element.useState)(
+      () => (0, import_utils.getGridInfo)(gridElement)
+    );
+    const [isDroppingAllowed, setIsDroppingAllowed] = (0, import_element.useState)(false);
+    (0, import_element.useEffect)(() => {
+      const resizeCallback = () => setGridInfo((0, import_utils.getGridInfo)(gridElement));
+      const borderBoxSpy = new window.ResizeObserver(resizeCallback);
+      borderBoxSpy.observe(gridElement, { box: "border-box" });
+      const contentBoxSpy = new window.ResizeObserver(resizeCallback);
+      contentBoxSpy.observe(gridElement);
+      return () => {
+        borderBoxSpy.disconnect();
+        contentBoxSpy.disconnect();
+      };
+    }, [gridElement]);
+    (0, import_element.useEffect)(() => {
+      function onGlobalDrag() {
+        setIsDroppingAllowed(true);
+      }
+      function onGlobalDragEnd() {
+        setIsDroppingAllowed(false);
+      }
+      document.addEventListener("drag", onGlobalDrag);
+      document.addEventListener("dragend", onGlobalDragEnd);
+      return () => {
+        document.removeEventListener("drag", onGlobalDrag);
+        document.removeEventListener("dragend", onGlobalDragEnd);
+      };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_cover.default,
+      {
+        className: (0, import_clsx.default)("block-editor-grid-visualizer", {
+          "is-dropping-allowed": isDroppingAllowed
+        }),
+        clientId: gridClientId,
+        __unstablePopoverSlot: "__unstable-block-tools-after",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref,
+            className: "block-editor-grid-visualizer__grid",
+            style: gridInfo.style,
+            children: isManualGrid ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ManualGridVisualizer,
+              {
+                gridClientId,
+                gridInfo
+              }
+            ) : Array.from({ length: gridInfo.numItems }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              GridVisualizerCell,
+              {
+                color: gridInfo.currentColor
+              },
+              i
+            ))
+          }
+        )
+      }
+    );
+  }
+);
+function ManualGridVisualizer({ gridClientId, gridInfo }) {
+  const [highlightedRect, setHighlightedRect] = (0, import_element.useState)(null);
+  const gridItemStyles = (0, import_data.useSelect)(
+    (select) => {
+      const { getBlockOrder, getBlockStyles } = (0, import_lock_unlock.unlock)(
+        select(import_store.store)
+      );
+      const blockOrder = getBlockOrder(gridClientId);
+      return getBlockStyles(blockOrder);
+    },
+    [gridClientId]
+  );
+  const occupiedRects = (0, import_element.useMemo)(() => {
     const rects = [];
     for (const style of Object.values(gridItemStyles)) {
-      var _style$layout;
       const {
         columnStart,
         rowStart,
         columnSpan = 1,
         rowSpan = 1
-      } = (_style$layout = style?.layout) !== null && _style$layout !== void 0 ? _style$layout : {};
+      } = style?.layout ?? {};
       if (!columnStart || !rowStart) {
         continue;
       }
-      rects.push(new _utils.GridRect({
-        columnStart,
-        rowStart,
-        columnSpan,
-        rowSpan
-      }));
+      rects.push(
+        new import_utils.GridRect({
+          columnStart,
+          rowStart,
+          columnSpan,
+          rowSpan
+        })
+      );
     }
     return rects;
   }, [gridItemStyles]);
-  return (0, _utils.range)(1, gridInfo.numRows).map(row => (0, _utils.range)(1, gridInfo.numColumns).map(column => {
-    var _highlightedRect$cont;
-    const isCellOccupied = occupiedRects.some(rect => rect.contains(column, row));
-    const isHighlighted = (_highlightedRect$cont = highlightedRect?.contains(column, row)) !== null && _highlightedRect$cont !== void 0 ? _highlightedRect$cont : false;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerCell, {
-      color: gridInfo.currentColor,
-      className: isHighlighted && 'is-highlighted',
-      children: isCellOccupied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerDropZone, {
-        column: column,
-        row: row,
-        gridClientId: gridClientId,
-        gridInfo: gridInfo,
-        setHighlightedRect: setHighlightedRect
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerAppender, {
-        column: column,
-        row: row,
-        gridClientId: gridClientId,
-        gridInfo: gridInfo,
-        setHighlightedRect: setHighlightedRect
-      })
-    }, `${row}-${column}`);
-  }));
+  return (0, import_utils.range)(1, gridInfo.numRows).map(
+    (row) => (0, import_utils.range)(1, gridInfo.numColumns).map((column) => {
+      const isCellOccupied = occupiedRects.some(
+        (rect) => rect.contains(column, row)
+      );
+      const isHighlighted = highlightedRect?.contains(column, row) ?? false;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        GridVisualizerCell,
+        {
+          color: gridInfo.currentColor,
+          className: isHighlighted && "is-highlighted",
+          children: isCellOccupied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            GridVisualizerDropZone,
+            {
+              column,
+              row,
+              gridClientId,
+              gridInfo,
+              setHighlightedRect
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            GridVisualizerAppender,
+            {
+              column,
+              row,
+              gridClientId,
+              gridInfo,
+              setHighlightedRect
+            }
+          )
+        },
+        `${row}-${column}`
+      );
+    })
+  );
 }
-function GridVisualizerCell({
-  color,
-  children,
-  className
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _clsx.default)('block-editor-grid-visualizer__cell', className),
-    style: {
-      boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${color} 20%, #0000)`,
-      color
-    },
-    children: children
-  });
+function GridVisualizerCell({ color, children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        "block-editor-grid-visualizer__cell",
+        className
+      ),
+      style: {
+        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${color} 20%, #0000)`,
+        color
+      },
+      children
+    }
+  );
 }
 function useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighlightedRect) {
   const {
@@ -183,13 +220,16 @@ function useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighl
     getBlockRootClientId,
     canInsertBlockType,
     getBlockName
-  } = (0, _data.useSelect)(_store.store);
+  } = (0, import_data.useSelect)(import_store.store);
   const {
     updateBlockAttributes,
     moveBlocksToPosition,
     __unstableMarkNextChangeAsNotPersistent
-  } = (0, _data.useDispatch)(_store.store);
-  const getNumberOfBlocksBeforeCell = (0, _useGetNumberOfBlocksBeforeCell.useGetNumberOfBlocksBeforeCell)(gridClientId, gridInfo.numColumns);
+  } = (0, import_data.useDispatch)(import_store.store);
+  const getNumberOfBlocksBeforeCell = (0, import_use_get_number_of_blocks_before_cell.useGetNumberOfBlocksBeforeCell)(
+    gridClientId,
+    gridInfo.numColumns
+  );
   return useDropZoneWithValidation({
     validateDrag(srcClientId) {
       const blockName = getBlockName(srcClientId);
@@ -197,13 +237,13 @@ function useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighl
         return false;
       }
       const attributes = getBlockAttributes(srcClientId);
-      const rect = new _utils.GridRect({
+      const rect = new import_utils.GridRect({
         columnStart: column,
         rowStart: row,
         columnSpan: attributes.style?.layout?.columnSpan,
         rowSpan: attributes.style?.layout?.rowSpan
       });
-      const isInBounds = new _utils.GridRect({
+      const isInBounds = new import_utils.GridRect({
         columnSpan: gridInfo.numColumns,
         rowSpan: gridInfo.numRows
       }).containsRect(rect);
@@ -211,18 +251,19 @@ function useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighl
     },
     onDragEnter(srcClientId) {
       const attributes = getBlockAttributes(srcClientId);
-      setHighlightedRect(new _utils.GridRect({
-        columnStart: column,
-        rowStart: row,
-        columnSpan: attributes.style?.layout?.columnSpan,
-        rowSpan: attributes.style?.layout?.rowSpan
-      }));
+      setHighlightedRect(
+        new import_utils.GridRect({
+          columnStart: column,
+          rowStart: row,
+          columnSpan: attributes.style?.layout?.columnSpan,
+          rowSpan: attributes.style?.layout?.rowSpan
+        })
+      );
     },
     onDragLeave() {
-      // onDragEnter can be called before onDragLeave if the user moves
-      // their mouse quickly, so only clear the highlight if it was set
-      // by this cell.
-      setHighlightedRect(prevHighlightedRect => prevHighlightedRect?.columnStart === column && prevHighlightedRect?.rowStart === row ? null : prevHighlightedRect);
+      setHighlightedRect(
+        (prevHighlightedRect) => prevHighlightedRect?.columnStart === column && prevHighlightedRect?.rowStart === row ? null : prevHighlightedRect
+      );
     },
     onDrop(srcClientId) {
       setHighlightedRect(null);
@@ -238,7 +279,12 @@ function useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighl
         }
       });
       __unstableMarkNextChangeAsNotPersistent();
-      moveBlocksToPosition([srcClientId], getBlockRootClientId(srcClientId), gridClientId, getNumberOfBlocksBeforeCell(column, row));
+      moveBlocksToPosition(
+        [srcClientId],
+        getBlockRootClientId(srcClientId),
+        gridClientId,
+        getNumberOfBlocksBeforeCell(column, row)
+      );
     }
   });
 }
@@ -249,10 +295,19 @@ function GridVisualizerDropZone({
   gridInfo,
   setHighlightedRect
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "block-editor-grid-visualizer__drop-zone",
-    ref: useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighlightedRect)
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "block-editor-grid-visualizer__drop-zone",
+      ref: useGridVisualizerDropZone(
+        column,
+        row,
+        gridClientId,
+        gridInfo,
+        setHighlightedRect
+      )
+    }
+  );
 }
 function GridVisualizerAppender({
   column,
@@ -265,31 +320,48 @@ function GridVisualizerAppender({
     updateBlockAttributes,
     moveBlocksToPosition,
     __unstableMarkNextChangeAsNotPersistent
-  } = (0, _data.useDispatch)(_store.store);
-  const getNumberOfBlocksBeforeCell = (0, _useGetNumberOfBlocksBeforeCell.useGetNumberOfBlocksBeforeCell)(gridClientId, gridInfo.numColumns);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttonBlockAppender.default, {
-    rootClientId: gridClientId,
-    className: "block-editor-grid-visualizer__appender",
-    ref: useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighlightedRect),
-    style: {
-      color: gridInfo.currentColor
-    },
-    onSelect: block => {
-      if (!block) {
-        return;
-      }
-      updateBlockAttributes(block.clientId, {
-        style: {
-          layout: {
-            columnStart: column,
-            rowStart: row
-          }
+  } = (0, import_data.useDispatch)(import_store.store);
+  const getNumberOfBlocksBeforeCell = (0, import_use_get_number_of_blocks_before_cell.useGetNumberOfBlocksBeforeCell)(
+    gridClientId,
+    gridInfo.numColumns
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button_block_appender.default,
+    {
+      rootClientId: gridClientId,
+      className: "block-editor-grid-visualizer__appender",
+      ref: useGridVisualizerDropZone(
+        column,
+        row,
+        gridClientId,
+        gridInfo,
+        setHighlightedRect
+      ),
+      style: {
+        color: gridInfo.currentColor
+      },
+      onSelect: (block) => {
+        if (!block) {
+          return;
         }
-      });
-      __unstableMarkNextChangeAsNotPersistent();
-      moveBlocksToPosition([block.clientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(column, row));
+        updateBlockAttributes(block.clientId, {
+          style: {
+            layout: {
+              columnStart: column,
+              rowStart: row
+            }
+          }
+        });
+        __unstableMarkNextChangeAsNotPersistent();
+        moveBlocksToPosition(
+          [block.clientId],
+          gridClientId,
+          gridClientId,
+          getNumberOfBlocksBeforeCell(column, row)
+        );
+      }
     }
-  });
+  );
 }
 function useDropZoneWithValidation({
   validateDrag,
@@ -297,10 +369,8 @@ function useDropZoneWithValidation({
   onDragLeave,
   onDrop
 }) {
-  const {
-    getDraggedBlockClientIds
-  } = (0, _data.useSelect)(_store.store);
-  return (0, _compose.__experimentalUseDropZone)({
+  const { getDraggedBlockClientIds } = (0, import_data.useSelect)(import_store.store);
+  return (0, import_compose.__experimentalUseDropZone)({
     onDragEnter() {
       const [srcClientId] = getDraggedBlockClientIds();
       if (srcClientId && validateDrag(srcClientId)) {
@@ -318,4 +388,8 @@ function useDropZoneWithValidation({
     }
   });
 }
-//# sourceMappingURL=grid-visualizer.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GridVisualizer
+});
+//# sourceMappingURL=grid-visualizer.js.map