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

package/build/layouts/grid.js

@@ -1,28 +1,37 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var grid_exports = {};
+__export(grid_exports, {
+  default: () => grid_default
 });
-exports.default = void 0;
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _utils = require("./utils");
-var _gap = require("../hooks/gap");
-var _utils2 = require("../hooks/utils");
-var _definitions = require("./definitions");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(grid_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_utils = require("./utils");
+var import_gap = require("../hooks/gap");
+var import_utils2 = require("../hooks/utils");
+var import_definitions = require("./definitions");
 const RANGE_CONTROL_MAX_VALUES = {
   px: 600,
-  '%': 100,
+  "%": 100,
   vw: 100,
   vh: 100,
   em: 38,
@@ -50,51 +59,48 @@ const RANGE_CONTROL_MAX_VALUES = {
   lvmax: 100,
   dvmax: 100
 };
-const units = [{
-  value: 'px',
-  label: 'px',
-  default: 0
-}, {
-  value: 'rem',
-  label: 'rem',
-  default: 0
-}, {
-  value: 'em',
-  label: 'em',
-  default: 0
-}];
-var _default = exports.default = {
-  name: 'grid',
-  label: (0, _i18n.__)('Grid'),
+const units = [
+  { value: "px", label: "px", default: 0 },
+  { value: "rem", label: "rem", default: 0 },
+  { value: "em", label: "em", default: 0 }
+];
+var grid_default = {
+  name: "grid",
+  label: (0, import_i18n.__)("Grid"),
   inspectorControls: function GridLayoutInspectorControls({
     layout = {},
     onChange,
     layoutBlockSupport = {}
   }) {
-    const {
-      allowSizingOnChildren = false
-    } = layoutBlockSupport;
-
-    // In the experiment we want to also show column control in Auto mode, and
-    // the minimum width control in Manual mode.
+    const { allowSizingOnChildren = false } = layoutBlockSupport;
     const showColumnsControl = window.__experimentalEnableGridInteractivity || !!layout?.columnCount;
     const showMinWidthControl = window.__experimentalEnableGridInteractivity || !layout?.columnCount;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridLayoutTypeControl, {
-        layout: layout,
-        onChange: onChange
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-        spacing: 4,
-        children: [showColumnsControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLayoutColumnsAndRowsControl, {
-          layout: layout,
-          onChange: onChange,
-          allowSizingOnChildren: allowSizingOnChildren
-        }), showMinWidthControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLayoutMinimumWidthControl, {
-          layout: layout,
-          onChange: onChange
-        })]
-      })]
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        GridLayoutTypeControl,
+        {
+          layout,
+          onChange
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+        showColumnsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          GridLayoutColumnsAndRowsControl,
+          {
+            layout,
+            onChange,
+            allowSizingOnChildren
+          }
+        ),
+        showMinWidthControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          GridLayoutMinimumWidthControl,
+          {
+            layout,
+            onChange
+          }
+        )
+      ] })
+    ] });
   },
   toolBarControls: function GridLayoutToolbarControls() {
     return null;
@@ -105,95 +111,91 @@ var _default = exports.default = {
     style,
     blockName,
     hasBlockGapSupport,
-    layoutDefinitions = _definitions.LAYOUT_DEFINITIONS
+    layoutDefinitions = import_definitions.LAYOUT_DEFINITIONS
   }) {
     const {
       minimumColumnWidth = null,
       columnCount = null,
       rowCount = null
     } = layout;
-
-    // Check that the grid layout attributes are of the correct type, so that we don't accidentally
-    // write code that stores a string attribute instead of a number.
-    if (process.env.NODE_ENV === 'development') {
-      if (minimumColumnWidth && typeof minimumColumnWidth !== 'string') {
-        throw new Error('minimumColumnWidth must be a string');
+    if (process.env.NODE_ENV === "development") {
+      if (minimumColumnWidth && typeof minimumColumnWidth !== "string") {
+        throw new Error("minimumColumnWidth must be a string");
       }
-      if (columnCount && typeof columnCount !== 'number') {
-        throw new Error('columnCount must be a number');
+      if (columnCount && typeof columnCount !== "number") {
+        throw new Error("columnCount must be a number");
       }
-      if (rowCount && typeof rowCount !== 'number') {
-        throw new Error('rowCount must be a number');
+      if (rowCount && typeof rowCount !== "number") {
+        throw new Error("rowCount must be a number");
       }
     }
-
-    // If a block's block.json skips serialization for spacing or spacing.blockGap,
-    // don't apply the user-defined value to the styles.
-    const blockGapValue = style?.spacing?.blockGap && !(0, _utils2.shouldSkipSerialization)(blockName, 'spacing', 'blockGap') ? (0, _gap.getGapCSSValue)(style?.spacing?.blockGap, '0.5em') : undefined;
-    let output = '';
+    const blockGapValue = style?.spacing?.blockGap && !(0, import_utils2.shouldSkipSerialization)(blockName, "spacing", "blockGap") ? (0, import_gap.getGapCSSValue)(style?.spacing?.blockGap, "0.5em") : void 0;
+    let output = "";
     const rules = [];
     if (minimumColumnWidth && columnCount > 0) {
-      const maxValue = `max(${minimumColumnWidth}, ( 100% - (${blockGapValue || '1.2rem'}*${columnCount - 1}) ) / ${columnCount})`;
-      rules.push(`grid-template-columns: repeat(auto-fill, minmax(${maxValue}, 1fr))`, `container-type: inline-size`);
+      const maxValue = `max(${minimumColumnWidth}, ( 100% - (${blockGapValue || "1.2rem"}*${columnCount - 1}) ) / ${columnCount})`;
+      rules.push(
+        `grid-template-columns: repeat(auto-fill, minmax(${maxValue}, 1fr))`,
+        `container-type: inline-size`
+      );
       if (rowCount) {
-        rules.push(`grid-template-rows: repeat(${rowCount}, minmax(1rem, auto))`);
+        rules.push(
+          `grid-template-rows: repeat(${rowCount}, minmax(1rem, auto))`
+        );
       }
     } else if (columnCount) {
-      rules.push(`grid-template-columns: repeat(${columnCount}, minmax(0, 1fr))`);
+      rules.push(
+        `grid-template-columns: repeat(${columnCount}, minmax(0, 1fr))`
+      );
       if (rowCount) {
-        rules.push(`grid-template-rows: repeat(${rowCount}, minmax(1rem, auto))`);
+        rules.push(
+          `grid-template-rows: repeat(${rowCount}, minmax(1rem, auto))`
+        );
       }
     } else {
-      rules.push(`grid-template-columns: repeat(auto-fill, minmax(min(${minimumColumnWidth || '12rem'}, 100%), 1fr))`, 'container-type: inline-size');
+      rules.push(
+        `grid-template-columns: repeat(auto-fill, minmax(min(${minimumColumnWidth || "12rem"}, 100%), 1fr))`,
+        "container-type: inline-size"
+      );
     }
     if (rules.length) {
-      // Reason to disable: the extra line breaks added by prettier mess with the unit tests.
-      // eslint-disable-next-line prettier/prettier
-      output = `${(0, _utils.appendSelectors)(selector)} { ${rules.join('; ')}; }`;
+      output = `${(0, import_utils.appendSelectors)(selector)} { ${rules.join(
+        "; "
+      )}; }`;
     }
-
-    // Output blockGap styles based on rules contained in layout definitions in theme.json.
     if (hasBlockGapSupport && blockGapValue) {
-      output += (0, _utils.getBlockGapCSS)(selector, layoutDefinitions, 'grid', blockGapValue);
+      output += (0, import_utils.getBlockGapCSS)(
+        selector,
+        layoutDefinitions,
+        "grid",
+        blockGapValue
+      );
     }
     return output;
   },
   getOrientation() {
-    return 'horizontal';
+    return "horizontal";
   },
   getAlignments() {
     return [];
   }
-}; // Enables setting minimum width of grid items.
-function GridLayoutMinimumWidthControl({
-  layout,
-  onChange
-}) {
-  const {
-    minimumColumnWidth,
-    columnCount,
-    isManualPlacement
-  } = layout;
-  const defaultValue = isManualPlacement || columnCount ? null : '12rem';
+};
+function GridLayoutMinimumWidthControl({ layout, onChange }) {
+  const { minimumColumnWidth, columnCount, isManualPlacement } = layout;
+  const defaultValue = isManualPlacement || columnCount ? null : "12rem";
   const value = minimumColumnWidth || defaultValue;
-  const [quantity, unit = 'rem'] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);
-  const handleSliderChange = next => {
+  const [quantity, unit = "rem"] = (0, import_components.__experimentalParseQuantityAndUnitFromRawValue)(value);
+  const handleSliderChange = (next) => {
     onChange({
       ...layout,
-      minimumColumnWidth: [next, unit].join('')
+      minimumColumnWidth: [next, unit].join("")
     });
   };
-
-  // Mostly copied from HeightControl.
-  const handleUnitChange = newUnit => {
-    // Attempt to smooth over differences between currentUnit and newUnit.
-    // This should slightly improve the experience of switching between unit types.
+  const handleUnitChange = (newUnit) => {
     let newValue;
-    if (['em', 'rem'].includes(newUnit) && unit === 'px') {
-      // Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
+    if (["em", "rem"].includes(newUnit) && unit === "px") {
       newValue = (quantity / 16).toFixed(2) + newUnit;
-    } else if (['em', 'rem'].includes(unit) && newUnit === 'px') {
-      // Convert to pixel value assuming a root size of 16px.
+    } else if (["em", "rem"].includes(unit) && newUnit === "px") {
       newValue = Math.round(quantity * 16) + newUnit;
     }
     onChange({
@@ -201,33 +203,30 @@ function GridLayoutMinimumWidthControl({
       minimumColumnWidth: newValue
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
-    className: "block-editor-hooks__grid-layout-minimum-width-control",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
-      as: "legend",
-      children: (0, _i18n.__)('Minimum column width')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
-      gap: 4,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-        isBlock: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "block-editor-hooks__grid-layout-minimum-width-control", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { as: "legend", children: (0, import_i18n.__)("Minimum column width") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { gap: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalUnitControl,
+        {
           size: "__unstable-large",
-          onChange: newValue => {
+          onChange: (newValue) => {
             onChange({
               ...layout,
-              minimumColumnWidth: newValue === '' ? undefined : newValue
+              minimumColumnWidth: newValue === "" ? void 0 : newValue
             });
           },
           onUnitChange: handleUnitChange,
-          value: value,
-          units: units,
+          value,
+          units,
           min: 0,
-          label: (0, _i18n.__)('Minimum column width'),
+          label: (0, import_i18n.__)("Minimum column width"),
           hideLabelFromVision: true
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-        isBlock: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.RangeControl,
+        {
           __next40pxDefaultSize: true,
           __nextHasNoMarginBottom: true,
           onChange: handleSliderChange,
@@ -235,148 +234,147 @@ function GridLayoutMinimumWidthControl({
           min: 0,
           max: RANGE_CONTROL_MAX_VALUES[unit] || 600,
           withInputField: false,
-          label: (0, _i18n.__)('Minimum column width'),
+          label: (0, import_i18n.__)("Minimum column width"),
           hideLabelFromVision: true
-        })
-      })]
-    })]
-  });
+        }
+      ) })
+    ] })
+  ] });
 }
-
-// Enables setting number of grid columns
 function GridLayoutColumnsAndRowsControl({
   layout,
   onChange,
   allowSizingOnChildren
 }) {
-  // If the grid interactivity experiment is enabled, allow unsetting the column count.
-  const defaultColumnCount = window.__experimentalEnableGridInteractivity ? undefined : 3;
+  const defaultColumnCount = window.__experimentalEnableGridInteractivity ? void 0 : 3;
   const {
     columnCount = defaultColumnCount,
     rowCount,
     isManualPlacement
   } = layout;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
-      className: "block-editor-hooks__grid-layout-columns-and-rows-controls",
-      children: [(!window.__experimentalEnableGridInteractivity || !isManualPlacement) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
-        as: "legend",
-        children: (0, _i18n.__)('Columns')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
-        gap: 4,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-          isBlock: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
-            size: "__unstable-large",
-            onChange: value => {
-              if (window.__experimentalEnableGridInteractivity) {
-                // Allow unsetting the column count when in auto mode.
-                const defaultNewColumnCount = isManualPlacement ? 1 : undefined;
-                const newColumnCount = value === '' || value === '0' ? defaultNewColumnCount : parseInt(value, 10);
-                onChange({
-                  ...layout,
-                  columnCount: newColumnCount
-                });
-              } else {
-                // Don't allow unsetting the column count.
-                const newColumnCount = value === '' || value === '0' ? 1 : parseInt(value, 10);
-                onChange({
-                  ...layout,
-                  columnCount: newColumnCount
-                });
-              }
-            },
-            value: columnCount,
-            min: 1,
-            label: (0, _i18n.__)('Columns'),
-            hideLabelFromVision: !window.__experimentalEnableGridInteractivity || !isManualPlacement
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-          isBlock: true,
-          children: window.__experimentalEnableGridInteractivity && allowSizingOnChildren && isManualPlacement ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
-            size: "__unstable-large",
-            onChange: value => {
-              // Don't allow unsetting the row count.
-              const newRowCount = value === '' || value === '0' ? 1 : parseInt(value, 10);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "block-editor-hooks__grid-layout-columns-and-rows-controls", children: [
+    (!window.__experimentalEnableGridInteractivity || !isManualPlacement) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { as: "legend", children: (0, import_i18n.__)("Columns") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { gap: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalNumberControl,
+        {
+          size: "__unstable-large",
+          onChange: (value) => {
+            if (window.__experimentalEnableGridInteractivity) {
+              const defaultNewColumnCount = isManualPlacement ? 1 : void 0;
+              const newColumnCount = value === "" || value === "0" ? defaultNewColumnCount : parseInt(value, 10);
+              onChange({
+                ...layout,
+                columnCount: newColumnCount
+              });
+            } else {
+              const newColumnCount = value === "" || value === "0" ? 1 : parseInt(value, 10);
               onChange({
                 ...layout,
-                rowCount: newRowCount
+                columnCount: newColumnCount
               });
-            },
-            value: rowCount,
-            min: 1,
-            label: (0, _i18n.__)('Rows')
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
-            __next40pxDefaultSize: true,
-            __nextHasNoMarginBottom: true,
-            value: columnCount !== null && columnCount !== void 0 ? columnCount : 1,
-            onChange: value => onChange({
+            }
+          },
+          value: columnCount,
+          min: 1,
+          label: (0, import_i18n.__)("Columns"),
+          hideLabelFromVision: !window.__experimentalEnableGridInteractivity || !isManualPlacement
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: window.__experimentalEnableGridInteractivity && allowSizingOnChildren && isManualPlacement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalNumberControl,
+        {
+          size: "__unstable-large",
+          onChange: (value) => {
+            const newRowCount = value === "" || value === "0" ? 1 : parseInt(value, 10);
+            onChange({
               ...layout,
-              columnCount: value === '' || value === '0' ? 1 : value
-            }),
-            min: 1,
-            max: 16,
-            withInputField: false,
-            label: (0, _i18n.__)('Columns'),
-            hideLabelFromVision: true
-          })
-        })]
-      })]
-    })
-  });
+              rowCount: newRowCount
+            });
+          },
+          value: rowCount,
+          min: 1,
+          label: (0, import_i18n.__)("Rows")
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.RangeControl,
+        {
+          __next40pxDefaultSize: true,
+          __nextHasNoMarginBottom: true,
+          value: columnCount ?? 1,
+          onChange: (value) => onChange({
+            ...layout,
+            columnCount: value === "" || value === "0" ? 1 : value
+          }),
+          min: 1,
+          max: 16,
+          withInputField: false,
+          label: (0, import_i18n.__)("Columns"),
+          hideLabelFromVision: true
+        }
+      ) })
+    ] })
+  ] }) });
 }
-
-// Enables switching between grid types
-function GridLayoutTypeControl({
-  layout,
-  onChange
-}) {
-  const {
-    columnCount,
-    rowCount,
-    minimumColumnWidth,
-    isManualPlacement
-  } = layout;
-
-  /**
-   * When switching, temporarily save any custom values set on the
-   * previous type so we can switch back without loss.
-   */
-  const [tempColumnCount, setTempColumnCount] = (0, _element.useState)(columnCount || 3);
-  const [tempRowCount, setTempRowCount] = (0, _element.useState)(rowCount);
-  const [tempMinimumColumnWidth, setTempMinimumColumnWidth] = (0, _element.useState)(minimumColumnWidth || '12rem');
-  const gridPlacement = isManualPlacement || !!columnCount && !window.__experimentalEnableGridInteractivity ? 'manual' : 'auto';
-  const onChangeType = value => {
-    if (value === 'manual') {
-      setTempMinimumColumnWidth(minimumColumnWidth || '12rem');
+function GridLayoutTypeControl({ layout, onChange }) {
+  const { columnCount, rowCount, minimumColumnWidth, isManualPlacement } = layout;
+  const [tempColumnCount, setTempColumnCount] = (0, import_element.useState)(
+    columnCount || 3
+  );
+  const [tempRowCount, setTempRowCount] = (0, import_element.useState)(rowCount);
+  const [tempMinimumColumnWidth, setTempMinimumColumnWidth] = (0, import_element.useState)(
+    minimumColumnWidth || "12rem"
+  );
+  const gridPlacement = isManualPlacement || !!columnCount && !window.__experimentalEnableGridInteractivity ? "manual" : "auto";
+  const onChangeType = (value) => {
+    if (value === "manual") {
+      setTempMinimumColumnWidth(minimumColumnWidth || "12rem");
     } else {
       setTempColumnCount(columnCount || 3);
       setTempRowCount(rowCount);
     }
     onChange({
       ...layout,
-      columnCount: value === 'manual' ? tempColumnCount : null,
-      rowCount: value === 'manual' && window.__experimentalEnableGridInteractivity ? tempRowCount : undefined,
-      isManualPlacement: value === 'manual' && window.__experimentalEnableGridInteractivity ? true : undefined,
-      minimumColumnWidth: value === 'auto' ? tempMinimumColumnWidth : null
+      columnCount: value === "manual" ? tempColumnCount : null,
+      rowCount: value === "manual" && window.__experimentalEnableGridInteractivity ? tempRowCount : void 0,
+      isManualPlacement: value === "manual" && window.__experimentalEnableGridInteractivity ? true : void 0,
+      minimumColumnWidth: value === "auto" ? tempMinimumColumnWidth : null
     });
   };
-  const helpText = gridPlacement === 'manual' ? (0, _i18n.__)('Grid items can be manually placed in any position on the grid.') : (0, _i18n.__)('Grid items are placed automatically depending on their order.');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
-    __next40pxDefaultSize: true,
-    __nextHasNoMarginBottom: true,
-    label: (0, _i18n.__)('Grid item position'),
-    value: gridPlacement,
-    onChange: onChangeType,
-    isBlock: true,
-    help: window.__experimentalEnableGridInteractivity ? helpText : undefined,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-      value: "auto",
-      label: (0, _i18n.__)('Auto')
-    }, "auto"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-      value: "manual",
-      label: (0, _i18n.__)('Manual')
-    }, "manual")]
-  });
+  const helpText = gridPlacement === "manual" ? (0, import_i18n.__)(
+    "Grid items can be manually placed in any position on the grid."
+  ) : (0, import_i18n.__)(
+    "Grid items are placed automatically depending on their order."
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalToggleGroupControl,
+    {
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      label: (0, import_i18n.__)("Grid item position"),
+      value: gridPlacement,
+      onChange: onChangeType,
+      isBlock: true,
+      help: window.__experimentalEnableGridInteractivity ? helpText : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToggleGroupControlOption,
+          {
+            value: "auto",
+            label: (0, import_i18n.__)("Auto")
+          },
+          "auto"
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToggleGroupControlOption,
+          {
+            value: "manual",
+            label: (0, import_i18n.__)("Manual")
+          },
+          "manual"
+        )
+      ]
+    }
+  );
 }
-//# sourceMappingURL=grid.js.map
+//# sourceMappingURL=grid.js.map