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

package/build/layouts/flex.js

@@ -1,108 +1,114 @@
 "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 flex_exports = {};
+__export(flex_exports, {
+  default: () => flex_default
 });
-exports.default = void 0;
-var _i18n = require("@wordpress/i18n");
-var _icons = require("@wordpress/icons");
-var _components = require("@wordpress/components");
-var _utils = require("./utils");
-var _gap = require("../hooks/gap");
-var _components2 = require("../components");
-var _utils2 = require("../hooks/utils");
-var _definitions = require("./definitions");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-// Used with the default, horizontal flex orientation.
+module.exports = __toCommonJS(flex_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_components = require("@wordpress/components");
+var import_utils = require("./utils");
+var import_gap = require("../hooks/gap");
+var import_components2 = require("../components");
+var import_utils2 = require("../hooks/utils");
+var import_definitions = require("./definitions");
 const justifyContentMap = {
-  left: 'flex-start',
-  right: 'flex-end',
-  center: 'center',
-  'space-between': 'space-between'
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  "space-between": "space-between"
 };
-
-// Used with the vertical (column) flex orientation.
 const alignItemsMap = {
-  left: 'flex-start',
-  right: 'flex-end',
-  center: 'center',
-  stretch: 'stretch'
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  stretch: "stretch"
 };
 const verticalAlignmentMap = {
-  top: 'flex-start',
-  center: 'center',
-  bottom: 'flex-end',
-  stretch: 'stretch',
-  'space-between': 'space-between'
+  top: "flex-start",
+  center: "center",
+  bottom: "flex-end",
+  stretch: "stretch",
+  "space-between": "space-between"
 };
 const defaultAlignments = {
-  horizontal: 'center',
-  vertical: 'top'
+  horizontal: "center",
+  vertical: "top"
 };
-const flexWrapOptions = ['wrap', 'nowrap'];
-var _default = exports.default = {
-  name: 'flex',
-  label: (0, _i18n.__)('Flex'),
+const flexWrapOptions = ["wrap", "nowrap"];
+var flex_default = {
+  name: "flex",
+  label: (0, import_i18n.__)("Flex"),
   inspectorControls: function FlexLayoutInspectorControls({
     layout = {},
     onChange,
     layoutBlockSupport = {}
   }) {
-    const {
-      allowOrientation = true,
-      allowJustification = true
-    } = layoutBlockSupport;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
-        children: [allowJustification && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexLayoutJustifyContentControl, {
-            layout: layout,
-            onChange: onChange
-          })
-        }), allowOrientation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OrientationControl, {
-            layout: layout,
-            onChange: onChange
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexWrapControl, {
-        layout: layout,
-        onChange: onChange
-      })]
-    });
+    const { allowOrientation = true, allowJustification = true } = layoutBlockSupport;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { children: [
+        allowJustification && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          FlexLayoutJustifyContentControl,
+          {
+            layout,
+            onChange
+          }
+        ) }),
+        allowOrientation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          OrientationControl,
+          {
+            layout,
+            onChange
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FlexWrapControl, { layout, onChange })
+    ] });
   },
   toolBarControls: function FlexLayoutToolbarControls({
     layout = {},
     onChange,
     layoutBlockSupport
   }) {
-    const {
-      allowVerticalAlignment = true,
-      allowJustification = true
-    } = layoutBlockSupport;
+    const { allowVerticalAlignment = true, allowJustification = true } = layoutBlockSupport;
     if (!allowJustification && !allowVerticalAlignment) {
       return null;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components2.BlockControls, {
-      group: "block",
-      __experimentalShareWithChildBlocks: true,
-      children: [allowJustification && /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexLayoutJustifyContentControl, {
-        layout: layout,
-        onChange: onChange,
-        isToolbar: true
-      }), allowVerticalAlignment && /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexLayoutVerticalAlignmentControl, {
-        layout: layout,
-        onChange: onChange
-      })]
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components2.BlockControls, { group: "block", __experimentalShareWithChildBlocks: true, children: [
+      allowJustification && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        FlexLayoutJustifyContentControl,
+        {
+          layout,
+          onChange,
+          isToolbar: true
+        }
+      ),
+      allowVerticalAlignment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        FlexLayoutVerticalAlignmentControl,
+        {
+          layout,
+          onChange
+        }
+      )
+    ] });
   },
   getLayoutStyle: function getLayoutStyle({
     selector,
@@ -110,25 +116,20 @@ var _default = exports.default = {
     style,
     blockName,
     hasBlockGapSupport,
-    layoutDefinitions = _definitions.LAYOUT_DEFINITIONS
+    layoutDefinitions = import_definitions.LAYOUT_DEFINITIONS
   }) {
-    const {
-      orientation = 'horizontal'
-    } = layout;
-
-    // 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;
+    const { orientation = "horizontal" } = layout;
+    const blockGapValue = style?.spacing?.blockGap && !(0, import_utils2.shouldSkipSerialization)(blockName, "spacing", "blockGap") ? (0, import_gap.getGapCSSValue)(style?.spacing?.blockGap, "0.5em") : void 0;
     const justifyContent = justifyContentMap[layout.justifyContent];
-    const flexWrap = flexWrapOptions.includes(layout.flexWrap) ? layout.flexWrap : 'wrap';
+    const flexWrap = flexWrapOptions.includes(layout.flexWrap) ? layout.flexWrap : "wrap";
     const verticalAlignment = verticalAlignmentMap[layout.verticalAlignment];
     const alignItems = alignItemsMap[layout.justifyContent] || alignItemsMap.left;
-    let output = '';
+    let output = "";
     const rules = [];
-    if (flexWrap && flexWrap !== 'wrap') {
+    if (flexWrap && flexWrap !== "wrap") {
       rules.push(`flex-wrap: ${flexWrap}`);
     }
-    if (orientation === 'horizontal') {
+    if (orientation === "horizontal") {
       if (verticalAlignment) {
         rules.push(`align-items: ${verticalAlignment}`);
       }
@@ -139,201 +140,211 @@ var _default = exports.default = {
       if (verticalAlignment) {
         rules.push(`justify-content: ${verticalAlignment}`);
       }
-      rules.push('flex-direction: column');
+      rules.push("flex-direction: column");
       rules.push(`align-items: ${alignItems}`);
     }
     if (rules.length) {
-      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, 'flex', blockGapValue);
+      output += (0, import_utils.getBlockGapCSS)(
+        selector,
+        layoutDefinitions,
+        "flex",
+        blockGapValue
+      );
     }
     return output;
   },
   getOrientation(layout) {
-    const {
-      orientation = 'horizontal'
-    } = layout;
+    const { orientation = "horizontal" } = layout;
     return orientation;
   },
   getAlignments() {
     return [];
   }
 };
-function FlexLayoutVerticalAlignmentControl({
-  layout,
-  onChange
-}) {
-  const {
-    orientation = 'horizontal'
-  } = layout;
-  const defaultVerticalAlignment = orientation === 'horizontal' ? defaultAlignments.horizontal : defaultAlignments.vertical;
-  const {
-    verticalAlignment = defaultVerticalAlignment
-  } = layout;
-  const onVerticalAlignmentChange = value => {
+function FlexLayoutVerticalAlignmentControl({ layout, onChange }) {
+  const { orientation = "horizontal" } = layout;
+  const defaultVerticalAlignment = orientation === "horizontal" ? defaultAlignments.horizontal : defaultAlignments.vertical;
+  const { verticalAlignment = defaultVerticalAlignment } = layout;
+  const onVerticalAlignmentChange = (value) => {
     onChange({
       ...layout,
       verticalAlignment: value
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components2.BlockVerticalAlignmentControl, {
-    onChange: onVerticalAlignmentChange,
-    value: verticalAlignment,
-    controls: orientation === 'horizontal' ? ['top', 'center', 'bottom', 'stretch'] : ['top', 'center', 'bottom', 'space-between']
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components2.BlockVerticalAlignmentControl,
+    {
+      onChange: onVerticalAlignmentChange,
+      value: verticalAlignment,
+      controls: orientation === "horizontal" ? ["top", "center", "bottom", "stretch"] : ["top", "center", "bottom", "space-between"]
+    }
+  );
 }
 const POPOVER_PROPS = {
-  placement: 'bottom-start'
+  placement: "bottom-start"
 };
 function FlexLayoutJustifyContentControl({
   layout,
   onChange,
   isToolbar = false
 }) {
-  const {
-    justifyContent = 'left',
-    orientation = 'horizontal'
-  } = layout;
-  const onJustificationChange = value => {
+  const { justifyContent = "left", orientation = "horizontal" } = layout;
+  const onJustificationChange = (value) => {
     onChange({
       ...layout,
       justifyContent: value
     });
   };
-  const allowedControls = ['left', 'center', 'right'];
-  if (orientation === 'horizontal') {
-    allowedControls.push('space-between');
+  const allowedControls = ["left", "center", "right"];
+  if (orientation === "horizontal") {
+    allowedControls.push("space-between");
   } else {
-    allowedControls.push('stretch');
+    allowedControls.push("stretch");
   }
   if (isToolbar) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components2.JustifyContentControl, {
-      allowedControls: allowedControls,
-      value: justifyContent,
-      onChange: onJustificationChange,
-      popoverProps: POPOVER_PROPS
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components2.JustifyContentControl,
+      {
+        allowedControls,
+        value: justifyContent,
+        onChange: onJustificationChange,
+        popoverProps: POPOVER_PROPS
+      }
+    );
   }
-  const justificationOptions = [{
-    value: 'left',
-    icon: _icons.justifyLeft,
-    label: (0, _i18n.__)('Justify items left')
-  }, {
-    value: 'center',
-    icon: _icons.justifyCenter,
-    label: (0, _i18n.__)('Justify items center')
-  }, {
-    value: 'right',
-    icon: _icons.justifyRight,
-    label: (0, _i18n.__)('Justify items right')
-  }];
-  if (orientation === 'horizontal') {
+  const justificationOptions = [
+    {
+      value: "left",
+      icon: import_icons.justifyLeft,
+      label: (0, import_i18n.__)("Justify items left")
+    },
+    {
+      value: "center",
+      icon: import_icons.justifyCenter,
+      label: (0, import_i18n.__)("Justify items center")
+    },
+    {
+      value: "right",
+      icon: import_icons.justifyRight,
+      label: (0, import_i18n.__)("Justify items right")
+    }
+  ];
+  if (orientation === "horizontal") {
     justificationOptions.push({
-      value: 'space-between',
-      icon: _icons.justifySpaceBetween,
-      label: (0, _i18n.__)('Space between items')
+      value: "space-between",
+      icon: import_icons.justifySpaceBetween,
+      label: (0, import_i18n.__)("Space between items")
     });
   } else {
     justificationOptions.push({
-      value: 'stretch',
-      icon: _icons.justifyStretch,
-      label: (0, _i18n.__)('Stretch items')
+      value: "stretch",
+      icon: import_icons.justifyStretch,
+      label: (0, import_i18n.__)("Stretch items")
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
-    __next40pxDefaultSize: true,
-    __nextHasNoMarginBottom: true,
-    label: (0, _i18n.__)('Justification'),
-    value: justifyContent,
-    onChange: onJustificationChange,
-    className: "block-editor-hooks__flex-layout-justification-controls",
-    children: justificationOptions.map(({
-      value,
-      icon,
-      label
-    }) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
-        value: value,
-        icon: icon,
-        label: label
-      }, value);
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToggleGroupControl,
+    {
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      label: (0, import_i18n.__)("Justification"),
+      value: justifyContent,
+      onChange: onJustificationChange,
+      className: "block-editor-hooks__flex-layout-justification-controls",
+      children: justificationOptions.map(({ value, icon, label }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToggleGroupControlOptionIcon,
+          {
+            value,
+            icon,
+            label
+          },
+          value
+        );
+      })
+    }
+  );
 }
-function FlexWrapControl({
-  layout,
-  onChange
-}) {
-  const {
-    flexWrap = 'wrap'
-  } = layout;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-    __nextHasNoMarginBottom: true,
-    label: (0, _i18n.__)('Allow to wrap to multiple lines'),
-    onChange: value => {
-      onChange({
-        ...layout,
-        flexWrap: value ? 'wrap' : 'nowrap'
-      });
-    },
-    checked: flexWrap === 'wrap'
-  });
+function FlexWrapControl({ layout, onChange }) {
+  const { flexWrap = "wrap" } = layout;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.ToggleControl,
+    {
+      __nextHasNoMarginBottom: true,
+      label: (0, import_i18n.__)("Allow to wrap to multiple lines"),
+      onChange: (value) => {
+        onChange({
+          ...layout,
+          flexWrap: value ? "wrap" : "nowrap"
+        });
+      },
+      checked: flexWrap === "wrap"
+    }
+  );
 }
-function OrientationControl({
-  layout,
-  onChange
-}) {
+function OrientationControl({ layout, onChange }) {
   const {
-    orientation = 'horizontal',
+    orientation = "horizontal",
     verticalAlignment,
     justifyContent
   } = layout;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
-    __next40pxDefaultSize: true,
-    __nextHasNoMarginBottom: true,
-    className: "block-editor-hooks__flex-layout-orientation-controls",
-    label: (0, _i18n.__)('Orientation'),
-    value: orientation,
-    onChange: value => {
-      // Make sure the vertical alignment and justification are compatible with the new orientation.
-      let newVerticalAlignment = verticalAlignment;
-      let newJustification = justifyContent;
-      if (value === 'horizontal') {
-        if (verticalAlignment === 'space-between') {
-          newVerticalAlignment = 'center';
-        }
-        if (justifyContent === 'stretch') {
-          newJustification = 'left';
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalToggleGroupControl,
+    {
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      className: "block-editor-hooks__flex-layout-orientation-controls",
+      label: (0, import_i18n.__)("Orientation"),
+      value: orientation,
+      onChange: (value) => {
+        let newVerticalAlignment = verticalAlignment;
+        let newJustification = justifyContent;
+        if (value === "horizontal") {
+          if (verticalAlignment === "space-between") {
+            newVerticalAlignment = "center";
+          }
+          if (justifyContent === "stretch") {
+            newJustification = "left";
+          }
+        } else {
+          if (verticalAlignment === "stretch") {
+            newVerticalAlignment = "top";
+          }
+          if (justifyContent === "space-between") {
+            newJustification = "left";
+          }
         }
-      } else {
-        if (verticalAlignment === 'stretch') {
-          newVerticalAlignment = 'top';
-        }
-        if (justifyContent === 'space-between') {
-          newJustification = 'left';
-        }
-      }
-      return onChange({
-        ...layout,
-        orientation: value,
-        verticalAlignment: newVerticalAlignment,
-        justifyContent: newJustification
-      });
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
-      icon: _icons.arrowRight,
-      value: "horizontal",
-      label: (0, _i18n.__)('Horizontal')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
-      icon: _icons.arrowDown,
-      value: "vertical",
-      label: (0, _i18n.__)('Vertical')
-    })]
-  });
+        return onChange({
+          ...layout,
+          orientation: value,
+          verticalAlignment: newVerticalAlignment,
+          justifyContent: newJustification
+        });
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToggleGroupControlOptionIcon,
+          {
+            icon: import_icons.arrowRight,
+            value: "horizontal",
+            label: (0, import_i18n.__)("Horizontal")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToggleGroupControlOptionIcon,
+          {
+            icon: import_icons.arrowDown,
+            value: "vertical",
+            label: (0, import_i18n.__)("Vertical")
+          }
+        )
+      ]
+    }
+  );
 }
-//# sourceMappingURL=flex.js.map
+//# sourceMappingURL=flex.js.map