@wordpress/block-editor 13.1.0 → 13.2.0

package/build/components/{grid-visualizer → grid}/grid-item-resizer.js

@@ -22,10 +22,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 function GridItemResizer({
   clientId,
   bounds,
-  onChange
+  onChange,
+  parentLayout
 }) {
   const blockElement = (0, _useBlockRefs.__unstableUseBlockElement)(clientId);
   const rootBlockElement = blockElement?.parentElement;
+  const {
+    columnCount
+  } = parentLayout;
   if (!blockElement || !rootBlockElement) {
     return null;
   }
@@ -34,7 +38,8 @@ function GridItemResizer({
     bounds: bounds,
     blockElement: blockElement,
     rootBlockElement: rootBlockElement,
-    onChange: onChange
+    onChange: onChange,
+    isManualGrid: !!columnCount && window.__experimentalEnableGridInteractivity
   });
 }
 function GridItemResizerInner({
@@ -42,7 +47,8 @@ function GridItemResizerInner({
   bounds,
   blockElement,
   rootBlockElement,
-  onChange
+  onChange,
+  isManualGrid
 }) {
   const [resizeDirection, setResizeDirection] = (0, _element.useState)(null);
   const [enableSide, setEnableSide] = (0, _element.useState)({
@@ -131,65 +137,21 @@ function GridItemResizerInner({
       onResizeStop: (event, direction, boxElement) => {
         const columnGap = parseFloat((0, _utils.getComputedCSS)(rootBlockElement, 'column-gap'));
         const rowGap = parseFloat((0, _utils.getComputedCSS)(rootBlockElement, 'row-gap'));
-        const gridColumnTracks = getGridTracks((0, _utils.getComputedCSS)(rootBlockElement, 'grid-template-columns'), columnGap);
-        const gridRowTracks = getGridTracks((0, _utils.getComputedCSS)(rootBlockElement, 'grid-template-rows'), rowGap);
+        const gridColumnTracks = (0, _utils.getGridTracks)((0, _utils.getComputedCSS)(rootBlockElement, 'grid-template-columns'), columnGap);
+        const gridRowTracks = (0, _utils.getGridTracks)((0, _utils.getComputedCSS)(rootBlockElement, 'grid-template-rows'), rowGap);
         const rect = new window.DOMRect(blockElement.offsetLeft + boxElement.offsetLeft, blockElement.offsetTop + boxElement.offsetTop, boxElement.offsetWidth, boxElement.offsetHeight);
-        const columnStart = getClosestTrack(gridColumnTracks, rect.left) + 1;
-        const rowStart = getClosestTrack(gridRowTracks, rect.top) + 1;
-        const columnEnd = getClosestTrack(gridColumnTracks, rect.right, 'end') + 1;
-        const rowEnd = getClosestTrack(gridRowTracks, rect.bottom, 'end') + 1;
+        const columnStart = (0, _utils.getClosestTrack)(gridColumnTracks, rect.left) + 1;
+        const rowStart = (0, _utils.getClosestTrack)(gridRowTracks, rect.top) + 1;
+        const columnEnd = (0, _utils.getClosestTrack)(gridColumnTracks, rect.right, 'end') + 1;
+        const rowEnd = (0, _utils.getClosestTrack)(gridRowTracks, rect.bottom, 'end') + 1;
         onChange({
           columnSpan: columnEnd - columnStart + 1,
-          rowSpan: rowEnd - rowStart + 1
+          rowSpan: rowEnd - rowStart + 1,
+          columnStart: isManualGrid ? columnStart : undefined,
+          rowStart: isManualGrid ? rowStart : undefined
         });
       }
     })
   });
 }
-
-/**
- * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end
- * position in pixels of each grid track.
- *
- * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
- *
- * @param {string} template The grid-template-columns or grid-template-rows CSS property value.
- *                          Only supports fixed sizes in pixels.
- * @param {number} gap      The gap between grid tracks in pixels.
- *
- * @return {Array<{start: number, end: number}>} An array of objects with the start and end
- *                                               position in pixels of each grid track.
- */
-function getGridTracks(template, gap) {
-  const tracks = [];
-  for (const size of template.split(' ')) {
-    const previousTrack = tracks[tracks.length - 1];
-    const start = previousTrack ? previousTrack.end + gap : 0;
-    const end = start + parseFloat(size);
-    tracks.push({
-      start,
-      end
-    });
-  }
-  return tracks;
-}
-
-/**
- * Given an array of grid tracks and a position in pixels, gets the index of the closest track to
- * that position.
- *
- * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
- *
- * @param {Array<{start: number, end: number}>} tracks   An array of objects with the start and end
- *                                                       position in pixels of each grid track.
- * @param {number}                              position The position in pixels.
- * @param {string}                              edge     The edge of the track to compare the
- *                                                       position to. Either 'start' or 'end'.
- *
- * @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which
- *                  is 1-based.
- */
-function getClosestTrack(tracks, position, edge = 'start') {
-  return tracks.reduce((closest, track, index) => Math.abs(track[edge] - position) < Math.abs(tracks[closest][edge] - position) ? index : closest, 0);
-}
 //# sourceMappingURL=grid-item-resizer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_element","_useBlockRefs","_cover","_interopRequireDefault","_utils","_jsxRuntime","GridItemResizer","clientId","bounds","onChange","parentLayout","blockElement","useBlockElement","rootBlockElement","parentElement","columnCount","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","onResizeStart","event","direction","ownerDocument","addEventListener","target","dispatchEvent","Event","bubbles","once","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 { __unstableUseBlockElement as 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 { columnCount } = 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\t!! columnCount && window.__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: 'flex-start',\n\t\tleft: 'flex-end',\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=\"block-toolbar\"\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\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\n\t\t\t\t\t/*\n\t\t\t\t\t * The mouseup event on the resize handle doesn't trigger if the mouse\n\t\t\t\t\t * isn't directly above the handle, so we try to detect if it happens\n\t\t\t\t\t * outside the grid and dispatch a mouseup event on the handle.\n\t\t\t\t\t */\n\t\t\t\t\tblockElement.ownerDocument.addEventListener(\n\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\tevent.target.dispatchEvent(\n\t\t\t\t\t\t\t\tnew Event( 'mouseup', { bubbles: true } )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ once: true }\n\t\t\t\t\t);\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":[]}

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

@@ -0,0 +1,225 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _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.__unstableUseBlockElement)(clientId);
+  if (isDistractionFree || !gridElement) {
+    return null;
+  }
+  const isManualGrid = parentLayout?.columnCount && window.__experimentalEnableGridInteractivity;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerGrid, {
+    clientId: clientId,
+    gridElement: gridElement,
+    isManualGrid: isManualGrid,
+    ref: contentRef
+  });
+}
+const GridVisualizerGrid = (0, _element.forwardRef)(({
+  clientId,
+  gridElement,
+  isManualGrid
+}, ref) => {
+  const [gridInfo, setGridInfo] = (0, _element.useState)(() => (0, _utils.getGridInfo)(gridElement));
+  const [isDroppingAllowed, setIsDroppingAllowed] = (0, _element.useState)(false);
+  const [highlightedRect, setHighlightedRect] = (0, _element.useState)(null);
+  (0, _element.useEffect)(() => {
+    const observers = [];
+    for (const element of [gridElement, ...gridElement.children]) {
+      const observer = new window.ResizeObserver(() => {
+        setGridInfo((0, _utils.getGridInfo)(gridElement));
+      });
+      observer.observe(element);
+      observers.push(observer);
+    }
+    return () => {
+      for (const observer of observers) {
+        observer.disconnect();
+      }
+    };
+  }, [gridElement]);
+  (0, _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, _jsxRuntime.jsx)(_cover.default, {
+    className: (0, _clsx.default)('block-editor-grid-visualizer', {
+      'is-dropping-allowed': isDroppingAllowed
+    }),
+    clientId: clientId,
+    __unstablePopoverSlot: "block-toolbar",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref,
+      className: "block-editor-grid-visualizer__grid",
+      style: gridInfo.style,
+      children: isManualGrid ? (0, _utils.range)(1, gridInfo.numRows).map(row => (0, _utils.range)(1, gridInfo.numColumns).map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerCell, {
+        color: gridInfo.currentColor,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerDropZone, {
+          column: column,
+          row: row,
+          gridClientId: clientId,
+          gridInfo: gridInfo,
+          highlightedRect: highlightedRect,
+          setHighlightedRect: setHighlightedRect
+        })
+      }, `${row}-${column}`))) : Array.from({
+        length: gridInfo.numItems
+      }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerCell, {
+        color: gridInfo.currentColor
+      }, i))
+    })
+  });
+});
+function GridVisualizerCell({
+  color,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "block-editor-grid-visualizer__cell",
+    style: {
+      boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${color} 20%, #0000)`
+    },
+    children: children
+  });
+}
+function GridVisualizerDropZone({
+  column,
+  row,
+  gridClientId,
+  gridInfo,
+  highlightedRect,
+  setHighlightedRect
+}) {
+  var _highlightedRect$cont;
+  const {
+    getBlockAttributes
+  } = (0, _data.useSelect)(_store.store);
+  const {
+    updateBlockAttributes,
+    moveBlocksToPosition,
+    __unstableMarkNextChangeAsNotPersistent
+  } = (0, _data.useDispatch)(_store.store);
+  const getNumberOfBlocksBeforeCell = (0, _useGetNumberOfBlocksBeforeCell.useGetNumberOfBlocksBeforeCell)(gridClientId, gridInfo.numColumns);
+  const ref = useDropZoneWithValidation({
+    validateDrag(srcClientId) {
+      const attributes = getBlockAttributes(srcClientId);
+      const rect = new _utils.GridRect({
+        columnStart: column,
+        rowStart: row,
+        columnSpan: attributes.style?.layout?.columnSpan,
+        rowSpan: attributes.style?.layout?.rowSpan
+      });
+      const isInBounds = new _utils.GridRect({
+        columnSpan: gridInfo.numColumns,
+        rowSpan: gridInfo.numRows
+      }).containsRect(rect);
+      return isInBounds;
+    },
+    onDragEnter(srcClientId) {
+      const attributes = getBlockAttributes(srcClientId);
+      setHighlightedRect(new _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);
+    },
+    onDrop(srcClientId) {
+      setHighlightedRect(null);
+      const attributes = getBlockAttributes(srcClientId);
+      updateBlockAttributes(srcClientId, {
+        style: {
+          ...attributes.style,
+          layout: {
+            ...attributes.style?.layout,
+            columnStart: column,
+            rowStart: row
+          }
+        }
+      });
+      __unstableMarkNextChangeAsNotPersistent();
+      moveBlocksToPosition([srcClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(column, row));
+    }
+  });
+  const isHighlighted = (_highlightedRect$cont = highlightedRect?.contains(column, row)) !== null && _highlightedRect$cont !== void 0 ? _highlightedRect$cont : false;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _clsx.default)('block-editor-grid-visualizer__drop-zone', {
+      'is-highlighted': isHighlighted
+    })
+  });
+}
+function useDropZoneWithValidation({
+  validateDrag,
+  onDragEnter,
+  onDragLeave,
+  onDrop
+}) {
+  const {
+    getDraggedBlockClientIds
+  } = (0, _data.useSelect)(_store.store);
+  return (0, _compose.__experimentalUseDropZone)({
+    onDragEnter() {
+      const [srcClientId] = getDraggedBlockClientIds();
+      if (srcClientId && validateDrag(srcClientId)) {
+        onDragEnter(srcClientId);
+      }
+    },
+    onDragLeave() {
+      onDragLeave();
+    },
+    onDrop() {
+      const [srcClientId] = getDraggedBlockClientIds();
+      if (srcClientId && validateDrag(srcClientId)) {
+        onDrop(srcClientId);
+      }
+    }
+  });
+}
+//# sourceMappingURL=grid-visualizer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_data","_compose","_useBlockRefs","_cover","_utils","_store","_useGetNumberOfBlocksBeforeCell","_jsxRuntime","GridVisualizer","clientId","contentRef","parentLayout","isDistractionFree","useSelect","select","blockEditorStore","getSettings","gridElement","useBlockElement","isManualGrid","columnCount","window","__experimentalEnableGridInteractivity","jsx","GridVisualizerGrid","ref","forwardRef","gridInfo","setGridInfo","useState","getGridInfo","isDroppingAllowed","setIsDroppingAllowed","highlightedRect","setHighlightedRect","useEffect","observers","element","children","observer","ResizeObserver","observe","push","disconnect","onGlobalDrag","onGlobalDragEnd","document","addEventListener","removeEventListener","default","className","clsx","__unstablePopoverSlot","style","range","numRows","map","row","numColumns","column","GridVisualizerCell","color","currentColor","GridVisualizerDropZone","gridClientId","Array","from","length","numItems","_","i","boxShadow","_highlightedRect$cont","getBlockAttributes","updateBlockAttributes","moveBlocksToPosition","__unstableMarkNextChangeAsNotPersistent","useDispatch","getNumberOfBlocksBeforeCell","useGetNumberOfBlocksBeforeCell","useDropZoneWithValidation","validateDrag","srcClientId","attributes","rect","GridRect","columnStart","rowStart","columnSpan","layout","rowSpan","isInBounds","containsRect","onDragEnter","onDragLeave","prevHighlightedRect","onDrop","isHighlighted","contains","getDraggedBlockClientIds","useDropZone"],"sources":["@wordpress/block-editor/src/components/grid/grid-visualizer.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, forwardRef } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { range, GridRect, getGridInfo } from './utils';\nimport { store as blockEditorStore } from '../../store';\nimport { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';\n\nexport function GridVisualizer( { clientId, contentRef, parentLayout } ) {\n\tconst isDistractionFree = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().isDistractionFree,\n\t\t[]\n\t);\n\tconst gridElement = useBlockElement( clientId );\n\n\tif ( isDistractionFree || ! gridElement ) {\n\t\treturn null;\n\t}\n\n\tconst isManualGrid =\n\t\tparentLayout?.columnCount &&\n\t\twindow.__experimentalEnableGridInteractivity;\n\treturn (\n\t\t<GridVisualizerGrid\n\t\t\tclientId={ clientId }\n\t\t\tgridElement={ gridElement }\n\t\t\tisManualGrid={ isManualGrid }\n\t\t\tref={ contentRef }\n\t\t/>\n\t);\n}\n\nconst GridVisualizerGrid = forwardRef(\n\t( { clientId, gridElement, isManualGrid }, ref ) => {\n\t\tconst [ gridInfo, setGridInfo ] = useState( () =>\n\t\t\tgetGridInfo( gridElement )\n\t\t);\n\t\tconst [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );\n\t\tconst [ highlightedRect, setHighlightedRect ] = useState( null );\n\n\t\tuseEffect( () => {\n\t\t\tconst observers = [];\n\t\t\tfor ( const element of [ gridElement, ...gridElement.children ] ) {\n\t\t\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\t\t\tsetGridInfo( getGridInfo( gridElement ) );\n\t\t\t\t} );\n\t\t\t\tobserver.observe( element );\n\t\t\t\tobservers.push( observer );\n\t\t\t}\n\t\t\treturn () => {\n\t\t\t\tfor ( const observer of observers ) {\n\t\t\t\t\tobserver.disconnect();\n\t\t\t\t}\n\t\t\t};\n\t\t}, [ gridElement ] );\n\n\t\tuseEffect( () => {\n\t\t\tfunction onGlobalDrag() {\n\t\t\t\tsetIsDroppingAllowed( true );\n\t\t\t}\n\t\t\tfunction onGlobalDragEnd() {\n\t\t\t\tsetIsDroppingAllowed( false );\n\t\t\t}\n\t\t\tdocument.addEventListener( 'drag', onGlobalDrag );\n\t\t\tdocument.addEventListener( 'dragend', onGlobalDragEnd );\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener( 'drag', onGlobalDrag );\n\t\t\t\tdocument.removeEventListener( 'dragend', onGlobalDragEnd );\n\t\t\t};\n\t\t}, [] );\n\n\t\treturn (\n\t\t\t<BlockPopoverCover\n\t\t\t\tclassName={ clsx( 'block-editor-grid-visualizer', {\n\t\t\t\t\t'is-dropping-allowed': isDroppingAllowed,\n\t\t\t\t} ) }\n\t\t\t\tclientId={ clientId }\n\t\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tclassName=\"block-editor-grid-visualizer__grid\"\n\t\t\t\t\tstyle={ gridInfo.style }\n\t\t\t\t>\n\t\t\t\t\t{ isManualGrid\n\t\t\t\t\t\t? range( 1, gridInfo.numRows ).map( ( row ) =>\n\t\t\t\t\t\t\t\trange( 1, gridInfo.numColumns ).map(\n\t\t\t\t\t\t\t\t\t( column ) => (\n\t\t\t\t\t\t\t\t\t\t<GridVisualizerCell\n\t\t\t\t\t\t\t\t\t\t\tkey={ `${ row }-${ column }` }\n\t\t\t\t\t\t\t\t\t\t\tcolor={ gridInfo.currentColor }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<GridVisualizerDropZone\n\t\t\t\t\t\t\t\t\t\t\t\tcolumn={ column }\n\t\t\t\t\t\t\t\t\t\t\t\trow={ row }\n\t\t\t\t\t\t\t\t\t\t\t\tgridClientId={ clientId }\n\t\t\t\t\t\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\t\t\t\t\t\thighlightedRect={\n\t\t\t\t\t\t\t\t\t\t\t\t\thighlightedRect\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tsetHighlightedRect={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetHighlightedRect\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</GridVisualizerCell>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: Array.from(\n\t\t\t\t\t\t\t\t{ length: gridInfo.numItems },\n\t\t\t\t\t\t\t\t( _, i ) => (\n\t\t\t\t\t\t\t\t\t<GridVisualizerCell\n\t\t\t\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\t\t\t\tcolor={ gridInfo.currentColor }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t  ) }\n\t\t\t\t</div>\n\t\t\t</BlockPopoverCover>\n\t\t);\n\t}\n);\n\nfunction GridVisualizerCell( { color, children } ) {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-editor-grid-visualizer__cell\"\n\t\t\tstyle={ {\n\t\t\t\tboxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ color } 20%, #0000)`,\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nfunction GridVisualizerDropZone( {\n\tcolumn,\n\trow,\n\tgridClientId,\n\tgridInfo,\n\thighlightedRect,\n\tsetHighlightedRect,\n} ) {\n\tconst { getBlockAttributes } = useSelect( blockEditorStore );\n\tconst {\n\t\tupdateBlockAttributes,\n\t\tmoveBlocksToPosition,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\tgridClientId,\n\t\tgridInfo.numColumns\n\t);\n\n\tconst ref = useDropZoneWithValidation( {\n\t\tvalidateDrag( srcClientId ) {\n\t\t\tconst attributes = getBlockAttributes( srcClientId );\n\t\t\tconst rect = new GridRect( {\n\t\t\t\tcolumnStart: column,\n\t\t\t\trowStart: row,\n\t\t\t\tcolumnSpan: attributes.style?.layout?.columnSpan,\n\t\t\t\trowSpan: attributes.style?.layout?.rowSpan,\n\t\t\t} );\n\t\t\tconst isInBounds = new GridRect( {\n\t\t\t\tcolumnSpan: gridInfo.numColumns,\n\t\t\t\trowSpan: gridInfo.numRows,\n\t\t\t} ).containsRect( rect );\n\t\t\treturn isInBounds;\n\t\t},\n\t\tonDragEnter( srcClientId ) {\n\t\t\tconst attributes = getBlockAttributes( srcClientId );\n\t\t\tsetHighlightedRect(\n\t\t\t\tnew GridRect( {\n\t\t\t\t\tcolumnStart: column,\n\t\t\t\t\trowStart: row,\n\t\t\t\t\tcolumnSpan: attributes.style?.layout?.columnSpan,\n\t\t\t\t\trowSpan: attributes.style?.layout?.rowSpan,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\tonDragLeave() {\n\t\t\t// onDragEnter can be called before onDragLeave if the user moves\n\t\t\t// their mouse quickly, so only clear the highlight if it was set\n\t\t\t// by this cell.\n\t\t\tsetHighlightedRect( ( prevHighlightedRect ) =>\n\t\t\t\tprevHighlightedRect?.columnStart === column &&\n\t\t\t\tprevHighlightedRect?.rowStart === row\n\t\t\t\t\t? null\n\t\t\t\t\t: prevHighlightedRect\n\t\t\t);\n\t\t},\n\t\tonDrop( srcClientId ) {\n\t\t\tsetHighlightedRect( null );\n\t\t\tconst attributes = getBlockAttributes( srcClientId );\n\t\t\tupdateBlockAttributes( srcClientId, {\n\t\t\t\tstyle: {\n\t\t\t\t\t...attributes.style,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...attributes.style?.layout,\n\t\t\t\t\t\tcolumnStart: column,\n\t\t\t\t\t\trowStart: row,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t} );\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tmoveBlocksToPosition(\n\t\t\t\t[ srcClientId ],\n\t\t\t\tgridClientId,\n\t\t\t\tgridClientId,\n\t\t\t\tgetNumberOfBlocksBeforeCell( column, row )\n\t\t\t);\n\t\t},\n\t} );\n\n\tconst isHighlighted = highlightedRect?.contains( column, row ) ?? false;\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx( 'block-editor-grid-visualizer__drop-zone', {\n\t\t\t\t'is-highlighted': isHighlighted,\n\t\t\t} ) }\n\t\t/>\n\t);\n}\n\nfunction useDropZoneWithValidation( {\n\tvalidateDrag,\n\tonDragEnter,\n\tonDragLeave,\n\tonDrop,\n} ) {\n\tconst { getDraggedBlockClientIds } = useSelect( blockEditorStore );\n\treturn useDropZone( {\n\t\tonDragEnter() {\n\t\t\tconst [ srcClientId ] = getDraggedBlockClientIds();\n\t\t\tif ( srcClientId && validateDrag( srcClientId ) ) {\n\t\t\t\tonDragEnter( srcClientId );\n\t\t\t}\n\t\t},\n\t\tonDragLeave() {\n\t\t\tonDragLeave();\n\t\t},\n\t\tonDrop() {\n\t\t\tconst [ srcClientId ] = getDraggedBlockClientIds();\n\t\t\tif ( srcClientId && validateDrag( srcClientId ) ) {\n\t\t\t\tonDrop( srcClientId );\n\t\t\t}\n\t\t},\n\t} );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/{grid-visualizer → grid}/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "GridItemMovers", {
+  enumerable: true,
+  get: function () {
+    return _gridItemMovers.GridItemMovers;
+  }
+});
 Object.defineProperty(exports, "GridItemResizer", {
   enumerable: true,
   get: function () {
@@ -15,6 +21,14 @@ Object.defineProperty(exports, "GridVisualizer", {
     return _gridVisualizer.GridVisualizer;
   }
 });
+Object.defineProperty(exports, "useGridLayoutSync", {
+  enumerable: true,
+  get: function () {
+    return _useGridLayoutSync.useGridLayoutSync;
+  }
+});
 var _gridVisualizer = require("./grid-visualizer");
 var _gridItemResizer = require("./grid-item-resizer");
+var _gridItemMovers = require("./grid-item-movers");
+var _useGridLayoutSync = require("./use-grid-layout-sync");
 //# sourceMappingURL=index.js.map

package/build/components/grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_gridVisualizer","require","_gridItemResizer","_gridItemMovers","_useGridLayoutSync"],"sources":["@wordpress/block-editor/src/components/grid/index.js"],"sourcesContent":["export { GridVisualizer } from './grid-visualizer';\nexport { GridItemResizer } from './grid-item-resizer';\nexport { GridItemMovers } from './grid-item-movers';\nexport { useGridLayoutSync } from './use-grid-layout-sync';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA","ignoreList":[]}

package/build/components/grid/use-get-number-of-blocks-before-cell.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGetNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell;
+var _data = require("@wordpress/data");
+var _store = require("../../store");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function useGetNumberOfBlocksBeforeCell(gridClientId, numColumns) {
+  const {
+    getBlockOrder,
+    getBlockAttributes
+  } = (0, _data.useSelect)(_store.store);
+  const getNumberOfBlocksBeforeCell = (column, row) => {
+    const targetIndex = (row - 1) * numColumns + column - 1;
+    let count = 0;
+    for (const clientId of getBlockOrder(gridClientId)) {
+      var _getBlockAttributes$s;
+      const {
+        columnStart,
+        rowStart
+      } = (_getBlockAttributes$s = getBlockAttributes(clientId).style?.layout) !== null && _getBlockAttributes$s !== void 0 ? _getBlockAttributes$s : {};
+      const cellIndex = (rowStart - 1) * numColumns + columnStart - 1;
+      if (cellIndex < targetIndex) {
+        count++;
+      }
+    }
+    return count;
+  };
+  return getNumberOfBlocksBeforeCell;
+}
+//# sourceMappingURL=use-get-number-of-blocks-before-cell.js.map

package/build/components/grid/use-get-number-of-blocks-before-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_data","require","_store","useGetNumberOfBlocksBeforeCell","gridClientId","numColumns","getBlockOrder","getBlockAttributes","useSelect","blockEditorStore","getNumberOfBlocksBeforeCell","column","row","targetIndex","count","clientId","_getBlockAttributes$s","columnStart","rowStart","style","layout","cellIndex"],"sources":["@wordpress/block-editor/src/components/grid/use-get-number-of-blocks-before-cell.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\nexport function useGetNumberOfBlocksBeforeCell( gridClientId, numColumns ) {\n\tconst { getBlockOrder, getBlockAttributes } = useSelect( blockEditorStore );\n\n\tconst getNumberOfBlocksBeforeCell = ( column, row ) => {\n\t\tconst targetIndex = ( row - 1 ) * numColumns + column - 1;\n\n\t\tlet count = 0;\n\t\tfor ( const clientId of getBlockOrder( gridClientId ) ) {\n\t\t\tconst { columnStart, rowStart } =\n\t\t\t\tgetBlockAttributes( clientId ).style?.layout ?? {};\n\t\t\tconst cellIndex = ( rowStart - 1 ) * numColumns + columnStart - 1;\n\t\t\tif ( cellIndex < targetIndex ) {\n\t\t\t\tcount++;\n\t\t\t}\n\t\t}\n\t\treturn count;\n\t};\n\n\treturn getNumberOfBlocksBeforeCell;\n}\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGO,SAASE,8BAA8BA,CAAEC,YAAY,EAAEC,UAAU,EAAG;EAC1E,MAAM;IAAEC,aAAa;IAAEC;EAAmB,CAAC,GAAG,IAAAC,eAAS,EAAEC,YAAiB,CAAC;EAE3E,MAAMC,2BAA2B,GAAGA,CAAEC,MAAM,EAAEC,GAAG,KAAM;IACtD,MAAMC,WAAW,GAAG,CAAED,GAAG,GAAG,CAAC,IAAKP,UAAU,GAAGM,MAAM,GAAG,CAAC;IAEzD,IAAIG,KAAK,GAAG,CAAC;IACb,KAAM,MAAMC,QAAQ,IAAIT,aAAa,CAAEF,YAAa,CAAC,EAAG;MAAA,IAAAY,qBAAA;MACvD,MAAM;QAAEC,WAAW;QAAEC;MAAS,CAAC,IAAAF,qBAAA,GAC9BT,kBAAkB,CAAEQ,QAAS,CAAC,CAACI,KAAK,EAAEC,MAAM,cAAAJ,qBAAA,cAAAA,qBAAA,GAAI,CAAC,CAAC;MACnD,MAAMK,SAAS,GAAG,CAAEH,QAAQ,GAAG,CAAC,IAAKb,UAAU,GAAGY,WAAW,GAAG,CAAC;MACjE,IAAKI,SAAS,GAAGR,WAAW,EAAG;QAC9BC,KAAK,EAAE;MACR;IACD;IACA,OAAOA,KAAK;EACb,CAAC;EAED,OAAOJ,2BAA2B;AACnC","ignoreList":[]}

package/build/components/grid/use-grid-layout-sync.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridLayoutSync = useGridLayoutSync;
+var _data = require("@wordpress/data");
+var _element = require("@wordpress/element");
+var _store = require("../../store");
+var _utils = require("./utils");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function useGridLayoutSync({
+  clientId: gridClientId
+}) {
+  const {
+    gridLayout,
+    blockOrder
+  } = (0, _data.useSelect)(select => {
+    var _getBlockAttributes$l;
+    const {
+      getBlockAttributes,
+      getBlockOrder
+    } = select(_store.store);
+    return {
+      gridLayout: (_getBlockAttributes$l = getBlockAttributes(gridClientId).layout) !== null && _getBlockAttributes$l !== void 0 ? _getBlockAttributes$l : {},
+      blockOrder: getBlockOrder(gridClientId)
+    };
+  }, [gridClientId]);
+  const {
+    getBlockAttributes
+  } = (0, _data.useSelect)(_store.store);
+  const {
+    updateBlockAttributes,
+    __unstableMarkNextChangeAsNotPersistent
+  } = (0, _data.useDispatch)(_store.store);
+  (0, _element.useEffect)(() => {
+    const updates = {};
+    const {
+      columnCount,
+      rowCount = 2
+    } = gridLayout;
+    const isManualGrid = !!columnCount;
+    if (isManualGrid) {
+      const rects = [];
+      let cellsTaken = 0;
+
+      // Respect the position of blocks that already have a columnStart and rowStart value.
+      for (const clientId of blockOrder) {
+        const attributes = getBlockAttributes(clientId);
+        const {
+          columnStart,
+          rowStart,
+          columnSpan = 1,
+          rowSpan = 1
+        } = attributes.style?.layout || {};
+        cellsTaken += columnSpan * rowSpan;
+        if (!columnStart || !rowStart) {
+          continue;
+        }
+        rects.push(new _utils.GridRect({
+          columnStart,
+          rowStart,
+          columnSpan,
+          rowSpan
+        }));
+      }
+
+      // Ensure there's enough rows to fit all blocks.
+      const minimumNeededRows = Math.ceil(cellsTaken / columnCount);
+      if (rowCount < minimumNeededRows) {
+        updates[gridClientId] = {
+          layout: {
+            ...gridLayout,
+            rowCount: minimumNeededRows
+          }
+        };
+      }
+
+      // When in manual mode, ensure that every block has a columnStart and rowStart value.
+      for (const clientId of blockOrder) {
+        const attributes = getBlockAttributes(clientId);
+        const {
+          columnStart,
+          rowStart,
+          columnSpan,
+          rowSpan
+        } = attributes.style?.layout || {};
+        if (columnStart && rowStart) {
+          continue;
+        }
+        const [newColumnStart, newRowStart] = getFirstEmptyCell(rects, columnCount, minimumNeededRows, columnSpan, rowSpan);
+        rects.push(new _utils.GridRect({
+          columnStart: newColumnStart,
+          rowStart: newRowStart,
+          columnSpan,
+          rowSpan
+        }));
+        updates[clientId] = {
+          style: {
+            ...attributes.style,
+            layout: {
+              ...attributes.style?.layout,
+              columnStart: newColumnStart,
+              rowStart: newRowStart
+            }
+          }
+        };
+      }
+    } else {
+      // When in auto mode, remove all of the columnStart and rowStart values.
+      for (const clientId of blockOrder) {
+        const attributes = getBlockAttributes(clientId);
+        const {
+          columnStart,
+          rowStart,
+          ...layout
+        } = attributes.style?.layout || {};
+        // Only update attributes if columnStart or rowStart are set.
+        if (columnStart || rowStart) {
+          updates[clientId] = {
+            style: {
+              ...attributes.style,
+              layout
+            }
+          };
+        }
+      }
+    }
+    if (Object.keys(updates).length) {
+      __unstableMarkNextChangeAsNotPersistent();
+      updateBlockAttributes(Object.keys(updates), updates, /* uniqueByBlock: */true);
+    }
+  }, [
+  // Actual deps to sync:
+  gridClientId, gridLayout, blockOrder,
+  // Needed for linter:
+  __unstableMarkNextChangeAsNotPersistent, getBlockAttributes, updateBlockAttributes]);
+}
+function getFirstEmptyCell(rects, columnCount, rowCount, columnSpan = 1, rowSpan = 1) {
+  for (let row = 1; row <= rowCount; row++) {
+    for (let column = 1; column <= columnCount; column++) {
+      const rect = new _utils.GridRect({
+        columnStart: column,
+        rowStart: row,
+        columnSpan,
+        rowSpan
+      });
+      if (!rects.some(r => r.intersectsRect(rect))) {
+        return [column, row];
+      }
+    }
+  }
+  return [1, 1];
+}
+//# sourceMappingURL=use-grid-layout-sync.js.map

package/build/components/grid/use-grid-layout-sync.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_data","require","_element","_store","_utils","useGridLayoutSync","clientId","gridClientId","gridLayout","blockOrder","useSelect","select","_getBlockAttributes$l","getBlockAttributes","getBlockOrder","blockEditorStore","layout","updateBlockAttributes","__unstableMarkNextChangeAsNotPersistent","useDispatch","useEffect","updates","columnCount","rowCount","isManualGrid","rects","cellsTaken","attributes","columnStart","rowStart","columnSpan","rowSpan","style","push","GridRect","minimumNeededRows","Math","ceil","newColumnStart","newRowStart","getFirstEmptyCell","Object","keys","length","row","column","rect","some","r","intersectsRect"],"sources":["@wordpress/block-editor/src/components/grid/use-grid-layout-sync.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { GridRect } from './utils';\n\nexport function useGridLayoutSync( { clientId: gridClientId } ) {\n\tconst { gridLayout, blockOrder } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getBlockOrder } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tgridLayout: getBlockAttributes( gridClientId ).layout ?? {},\n\t\t\t\tblockOrder: getBlockOrder( gridClientId ),\n\t\t\t};\n\t\t},\n\t\t[ gridClientId ]\n\t);\n\n\tconst { getBlockAttributes } = useSelect( blockEditorStore );\n\tconst { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tuseEffect( () => {\n\t\tconst updates = {};\n\n\t\tconst { columnCount, rowCount = 2 } = gridLayout;\n\t\tconst isManualGrid = !! columnCount;\n\n\t\tif ( isManualGrid ) {\n\t\t\tconst rects = [];\n\t\t\tlet cellsTaken = 0;\n\n\t\t\t// Respect the position of blocks that already have a columnStart and rowStart value.\n\t\t\tfor ( const clientId of blockOrder ) {\n\t\t\t\tconst attributes = getBlockAttributes( clientId );\n\t\t\t\tconst {\n\t\t\t\t\tcolumnStart,\n\t\t\t\t\trowStart,\n\t\t\t\t\tcolumnSpan = 1,\n\t\t\t\t\trowSpan = 1,\n\t\t\t\t} = attributes.style?.layout || {};\n\t\t\t\tcellsTaken += columnSpan * rowSpan;\n\t\t\t\tif ( ! columnStart || ! rowStart ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\trects.push(\n\t\t\t\t\tnew GridRect( {\n\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\trowStart,\n\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\trowSpan,\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t// Ensure there's enough rows to fit all blocks.\n\t\t\tconst minimumNeededRows = Math.ceil( cellsTaken / columnCount );\n\t\t\tif ( rowCount < minimumNeededRows ) {\n\t\t\t\tupdates[ gridClientId ] = {\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...gridLayout,\n\t\t\t\t\t\trowCount: minimumNeededRows,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// When in manual mode, ensure that every block has a columnStart and rowStart value.\n\t\t\tfor ( const clientId of blockOrder ) {\n\t\t\t\tconst attributes = getBlockAttributes( clientId );\n\t\t\t\tconst { columnStart, rowStart, columnSpan, rowSpan } =\n\t\t\t\t\tattributes.style?.layout || {};\n\t\t\t\tif ( columnStart && rowStart ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tconst [ newColumnStart, newRowStart ] = getFirstEmptyCell(\n\t\t\t\t\trects,\n\t\t\t\t\tcolumnCount,\n\t\t\t\t\tminimumNeededRows,\n\t\t\t\t\tcolumnSpan,\n\t\t\t\t\trowSpan\n\t\t\t\t);\n\t\t\t\trects.push(\n\t\t\t\t\tnew GridRect( {\n\t\t\t\t\t\tcolumnStart: newColumnStart,\n\t\t\t\t\t\trowStart: newRowStart,\n\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\trowSpan,\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t\tupdates[ clientId ] = {\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\t...attributes.style,\n\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\t...attributes.style?.layout,\n\t\t\t\t\t\t\tcolumnStart: newColumnStart,\n\t\t\t\t\t\t\trowStart: newRowStart,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}\n\t\t} else {\n\t\t\t// When in auto mode, remove all of the columnStart and rowStart values.\n\t\t\tfor ( const clientId of blockOrder ) {\n\t\t\t\tconst attributes = getBlockAttributes( clientId );\n\t\t\t\tconst { columnStart, rowStart, ...layout } =\n\t\t\t\t\tattributes.style?.layout || {};\n\t\t\t\t// Only update attributes if columnStart or rowStart are set.\n\t\t\t\tif ( columnStart || rowStart ) {\n\t\t\t\t\tupdates[ clientId ] = {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t...attributes.style,\n\t\t\t\t\t\t\tlayout,\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif ( Object.keys( updates ).length ) {\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tupdateBlockAttributes(\n\t\t\t\tObject.keys( updates ),\n\t\t\t\tupdates,\n\t\t\t\t/* uniqueByBlock: */ true\n\t\t\t);\n\t\t}\n\t}, [\n\t\t// Actual deps to sync:\n\t\tgridClientId,\n\t\tgridLayout,\n\t\tblockOrder,\n\t\t// Needed for linter:\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\tgetBlockAttributes,\n\t\tupdateBlockAttributes,\n\t] );\n}\n\nfunction getFirstEmptyCell(\n\trects,\n\tcolumnCount,\n\trowCount,\n\tcolumnSpan = 1,\n\trowSpan = 1\n) {\n\tfor ( let row = 1; row <= rowCount; row++ ) {\n\t\tfor ( let column = 1; column <= columnCount; column++ ) {\n\t\t\tconst rect = new GridRect( {\n\t\t\t\tcolumnStart: column,\n\t\t\t\trowStart: row,\n\t\t\t\tcolumnSpan,\n\t\t\t\trowSpan,\n\t\t\t} );\n\t\t\tif ( ! rects.some( ( r ) => r.intersectsRect( rect ) ) ) {\n\t\t\t\treturn [ column, row ];\n\t\t\t}\n\t\t}\n\t}\n\treturn [ 1, 1 ];\n}\n"],"mappings":"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","ignoreList":[]}