@wordpress/editor 14.37.0 → 14.37.1-next.ba3aee3a2.0

package/build-module/components/list-view-sidebar/index.mjs

@@ -0,0 +1,112 @@
+// packages/editor/src/components/list-view-sidebar/index.js
+import {
+  __experimentalListView as ListView,
+  privateApis as blockEditorPrivateApis
+} from "@wordpress/block-editor";
+import { useFocusOnMount, useMergeRefs } from "@wordpress/compose";
+import { useDispatch, useSelect } from "@wordpress/data";
+import { focus } from "@wordpress/dom";
+import { useCallback, useRef, useState } from "@wordpress/element";
+import { __, _x } from "@wordpress/i18n";
+import { useShortcut } from "@wordpress/keyboard-shortcuts";
+import { ESCAPE } from "@wordpress/keycodes";
+import ListViewOutline from "./list-view-outline.mjs";
+import { unlock } from "../../lock-unlock.mjs";
+import { store as editorStore } from "../../store/index.mjs";
+import { jsx } from "react/jsx-runtime";
+var { TabbedSidebar } = unlock(blockEditorPrivateApis);
+function ListViewSidebar() {
+  const { setIsListViewOpened } = useDispatch(editorStore);
+  const { getListViewToggleRef } = unlock(useSelect(editorStore));
+  const focusOnMountRef = useFocusOnMount("firstElement");
+  const closeListView = useCallback(() => {
+    setIsListViewOpened(false);
+    getListViewToggleRef().current?.focus();
+  }, [getListViewToggleRef, setIsListViewOpened]);
+  const closeOnEscape = useCallback(
+    (event) => {
+      if (event.keyCode === ESCAPE && !event.defaultPrevented) {
+        event.preventDefault();
+        closeListView();
+      }
+    },
+    [closeListView]
+  );
+  const [dropZoneElement, setDropZoneElement] = useState(null);
+  const [tab, setTab] = useState("list-view");
+  const sidebarRef = useRef();
+  const tabsRef = useRef();
+  const listViewRef = useRef();
+  const listViewContainerRef = useMergeRefs([
+    focusOnMountRef,
+    listViewRef,
+    setDropZoneElement
+  ]);
+  function handleSidebarFocus(currentTab) {
+    const tabPanelFocus = focus.tabbable.find(tabsRef.current)[0];
+    if (currentTab === "list-view") {
+      const listViewApplicationFocus = focus.tabbable.find(
+        listViewRef.current
+      )[0];
+      const listViewFocusArea = sidebarRef.current.contains(
+        listViewApplicationFocus
+      ) ? listViewApplicationFocus : tabPanelFocus;
+      listViewFocusArea.focus();
+    } else {
+      tabPanelFocus.focus();
+    }
+  }
+  const handleToggleListViewShortcut = useCallback(() => {
+    if (sidebarRef.current.contains(
+      sidebarRef.current.ownerDocument.activeElement
+    )) {
+      closeListView();
+    } else {
+      handleSidebarFocus(tab);
+    }
+  }, [closeListView, tab]);
+  useShortcut("core/editor/toggle-list-view", handleToggleListViewShortcut);
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "editor-list-view-sidebar",
+        onKeyDown: closeOnEscape,
+        ref: sidebarRef,
+        children: /* @__PURE__ */ jsx(
+          TabbedSidebar,
+          {
+            tabs: [
+              {
+                name: "list-view",
+                title: _x("List View", "Post overview"),
+                panel: /* @__PURE__ */ jsx("div", { className: "editor-list-view-sidebar__list-view-container", children: /* @__PURE__ */ jsx("div", { className: "editor-list-view-sidebar__list-view-panel-content", children: /* @__PURE__ */ jsx(
+                  ListView,
+                  {
+                    dropZoneElement
+                  }
+                ) }) }),
+                panelRef: listViewContainerRef
+              },
+              {
+                name: "outline",
+                title: _x("Outline", "Post overview"),
+                panel: /* @__PURE__ */ jsx("div", { className: "editor-list-view-sidebar__list-view-container", children: /* @__PURE__ */ jsx(ListViewOutline, {}) })
+              }
+            ],
+            onClose: closeListView,
+            onSelect: (tabName) => setTab(tabName),
+            defaultTabId: "list-view",
+            ref: tabsRef,
+            closeButtonLabel: __("Close")
+          }
+        )
+      }
+    )
+  );
+}
+export {
+  ListViewSidebar as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/list-view-sidebar/list-view-outline.mjs

@@ -0,0 +1,31 @@
+// packages/editor/src/components/list-view-sidebar/list-view-outline.js
+import { __experimentalText as Text } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import CharacterCount from "../character-count/index.mjs";
+import WordCount from "../word-count/index.mjs";
+import TimeToRead from "../time-to-read/index.mjs";
+import DocumentOutline from "../document-outline/index.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ListViewOutline() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "editor-list-view-sidebar__outline", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { children: __("Characters:") }),
+        /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(CharacterCount, {}) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { children: __("Words:") }),
+        /* @__PURE__ */ jsx(WordCount, {})
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { children: __("Time to read:") }),
+        /* @__PURE__ */ jsx(TimeToRead, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(DocumentOutline, {})
+  ] });
+}
+export {
+  ListViewOutline as default
+};
+//# sourceMappingURL=list-view-outline.mjs.map

package/build-module/components/local-autosave-monitor/index.mjs

@@ -0,0 +1,142 @@
+// packages/editor/src/components/local-autosave-monitor/index.js
+import { useCallback, useEffect, useRef } from "@wordpress/element";
+import { ifCondition, usePrevious } from "@wordpress/compose";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { __ } from "@wordpress/i18n";
+import { parse } from "@wordpress/blocks";
+import { store as noticesStore } from "@wordpress/notices";
+import AutosaveMonitor from "../autosave-monitor/index.mjs";
+import {
+  localAutosaveGet,
+  localAutosaveClear
+} from "../../store/local-autosave.mjs";
+import { store as editorStore } from "../../store/index.mjs";
+import { jsx } from "react/jsx-runtime";
+var requestIdleCallback = window.requestIdleCallback ? window.requestIdleCallback : window.requestAnimationFrame;
+var hasStorageSupport;
+var hasSessionStorageSupport = () => {
+  if (hasStorageSupport !== void 0) {
+    return hasStorageSupport;
+  }
+  try {
+    window.sessionStorage.setItem("__wpEditorTestSessionStorage", "");
+    window.sessionStorage.removeItem("__wpEditorTestSessionStorage");
+    hasStorageSupport = true;
+  } catch {
+    hasStorageSupport = false;
+  }
+  return hasStorageSupport;
+};
+function useAutosaveNotice() {
+  const { postId, isEditedPostNew, hasRemoteAutosave } = useSelect(
+    (select) => ({
+      postId: select(editorStore).getCurrentPostId(),
+      isEditedPostNew: select(editorStore).isEditedPostNew(),
+      hasRemoteAutosave: !!select(editorStore).getEditorSettings().autosave
+    }),
+    []
+  );
+  const { getEditedPostAttribute } = useSelect(editorStore);
+  const { createWarningNotice, removeNotice } = useDispatch(noticesStore);
+  const { editPost, resetEditorBlocks } = useDispatch(editorStore);
+  useEffect(() => {
+    let localAutosave = localAutosaveGet(postId, isEditedPostNew);
+    if (!localAutosave) {
+      return;
+    }
+    try {
+      localAutosave = JSON.parse(localAutosave);
+    } catch {
+      return;
+    }
+    const { post_title: title, content, excerpt } = localAutosave;
+    const edits = { title, content, excerpt };
+    {
+      const hasDifference = Object.keys(edits).some((key) => {
+        return edits[key] !== getEditedPostAttribute(key);
+      });
+      if (!hasDifference) {
+        localAutosaveClear(postId, isEditedPostNew);
+        return;
+      }
+    }
+    if (hasRemoteAutosave) {
+      return;
+    }
+    const id = "wpEditorAutosaveRestore";
+    createWarningNotice(
+      __(
+        "The backup of this post in your browser is different from the version below."
+      ),
+      {
+        id,
+        actions: [
+          {
+            label: __("Restore the backup"),
+            onClick() {
+              const {
+                content: editsContent,
+                ...editsWithoutContent
+              } = edits;
+              editPost(editsWithoutContent);
+              resetEditorBlocks(parse(edits.content));
+              removeNotice(id);
+            }
+          }
+        ]
+      }
+    );
+  }, [isEditedPostNew, postId]);
+}
+function useAutosavePurge() {
+  const { postId, isEditedPostNew, isDirty, isAutosaving, didError } = useSelect(
+    (select) => ({
+      postId: select(editorStore).getCurrentPostId(),
+      isEditedPostNew: select(editorStore).isEditedPostNew(),
+      isDirty: select(editorStore).isEditedPostDirty(),
+      isAutosaving: select(editorStore).isAutosavingPost(),
+      didError: select(editorStore).didPostSaveRequestFail()
+    }),
+    []
+  );
+  const lastIsDirtyRef = useRef(isDirty);
+  const lastIsAutosavingRef = useRef(isAutosaving);
+  useEffect(() => {
+    if (!didError && (lastIsAutosavingRef.current && !isAutosaving || lastIsDirtyRef.current && !isDirty)) {
+      localAutosaveClear(postId, isEditedPostNew);
+    }
+    lastIsDirtyRef.current = isDirty;
+    lastIsAutosavingRef.current = isAutosaving;
+  }, [isDirty, isAutosaving, didError]);
+  const wasEditedPostNew = usePrevious(isEditedPostNew);
+  const prevPostId = usePrevious(postId);
+  useEffect(() => {
+    if (prevPostId === postId && wasEditedPostNew && !isEditedPostNew) {
+      localAutosaveClear(postId, true);
+    }
+  }, [isEditedPostNew, postId]);
+}
+function LocalAutosaveMonitor() {
+  const { autosave } = useDispatch(editorStore);
+  const deferredAutosave = useCallback(() => {
+    requestIdleCallback(() => autosave({ local: true }));
+  }, []);
+  useAutosaveNotice();
+  useAutosavePurge();
+  const localAutosaveInterval = useSelect(
+    (select) => select(editorStore).getEditorSettings().localAutosaveInterval,
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    AutosaveMonitor,
+    {
+      interval: localAutosaveInterval,
+      autosave: deferredAutosave
+    }
+  );
+}
+var local_autosave_monitor_default = ifCondition(hasSessionStorageSupport)(LocalAutosaveMonitor);
+export {
+  local_autosave_monitor_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/media-categories/index.mjs

@@ -0,0 +1,181 @@
+// packages/editor/src/components/media-categories/index.js
+import { __, sprintf, _x } from "@wordpress/i18n";
+import { resolveSelect } from "@wordpress/data";
+import { decodeEntities } from "@wordpress/html-entities";
+import { store as coreStore } from "@wordpress/core-data";
+var getExternalLink = (url, text) => `<a ${getExternalLinkAttributes(url)}>${text}</a>`;
+var getExternalLinkAttributes = (url) => `href="${url}" target="_blank" rel="noreferrer noopener"`;
+var getOpenverseLicense = (license, licenseVersion) => {
+  let licenseName = license.trim();
+  if (license !== "pdm") {
+    licenseName = license.toUpperCase().replace("SAMPLING", "Sampling");
+  }
+  if (licenseVersion) {
+    licenseName += ` ${licenseVersion}`;
+  }
+  if (!["pdm", "cc0"].includes(license)) {
+    licenseName = `CC ${licenseName}`;
+  }
+  return licenseName;
+};
+var getOpenverseCaption = (item) => {
+  const {
+    title,
+    foreign_landing_url: foreignLandingUrl,
+    creator,
+    creator_url: creatorUrl,
+    license,
+    license_version: licenseVersion,
+    license_url: licenseUrl
+  } = item;
+  const fullLicense = getOpenverseLicense(license, licenseVersion);
+  const _creator = decodeEntities(creator);
+  let _caption;
+  if (_creator) {
+    _caption = title ? sprintf(
+      // translators: %1s: Title of a media work from Openverse; %2$s: Name of the work's creator; %3s: Work's licence e.g: "CC0 1.0".
+      _x('"%1$s" by %2$s/ %3$s', "caption"),
+      getExternalLink(
+        foreignLandingUrl,
+        decodeEntities(title)
+      ),
+      creatorUrl ? getExternalLink(creatorUrl, _creator) : _creator,
+      licenseUrl ? getExternalLink(
+        `${licenseUrl}?ref=openverse`,
+        fullLicense
+      ) : fullLicense
+    ) : sprintf(
+      // translators: %1s: Link attributes for a given Openverse media work; %2s: Name of the work's creator; %3s: Works's licence e.g: "CC0 1.0".
+      _x("<a %1$s>Work</a> by %2$s/ %3$s", "caption"),
+      getExternalLinkAttributes(foreignLandingUrl),
+      creatorUrl ? getExternalLink(creatorUrl, _creator) : _creator,
+      licenseUrl ? getExternalLink(
+        `${licenseUrl}?ref=openverse`,
+        fullLicense
+      ) : fullLicense
+    );
+  } else {
+    _caption = title ? sprintf(
+      // translators: %1s: Title of a media work from Openverse; %2s: Work's licence e.g: "CC0 1.0".
+      _x('"%1$s"/ %2$s', "caption"),
+      getExternalLink(
+        foreignLandingUrl,
+        decodeEntities(title)
+      ),
+      licenseUrl ? getExternalLink(
+        `${licenseUrl}?ref=openverse`,
+        fullLicense
+      ) : fullLicense
+    ) : sprintf(
+      // translators: %1s: Link attributes for a given Openverse media work; %2s: Works's licence e.g: "CC0 1.0".
+      _x("<a %1$s>Work</a>/ %2$s", "caption"),
+      getExternalLinkAttributes(foreignLandingUrl),
+      licenseUrl ? getExternalLink(
+        `${licenseUrl}?ref=openverse`,
+        fullLicense
+      ) : fullLicense
+    );
+  }
+  return _caption.replace(/\s{2}/g, " ");
+};
+var coreMediaFetch = async (query = {}) => {
+  const mediaItems = await resolveSelect(coreStore).getEntityRecords(
+    "postType",
+    "attachment",
+    {
+      ...query,
+      orderBy: !!query?.search ? "relevance" : "date"
+    }
+  );
+  return mediaItems.map((mediaItem) => ({
+    ...mediaItem,
+    alt: mediaItem.alt_text,
+    url: mediaItem.source_url,
+    previewUrl: mediaItem.media_details?.sizes?.medium?.source_url,
+    caption: mediaItem.caption?.raw
+  }));
+};
+var inserterMediaCategories = [
+  {
+    name: "images",
+    labels: {
+      name: __("Images"),
+      search_items: __("Search images")
+    },
+    mediaType: "image",
+    async fetch(query = {}) {
+      return coreMediaFetch({ ...query, media_type: "image" });
+    }
+  },
+  {
+    name: "videos",
+    labels: {
+      name: __("Videos"),
+      search_items: __("Search videos")
+    },
+    mediaType: "video",
+    async fetch(query = {}) {
+      return coreMediaFetch({ ...query, media_type: "video" });
+    }
+  },
+  {
+    name: "audio",
+    labels: {
+      name: __("Audio"),
+      search_items: __("Search audio")
+    },
+    mediaType: "audio",
+    async fetch(query = {}) {
+      return coreMediaFetch({ ...query, media_type: "audio" });
+    }
+  },
+  {
+    name: "openverse",
+    labels: {
+      name: __("Openverse"),
+      search_items: __("Search Openverse")
+    },
+    mediaType: "image",
+    async fetch(query = {}) {
+      const defaultArgs = {
+        mature: false,
+        excluded_source: "flickr,inaturalist,wikimedia",
+        license: "pdm,cc0"
+      };
+      const finalQuery = { ...query, ...defaultArgs };
+      const mapFromInserterMediaRequest = {
+        per_page: "page_size",
+        search: "q"
+      };
+      const url = new URL("https://api.openverse.org/v1/images/");
+      Object.entries(finalQuery).forEach(([key, value]) => {
+        const queryKey = mapFromInserterMediaRequest[key] || key;
+        url.searchParams.set(queryKey, value);
+      });
+      const response = await window.fetch(url, {
+        headers: {
+          "User-Agent": "WordPress/inserter-media-fetch"
+        }
+      });
+      const jsonResponse = await response.json();
+      const results = jsonResponse.results;
+      return results.map((result) => ({
+        ...result,
+        // This is a temp solution for better titles, until Openverse API
+        // completes the cleaning up of some titles of their upstream data.
+        title: result.title?.toLowerCase().startsWith("file:") ? result.title.slice(5) : result.title,
+        sourceId: result.id,
+        id: void 0,
+        caption: getOpenverseCaption(result),
+        previewUrl: result.thumbnail
+      }));
+    },
+    getReportUrl: ({ sourceId }) => `https://wordpress.org/openverse/image/${sourceId}/report/`,
+    isExternalResource: true
+  }
+];
+var media_categories_default = inserterMediaCategories;
+export {
+  media_categories_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/mode-switcher/index.mjs

@@ -0,0 +1,72 @@
+// packages/editor/src/components/mode-switcher/index.js
+import { __ } from "@wordpress/i18n";
+import { MenuItemsChoice, MenuGroup } from "@wordpress/components";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { store as keyboardShortcutsStore } from "@wordpress/keyboard-shortcuts";
+import { store as editorStore } from "../../store/index.mjs";
+import { jsx } from "react/jsx-runtime";
+var MODES = [
+  {
+    value: "visual",
+    label: __("Visual editor")
+  },
+  {
+    value: "text",
+    label: __("Code editor")
+  }
+];
+function ModeSwitcher() {
+  const { shortcut, isRichEditingEnabled, isCodeEditingEnabled, mode } = useSelect(
+    (select) => ({
+      shortcut: select(
+        keyboardShortcutsStore
+      ).getShortcutRepresentation("core/editor/toggle-mode"),
+      isRichEditingEnabled: select(editorStore).getEditorSettings().richEditingEnabled,
+      isCodeEditingEnabled: select(editorStore).getEditorSettings().codeEditingEnabled,
+      mode: select(editorStore).getEditorMode()
+    }),
+    []
+  );
+  const { switchEditorMode } = useDispatch(editorStore);
+  let selectedMode = mode;
+  if (!isRichEditingEnabled && mode === "visual") {
+    selectedMode = "text";
+  }
+  if (!isCodeEditingEnabled && mode === "text") {
+    selectedMode = "visual";
+  }
+  const choices = MODES.map((choice) => {
+    if (!isCodeEditingEnabled && choice.value === "text") {
+      choice = {
+        ...choice,
+        disabled: true
+      };
+    }
+    if (!isRichEditingEnabled && choice.value === "visual") {
+      choice = {
+        ...choice,
+        disabled: true,
+        info: __(
+          "You can enable the visual editor in your profile settings."
+        )
+      };
+    }
+    if (choice.value !== selectedMode && !choice.disabled) {
+      return { ...choice, shortcut };
+    }
+    return choice;
+  });
+  return /* @__PURE__ */ jsx(MenuGroup, { label: __("Editor"), children: /* @__PURE__ */ jsx(
+    MenuItemsChoice,
+    {
+      choices,
+      value: selectedMode,
+      onSelect: switchEditorMode
+    }
+  ) });
+}
+var mode_switcher_default = ModeSwitcher;
+export {
+  mode_switcher_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/more-menu/copy-content-menu-item.mjs

@@ -0,0 +1,44 @@
+// packages/editor/src/components/more-menu/copy-content-menu-item.js
+import { MenuItem } from "@wordpress/components";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { __ } from "@wordpress/i18n";
+import { useCopyToClipboard } from "@wordpress/compose";
+import { store as noticesStore } from "@wordpress/notices";
+import { store as coreStore } from "@wordpress/core-data";
+import { __unstableSerializeAndClean } from "@wordpress/blocks";
+import { store as editorStore } from "../../store/index.mjs";
+import { jsx } from "react/jsx-runtime";
+function CopyContentMenuItem() {
+  const { createNotice } = useDispatch(noticesStore);
+  const { getCurrentPostId, getCurrentPostType } = useSelect(editorStore);
+  const { getEditedEntityRecord } = useSelect(coreStore);
+  function getText() {
+    const record = getEditedEntityRecord(
+      "postType",
+      getCurrentPostType(),
+      getCurrentPostId()
+    );
+    if (!record) {
+      return "";
+    }
+    if (typeof record.content === "function") {
+      return record.content(record);
+    } else if (record.blocks) {
+      return __unstableSerializeAndClean(record.blocks);
+    } else if (record.content) {
+      return record.content;
+    }
+  }
+  function onSuccess() {
+    createNotice("info", __("All content copied."), {
+      isDismissible: true,
+      type: "snackbar"
+    });
+  }
+  const ref = useCopyToClipboard(getText, onSuccess);
+  return /* @__PURE__ */ jsx(MenuItem, { ref, children: __("Copy all blocks") });
+}
+export {
+  CopyContentMenuItem as default
+};
+//# sourceMappingURL=copy-content-menu-item.mjs.map