@wordpress/block-editor 13.1.0 → 13.3.0

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

@@ -1,92 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GridVisualizer = GridVisualizer;
-var _element = require("@wordpress/element");
-var _data = require("@wordpress/data");
-var _useBlockRefs = require("../block-list/use-block-props/use-block-refs");
-var _cover = _interopRequireDefault(require("../block-popover/cover"));
-var _store = require("../../store");
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function GridVisualizer({
-  clientId,
-  contentRef
-}) {
-  const isDistractionFree = (0, _data.useSelect)(select => select(_store.store).getSettings().isDistractionFree, []);
-  const blockElement = (0, _useBlockRefs.__unstableUseBlockElement)(clientId);
-  if (isDistractionFree || !blockElement) {
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cover.default, {
-    className: "block-editor-grid-visualizer",
-    clientId: clientId,
-    __unstablePopoverSlot: "block-toolbar",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVisualizerGrid, {
-      ref: contentRef,
-      blockElement: blockElement
-    })
-  });
-}
-const GridVisualizerGrid = (0, _element.forwardRef)(({
-  blockElement
-}, ref) => {
-  const [gridInfo, setGridInfo] = (0, _element.useState)(() => getGridInfo(blockElement));
-  (0, _element.useEffect)(() => {
-    const observers = [];
-    for (const element of [blockElement, ...blockElement.children]) {
-      const observer = new window.ResizeObserver(() => {
-        setGridInfo(getGridInfo(blockElement));
-      });
-      observer.observe(element);
-      observers.push(observer);
-    }
-    return () => {
-      for (const observer of observers) {
-        observer.disconnect();
-      }
-    };
-  }, [blockElement]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    ref: ref,
-    className: "block-editor-grid-visualizer__grid",
-    style: gridInfo.style,
-    children: Array.from({
-      length: gridInfo.numItems
-    }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "block-editor-grid-visualizer__item",
-      style: {
-        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${gridInfo.currentColor} 20%, #0000)`
-      }
-    }, i))
-  });
-});
-function getGridInfo(blockElement) {
-  const gridTemplateColumns = (0, _utils.getComputedCSS)(blockElement, 'grid-template-columns');
-  const gridTemplateRows = (0, _utils.getComputedCSS)(blockElement, 'grid-template-rows');
-  const numColumns = gridTemplateColumns.split(' ').length;
-  const numRows = gridTemplateRows.split(' ').length;
-  const numItems = numColumns * numRows;
-  return {
-    numItems,
-    currentColor: (0, _utils.getComputedCSS)(blockElement, 'color'),
-    style: {
-      gridTemplateColumns,
-      gridTemplateRows,
-      gap: (0, _utils.getComputedCSS)(blockElement, 'gap'),
-      padding: (0, _utils.getComputedCSS)(blockElement, 'padding')
-    }
-  };
-}
-//# sourceMappingURL=grid-visualizer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["_element","require","_data","_useBlockRefs","_cover","_interopRequireDefault","_store","_utils","_jsxRuntime","GridVisualizer","clientId","contentRef","isDistractionFree","useSelect","select","blockEditorStore","getSettings","blockElement","useBlockElement","jsx","default","className","__unstablePopoverSlot","children","GridVisualizerGrid","ref","forwardRef","gridInfo","setGridInfo","useState","getGridInfo","useEffect","observers","element","observer","window","ResizeObserver","observe","push","disconnect","style","Array","from","length","numItems","_","i","boxShadow","currentColor","gridTemplateColumns","getComputedCSS","gridTemplateRows","numColumns","split","numRows","gap","padding"],"sources":["@wordpress/block-editor/src/components/grid-visualizer/grid-visualizer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, forwardRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\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 { store as blockEditorStore } from '../../store';\nimport { getComputedCSS } from './utils';\n\nexport function GridVisualizer( { clientId, contentRef } ) {\n\tconst isDistractionFree = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().isDistractionFree,\n\t\t[]\n\t);\n\tconst blockElement = useBlockElement( clientId );\n\n\tif ( isDistractionFree || ! blockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-visualizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t>\n\t\t\t<GridVisualizerGrid\n\t\t\t\tref={ contentRef }\n\t\t\t\tblockElement={ blockElement }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n\nconst GridVisualizerGrid = forwardRef( ( { blockElement }, ref ) => {\n\tconst [ gridInfo, setGridInfo ] = useState( () =>\n\t\tgetGridInfo( blockElement )\n\t);\n\tuseEffect( () => {\n\t\tconst observers = [];\n\t\tfor ( const element of [ blockElement, ...blockElement.children ] ) {\n\t\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\t\tsetGridInfo( getGridInfo( blockElement ) );\n\t\t\t} );\n\t\t\tobserver.observe( element );\n\t\t\tobservers.push( observer );\n\t\t}\n\t\treturn () => {\n\t\t\tfor ( const observer of observers ) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, [ blockElement ] );\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName=\"block-editor-grid-visualizer__grid\"\n\t\t\tstyle={ gridInfo.style }\n\t\t>\n\t\t\t{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={ i }\n\t\t\t\t\tclassName=\"block-editor-grid-visualizer__item\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tboxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ gridInfo.currentColor } 20%, #0000)`,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n} );\n\nfunction getGridInfo( blockElement ) {\n\tconst gridTemplateColumns = getComputedCSS(\n\t\tblockElement,\n\t\t'grid-template-columns'\n\t);\n\tconst gridTemplateRows = getComputedCSS(\n\t\tblockElement,\n\t\t'grid-template-rows'\n\t);\n\tconst numColumns = gridTemplateColumns.split( ' ' ).length;\n\tconst numRows = gridTemplateRows.split( ' ' ).length;\n\tconst numItems = numColumns * numRows;\n\treturn {\n\t\tnumItems,\n\t\tcurrentColor: getComputedCSS( blockElement, 'color' ),\n\t\tstyle: {\n\t\t\tgridTemplateColumns,\n\t\t\tgridTemplateRows,\n\t\t\tgap: getComputedCSS( blockElement, 'gap' ),\n\t\t\tpadding: getComputedCSS( blockElement, 'padding' ),\n\t\t},\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getComputedCSS = getComputedCSS;
-function getComputedCSS(element, property) {
-  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
-}
-//# sourceMappingURL=utils.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue"],"sources":["@wordpress/block-editor/src/components/grid-visualizer/utils.js"],"sourcesContent":["export function getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n"],"mappings":";;;;;;AAAO,SAASA,cAAcA,CAAEC,OAAO,EAAEC,QAAQ,EAAG;EACnD,OAAOD,OAAO,CAACE,aAAa,CAACC,WAAW,CACtCC,gBAAgB,CAAEJ,OAAQ,CAAC,CAC3BK,gBAAgB,CAAEJ,QAAS,CAAC;AAC/B","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["ResizableBox","useState","useEffect","__unstableUseBlockElement","useBlockElement","BlockPopoverCover","getComputedCSS","jsx","_jsx","GridItemResizer","clientId","bounds","onChange","blockElement","rootBlockElement","parentElement","GridItemResizerInner","resizeDirection","setResizeDirection","enableSide","setEnableSide","top","bottom","left","right","observer","window","ResizeObserver","blockClientRect","getBoundingClientRect","rootBlockClientRect","observe","disconnect","justification","alignment","styles","display","justifyContent","alignItems","className","__unstablePopoverSlot","additionalStyles","children","size","width","height","enable","bottomLeft","bottomRight","topLeft","topRight","boundsByDirection","onResizeStart","event","direction","ownerDocument","addEventListener","target","dispatchEvent","Event","bubbles","once","onResizeStop","boxElement","columnGap","parseFloat","rowGap","gridColumnTracks","getGridTracks","gridRowTracks","rect","DOMRect","offsetLeft","offsetTop","offsetWidth","offsetHeight","columnStart","getClosestTrack","rowStart","columnEnd","rowEnd","columnSpan","rowSpan","template","gap","tracks","split","previousTrack","length","start","end","push","position","edge","reduce","closest","track","index","Math","abs"],"sources":["@wordpress/block-editor/src/components/grid-visualizer/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 } from './utils';\n\nexport function GridItemResizer( { clientId, bounds, onChange } ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst rootBlockElement = blockElement?.parentElement;\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/>\n\t);\n}\n\nfunction GridItemResizerInner( {\n\tclientId,\n\tbounds,\n\tblockElement,\n\trootBlockElement,\n\tonChange,\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} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n\n/**\n * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end\n * position in pixels of each grid track.\n *\n * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track\n *\n * @param {string} template The grid-template-columns or grid-template-rows CSS property value.\n *                          Only supports fixed sizes in pixels.\n * @param {number} gap      The gap between grid tracks in pixels.\n *\n * @return {Array<{start: number, end: number}>} An array of objects with the start and end\n *                                               position in pixels of each grid track.\n */\nfunction getGridTracks( template, gap ) {\n\tconst tracks = [];\n\tfor ( const size of template.split( ' ' ) ) {\n\t\tconst previousTrack = tracks[ tracks.length - 1 ];\n\t\tconst start = previousTrack ? previousTrack.end + gap : 0;\n\t\tconst end = start + parseFloat( size );\n\t\ttracks.push( { start, end } );\n\t}\n\treturn tracks;\n}\n\n/**\n * Given an array of grid tracks and a position in pixels, gets the index of the closest track to\n * that position.\n *\n * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track\n *\n * @param {Array<{start: number, end: number}>} tracks   An array of objects with the start and end\n *                                                       position in pixels of each grid track.\n * @param {number}                              position The position in pixels.\n * @param {string}                              edge     The edge of the track to compare the\n *                                                       position to. Either 'start' or 'end'.\n *\n * @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which\n *                  is 1-based.\n */\nfunction getClosestTrack( tracks, position, edge = 'start' ) {\n\treturn tracks.reduce(\n\t\t( closest, track, index ) =>\n\t\t\tMath.abs( track[ edge ] - position ) <\n\t\t\tMath.abs( tracks[ closest ][ edge ] - position )\n\t\t\t\t? index\n\t\t\t\t: closest,\n\t\t0\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, forwardRef } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import BlockPopoverCover from '../block-popover/cover';
-import { store as blockEditorStore } from '../../store';
-import { getComputedCSS } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function GridVisualizer({
-  clientId,
-  contentRef
-}) {
-  const isDistractionFree = useSelect(select => select(blockEditorStore).getSettings().isDistractionFree, []);
-  const blockElement = useBlockElement(clientId);
-  if (isDistractionFree || !blockElement) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(BlockPopoverCover, {
-    className: "block-editor-grid-visualizer",
-    clientId: clientId,
-    __unstablePopoverSlot: "block-toolbar",
-    children: /*#__PURE__*/_jsx(GridVisualizerGrid, {
-      ref: contentRef,
-      blockElement: blockElement
-    })
-  });
-}
-const GridVisualizerGrid = forwardRef(({
-  blockElement
-}, ref) => {
-  const [gridInfo, setGridInfo] = useState(() => getGridInfo(blockElement));
-  useEffect(() => {
-    const observers = [];
-    for (const element of [blockElement, ...blockElement.children]) {
-      const observer = new window.ResizeObserver(() => {
-        setGridInfo(getGridInfo(blockElement));
-      });
-      observer.observe(element);
-      observers.push(observer);
-    }
-    return () => {
-      for (const observer of observers) {
-        observer.disconnect();
-      }
-    };
-  }, [blockElement]);
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    className: "block-editor-grid-visualizer__grid",
-    style: gridInfo.style,
-    children: Array.from({
-      length: gridInfo.numItems
-    }, (_, i) => /*#__PURE__*/_jsx("div", {
-      className: "block-editor-grid-visualizer__item",
-      style: {
-        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${gridInfo.currentColor} 20%, #0000)`
-      }
-    }, i))
-  });
-});
-function getGridInfo(blockElement) {
-  const gridTemplateColumns = getComputedCSS(blockElement, 'grid-template-columns');
-  const gridTemplateRows = getComputedCSS(blockElement, 'grid-template-rows');
-  const numColumns = gridTemplateColumns.split(' ').length;
-  const numRows = gridTemplateRows.split(' ').length;
-  const numItems = numColumns * numRows;
-  return {
-    numItems,
-    currentColor: getComputedCSS(blockElement, 'color'),
-    style: {
-      gridTemplateColumns,
-      gridTemplateRows,
-      gap: getComputedCSS(blockElement, 'gap'),
-      padding: getComputedCSS(blockElement, 'padding')
-    }
-  };
-}
-//# sourceMappingURL=grid-visualizer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["useState","useEffect","forwardRef","useSelect","__unstableUseBlockElement","useBlockElement","BlockPopoverCover","store","blockEditorStore","getComputedCSS","jsx","_jsx","GridVisualizer","clientId","contentRef","isDistractionFree","select","getSettings","blockElement","className","__unstablePopoverSlot","children","GridVisualizerGrid","ref","gridInfo","setGridInfo","getGridInfo","observers","element","observer","window","ResizeObserver","observe","push","disconnect","style","Array","from","length","numItems","_","i","boxShadow","currentColor","gridTemplateColumns","gridTemplateRows","numColumns","split","numRows","gap","padding"],"sources":["@wordpress/block-editor/src/components/grid-visualizer/grid-visualizer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, forwardRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\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 { store as blockEditorStore } from '../../store';\nimport { getComputedCSS } from './utils';\n\nexport function GridVisualizer( { clientId, contentRef } ) {\n\tconst isDistractionFree = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().isDistractionFree,\n\t\t[]\n\t);\n\tconst blockElement = useBlockElement( clientId );\n\n\tif ( isDistractionFree || ! blockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-visualizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"block-toolbar\"\n\t\t>\n\t\t\t<GridVisualizerGrid\n\t\t\t\tref={ contentRef }\n\t\t\t\tblockElement={ blockElement }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n\nconst GridVisualizerGrid = forwardRef( ( { blockElement }, ref ) => {\n\tconst [ gridInfo, setGridInfo ] = useState( () =>\n\t\tgetGridInfo( blockElement )\n\t);\n\tuseEffect( () => {\n\t\tconst observers = [];\n\t\tfor ( const element of [ blockElement, ...blockElement.children ] ) {\n\t\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\t\tsetGridInfo( getGridInfo( blockElement ) );\n\t\t\t} );\n\t\t\tobserver.observe( element );\n\t\t\tobservers.push( observer );\n\t\t}\n\t\treturn () => {\n\t\t\tfor ( const observer of observers ) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, [ blockElement ] );\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName=\"block-editor-grid-visualizer__grid\"\n\t\t\tstyle={ gridInfo.style }\n\t\t>\n\t\t\t{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={ i }\n\t\t\t\t\tclassName=\"block-editor-grid-visualizer__item\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tboxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ gridInfo.currentColor } 20%, #0000)`,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n} );\n\nfunction getGridInfo( blockElement ) {\n\tconst gridTemplateColumns = getComputedCSS(\n\t\tblockElement,\n\t\t'grid-template-columns'\n\t);\n\tconst gridTemplateRows = getComputedCSS(\n\t\tblockElement,\n\t\t'grid-template-rows'\n\t);\n\tconst numColumns = gridTemplateColumns.split( ' ' ).length;\n\tconst numRows = gridTemplateRows.split( ' ' ).length;\n\tconst numItems = numColumns * numRows;\n\treturn {\n\t\tnumItems,\n\t\tcurrentColor: getComputedCSS( blockElement, 'color' ),\n\t\tstyle: {\n\t\t\tgridTemplateColumns,\n\t\t\tgridTemplateRows,\n\t\t\tgap: getComputedCSS( blockElement, 'gap' ),\n\t\t\tpadding: getComputedCSS( blockElement, 'padding' ),\n\t\t},\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +0,0 @@
-export { GridVisualizer } from './grid-visualizer';
-export { GridItemResizer } from './grid-item-resizer';
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["GridVisualizer","GridItemResizer"],"sources":["@wordpress/block-editor/src/components/grid-visualizer/index.js"],"sourcesContent":["export { GridVisualizer } from './grid-visualizer';\nexport { GridItemResizer } from './grid-item-resizer';\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAClD,SAASC,eAAe,QAAQ,qBAAqB","ignoreList":[]}

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

@@ -1,4 +0,0 @@
-export function getComputedCSS(element, property) {
-  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
-}
-//# sourceMappingURL=utils.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["getComputedCSS","element","property","ownerDocument","defaultView","getComputedStyle","getPropertyValue"],"sources":["@wordpress/block-editor/src/components/grid-visualizer/utils.js"],"sourcesContent":["export function getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n"],"mappings":"AAAA,OAAO,SAASA,cAAcA,CAAEC,OAAO,EAAEC,QAAQ,EAAG;EACnD,OAAOD,OAAO,CAACE,aAAa,CAACC,WAAW,CACtCC,gBAAgB,CAAEJ,OAAQ,CAAC,CAC3BK,gBAAgB,CAAEJ,QAAS,CAAC;AAC/B","ignoreList":[]}

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

@@ -1,101 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, forwardRef } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import BlockPopoverCover from '../block-popover/cover';
-import { store as blockEditorStore } from '../../store';
-import { getComputedCSS } from './utils';
-
-export function GridVisualizer( { clientId, contentRef } ) {
-	const isDistractionFree = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().isDistractionFree,
-		[]
-	);
-	const blockElement = useBlockElement( clientId );
-
-	if ( isDistractionFree || ! blockElement ) {
-		return null;
-	}
-
-	return (
-		<BlockPopoverCover
-			className="block-editor-grid-visualizer"
-			clientId={ clientId }
-			__unstablePopoverSlot="block-toolbar"
-		>
-			<GridVisualizerGrid
-				ref={ contentRef }
-				blockElement={ blockElement }
-			/>
-		</BlockPopoverCover>
-	);
-}
-
-const GridVisualizerGrid = forwardRef( ( { blockElement }, ref ) => {
-	const [ gridInfo, setGridInfo ] = useState( () =>
-		getGridInfo( blockElement )
-	);
-	useEffect( () => {
-		const observers = [];
-		for ( const element of [ blockElement, ...blockElement.children ] ) {
-			const observer = new window.ResizeObserver( () => {
-				setGridInfo( getGridInfo( blockElement ) );
-			} );
-			observer.observe( element );
-			observers.push( observer );
-		}
-		return () => {
-			for ( const observer of observers ) {
-				observer.disconnect();
-			}
-		};
-	}, [ blockElement ] );
-	return (
-		<div
-			ref={ ref }
-			className="block-editor-grid-visualizer__grid"
-			style={ gridInfo.style }
-		>
-			{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (
-				<div
-					key={ i }
-					className="block-editor-grid-visualizer__item"
-					style={ {
-						boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ gridInfo.currentColor } 20%, #0000)`,
-					} }
-				/>
-			) ) }
-		</div>
-	);
-} );
-
-function getGridInfo( blockElement ) {
-	const gridTemplateColumns = getComputedCSS(
-		blockElement,
-		'grid-template-columns'
-	);
-	const gridTemplateRows = getComputedCSS(
-		blockElement,
-		'grid-template-rows'
-	);
-	const numColumns = gridTemplateColumns.split( ' ' ).length;
-	const numRows = gridTemplateRows.split( ' ' ).length;
-	const numItems = numColumns * numRows;
-	return {
-		numItems,
-		currentColor: getComputedCSS( blockElement, 'color' ),
-		style: {
-			gridTemplateColumns,
-			gridTemplateRows,
-			gap: getComputedCSS( blockElement, 'gap' ),
-			padding: getComputedCSS( blockElement, 'padding' ),
-		},
-	};
-}

package/src/components/grid-visualizer/index.js

@@ -1,2 +0,0 @@
-export { GridVisualizer } from './grid-visualizer';
-export { GridItemResizer } from './grid-item-resizer';

package/src/components/grid-visualizer/style.scss

@@ -1,34 +0,0 @@
-// TODO: Specificity hacks to get rid of all these darn !importants.
-
-.block-editor-grid-visualizer {
-	z-index: z-index(".block-editor-grid-visualizer") !important;
-}
-
-.block-editor-grid-visualizer .components-popover__content * {
-	pointer-events: none !important;
-}
-
-.block-editor-grid-visualizer__grid {
-	display: grid;
-}
-
-.block-editor-grid-visualizer__item {
-	outline: 1px solid transparent;
-	border-radius: $radius-block-ui;
-}
-
-.block-editor-grid-item-resizer {
-	z-index: z-index(".block-editor-grid-visualizer") !important;
-}
-
-.block-editor-grid-item-resizer .components-popover__content * {
-	pointer-events: none !important;
-}
-
-.block-editor-grid-item-resizer__box {
-	border: $border-width solid var(--wp-admin-theme-color);
-
-	.components-resizable-box__handle {
-		pointer-events: all !important;
-	}
-}

package/src/components/grid-visualizer/utils.js

@@ -1,5 +0,0 @@
-export function getComputedCSS( element, property ) {
-	return element.ownerDocument.defaultView
-		.getComputedStyle( element )
-		.getPropertyValue( property );
-}

package/src/hooks/position.scss

@@ -1,18 +0,0 @@
-.block-editor-hooks__position-selection__select-control {
-	.components-custom-select-control__hint {
-		display: none;
-	}
-}
-
-.block-editor-hooks__position-selection__select-control__option {
-	&.has-hint {
-		grid-template-columns: auto 30px;
-		line-height: $default-line-height;
-		margin-bottom: 0;
-	}
-
-	.components-custom-select-control__item-hint {
-		grid-row: 2;
-		text-align: left;
-	}
-}