@wordpress/block-editor 15.9.0 → 15.9.1-next.738bb1424.0

package/build/components/contrast-checker/index.cjs

@@ -0,0 +1,138 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/contrast-checker/index.js
+var contrast_checker_exports = {};
+__export(contrast_checker_exports, {
+  default: () => contrast_checker_default
+});
+module.exports = __toCommonJS(contrast_checker_exports);
+var import_a11y = __toESM(require("colord/plugins/a11y"), 1);
+var import_names = __toESM(require("colord/plugins/names"), 1);
+var import_colord = require("colord");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_a11y2 = require("@wordpress/a11y");
+var import_jsx_runtime = require("react/jsx-runtime");
+(0, import_colord.extend)([import_names.default, import_a11y.default]);
+function ContrastChecker({
+  backgroundColor,
+  fallbackBackgroundColor,
+  fallbackTextColor,
+  fallbackLinkColor,
+  fontSize,
+  // Font size value in pixels.
+  isLargeText,
+  textColor,
+  linkColor,
+  enableAlphaChecker = false
+}) {
+  const currentBackgroundColor = backgroundColor || fallbackBackgroundColor;
+  if (!currentBackgroundColor) {
+    return null;
+  }
+  const currentTextColor = textColor || fallbackTextColor;
+  const currentLinkColor = linkColor || fallbackLinkColor;
+  if (!currentTextColor && !currentLinkColor) {
+    return null;
+  }
+  const textColors = [
+    {
+      color: currentTextColor,
+      description: (0, import_i18n.__)("text color")
+    },
+    {
+      color: currentLinkColor,
+      description: (0, import_i18n.__)("link color")
+    }
+  ];
+  const colordBackgroundColor = (0, import_colord.colord)(currentBackgroundColor);
+  const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;
+  const backgroundColorBrightness = colordBackgroundColor.brightness();
+  const isReadableOptions = {
+    level: "AA",
+    size: isLargeText || isLargeText !== false && fontSize >= 24 ? "large" : "small"
+  };
+  let message = "";
+  let speakMessage = "";
+  for (const item of textColors) {
+    if (!item.color) {
+      continue;
+    }
+    const colordTextColor = (0, import_colord.colord)(item.color);
+    const isColordTextReadable = colordTextColor.isReadable(
+      colordBackgroundColor,
+      isReadableOptions
+    );
+    const textHasTransparency = colordTextColor.alpha() < 1;
+    if (!isColordTextReadable) {
+      if (backgroundColorHasTransparency || textHasTransparency) {
+        continue;
+      }
+      message = backgroundColorBrightness < colordTextColor.brightness() ? (0, import_i18n.sprintf)(
+        // translators: %s is a type of text color, e.g., "text color" or "link color".
+        (0, import_i18n.__)(
+          "This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s."
+        ),
+        item.description
+      ) : (0, import_i18n.sprintf)(
+        // translators: %s is a type of text color, e.g., "text color" or "link color".
+        (0, import_i18n.__)(
+          "This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s."
+        ),
+        item.description
+      );
+      speakMessage = (0, import_i18n.__)(
+        "This color combination may be hard for people to read."
+      );
+      break;
+    }
+    if (textHasTransparency && enableAlphaChecker) {
+      message = (0, import_i18n.__)("Transparent text may be hard for people to read.");
+      speakMessage = (0, import_i18n.__)(
+        "Transparent text may be hard for people to read."
+      );
+    }
+  }
+  if (!message) {
+    return null;
+  }
+  (0, import_a11y2.speak)(speakMessage);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-contrast-checker", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Notice,
+    {
+      spokenMessage: null,
+      status: "warning",
+      isDismissible: false,
+      children: message
+    }
+  ) });
+}
+var contrast_checker_default = ContrastChecker;
+//# sourceMappingURL=index.cjs.map

package/build/components/convert-to-group-buttons/index.cjs

@@ -0,0 +1,118 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/convert-to-group-buttons/index.js
+var convert_to_group_buttons_exports = {};
+__export(convert_to_group_buttons_exports, {
+  BlockGroupToolbar: () => import_toolbar.default,
+  ConvertToGroupButton: () => ConvertToGroupButton,
+  useConvertToGroupButtonProps: () => import_use_convert_to_group_button_props.default
+});
+module.exports = __toCommonJS(convert_to_group_buttons_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_blocks = require("@wordpress/blocks");
+var import_data = require("@wordpress/data");
+var import_keycodes = require("@wordpress/keycodes");
+var import_store = require("../../store/index.cjs");
+var import_use_convert_to_group_button_props = __toESM(require("./use-convert-to-group-button-props.cjs"), 1);
+var import_toolbar = __toESM(require("./toolbar.cjs"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function ConvertToGroupButton({
+  clientIds,
+  isGroupable,
+  isUngroupable,
+  onUngroup,
+  blocksSelection,
+  groupingBlockName,
+  onClose = () => {
+  }
+}) {
+  const { getSelectedBlockClientIds } = (0, import_data.useSelect)(import_store.store);
+  const { replaceBlocks } = (0, import_data.useDispatch)(import_store.store);
+  const onConvertToGroup = () => {
+    const newBlocks = (0, import_blocks.switchToBlockType)(
+      blocksSelection,
+      groupingBlockName
+    );
+    if (newBlocks) {
+      replaceBlocks(clientIds, newBlocks);
+    }
+  };
+  const onConvertFromGroup = () => {
+    let innerBlocks = blocksSelection[0].innerBlocks;
+    if (!innerBlocks.length) {
+      return;
+    }
+    if (onUngroup) {
+      innerBlocks = onUngroup(
+        blocksSelection[0].attributes,
+        blocksSelection[0].innerBlocks
+      );
+    }
+    replaceBlocks(clientIds, innerBlocks);
+  };
+  if (!isGroupable && !isUngroupable) {
+    return null;
+  }
+  const selectedBlockClientIds = getSelectedBlockClientIds();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    isGroupable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.MenuItem,
+      {
+        shortcut: selectedBlockClientIds.length > 1 ? import_keycodes.displayShortcut.primary("g") : void 0,
+        onClick: () => {
+          onConvertToGroup();
+          onClose();
+        },
+        children: (0, import_i18n._x)("Group", "verb")
+      }
+    ),
+    isUngroupable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.MenuItem,
+      {
+        onClick: () => {
+          onConvertFromGroup();
+          onClose();
+        },
+        children: (0, import_i18n._x)(
+          "Ungroup",
+          "Ungrouping blocks from within a grouping block back into individual blocks within the Editor"
+        )
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BlockGroupToolbar,
+  ConvertToGroupButton,
+  useConvertToGroupButtonProps
+});
+//# sourceMappingURL=index.cjs.map

package/build/components/convert-to-group-buttons/toolbar.cjs

@@ -0,0 +1,121 @@
+"use strict";
+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);
+
+// packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
+var toolbar_exports = {};
+__export(toolbar_exports, {
+  default: () => toolbar_default
+});
+module.exports = __toCommonJS(toolbar_exports);
+var import_data = require("@wordpress/data");
+var import_blocks = require("@wordpress/blocks");
+var import_components = require("@wordpress/components");
+var import_icons = require("@wordpress/icons");
+var import_i18n = require("@wordpress/i18n");
+var import_convert_to_group_buttons = require("./index.cjs");
+var import_store = require("../../store/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var layouts = {
+  group: { type: "constrained" },
+  row: { type: "flex", flexWrap: "nowrap" },
+  stack: { type: "flex", orientation: "vertical" },
+  grid: { type: "grid" }
+};
+function BlockGroupToolbar() {
+  const { blocksSelection, clientIds, groupingBlockName, isGroupable } = (0, import_convert_to_group_buttons.useConvertToGroupButtonProps)();
+  const { replaceBlocks } = (0, import_data.useDispatch)(import_store.store);
+  const { canRemove, variations } = (0, import_data.useSelect)(
+    (select) => {
+      const { canRemoveBlocks } = select(import_store.store);
+      const { getBlockVariations } = select(import_blocks.store);
+      return {
+        canRemove: canRemoveBlocks(clientIds),
+        variations: getBlockVariations(
+          groupingBlockName,
+          "transform"
+        )
+      };
+    },
+    [clientIds, groupingBlockName]
+  );
+  const onConvertToGroup = (layout) => {
+    const newBlocks = (0, import_blocks.switchToBlockType)(
+      blocksSelection,
+      groupingBlockName
+    );
+    if (typeof layout !== "string") {
+      layout = "group";
+    }
+    if (newBlocks && newBlocks.length > 0) {
+      newBlocks[0].attributes.layout = layouts[layout];
+      replaceBlocks(clientIds, newBlocks);
+    }
+  };
+  const onConvertToRow = () => onConvertToGroup("row");
+  const onConvertToStack = () => onConvertToGroup("stack");
+  const onConvertToGrid = () => onConvertToGroup("grid");
+  if (!isGroupable || !canRemove) {
+    return null;
+  }
+  const canInsertRow = !!variations.find(
+    ({ name }) => name === "group-row"
+  );
+  const canInsertStack = !!variations.find(
+    ({ name }) => name === "group-stack"
+  );
+  const canInsertGrid = !!variations.find(
+    ({ name }) => name === "group-grid"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.ToolbarButton,
+      {
+        icon: import_icons.group,
+        label: (0, import_i18n._x)("Group", "action: convert blocks to group"),
+        onClick: onConvertToGroup
+      }
+    ),
+    canInsertRow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.ToolbarButton,
+      {
+        icon: import_icons.row,
+        label: (0, import_i18n._x)("Row", "action: convert blocks to row"),
+        onClick: onConvertToRow
+      }
+    ),
+    canInsertStack && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.ToolbarButton,
+      {
+        icon: import_icons.stack,
+        label: (0, import_i18n._x)("Stack", "action: convert blocks to stack"),
+        onClick: onConvertToStack
+      }
+    ),
+    canInsertGrid && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.ToolbarButton,
+      {
+        icon: import_icons.grid,
+        label: (0, import_i18n._x)("Grid", "action: convert blocks to grid"),
+        onClick: onConvertToGrid
+      }
+    )
+  ] });
+}
+var toolbar_default = BlockGroupToolbar;
+//# sourceMappingURL=toolbar.cjs.map

package/build/components/convert-to-group-buttons/use-convert-to-group-button-props.cjs

@@ -0,0 +1,55 @@
+"use strict";
+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);
+
+// packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js
+var use_convert_to_group_button_props_exports = {};
+__export(use_convert_to_group_button_props_exports, {
+  default: () => useConvertToGroupButtonProps
+});
+module.exports = __toCommonJS(use_convert_to_group_button_props_exports);
+var import_blocks = require("@wordpress/blocks");
+var import_data = require("@wordpress/data");
+var import_store = require("../../store/index.cjs");
+function useConvertToGroupButtonProps(selectedClientIds) {
+  return (0, import_data.useSelect)(
+    (select) => {
+      const {
+        getBlocksByClientId,
+        getSelectedBlockClientIds,
+        isUngroupable,
+        isGroupable
+      } = select(import_store.store);
+      const { getGroupingBlockName, getBlockType } = select(import_blocks.store);
+      const clientIds = selectedClientIds?.length ? selectedClientIds : getSelectedBlockClientIds();
+      const blocksSelection = getBlocksByClientId(clientIds);
+      const [firstSelectedBlock] = blocksSelection;
+      const _isUngroupable = clientIds.length === 1 && isUngroupable(clientIds[0]);
+      return {
+        clientIds,
+        isGroupable: isGroupable(clientIds),
+        isUngroupable: _isUngroupable,
+        blocksSelection,
+        groupingBlockName: getGroupingBlockName(),
+        onUngroup: _isUngroupable && getBlockType(firstSelectedBlock.name)?.transforms?.ungroup
+      };
+    },
+    [selectedClientIds]
+  );
+}
+//# sourceMappingURL=use-convert-to-group-button-props.cjs.map

package/build/components/copy-handler/index.cjs

@@ -0,0 +1,60 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/copy-handler/index.js
+var copy_handler_exports = {};
+__export(copy_handler_exports, {
+  __unstableUseClipboardHandler: () => __unstableUseClipboardHandler,
+  default: () => CopyHandler
+});
+module.exports = __toCommonJS(copy_handler_exports);
+var import_deprecated = __toESM(require("@wordpress/deprecated"), 1);
+var import_use_clipboard_handler = __toESM(require("../writing-flow/use-clipboard-handler.cjs"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var __unstableUseClipboardHandler = () => {
+  (0, import_deprecated.default)("__unstableUseClipboardHandler", {
+    alternative: "BlockCanvas or WritingFlow",
+    since: "6.4",
+    version: "6.7"
+  });
+  return (0, import_use_clipboard_handler.default)();
+};
+function CopyHandler(props) {
+  (0, import_deprecated.default)("CopyHandler", {
+    alternative: "BlockCanvas or WritingFlow",
+    since: "6.4",
+    version: "6.7"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref: (0, import_use_clipboard_handler.default)() });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  __unstableUseClipboardHandler
+});
+//# sourceMappingURL=index.cjs.map

package/build/components/date-format-picker/index.cjs

@@ -0,0 +1,154 @@
+"use strict";
+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);
+
+// packages/block-editor/src/components/date-format-picker/index.js
+var date_format_picker_exports = {};
+__export(date_format_picker_exports, {
+  default: () => DateFormatPicker
+});
+module.exports = __toCommonJS(date_format_picker_exports);
+var import_i18n = require("@wordpress/i18n");
+var import_date = require("@wordpress/date");
+var import_element = require("@wordpress/element");
+var import_components = require("@wordpress/components");
+var import_jsx_runtime = require("react/jsx-runtime");
+var exampleDate = /* @__PURE__ */ new Date();
+exampleDate.setDate(20);
+exampleDate.setMonth(exampleDate.getMonth() - 3);
+if (exampleDate.getMonth() === 4) {
+  exampleDate.setMonth(3);
+}
+function DateFormatPicker({
+  format,
+  defaultFormat,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalVStack,
+    {
+      as: "fieldset",
+      spacing: 4,
+      className: "block-editor-date-format-picker",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { as: "legend", children: (0, import_i18n.__)("Date format") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.ToggleControl,
+          {
+            label: (0, import_i18n.__)("Default format"),
+            help: `${(0, import_i18n.__)("Example:")}  ${(0, import_date.dateI18n)(
+              defaultFormat,
+              exampleDate
+            )}`,
+            checked: !format,
+            onChange: (checked) => onChange(checked ? null : defaultFormat)
+          }
+        ),
+        format && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NonDefaultControls, { format, onChange })
+      ]
+    }
+  );
+}
+function NonDefaultControls({ format, onChange }) {
+  const suggestedFormats = [
+    .../* @__PURE__ */ new Set([
+      /* translators: See https://www.php.net/manual/datetime.format.php */
+      "Y-m-d",
+      /* translators: See https://www.php.net/manual/datetime.format.php */
+      (0, import_i18n._x)("n/j/Y", "short date format"),
+      /* translators: See https://www.php.net/manual/datetime.format.php */
+      (0, import_i18n._x)("n/j/Y g:i A", "short date format with time"),
+      /* translators: See https://www.php.net/manual/datetime.format.php */
+      (0, import_i18n._x)("M j, Y", "medium date format"),
+      /* translators: See https://www.php.net/manual/datetime.format.php */
+      (0, import_i18n._x)("M j, Y g:i A", "medium date format with time"),
+      /* translators: See https://www.php.net/manual/datetime.format.php */
+      (0, import_i18n._x)("F j, Y", "long date format"),
+      /* translators: See https://www.php.net/manual/datetime.format.php */
+      (0, import_i18n._x)("M j", "short date format without the year")
+    ])
+  ];
+  const suggestedOptions = [
+    ...suggestedFormats.map((suggestedFormat, index) => ({
+      key: `suggested-${index}`,
+      name: (0, import_date.dateI18n)(suggestedFormat, exampleDate),
+      format: suggestedFormat
+    })),
+    {
+      key: "human-diff",
+      name: (0, import_date.humanTimeDiff)(exampleDate),
+      format: "human-diff"
+    }
+  ];
+  const customOption = {
+    key: "custom",
+    name: (0, import_i18n.__)("Custom"),
+    className: "block-editor-date-format-picker__custom-format-select-control__custom-option",
+    hint: (0, import_i18n.__)("Enter your own date format")
+  };
+  const [isCustom, setIsCustom] = (0, import_element.useState)(
+    () => !!format && !suggestedOptions.some((option) => option.format === format)
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.CustomSelectControl,
+      {
+        __next40pxDefaultSize: true,
+        label: (0, import_i18n.__)("Choose a format"),
+        options: [...suggestedOptions, customOption],
+        value: isCustom ? customOption : suggestedOptions.find(
+          (option) => option.format === format
+        ) ?? customOption,
+        onChange: ({ selectedItem }) => {
+          if (selectedItem === customOption) {
+            setIsCustom(true);
+          } else {
+            setIsCustom(false);
+            onChange(selectedItem.format);
+          }
+        }
+      }
+    ),
+    isCustom && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.TextControl,
+      {
+        __next40pxDefaultSize: true,
+        label: (0, import_i18n.__)("Custom format"),
+        hideLabelFromVision: true,
+        help: (0, import_element.createInterpolateElement)(
+          (0, import_i18n.__)(
+            "Enter a date or time <Link>format string</Link>."
+          ),
+          {
+            Link: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.ExternalLink,
+              {
+                href: (0, import_i18n.__)(
+                  "https://wordpress.org/documentation/article/customize-date-and-time-format/"
+                )
+              }
+            )
+          }
+        ),
+        value: format,
+        onChange: (value) => onChange(value)
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=index.cjs.map

package/build/components/date-format-picker/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../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\tToggleControl,\n\t__experimentalVStack as VStack,\n\tCustomSelectControl,\n} from '@wordpress/components';\n\n// So that we illustrate the different formats in the dropdown properly, show a date that is\n// somewhat 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 format. If `null`, _Default_ is selected.\n * @param {string}      props.defaultFormat The date format that will be used if the user selects 'Default'.\n * @param {Function}    props.onChange      Called when a selection is made. If `null`, _Default_ is selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<VStack\n\t\t\tas=\"fieldset\"\n\t\t\tspacing={ 4 }\n\t\t\tclassName=\"block-editor-date-format-picker\"\n\t\t>\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\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</VStack>\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\thint: __( '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\t__next40pxDefaultSize\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__next40pxDefaultSize\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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",
+  "names": ["VStack"]
+}