@wordpress/block-editor 13.2.0 → 13.4.0

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

@@ -14,6 +14,7 @@ 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 _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -37,22 +38,21 @@ function GridVisualizer({
   if (isDistractionFree || !gridElement) {
     return null;
   }
-  const isManualGrid = parentLayout?.columnCount && window.__experimentalEnableGridInteractivity;
+  const isManualGrid = parentLayout?.isManualPlacement && window.__experimentalEnableGridInteractivity;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerGrid, {
-    clientId: clientId,
+    gridClientId: clientId,
     gridElement: gridElement,
     isManualGrid: isManualGrid,
     ref: contentRef
   });
 }
 const GridVisualizerGrid = (0, _element.forwardRef)(({
-  clientId,
+  gridClientId,
   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]) {
@@ -86,23 +86,16 @@ const GridVisualizerGrid = (0, _element.forwardRef)(({
     className: (0, _clsx.default)('block-editor-grid-visualizer', {
       'is-dropping-allowed': isDroppingAllowed
     }),
-    clientId: clientId,
-    __unstablePopoverSlot: "block-toolbar",
+    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 ? (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({
+      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
@@ -110,29 +103,74 @@ const GridVisualizerGrid = (0, _element.forwardRef)(({
     })
   });
 });
+function ManualGridVisualizer({
+  gridClientId,
+  gridInfo
+}) {
+  const [highlightedRect, setHighlightedRect] = (0, _element.useState)(null);
+  const gridItems = (0, _data.useSelect)(select => select(_store.store).getBlocks(gridClientId), [gridClientId]);
+  const occupiedRects = (0, _element.useMemo)(() => {
+    const rects = [];
+    for (const block of gridItems) {
+      const {
+        columnStart,
+        rowStart,
+        columnSpan = 1,
+        rowSpan = 1
+      } = block.attributes.style?.layout || {};
+      if (!columnStart || !rowStart) {
+        continue;
+      }
+      rects.push(new _utils.GridRect({
+        columnStart,
+        rowStart,
+        columnSpan,
+        rowSpan
+      }));
+    }
+    return rects;
+  }, [gridItems]);
+  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}`);
+  }));
+}
 function GridVisualizerCell({
   color,
-  children
+  children,
+  className
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "block-editor-grid-visualizer__cell",
+    className: (0, _clsx.default)('block-editor-grid-visualizer__cell', className),
     style: {
-      boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${color} 20%, #0000)`
+      boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${color} 20%, #0000)`,
+      color
     },
     children: children
   });
 }
-function GridVisualizerDropZone({
-  column,
-  row,
-  gridClientId,
-  gridInfo,
-  highlightedRect,
-  setHighlightedRect
-}) {
-  var _highlightedRect$cont;
+function useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighlightedRect) {
   const {
-    getBlockAttributes
+    getBlockAttributes,
+    getBlockRootClientId
   } = (0, _data.useSelect)(_store.store);
   const {
     updateBlockAttributes,
@@ -140,7 +178,7 @@ function GridVisualizerDropZone({
     __unstableMarkNextChangeAsNotPersistent
   } = (0, _data.useDispatch)(_store.store);
   const getNumberOfBlocksBeforeCell = (0, _useGetNumberOfBlocksBeforeCell.useGetNumberOfBlocksBeforeCell)(gridClientId, gridInfo.numColumns);
-  const ref = useDropZoneWithValidation({
+  return useDropZoneWithValidation({
     validateDrag(srcClientId) {
       const attributes = getBlockAttributes(srcClientId);
       const rect = new _utils.GridRect({
@@ -184,15 +222,57 @@ function GridVisualizerDropZone({
         }
       });
       __unstableMarkNextChangeAsNotPersistent();
-      moveBlocksToPosition([srcClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(column, row));
+      moveBlocksToPosition([srcClientId], getBlockRootClientId(srcClientId), gridClientId, getNumberOfBlocksBeforeCell(column, row));
     }
   });
-  const isHighlighted = (_highlightedRect$cont = highlightedRect?.contains(column, row)) !== null && _highlightedRect$cont !== void 0 ? _highlightedRect$cont : false;
+}
+function GridVisualizerDropZone({
+  column,
+  row,
+  gridClientId,
+  gridInfo,
+  setHighlightedRect
+}) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    ref: ref,
-    className: (0, _clsx.default)('block-editor-grid-visualizer__drop-zone', {
-      'is-highlighted': isHighlighted
-    })
+    className: "block-editor-grid-visualizer__drop-zone",
+    ref: useGridVisualizerDropZone(column, row, gridClientId, gridInfo, setHighlightedRect)
+  });
+}
+function GridVisualizerAppender({
+  column,
+  row,
+  gridClientId,
+  gridInfo,
+  setHighlightedRect
+}) {
+  const {
+    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
+          }
+        }
+      });
+      __unstableMarkNextChangeAsNotPersistent();
+      moveBlocksToPosition([block.clientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(column, row));
+    }
   });
 }
 function useDropZoneWithValidation({

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

@@ -1 +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":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_data","_compose","_useBlockRefs","_cover","_utils","_store","_useGetNumberOfBlocksBeforeCell","_buttonBlockAppender","_jsxRuntime","GridVisualizer","clientId","contentRef","parentLayout","isDistractionFree","useSelect","select","blockEditorStore","getSettings","gridElement","useBlockElement","isManualGrid","isManualPlacement","window","__experimentalEnableGridInteractivity","jsx","GridVisualizerGrid","gridClientId","ref","forwardRef","gridInfo","setGridInfo","useState","getGridInfo","isDroppingAllowed","setIsDroppingAllowed","useEffect","observers","element","children","observer","ResizeObserver","observe","push","disconnect","onGlobalDrag","onGlobalDragEnd","document","addEventListener","removeEventListener","default","className","clsx","__unstablePopoverSlot","style","ManualGridVisualizer","Array","from","length","numItems","_","i","GridVisualizerCell","color","currentColor","highlightedRect","setHighlightedRect","gridItems","getBlocks","occupiedRects","useMemo","rects","block","columnStart","rowStart","columnSpan","rowSpan","attributes","layout","GridRect","range","numRows","map","row","numColumns","column","_highlightedRect$cont","isCellOccupied","some","rect","contains","isHighlighted","GridVisualizerDropZone","GridVisualizerAppender","boxShadow","useGridVisualizerDropZone","getBlockAttributes","getBlockRootClientId","updateBlockAttributes","moveBlocksToPosition","__unstableMarkNextChangeAsNotPersistent","useDispatch","getNumberOfBlocksBeforeCell","useGetNumberOfBlocksBeforeCell","useDropZoneWithValidation","validateDrag","srcClientId","isInBounds","containsRect","onDragEnter","onDragLeave","prevHighlightedRect","onDrop","rootClientId","onSelect","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, useMemo } 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';\nimport ButtonBlockAppender from '../button-block-appender';\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?.isManualPlacement &&\n\t\twindow.__experimentalEnableGridInteractivity;\n\treturn (\n\t\t<GridVisualizerGrid\n\t\t\tgridClientId={ 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( { gridClientId, 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\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={ gridClientId }\n\t\t\t\t__unstablePopoverSlot=\"__unstable-block-tools-after\"\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<ManualGridVisualizer\n\t\t\t\t\t\t\tgridClientId={ gridClientId }\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tArray.from( { length: gridInfo.numItems }, ( _, i ) => (\n\t\t\t\t\t\t\t<GridVisualizerCell\n\t\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\t\tcolor={ gridInfo.currentColor }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) )\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BlockPopoverCover>\n\t\t);\n\t}\n);\n\nfunction ManualGridVisualizer( { gridClientId, gridInfo } ) {\n\tconst [ highlightedRect, setHighlightedRect ] = useState( null );\n\n\tconst gridItems = useSelect(\n\t\t( select ) => select( blockEditorStore ).getBlocks( gridClientId ),\n\t\t[ gridClientId ]\n\t);\n\tconst occupiedRects = useMemo( () => {\n\t\tconst rects = [];\n\t\tfor ( const block of gridItems ) {\n\t\t\tconst {\n\t\t\t\tcolumnStart,\n\t\t\t\trowStart,\n\t\t\t\tcolumnSpan = 1,\n\t\t\t\trowSpan = 1,\n\t\t\t} = block.attributes.style?.layout || {};\n\t\t\tif ( ! columnStart || ! rowStart ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\trects.push(\n\t\t\t\tnew GridRect( {\n\t\t\t\t\tcolumnStart,\n\t\t\t\t\trowStart,\n\t\t\t\t\tcolumnSpan,\n\t\t\t\t\trowSpan,\n\t\t\t\t} )\n\t\t\t);\n\t\t}\n\t\treturn rects;\n\t}, [ gridItems ] );\n\n\treturn range( 1, gridInfo.numRows ).map( ( row ) =>\n\t\trange( 1, gridInfo.numColumns ).map( ( column ) => {\n\t\t\tconst isCellOccupied = occupiedRects.some( ( rect ) =>\n\t\t\t\trect.contains( column, row )\n\t\t\t);\n\t\t\tconst isHighlighted =\n\t\t\t\thighlightedRect?.contains( column, row ) ?? false;\n\t\t\treturn (\n\t\t\t\t<GridVisualizerCell\n\t\t\t\t\tkey={ `${ row }-${ column }` }\n\t\t\t\t\tcolor={ gridInfo.currentColor }\n\t\t\t\t\tclassName={ isHighlighted && 'is-highlighted' }\n\t\t\t\t>\n\t\t\t\t\t{ isCellOccupied ? (\n\t\t\t\t\t\t<GridVisualizerDropZone\n\t\t\t\t\t\t\tcolumn={ column }\n\t\t\t\t\t\t\trow={ row }\n\t\t\t\t\t\t\tgridClientId={ gridClientId }\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\tsetHighlightedRect={ setHighlightedRect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<GridVisualizerAppender\n\t\t\t\t\t\t\tcolumn={ column }\n\t\t\t\t\t\t\trow={ row }\n\t\t\t\t\t\t\tgridClientId={ gridClientId }\n\t\t\t\t\t\t\tgridInfo={ gridInfo }\n\t\t\t\t\t\t\tsetHighlightedRect={ setHighlightedRect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</GridVisualizerCell>\n\t\t\t);\n\t\t} )\n\t);\n}\n\nfunction GridVisualizerCell( { color, children, className } ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-grid-visualizer__cell',\n\t\t\t\tclassName\n\t\t\t) }\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\tcolor,\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nfunction useGridVisualizerDropZone(\n\tcolumn,\n\trow,\n\tgridClientId,\n\tgridInfo,\n\tsetHighlightedRect\n) {\n\tconst { getBlockAttributes, getBlockRootClientId } =\n\t\tuseSelect( 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\treturn 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\tgetBlockRootClientId( srcClientId ),\n\t\t\t\tgridClientId,\n\t\t\t\tgetNumberOfBlocksBeforeCell( column, row )\n\t\t\t);\n\t\t},\n\t} );\n}\n\nfunction GridVisualizerDropZone( {\n\tcolumn,\n\trow,\n\tgridClientId,\n\tgridInfo,\n\tsetHighlightedRect,\n} ) {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-editor-grid-visualizer__drop-zone\"\n\t\t\tref={ useGridVisualizerDropZone(\n\t\t\t\tcolumn,\n\t\t\t\trow,\n\t\t\t\tgridClientId,\n\t\t\t\tgridInfo,\n\t\t\t\tsetHighlightedRect\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction GridVisualizerAppender( {\n\tcolumn,\n\trow,\n\tgridClientId,\n\tgridInfo,\n\tsetHighlightedRect,\n} ) {\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\treturn (\n\t\t<ButtonBlockAppender\n\t\t\trootClientId={ gridClientId }\n\t\t\tclassName=\"block-editor-grid-visualizer__appender\"\n\t\t\tref={ useGridVisualizerDropZone(\n\t\t\t\tcolumn,\n\t\t\t\trow,\n\t\t\t\tgridClientId,\n\t\t\t\tgridInfo,\n\t\t\t\tsetHighlightedRect\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\tcolor: gridInfo.currentColor,\n\t\t\t} }\n\t\t\tonSelect={ ( block ) => {\n\t\t\t\tif ( ! block ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tupdateBlockAttributes( block.clientId, {\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\tcolumnStart: column,\n\t\t\t\t\t\t\trowStart: row,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t[ block.clientId ],\n\t\t\t\t\tgridClientId,\n\t\t\t\t\tgridClientId,\n\t\t\t\t\tgetNumberOfBlocksBeforeCell( column, row )\n\t\t\t\t);\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/use-grid-layout-sync.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridLayoutSync = useGridLayoutSync;
 var _data = require("@wordpress/data");
 var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
 var _store = require("../../store");
 var _utils = require("./utils");
 /**
@@ -21,16 +22,19 @@ function useGridLayoutSync({
 }) {
   const {
     gridLayout,
-    blockOrder
+    blockOrder,
+    selectedBlockLayout
   } = (0, _data.useSelect)(select => {
     var _getBlockAttributes$l;
     const {
       getBlockAttributes,
       getBlockOrder
     } = select(_store.store);
+    const selectedBlock = select(_store.store).getSelectedBlock();
     return {
       gridLayout: (_getBlockAttributes$l = getBlockAttributes(gridClientId).layout) !== null && _getBlockAttributes$l !== void 0 ? _getBlockAttributes$l : {},
-      blockOrder: getBlockOrder(gridClientId)
+      blockOrder: getBlockOrder(gridClientId),
+      selectedBlockLayout: selectedBlock?.attributes.style?.layout
     };
   }, [gridClientId]);
   const {
@@ -40,31 +44,26 @@ function useGridLayoutSync({
     updateBlockAttributes,
     __unstableMarkNextChangeAsNotPersistent
   } = (0, _data.useDispatch)(_store.store);
+  const selectedBlockRect = (0, _element.useMemo)(() => selectedBlockLayout ? new _utils.GridRect(selectedBlockLayout) : null, [selectedBlockLayout]);
+  const previouslySelectedBlockRect = (0, _compose.usePrevious)(selectedBlockRect);
   (0, _element.useEffect)(() => {
     const updates = {};
-    const {
-      columnCount,
-      rowCount = 2
-    } = gridLayout;
-    const isManualGrid = !!columnCount;
-    if (isManualGrid) {
-      const rects = [];
-      let cellsTaken = 0;
+    if (gridLayout.isManualPlacement) {
+      const occupiedRects = [];
 
       // Respect the position of blocks that already have a columnStart and rowStart value.
       for (const clientId of blockOrder) {
-        const attributes = getBlockAttributes(clientId);
+        var _getBlockAttributes$s;
         const {
           columnStart,
           rowStart,
           columnSpan = 1,
           rowSpan = 1
-        } = attributes.style?.layout || {};
-        cellsTaken += columnSpan * rowSpan;
+        } = (_getBlockAttributes$s = getBlockAttributes(clientId).style?.layout) !== null && _getBlockAttributes$s !== void 0 ? _getBlockAttributes$s : {};
         if (!columnStart || !rowStart) {
           continue;
         }
-        rects.push(new _utils.GridRect({
+        occupiedRects.push(new _utils.GridRect({
           columnStart,
           rowStart,
           columnSpan,
@@ -72,31 +71,21 @@ function useGridLayoutSync({
         }));
       }
 
-      // 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) {
+        var _attributes$style$lay;
         const attributes = getBlockAttributes(clientId);
         const {
           columnStart,
           rowStart,
-          columnSpan,
-          rowSpan
-        } = attributes.style?.layout || {};
+          columnSpan = 1,
+          rowSpan = 1
+        } = (_attributes$style$lay = attributes.style?.layout) !== null && _attributes$style$lay !== void 0 ? _attributes$style$lay : {};
         if (columnStart && rowStart) {
           continue;
         }
-        const [newColumnStart, newRowStart] = getFirstEmptyCell(rects, columnCount, minimumNeededRows, columnSpan, rowSpan);
-        rects.push(new _utils.GridRect({
+        const [newColumnStart, newRowStart] = placeBlock(occupiedRects, gridLayout.columnCount, columnSpan, rowSpan, previouslySelectedBlockRect?.columnEnd, previouslySelectedBlockRect?.rowEnd);
+        occupiedRects.push(new _utils.GridRect({
           columnStart: newColumnStart,
           rowStart: newRowStart,
           columnSpan,
@@ -113,15 +102,27 @@ function useGridLayoutSync({
           }
         };
       }
+
+      // Ensure there's enough rows to fit all blocks.
+      const bottomMostRow = Math.max(...occupiedRects.map(r => r.rowEnd));
+      if (!gridLayout.rowCount || gridLayout.rowCount < bottomMostRow) {
+        updates[gridClientId] = {
+          layout: {
+            ...gridLayout,
+            rowCount: bottomMostRow
+          }
+        };
+      }
     } else {
       // When in auto mode, remove all of the columnStart and rowStart values.
       for (const clientId of blockOrder) {
+        var _attributes$style$lay2;
         const attributes = getBlockAttributes(clientId);
         const {
           columnStart,
           rowStart,
           ...layout
-        } = attributes.style?.layout || {};
+        } = (_attributes$style$lay2 = attributes.style?.layout) !== null && _attributes$style$lay2 !== void 0 ? _attributes$style$lay2 : {};
         // Only update attributes if columnStart or rowStart are set.
         if (columnStart || rowStart) {
           updates[clientId] = {
@@ -132,6 +133,16 @@ function useGridLayoutSync({
           };
         }
       }
+
+      // Remove row styles in auto mode
+      if (gridLayout.rowCount) {
+        updates[gridClientId] = {
+          layout: {
+            ...gridLayout,
+            rowCount: undefined
+          }
+        };
+      }
     }
     if (Object.keys(updates).length) {
       __unstableMarkNextChangeAsNotPersistent();
@@ -139,24 +150,32 @@ function useGridLayoutSync({
     }
   }, [
   // Actual deps to sync:
-  gridClientId, gridLayout, blockOrder,
-  // Needed for linter:
+  gridClientId, gridLayout, blockOrder, previouslySelectedBlockRect,
+  // These won't change, but the linter thinks they might:
   __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({
+
+/**
+ * @param {GridRect[]} occupiedRects
+ * @param {number}     gridColumnCount
+ * @param {number}     blockColumnSpan
+ * @param {number}     blockRowSpan
+ * @param {number?}    startColumn
+ * @param {number?}    startRow
+ */
+function placeBlock(occupiedRects, gridColumnCount, blockColumnSpan, blockRowSpan, startColumn = 1, startRow = 1) {
+  for (let row = startRow;; row++) {
+    for (let column = row === startRow ? startColumn : 1; column <= gridColumnCount; column++) {
+      const candidateRect = new _utils.GridRect({
         columnStart: column,
         rowStart: row,
-        columnSpan,
-        rowSpan
+        columnSpan: blockColumnSpan,
+        rowSpan: blockRowSpan
       });
-      if (!rects.some(r => r.intersectsRect(rect))) {
+      if (!occupiedRects.some(r => r.intersectsRect(candidateRect))) {
         return [column, row];
       }
     }
   }
-  return [1, 1];
 }
 //# sourceMappingURL=use-grid-layout-sync.js.map

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

@@ -1 +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":[]}
+{"version":3,"names":["_data","require","_element","_compose","_store","_utils","useGridLayoutSync","clientId","gridClientId","gridLayout","blockOrder","selectedBlockLayout","useSelect","select","_getBlockAttributes$l","getBlockAttributes","getBlockOrder","blockEditorStore","selectedBlock","getSelectedBlock","layout","attributes","style","updateBlockAttributes","__unstableMarkNextChangeAsNotPersistent","useDispatch","selectedBlockRect","useMemo","GridRect","previouslySelectedBlockRect","usePrevious","useEffect","updates","isManualPlacement","occupiedRects","_getBlockAttributes$s","columnStart","rowStart","columnSpan","rowSpan","push","_attributes$style$lay","newColumnStart","newRowStart","placeBlock","columnCount","columnEnd","rowEnd","bottomMostRow","Math","max","map","r","rowCount","_attributes$style$lay2","undefined","Object","keys","length","gridColumnCount","blockColumnSpan","blockRowSpan","startColumn","startRow","row","column","candidateRect","some","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, useMemo } from '@wordpress/element';\nimport { usePrevious } from '@wordpress/compose';\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, selectedBlockLayout } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getBlockOrder } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst selectedBlock = select( blockEditorStore ).getSelectedBlock();\n\t\t\treturn {\n\t\t\t\tgridLayout: getBlockAttributes( gridClientId ).layout ?? {},\n\t\t\t\tblockOrder: getBlockOrder( gridClientId ),\n\t\t\t\tselectedBlockLayout: selectedBlock?.attributes.style?.layout,\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\tconst selectedBlockRect = useMemo(\n\t\t() =>\n\t\t\tselectedBlockLayout ? new GridRect( selectedBlockLayout ) : null,\n\t\t[ selectedBlockLayout ]\n\t);\n\n\tconst previouslySelectedBlockRect = usePrevious( selectedBlockRect );\n\n\tuseEffect( () => {\n\t\tconst updates = {};\n\n\t\tif ( gridLayout.isManualPlacement ) {\n\t\t\tconst occupiedRects = [];\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 {\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} = getBlockAttributes( clientId ).style?.layout ?? {};\n\t\t\t\tif ( ! columnStart || ! rowStart ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\toccupiedRects.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// 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 {\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\tif ( columnStart && rowStart ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tconst [ newColumnStart, newRowStart ] = placeBlock(\n\t\t\t\t\toccupiedRects,\n\t\t\t\t\tgridLayout.columnCount,\n\t\t\t\t\tcolumnSpan,\n\t\t\t\t\trowSpan,\n\t\t\t\t\tpreviouslySelectedBlockRect?.columnEnd,\n\t\t\t\t\tpreviouslySelectedBlockRect?.rowEnd\n\t\t\t\t);\n\t\t\t\toccupiedRects.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\n\t\t\t// Ensure there's enough rows to fit all blocks.\n\t\t\tconst bottomMostRow = Math.max(\n\t\t\t\t...occupiedRects.map( ( r ) => r.rowEnd )\n\t\t\t);\n\t\t\tif (\n\t\t\t\t! gridLayout.rowCount ||\n\t\t\t\tgridLayout.rowCount < bottomMostRow\n\t\t\t) {\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: bottomMostRow,\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\n\t\t\t// Remove row styles in auto mode\n\t\t\tif ( gridLayout.rowCount ) {\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: undefined,\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\tpreviouslySelectedBlockRect,\n\t\t// These won't change, but the linter thinks they might:\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\tgetBlockAttributes,\n\t\tupdateBlockAttributes,\n\t] );\n}\n\n/**\n * @param {GridRect[]} occupiedRects\n * @param {number}     gridColumnCount\n * @param {number}     blockColumnSpan\n * @param {number}     blockRowSpan\n * @param {number?}    startColumn\n * @param {number?}    startRow\n */\nfunction placeBlock(\n\toccupiedRects,\n\tgridColumnCount,\n\tblockColumnSpan,\n\tblockRowSpan,\n\tstartColumn = 1,\n\tstartRow = 1\n) {\n\tfor ( let row = startRow; ; row++ ) {\n\t\tfor (\n\t\t\tlet column = row === startRow ? startColumn : 1;\n\t\t\tcolumn <= gridColumnCount;\n\t\t\tcolumn++\n\t\t) {\n\t\t\tconst candidateRect = new GridRect( {\n\t\t\t\tcolumnStart: column,\n\t\t\t\trowStart: row,\n\t\t\t\tcolumnSpan: blockColumnSpan,\n\t\t\t\trowSpan: blockRowSpan,\n\t\t\t} );\n\t\t\tif (\n\t\t\t\t! occupiedRects.some( ( r ) =>\n\t\t\t\t\tr.intersectsRect( candidateRect )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn [ column, row ];\n\t\t\t}\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/index.js

@@ -135,8 +135,7 @@ var _exportNames = {
   BlockEditorProvider: true,
   useSettings: true,
   useSetting: true,
-  useBlockCommands: true,
-  ReusableBlocksRenameHint: true
+  useBlockCommands: true
 };
 Object.defineProperty(exports, "AlignmentControl", {
   enumerable: true,
@@ -474,12 +473,6 @@ Object.defineProperty(exports, "RecursionProvider", {
     return _recursionProvider.RecursionProvider;
   }
 });
-Object.defineProperty(exports, "ReusableBlocksRenameHint", {
-  enumerable: true,
-  get: function () {
-    return _reusableBlockRenameHint.default;
-  }
-});
 Object.defineProperty(exports, "RichText", {
   enumerable: true,
   get: function () {
@@ -1073,7 +1066,6 @@ var _blockEditingMode = require("./block-editing-mode");
 var _provider = _interopRequireDefault(require("./provider"));
 var _useSettings = require("./use-settings");
 var _useBlockCommands = require("./use-block-commands");
-var _reusableBlockRenameHint = _interopRequireDefault(require("./inserter/reusable-block-rename-hint"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 //# sourceMappingURL=index.js.map