@wordpress/block-editor 13.0.3 → 13.2.0

package/build-module/components/date-format-picker/index.js

@@ -2,17 +2,21 @@
  * WordPress dependencies
  */
 import { _x, __ } from '@wordpress/i18n';
-import { dateI18n } from '@wordpress/date';
+import { dateI18n, humanTimeDiff } from '@wordpress/date';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import { TextControl, ExternalLink, VisuallyHidden, CustomSelectControl, ToggleControl, __experimentalVStack as VStack } from '@wordpress/components';
 
-// So that we can illustrate the different formats in the dropdown properly,
-// show a date that has a day greater than 12 and a month with more than three
-// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was
-// released.
+// So that we illustrate the different formats in the dropdown properly, show a date that is
+// somwhat recent, has a day greater than 12, and a month with more than three letters.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const EXAMPLE_DATE = new Date(2022, 0, 25);
+const exampleDate = new Date();
+exampleDate.setDate(20);
+exampleDate.setMonth(exampleDate.getMonth() - 3);
+if (exampleDate.getMonth() === 4) {
+  // May has three letters, so use March.
+  exampleDate.setMonth(3);
+}
 
 /**
  * The `DateFormatPicker` component renders controls that let the user choose a
@@ -49,7 +53,7 @@ export default function DateFormatPicker({
     }), /*#__PURE__*/_jsx(ToggleControl, {
       __nextHasNoMarginBottom: true,
       label: __('Default format'),
-      help: `${__('Example:')}  ${dateI18n(defaultFormat, EXAMPLE_DATE)}`,
+      help: `${__('Example:')}  ${dateI18n(defaultFormat, exampleDate)}`,
       checked: !format,
       onChange: checked => onChange(checked ? null : defaultFormat)
     }), format && /*#__PURE__*/_jsx(NonDefaultControls, {
@@ -78,18 +82,22 @@ function NonDefaultControls({
   _x('M j, Y g:i A', 'medium date format with time'), /* translators: See https://www.php.net/manual/datetime.format.php */
   _x('F j, Y', 'long date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
   _x('M j', 'short date format without the year')])];
-  const suggestedOptions = suggestedFormats.map((suggestedFormat, index) => ({
+  const suggestedOptions = [...suggestedFormats.map((suggestedFormat, index) => ({
     key: `suggested-${index}`,
-    name: dateI18n(suggestedFormat, EXAMPLE_DATE),
+    name: dateI18n(suggestedFormat, exampleDate),
     format: suggestedFormat
-  }));
+  })), {
+    key: 'human-diff',
+    name: humanTimeDiff(exampleDate),
+    format: 'human-diff'
+  }];
   const customOption = {
     key: 'custom',
     name: __('Custom'),
     className: 'block-editor-date-format-picker__custom-format-select-control__custom-option',
     __experimentalHint: __('Enter your own date format')
   };
-  const [isCustom, setIsCustom] = useState(() => !!format && !suggestedFormats.includes(format));
+  const [isCustom, setIsCustom] = useState(() => !!format && !suggestedOptions.some(option => option.format === format));
   return /*#__PURE__*/_jsxs(VStack, {
     children: [/*#__PURE__*/_jsx(CustomSelectControl, {
       label: __('Choose a format'),

package/build-module/components/date-format-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_x","__","dateI18n","useState","createInterpolateElement","TextControl","ExternalLink","VisuallyHidden","CustomSelectControl","ToggleControl","__experimentalVStack","VStack","jsx","_jsx","jsxs","_jsxs","EXAMPLE_DATE","Date","DateFormatPicker","format","defaultFormat","onChange","className","children","as","__nextHasNoMarginBottom","label","help","checked","NonDefaultControls","_suggestedOptions$fin","suggestedFormats","Set","suggestedOptions","map","suggestedFormat","index","key","name","customOption","__experimentalHint","isCustom","setIsCustom","includes","options","value","find","option","selectedItem","hideLabelFromVision","Link","href"],"sources":["@wordpress/block-editor/src/components/date-format-picker/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tCustomSelectControl,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n// So that we can illustrate the different formats in the dropdown properly,\n// show a date that has a day greater than 12 and a month with more than three\n// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was\n// released.\nconst EXAMPLE_DATE = new Date( 2022, 0, 25 );\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object}                          props\n * @param {string|null}                     props.format        The selected date\n *                                                              format. If\n *                                                              `null`,\n *                                                              _Default_ is\n *                                                              selected.\n * @param {string}                          props.defaultFormat The date format that\n *                                                              will be used if the\n *                                                              user selects\n *                                                              'Default'.\n * @param {( format: string|null ) => void} props.onChange      Called when a\n *                                                              selection is\n *                                                              made. If `null`,\n *                                                              _Default_ is\n *                                                              selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<fieldset className=\"block-editor-date-format-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) }  ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\tEXAMPLE_DATE\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = suggestedFormats.map(\n\t\t( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, EXAMPLE_DATE ),\n\t\t\tformat: suggestedFormat,\n\t\t} )\n\t);\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\t__experimentalHint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() => !! format && ! suggestedFormats.includes( format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t  ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\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\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_x","__","dateI18n","humanTimeDiff","useState","createInterpolateElement","TextControl","ExternalLink","VisuallyHidden","CustomSelectControl","ToggleControl","__experimentalVStack","VStack","jsx","_jsx","jsxs","_jsxs","exampleDate","Date","setDate","setMonth","getMonth","DateFormatPicker","format","defaultFormat","onChange","className","children","as","__nextHasNoMarginBottom","label","help","checked","NonDefaultControls","_suggestedOptions$fin","suggestedFormats","Set","suggestedOptions","map","suggestedFormat","index","key","name","customOption","__experimentalHint","isCustom","setIsCustom","some","option","options","value","find","selectedItem","hideLabelFromVision","Link","href"],"sources":["@wordpress/block-editor/src/components/date-format-picker/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n, humanTimeDiff } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tCustomSelectControl,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n// So that we illustrate the different formats in the dropdown properly, show a date that is\n// somwhat recent, has a day greater than 12, and a month with more than three letters.\nconst exampleDate = new Date();\nexampleDate.setDate( 20 );\nexampleDate.setMonth( exampleDate.getMonth() - 3 );\nif ( exampleDate.getMonth() === 4 ) {\n\t// May has three letters, so use March.\n\texampleDate.setMonth( 3 );\n}\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object}                          props\n * @param {string|null}                     props.format        The selected date\n *                                                              format. If\n *                                                              `null`,\n *                                                              _Default_ is\n *                                                              selected.\n * @param {string}                          props.defaultFormat The date format that\n *                                                              will be used if the\n *                                                              user selects\n *                                                              'Default'.\n * @param {( format: string|null ) => void} props.onChange      Called when a\n *                                                              selection is\n *                                                              made. If `null`,\n *                                                              _Default_ is\n *                                                              selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<fieldset className=\"block-editor-date-format-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) }  ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\texampleDate\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = [\n\t\t...suggestedFormats.map( ( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, exampleDate ),\n\t\t\tformat: suggestedFormat,\n\t\t} ) ),\n\t\t{\n\t\t\tkey: 'human-diff',\n\t\t\tname: humanTimeDiff( exampleDate ),\n\t\t\tformat: 'human-diff',\n\t\t},\n\t];\n\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\t__experimentalHint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() =>\n\t\t\t!! format &&\n\t\t\t! suggestedOptions.some( ( option ) => option.format === format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t  ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\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\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/grid/grid-item-movers.js

@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton } from '@wordpress/components';
+import { arrowLeft, arrowUp, arrowDown, arrowRight } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockControls from '../block-controls';
+import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
+import { store as blockEditorStore } from '../../store';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function GridItemMovers({
+  layout,
+  parentLayout,
+  onChange,
+  gridClientId,
+  blockClientId
+}) {
+  var _layout$columnStart, _layout$rowStart, _layout$columnSpan, _layout$rowSpan;
+  const {
+    moveBlocksToPosition,
+    __unstableMarkNextChangeAsNotPersistent
+  } = useDispatch(blockEditorStore);
+  const columnStart = (_layout$columnStart = layout?.columnStart) !== null && _layout$columnStart !== void 0 ? _layout$columnStart : 1;
+  const rowStart = (_layout$rowStart = layout?.rowStart) !== null && _layout$rowStart !== void 0 ? _layout$rowStart : 1;
+  const columnSpan = (_layout$columnSpan = layout?.columnSpan) !== null && _layout$columnSpan !== void 0 ? _layout$columnSpan : 1;
+  const rowSpan = (_layout$rowSpan = layout?.rowSpan) !== null && _layout$rowSpan !== void 0 ? _layout$rowSpan : 1;
+  const columnEnd = columnStart + columnSpan - 1;
+  const rowEnd = rowStart + rowSpan - 1;
+  const columnCount = parentLayout?.columnCount;
+  const rowCount = parentLayout?.rowCount;
+  const columnCountNumber = parseInt(columnCount, 10);
+  const rowStartNumber = parseInt(rowStart, 10);
+  const columnStartNumber = parseInt(columnStart, 10);
+  const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(gridClientId, columnCountNumber);
+  return /*#__PURE__*/_jsxs(BlockControls, {
+    group: "parent",
+    children: [/*#__PURE__*/_jsx(ToolbarButton, {
+      icon: arrowUp,
+      label: __('Move block up'),
+      isDisabled: rowStart <= 1,
+      onClick: () => {
+        onChange({
+          rowStart: rowStart - 1
+        });
+        __unstableMarkNextChangeAsNotPersistent();
+        moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStartNumber, rowStartNumber - 1));
+      }
+    }), /*#__PURE__*/_jsx(ToolbarButton, {
+      icon: arrowDown,
+      label: __('Move block down'),
+      isDisabled: rowCount && rowEnd >= rowCount,
+      onClick: () => {
+        onChange({
+          rowStart: rowStart + 1
+        });
+        __unstableMarkNextChangeAsNotPersistent();
+        moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStartNumber, rowStartNumber + 1));
+      }
+    }), /*#__PURE__*/_jsx(ToolbarButton, {
+      icon: arrowLeft,
+      label: __('Move block left'),
+      isDisabled: columnStart <= 1,
+      onClick: () => {
+        onChange({
+          columnStart: columnStartNumber - 1
+        });
+        __unstableMarkNextChangeAsNotPersistent();
+        moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStartNumber - 1, rowStartNumber));
+      }
+    }), /*#__PURE__*/_jsx(ToolbarButton, {
+      icon: arrowRight,
+      label: __('Move block right'),
+      isDisabled: columnCount && columnEnd >= columnCount,
+      onClick: () => {
+        onChange({
+          columnStart: columnStartNumber + 1
+        });
+        __unstableMarkNextChangeAsNotPersistent();
+        moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStartNumber + 1, rowStartNumber));
+      }
+    })]
+  });
+}
+//# sourceMappingURL=grid-item-movers.js.map

package/build-module/components/grid/grid-item-movers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","ToolbarButton","arrowLeft","arrowUp","arrowDown","arrowRight","useDispatch","BlockControls","useGetNumberOfBlocksBeforeCell","store","blockEditorStore","jsx","_jsx","jsxs","_jsxs","GridItemMovers","layout","parentLayout","onChange","gridClientId","blockClientId","_layout$columnStart","_layout$rowStart","_layout$columnSpan","_layout$rowSpan","moveBlocksToPosition","__unstableMarkNextChangeAsNotPersistent","columnStart","rowStart","columnSpan","rowSpan","columnEnd","rowEnd","columnCount","rowCount","columnCountNumber","parseInt","rowStartNumber","columnStartNumber","getNumberOfBlocksBeforeCell","group","children","icon","label","isDisabled","onClick"],"sources":["@wordpress/block-editor/src/components/grid/grid-item-movers.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ToolbarButton } from '@wordpress/components';\nimport { arrowLeft, arrowUp, arrowDown, arrowRight } from '@wordpress/icons';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport BlockControls from '../block-controls';\nimport { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';\nimport { store as blockEditorStore } from '../../store';\n\nexport function GridItemMovers( {\n\tlayout,\n\tparentLayout,\n\tonChange,\n\tgridClientId,\n\tblockClientId,\n} ) {\n\tconst { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tconst columnStart = layout?.columnStart ?? 1;\n\tconst rowStart = layout?.rowStart ?? 1;\n\tconst columnSpan = layout?.columnSpan ?? 1;\n\tconst rowSpan = layout?.rowSpan ?? 1;\n\tconst columnEnd = columnStart + columnSpan - 1;\n\tconst rowEnd = rowStart + rowSpan - 1;\n\tconst columnCount = parentLayout?.columnCount;\n\tconst rowCount = parentLayout?.rowCount;\n\n\tconst columnCountNumber = parseInt( columnCount, 10 );\n\tconst rowStartNumber = parseInt( rowStart, 10 );\n\tconst columnStartNumber = parseInt( columnStart, 10 );\n\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\tgridClientId,\n\t\tcolumnCountNumber\n\t);\n\n\treturn (\n\t\t<BlockControls group=\"parent\">\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ arrowUp }\n\t\t\t\tlabel={ __( 'Move block up' ) }\n\t\t\t\tisDisabled={ rowStart <= 1 }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\trowStart: rowStart - 1,\n\t\t\t\t\t} );\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t[ blockClientId ],\n\t\t\t\t\t\tgridClientId,\n\t\t\t\t\t\tgridClientId,\n\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\tcolumnStartNumber,\n\t\t\t\t\t\t\trowStartNumber - 1\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\t<ToolbarButton\n\t\t\t\ticon={ arrowDown }\n\t\t\t\tlabel={ __( 'Move block down' ) }\n\t\t\t\tisDisabled={ rowCount && rowEnd >= rowCount }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\trowStart: rowStart + 1,\n\t\t\t\t\t} );\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t[ blockClientId ],\n\t\t\t\t\t\tgridClientId,\n\t\t\t\t\t\tgridClientId,\n\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\tcolumnStartNumber,\n\t\t\t\t\t\t\trowStartNumber + 1\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\t<ToolbarButton\n\t\t\t\ticon={ arrowLeft }\n\t\t\t\tlabel={ __( 'Move block left' ) }\n\t\t\t\tisDisabled={ columnStart <= 1 }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tcolumnStart: columnStartNumber - 1,\n\t\t\t\t\t} );\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t[ blockClientId ],\n\t\t\t\t\t\tgridClientId,\n\t\t\t\t\t\tgridClientId,\n\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\tcolumnStartNumber - 1,\n\t\t\t\t\t\t\trowStartNumber\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\t<ToolbarButton\n\t\t\t\ticon={ arrowRight }\n\t\t\t\tlabel={ __( 'Move block right' ) }\n\t\t\t\tisDisabled={ columnCount && columnEnd >= columnCount }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tcolumnStart: columnStartNumber + 1,\n\t\t\t\t\t} );\n\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t[ blockClientId ],\n\t\t\t\t\t\tgridClientId,\n\t\t\t\t\t\tgridClientId,\n\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\tcolumnStartNumber + 1,\n\t\t\t\t\t\t\trowStartNumber\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</BlockControls>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -9,15 +9,19 @@ import { useState, useEffect } from '@wordpress/element';
  */
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
-import { getComputedCSS } from './utils';
+import { getComputedCSS, getGridTracks, getClosestTrack } from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridItemResizer({
   clientId,
   bounds,
-  onChange
+  onChange,
+  parentLayout
 }) {
   const blockElement = useBlockElement(clientId);
   const rootBlockElement = blockElement?.parentElement;
+  const {
+    columnCount
+  } = parentLayout;
   if (!blockElement || !rootBlockElement) {
     return null;
   }
@@ -26,7 +30,8 @@ export function GridItemResizer({
     bounds: bounds,
     blockElement: blockElement,
     rootBlockElement: rootBlockElement,
-    onChange: onChange
+    onChange: onChange,
+    isManualGrid: !!columnCount && window.__experimentalEnableGridInteractivity
   });
 }
 function GridItemResizerInner({
@@ -34,7 +39,8 @@ function GridItemResizerInner({
   bounds,
   blockElement,
   rootBlockElement,
-  onChange
+  onChange,
+  isManualGrid
 }) {
   const [resizeDirection, setResizeDirection] = useState(null);
   const [enableSide, setEnableSide] = useState({
@@ -132,56 +138,12 @@ function GridItemResizerInner({
         const rowEnd = 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-module/components/grid/grid-item-resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ResizableBox","useState","useEffect","__unstableUseBlockElement","useBlockElement","BlockPopoverCover","getComputedCSS","getGridTracks","getClosestTrack","jsx","_jsx","GridItemResizer","clientId","bounds","onChange","parentLayout","blockElement","rootBlockElement","parentElement","columnCount","GridItemResizerInner","isManualGrid","window","__experimentalEnableGridInteractivity","resizeDirection","setResizeDirection","enableSide","setEnableSide","top","bottom","left","right","observer","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","gridRowTracks","rect","DOMRect","offsetLeft","offsetTop","offsetWidth","offsetHeight","columnStart","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-module/components/grid/grid-visualizer.js

@@ -0,0 +1,217 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, forwardRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopoverCover from '../block-popover/cover';
+import { range, GridRect, getGridInfo } from './utils';
+import { store as blockEditorStore } from '../../store';
+import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GridVisualizer({
+  clientId,
+  contentRef,
+  parentLayout
+}) {
+  const isDistractionFree = useSelect(select => select(blockEditorStore).getSettings().isDistractionFree, []);
+  const gridElement = useBlockElement(clientId);
+  if (isDistractionFree || !gridElement) {
+    return null;
+  }
+  const isManualGrid = parentLayout?.columnCount && window.__experimentalEnableGridInteractivity;
+  return /*#__PURE__*/_jsx(GridVisualizerGrid, {
+    clientId: clientId,
+    gridElement: gridElement,
+    isManualGrid: isManualGrid,
+    ref: contentRef
+  });
+}
+const GridVisualizerGrid = forwardRef(({
+  clientId,
+  gridElement,
+  isManualGrid
+}, ref) => {
+  const [gridInfo, setGridInfo] = useState(() => getGridInfo(gridElement));
+  const [isDroppingAllowed, setIsDroppingAllowed] = useState(false);
+  const [highlightedRect, setHighlightedRect] = useState(null);
+  useEffect(() => {
+    const observers = [];
+    for (const element of [gridElement, ...gridElement.children]) {
+      const observer = new window.ResizeObserver(() => {
+        setGridInfo(getGridInfo(gridElement));
+      });
+      observer.observe(element);
+      observers.push(observer);
+    }
+    return () => {
+      for (const observer of observers) {
+        observer.disconnect();
+      }
+    };
+  }, [gridElement]);
+  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__*/_jsx(BlockPopoverCover, {
+    className: clsx('block-editor-grid-visualizer', {
+      'is-dropping-allowed': isDroppingAllowed
+    }),
+    clientId: clientId,
+    __unstablePopoverSlot: "block-toolbar",
+    children: /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      className: "block-editor-grid-visualizer__grid",
+      style: gridInfo.style,
+      children: isManualGrid ? range(1, gridInfo.numRows).map(row => range(1, gridInfo.numColumns).map(column => /*#__PURE__*/_jsx(GridVisualizerCell, {
+        color: gridInfo.currentColor,
+        children: /*#__PURE__*/_jsx(GridVisualizerDropZone, {
+          column: column,
+          row: row,
+          gridClientId: clientId,
+          gridInfo: gridInfo,
+          highlightedRect: highlightedRect,
+          setHighlightedRect: setHighlightedRect
+        })
+      }, `${row}-${column}`))) : Array.from({
+        length: gridInfo.numItems
+      }, (_, i) => /*#__PURE__*/_jsx(GridVisualizerCell, {
+        color: gridInfo.currentColor
+      }, i))
+    })
+  });
+});
+function GridVisualizerCell({
+  color,
+  children
+}) {
+  return /*#__PURE__*/_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
+  } = useSelect(blockEditorStore);
+  const {
+    updateBlockAttributes,
+    moveBlocksToPosition,
+    __unstableMarkNextChangeAsNotPersistent
+  } = useDispatch(blockEditorStore);
+  const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(gridClientId, gridInfo.numColumns);
+  const ref = useDropZoneWithValidation({
+    validateDrag(srcClientId) {
+      const attributes = getBlockAttributes(srcClientId);
+      const rect = new GridRect({
+        columnStart: column,
+        rowStart: row,
+        columnSpan: attributes.style?.layout?.columnSpan,
+        rowSpan: attributes.style?.layout?.rowSpan
+      });
+      const isInBounds = new GridRect({
+        columnSpan: gridInfo.numColumns,
+        rowSpan: gridInfo.numRows
+      }).containsRect(rect);
+      return isInBounds;
+    },
+    onDragEnter(srcClientId) {
+      const attributes = getBlockAttributes(srcClientId);
+      setHighlightedRect(new 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__*/_jsx("div", {
+    ref: ref,
+    className: clsx('block-editor-grid-visualizer__drop-zone', {
+      'is-highlighted': isHighlighted
+    })
+  });
+}
+function useDropZoneWithValidation({
+  validateDrag,
+  onDragEnter,
+  onDragLeave,
+  onDrop
+}) {
+  const {
+    getDraggedBlockClientIds
+  } = useSelect(blockEditorStore);
+  return useDropZone({
+    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-module/components/grid/grid-visualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clsx","useState","useEffect","forwardRef","useSelect","useDispatch","__experimentalUseDropZone","useDropZone","__unstableUseBlockElement","useBlockElement","BlockPopoverCover","range","GridRect","getGridInfo","store","blockEditorStore","useGetNumberOfBlocksBeforeCell","jsx","_jsx","GridVisualizer","clientId","contentRef","parentLayout","isDistractionFree","select","getSettings","gridElement","isManualGrid","columnCount","window","__experimentalEnableGridInteractivity","GridVisualizerGrid","ref","gridInfo","setGridInfo","isDroppingAllowed","setIsDroppingAllowed","highlightedRect","setHighlightedRect","observers","element","children","observer","ResizeObserver","observe","push","disconnect","onGlobalDrag","onGlobalDragEnd","document","addEventListener","removeEventListener","className","__unstablePopoverSlot","style","numRows","map","row","numColumns","column","GridVisualizerCell","color","currentColor","GridVisualizerDropZone","gridClientId","Array","from","length","numItems","_","i","boxShadow","_highlightedRect$cont","getBlockAttributes","updateBlockAttributes","moveBlocksToPosition","__unstableMarkNextChangeAsNotPersistent","getNumberOfBlocksBeforeCell","useDropZoneWithValidation","validateDrag","srcClientId","attributes","rect","columnStart","rowStart","columnSpan","layout","rowSpan","isInBounds","containsRect","onDragEnter","onDragLeave","prevHighlightedRect","onDrop","isHighlighted","contains","getDraggedBlockClientIds"],"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":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,QAAQ,oBAAoB;AACpE,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,IAAIC,WAAW,QAAQ,oBAAoB;;AAE7E;AACA;AACA;AACA,SAASC,yBAAyB,IAAIC,eAAe,QAAQ,8CAA8C;AAC3G,OAAOC,iBAAiB,MAAM,wBAAwB;AACtD,SAASC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,SAAS;AACtD,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AACvD,SAASC,8BAA8B,QAAQ,wCAAwC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExF,OAAO,SAASC,cAAcA,CAAE;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAAa,CAAC,EAAG;EACxE,MAAMC,iBAAiB,GAAGnB,SAAS,CAChCoB,MAAM,IACPA,MAAM,CAAET,gBAAiB,CAAC,CAACU,WAAW,CAAC,CAAC,CAACF,iBAAiB,EAC3D,EACD,CAAC;EACD,MAAMG,WAAW,GAAGjB,eAAe,CAAEW,QAAS,CAAC;EAE/C,IAAKG,iBAAiB,IAAI,CAAEG,WAAW,EAAG;IACzC,OAAO,IAAI;EACZ;EAEA,MAAMC,YAAY,GACjBL,YAAY,EAAEM,WAAW,IACzBC,MAAM,CAACC,qCAAqC;EAC7C,oBACCZ,IAAA,CAACa,kBAAkB;IAClBX,QAAQ,EAAGA,QAAU;IACrBM,WAAW,EAAGA,WAAa;IAC3BC,YAAY,EAAGA,YAAc;IAC7BK,GAAG,EAAGX;EAAY,CAClB,CAAC;AAEJ;AAEA,MAAMU,kBAAkB,GAAG5B,UAAU,CACpC,CAAE;EAAEiB,QAAQ;EAAEM,WAAW;EAAEC;AAAa,CAAC,EAAEK,GAAG,KAAM;EACnD,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAGjC,QAAQ,CAAE,MAC3CY,WAAW,CAAEa,WAAY,CAC1B,CAAC;EACD,MAAM,CAAES,iBAAiB,EAAEC,oBAAoB,CAAE,GAAGnC,QAAQ,CAAE,KAAM,CAAC;EACrE,MAAM,CAAEoC,eAAe,EAAEC,kBAAkB,CAAE,GAAGrC,QAAQ,CAAE,IAAK,CAAC;EAEhEC,SAAS,CAAE,MAAM;IAChB,MAAMqC,SAAS,GAAG,EAAE;IACpB,KAAM,MAAMC,OAAO,IAAI,CAAEd,WAAW,EAAE,GAAGA,WAAW,CAACe,QAAQ,CAAE,EAAG;MACjE,MAAMC,QAAQ,GAAG,IAAIb,MAAM,CAACc,cAAc,CAAE,MAAM;QACjDT,WAAW,CAAErB,WAAW,CAAEa,WAAY,CAAE,CAAC;MAC1C,CAAE,CAAC;MACHgB,QAAQ,CAACE,OAAO,CAAEJ,OAAQ,CAAC;MAC3BD,SAAS,CAACM,IAAI,CAAEH,QAAS,CAAC;IAC3B;IACA,OAAO,MAAM;MACZ,KAAM,MAAMA,QAAQ,IAAIH,SAAS,EAAG;QACnCG,QAAQ,CAACI,UAAU,CAAC,CAAC;MACtB;IACD,CAAC;EACF,CAAC,EAAE,CAAEpB,WAAW,CAAG,CAAC;EAEpBxB,SAAS,CAAE,MAAM;IAChB,SAAS6C,YAAYA,CAAA,EAAG;MACvBX,oBAAoB,CAAE,IAAK,CAAC;IAC7B;IACA,SAASY,eAAeA,CAAA,EAAG;MAC1BZ,oBAAoB,CAAE,KAAM,CAAC;IAC9B;IACAa,QAAQ,CAACC,gBAAgB,CAAE,MAAM,EAAEH,YAAa,CAAC;IACjDE,QAAQ,CAACC,gBAAgB,CAAE,SAAS,EAAEF,eAAgB,CAAC;IACvD,OAAO,MAAM;MACZC,QAAQ,CAACE,mBAAmB,CAAE,MAAM,EAAEJ,YAAa,CAAC;MACpDE,QAAQ,CAACE,mBAAmB,CAAE,SAAS,EAAEH,eAAgB,CAAC;IAC3D,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,oBACC9B,IAAA,CAACR,iBAAiB;IACjB0C,SAAS,EAAGpD,IAAI,CAAE,8BAA8B,EAAE;MACjD,qBAAqB,EAAEmC;IACxB,CAAE,CAAG;IACLf,QAAQ,EAAGA,QAAU;IACrBiC,qBAAqB,EAAC,eAAe;IAAAZ,QAAA,eAErCvB,IAAA;MACCc,GAAG,EAAGA,GAAK;MACXoB,SAAS,EAAC,oCAAoC;MAC9CE,KAAK,EAAGrB,QAAQ,CAACqB,KAAO;MAAAb,QAAA,EAEtBd,YAAY,GACXhB,KAAK,CAAE,CAAC,EAAEsB,QAAQ,CAACsB,OAAQ,CAAC,CAACC,GAAG,CAAIC,GAAG,IACvC9C,KAAK,CAAE,CAAC,EAAEsB,QAAQ,CAACyB,UAAW,CAAC,CAACF,GAAG,CAChCG,MAAM,iBACPzC,IAAA,CAAC0C,kBAAkB;QAElBC,KAAK,EAAG5B,QAAQ,CAAC6B,YAAc;QAAArB,QAAA,eAE/BvB,IAAA,CAAC6C,sBAAsB;UACtBJ,MAAM,EAAGA,MAAQ;UACjBF,GAAG,EAAGA,GAAK;UACXO,YAAY,EAAG5C,QAAU;UACzBa,QAAQ,EAAGA,QAAU;UACrBI,eAAe,EACdA,eACA;UACDC,kBAAkB,EACjBA;QACA,CACD;MAAC,GAdK,GAAGmB,GAAK,IAAIE,MAAQ,EAeR,CAEtB,CACA,CAAC,GACDM,KAAK,CAACC,IAAI,CACV;QAAEC,MAAM,EAAElC,QAAQ,CAACmC;MAAS,CAAC,EAC7B,CAAEC,CAAC,EAAEC,CAAC,kBACLpD,IAAA,CAAC0C,kBAAkB;QAElBC,KAAK,EAAG5B,QAAQ,CAAC6B;MAAc,GADzBQ,CAEN,CAEF;IAAC,CACA;EAAC,CACY,CAAC;AAEtB,CACD,CAAC;AAED,SAASV,kBAAkBA,CAAE;EAAEC,KAAK;EAAEpB;AAAS,CAAC,EAAG;EAClD,oBACCvB,IAAA;IACCkC,SAAS,EAAC,oCAAoC;IAC9CE,KAAK,EAAG;MACPiB,SAAS,EAAG,sCAAsCV,KAAO;IAC1D,CAAG;IAAApB,QAAA,EAEDA;EAAQ,CACN,CAAC;AAER;AAEA,SAASsB,sBAAsBA,CAAE;EAChCJ,MAAM;EACNF,GAAG;EACHO,YAAY;EACZ/B,QAAQ;EACRI,eAAe;EACfC;AACD,CAAC,EAAG;EAAA,IAAAkC,qBAAA;EACH,MAAM;IAAEC;EAAmB,CAAC,GAAGrE,SAAS,CAAEW,gBAAiB,CAAC;EAC5D,MAAM;IACL2D,qBAAqB;IACrBC,oBAAoB;IACpBC;EACD,CAAC,GAAGvE,WAAW,CAAEU,gBAAiB,CAAC;EAEnC,MAAM8D,2BAA2B,GAAG7D,8BAA8B,CACjEgD,YAAY,EACZ/B,QAAQ,CAACyB,UACV,CAAC;EAED,MAAM1B,GAAG,GAAG8C,yBAAyB,CAAE;IACtCC,YAAYA,CAAEC,WAAW,EAAG;MAC3B,MAAMC,UAAU,GAAGR,kBAAkB,CAAEO,WAAY,CAAC;MACpD,MAAME,IAAI,GAAG,IAAItE,QAAQ,CAAE;QAC1BuE,WAAW,EAAExB,MAAM;QACnByB,QAAQ,EAAE3B,GAAG;QACb4B,UAAU,EAAEJ,UAAU,CAAC3B,KAAK,EAAEgC,MAAM,EAAED,UAAU;QAChDE,OAAO,EAAEN,UAAU,CAAC3B,KAAK,EAAEgC,MAAM,EAAEC;MACpC,CAAE,CAAC;MACH,MAAMC,UAAU,GAAG,IAAI5E,QAAQ,CAAE;QAChCyE,UAAU,EAAEpD,QAAQ,CAACyB,UAAU;QAC/B6B,OAAO,EAAEtD,QAAQ,CAACsB;MACnB,CAAE,CAAC,CAACkC,YAAY,CAAEP,IAAK,CAAC;MACxB,OAAOM,UAAU;IAClB,CAAC;IACDE,WAAWA,CAAEV,WAAW,EAAG;MAC1B,MAAMC,UAAU,GAAGR,kBAAkB,CAAEO,WAAY,CAAC;MACpD1C,kBAAkB,CACjB,IAAI1B,QAAQ,CAAE;QACbuE,WAAW,EAAExB,MAAM;QACnByB,QAAQ,EAAE3B,GAAG;QACb4B,UAAU,EAAEJ,UAAU,CAAC3B,KAAK,EAAEgC,MAAM,EAAED,UAAU;QAChDE,OAAO,EAAEN,UAAU,CAAC3B,KAAK,EAAEgC,MAAM,EAAEC;MACpC,CAAE,CACH,CAAC;IACF,CAAC;IACDI,WAAWA,CAAA,EAAG;MACb;MACA;MACA;MACArD,kBAAkB,CAAIsD,mBAAmB,IACxCA,mBAAmB,EAAET,WAAW,KAAKxB,MAAM,IAC3CiC,mBAAmB,EAAER,QAAQ,KAAK3B,GAAG,GAClC,IAAI,GACJmC,mBACJ,CAAC;IACF,CAAC;IACDC,MAAMA,CAAEb,WAAW,EAAG;MACrB1C,kBAAkB,CAAE,IAAK,CAAC;MAC1B,MAAM2C,UAAU,GAAGR,kBAAkB,CAAEO,WAAY,CAAC;MACpDN,qBAAqB,CAAEM,WAAW,EAAE;QACnC1B,KAAK,EAAE;UACN,GAAG2B,UAAU,CAAC3B,KAAK;UACnBgC,MAAM,EAAE;YACP,GAAGL,UAAU,CAAC3B,KAAK,EAAEgC,MAAM;YAC3BH,WAAW,EAAExB,MAAM;YACnByB,QAAQ,EAAE3B;UACX;QACD;MACD,CAAE,CAAC;MACHmB,uCAAuC,CAAC,CAAC;MACzCD,oBAAoB,CACnB,CAAEK,WAAW,CAAE,EACfhB,YAAY,EACZA,YAAY,EACZa,2BAA2B,CAAElB,MAAM,EAAEF,GAAI,CAC1C,CAAC;IACF;EACD,CAAE,CAAC;EAEH,MAAMqC,aAAa,IAAAtB,qBAAA,GAAGnC,eAAe,EAAE0D,QAAQ,CAAEpC,MAAM,EAAEF,GAAI,CAAC,cAAAe,qBAAA,cAAAA,qBAAA,GAAI,KAAK;EAEvE,oBACCtD,IAAA;IACCc,GAAG,EAAGA,GAAK;IACXoB,SAAS,EAAGpD,IAAI,CAAE,yCAAyC,EAAE;MAC5D,gBAAgB,EAAE8F;IACnB,CAAE;EAAG,CACL,CAAC;AAEJ;AAEA,SAAShB,yBAAyBA,CAAE;EACnCC,YAAY;EACZW,WAAW;EACXC,WAAW;EACXE;AACD,CAAC,EAAG;EACH,MAAM;IAAEG;EAAyB,CAAC,GAAG5F,SAAS,CAAEW,gBAAiB,CAAC;EAClE,OAAOR,WAAW,CAAE;IACnBmF,WAAWA,CAAA,EAAG;MACb,MAAM,CAAEV,WAAW,CAAE,GAAGgB,wBAAwB,CAAC,CAAC;MAClD,IAAKhB,WAAW,IAAID,YAAY,CAAEC,WAAY,CAAC,EAAG;QACjDU,WAAW,CAAEV,WAAY,CAAC;MAC3B;IACD,CAAC;IACDW,WAAWA,CAAA,EAAG;MACbA,WAAW,CAAC,CAAC;IACd,CAAC;IACDE,MAAMA,CAAA,EAAG;MACR,MAAM,CAAEb,WAAW,CAAE,GAAGgB,wBAAwB,CAAC,CAAC;MAClD,IAAKhB,WAAW,IAAID,YAAY,CAAEC,WAAY,CAAC,EAAG;QACjDa,MAAM,CAAEb,WAAY,CAAC;MACtB;IACD;EACD,CAAE,CAAC;AACJ","ignoreList":[]}

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

@@ -0,0 +1,5 @@
+export { GridVisualizer } from './grid-visualizer';
+export { GridItemResizer } from './grid-item-resizer';
+export { GridItemMovers } from './grid-item-movers';
+export { useGridLayoutSync } from './use-grid-layout-sync';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["GridVisualizer","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,SAASA,cAAc,QAAQ,mBAAmB;AAClD,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,iBAAiB,QAAQ,wBAAwB","ignoreList":[]}