@wordpress/block-editor 15.9.1-next.8fd3f8831.0 → 15.10.1-next.79a2f3cdd.0

package/build-module/components/link-control/search-input.mjs

@@ -0,0 +1,130 @@
+// packages/block-editor/src/components/link-control/search-input.js
+import { forwardRef, useState } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import deprecated from "@wordpress/deprecated";
+import { URLInput } from "../index.mjs";
+import LinkControlSearchResults from "./search-results.mjs";
+import { CREATE_TYPE } from "./constants.mjs";
+import useSearchHandler from "./use-search-handler.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+var noopSearchHandler = () => Promise.resolve([]);
+var noop = () => {
+};
+var LinkControlSearchInput = forwardRef(
+  ({
+    value,
+    children,
+    currentLink = {},
+    className = null,
+    placeholder = null,
+    withCreateSuggestion = false,
+    onCreateSuggestion = noop,
+    onChange = noop,
+    onSelect = noop,
+    showSuggestions = true,
+    renderSuggestions = (props) => /* @__PURE__ */ jsx(LinkControlSearchResults, { ...props }),
+    fetchSuggestions = null,
+    allowDirectEntry = true,
+    showInitialSuggestions = false,
+    suggestionsQuery = {},
+    withURLSuggestion = true,
+    createSuggestionButtonText,
+    hideLabelFromVision = false,
+    suffix,
+    isEntity = false
+  }, ref) => {
+    const genericSearchHandler = useSearchHandler(
+      suggestionsQuery,
+      allowDirectEntry,
+      withCreateSuggestion,
+      withURLSuggestion
+    );
+    const searchHandler = showSuggestions ? fetchSuggestions || genericSearchHandler : noopSearchHandler;
+    const [focusedSuggestion, setFocusedSuggestion] = useState();
+    const onInputChange = (selection, suggestion) => {
+      onChange(selection);
+      setFocusedSuggestion(suggestion);
+    };
+    const handleRenderSuggestions = (props) => renderSuggestions({
+      ...props,
+      withCreateSuggestion,
+      createSuggestionButtonText,
+      suggestionsQuery,
+      handleSuggestionClick: (suggestion) => {
+        if (props.handleSuggestionClick) {
+          props.handleSuggestionClick(suggestion);
+        }
+        onSuggestionSelected(suggestion);
+      }
+    });
+    const onSuggestionSelected = async (selectedSuggestion) => {
+      let suggestion = selectedSuggestion;
+      if (CREATE_TYPE === selectedSuggestion.type) {
+        try {
+          suggestion = await onCreateSuggestion(
+            selectedSuggestion.title
+          );
+          if (suggestion?.url) {
+            onSelect(suggestion);
+          }
+        } catch (e) {
+        }
+        return;
+      }
+      if (allowDirectEntry || suggestion && Object.keys(suggestion).length >= 1) {
+        const { id, url, kind, type, ...restLinkProps } = currentLink ?? {};
+        onSelect(
+          // Some direct entries don't have types or IDs, and we still need to clear the previous ones.
+          { ...restLinkProps, ...suggestion },
+          suggestion
+        );
+      }
+    };
+    const _placeholder = placeholder ?? __("Search or type URL");
+    const label = hideLabelFromVision && placeholder !== "" ? _placeholder : __("Link");
+    return /* @__PURE__ */ jsxs("div", { className: "block-editor-link-control__search-input-container", children: [
+      /* @__PURE__ */ jsx(
+        URLInput,
+        {
+          disableSuggestions: currentLink?.url === value,
+          label,
+          hideLabelFromVision,
+          className,
+          value,
+          onChange: onInputChange,
+          placeholder: _placeholder,
+          __experimentalRenderSuggestions: showSuggestions ? handleRenderSuggestions : null,
+          __experimentalFetchLinkSuggestions: searchHandler,
+          __experimentalHandleURLSuggestions: true,
+          __experimentalShowInitialSuggestions: showInitialSuggestions,
+          onSubmit: (suggestion, event) => {
+            const hasSuggestion = suggestion || focusedSuggestion;
+            if (!hasSuggestion && !value?.trim()?.length) {
+              event.preventDefault();
+            } else {
+              onSuggestionSelected(
+                hasSuggestion || { url: value }
+              );
+            }
+          },
+          inputRef: ref,
+          suffix,
+          disabled: isEntity
+        }
+      ),
+      children
+    ] });
+  }
+);
+var search_input_default = LinkControlSearchInput;
+var __experimentalLinkControlSearchInput = (props) => {
+  deprecated("wp.blockEditor.__experimentalLinkControlSearchInput", {
+    since: "6.8"
+  });
+  return /* @__PURE__ */ jsx(LinkControlSearchInput, { ...props });
+};
+export {
+  __experimentalLinkControlSearchInput,
+  search_input_default as default
+};
+//# sourceMappingURL=search-input.mjs.map

package/build-module/components/link-control/search-item.mjs

@@ -0,0 +1,152 @@
+// packages/block-editor/src/components/link-control/search-item.js
+import { __ } from "@wordpress/i18n";
+import { MenuItem, TextHighlight } from "@wordpress/components";
+import {
+  Icon,
+  globe,
+  page,
+  tag,
+  postList,
+  category,
+  file,
+  home,
+  verse
+} from "@wordpress/icons";
+import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
+import { safeDecodeURI, filterURLForDisplay, getPath } from "@wordpress/url";
+import { pipe } from "@wordpress/compose";
+import deprecated from "@wordpress/deprecated";
+import { jsx } from "react/jsx-runtime";
+var TYPES = {
+  post: {
+    icon: postList,
+    label: __("Post")
+  },
+  page: {
+    icon: page,
+    label: __("Page")
+  },
+  post_tag: {
+    icon: tag,
+    label: __("Tag")
+  },
+  category: {
+    icon: category,
+    label: __("Category")
+  },
+  attachment: {
+    icon: file,
+    label: __("Attachment")
+  }
+};
+function SearchItemIcon({ isURL, suggestion }) {
+  let icon = null;
+  if (isURL) {
+    icon = globe;
+  } else if (suggestion.type in TYPES) {
+    icon = TYPES[suggestion.type].icon;
+    if (suggestion.type === "page") {
+      if (suggestion.isFrontPage) {
+        icon = home;
+      }
+      if (suggestion.isBlogHome) {
+        icon = verse;
+      }
+    }
+  }
+  if (icon) {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        className: "block-editor-link-control__search-item-icon",
+        icon
+      }
+    );
+  }
+  return null;
+}
+function addLeadingSlash(url) {
+  const trimmedURL = url?.trim();
+  if (!trimmedURL?.length) {
+    return url;
+  }
+  return url?.replace(/^\/?/, "/");
+}
+function removeTrailingSlash(url) {
+  const trimmedURL = url?.trim();
+  if (!trimmedURL?.length) {
+    return url;
+  }
+  return url?.replace(/\/$/, "");
+}
+var partialRight = (fn, ...partialArgs) => (...args) => fn(...args, ...partialArgs);
+var defaultTo = (d) => (v) => {
+  return v === null || v === void 0 || v !== v ? d : v;
+};
+function getURLForDisplay(url) {
+  if (!url) {
+    return url;
+  }
+  return pipe(
+    safeDecodeURI,
+    getPath,
+    defaultTo(""),
+    partialRight(filterURLForDisplay, 24),
+    removeTrailingSlash,
+    addLeadingSlash
+  )(url);
+}
+var LinkControlSearchItem = ({
+  itemProps,
+  suggestion,
+  searchTerm,
+  onClick,
+  isURL = false,
+  shouldShowType = false
+}) => {
+  const info = isURL ? __("Press ENTER to add this link") : getURLForDisplay(suggestion.url);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ...itemProps,
+      info,
+      iconPosition: "left",
+      icon: /* @__PURE__ */ jsx(SearchItemIcon, { suggestion, isURL }),
+      onClick,
+      shortcut: shouldShowType && getVisualTypeName(suggestion),
+      className: "block-editor-link-control__search-item",
+      children: /* @__PURE__ */ jsx(
+        TextHighlight,
+        {
+          text: stripHTML(suggestion.title),
+          highlight: searchTerm
+        }
+      )
+    }
+  );
+};
+function getVisualTypeName(suggestion) {
+  if (suggestion.isFrontPage) {
+    return __("Front page");
+  }
+  if (suggestion.isBlogHome) {
+    return __("Blog home");
+  }
+  if (suggestion.type in TYPES) {
+    return TYPES[suggestion.type].label;
+  }
+  return suggestion.type;
+}
+var search_item_default = LinkControlSearchItem;
+var __experimentalLinkControlSearchItem = (props) => {
+  deprecated("wp.blockEditor.__experimentalLinkControlSearchItem", {
+    since: "6.8"
+  });
+  return /* @__PURE__ */ jsx(LinkControlSearchItem, { ...props });
+};
+export {
+  LinkControlSearchItem,
+  __experimentalLinkControlSearchItem,
+  search_item_default as default
+};
+//# sourceMappingURL=search-item.mjs.map

package/build-module/components/link-control/search-results.mjs

@@ -0,0 +1,101 @@
+// packages/block-editor/src/components/link-control/search-results.js
+import { __, sprintf } from "@wordpress/i18n";
+import { MenuGroup } from "@wordpress/components";
+import clsx from "clsx";
+import LinkControlSearchCreate from "./search-create-button.mjs";
+import LinkControlSearchItem from "./search-item.mjs";
+import { CREATE_TYPE, LINK_ENTRY_TYPES } from "./constants.mjs";
+import deprecated from "@wordpress/deprecated";
+import { jsx } from "react/jsx-runtime";
+function LinkControlSearchResults({
+  withCreateSuggestion,
+  currentInputValue,
+  handleSuggestionClick,
+  suggestionsListProps,
+  buildSuggestionItemProps,
+  suggestions,
+  selectedSuggestion,
+  isLoading,
+  isInitialSuggestions,
+  createSuggestionButtonText,
+  suggestionsQuery
+}) {
+  const resultsListClasses = clsx(
+    "block-editor-link-control__search-results",
+    {
+      "is-loading": isLoading
+    }
+  );
+  const isSingleDirectEntryResult = suggestions.length === 1 && LINK_ENTRY_TYPES.includes(suggestions[0].type);
+  const shouldShowCreateSuggestion = withCreateSuggestion && !isSingleDirectEntryResult && !isInitialSuggestions;
+  const shouldShowSuggestionsTypes = !suggestionsQuery?.type;
+  const labelText = isInitialSuggestions ? __("Suggestions") : sprintf(
+    /* translators: %s: search term. */
+    __('Search results for "%s"'),
+    currentInputValue
+  );
+  return /* @__PURE__ */ jsx("div", { className: "block-editor-link-control__search-results-wrapper", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...suggestionsListProps,
+      className: resultsListClasses,
+      "aria-label": labelText,
+      children: /* @__PURE__ */ jsx(MenuGroup, { children: suggestions.map((suggestion, index) => {
+        if (shouldShowCreateSuggestion && CREATE_TYPE === suggestion.type) {
+          return /* @__PURE__ */ jsx(
+            LinkControlSearchCreate,
+            {
+              searchTerm: currentInputValue,
+              buttonText: createSuggestionButtonText,
+              onClick: () => handleSuggestionClick(suggestion),
+              itemProps: buildSuggestionItemProps(
+                suggestion,
+                index
+              ),
+              isSelected: index === selectedSuggestion
+            },
+            suggestion.type
+          );
+        }
+        if (CREATE_TYPE === suggestion.type) {
+          return null;
+        }
+        return /* @__PURE__ */ jsx(
+          LinkControlSearchItem,
+          {
+            itemProps: buildSuggestionItemProps(
+              suggestion,
+              index
+            ),
+            suggestion,
+            index,
+            onClick: () => {
+              handleSuggestionClick(suggestion);
+            },
+            isSelected: index === selectedSuggestion,
+            isURL: LINK_ENTRY_TYPES.includes(
+              suggestion.type
+            ),
+            searchTerm: currentInputValue,
+            shouldShowType: shouldShowSuggestionsTypes,
+            isFrontPage: suggestion?.isFrontPage,
+            isBlogHome: suggestion?.isBlogHome
+          },
+          `${suggestion.id}-${suggestion.type}`
+        );
+      }) })
+    }
+  ) });
+}
+var search_results_default = LinkControlSearchResults;
+var __experimentalLinkControlSearchResults = (props) => {
+  deprecated("wp.blockEditor.__experimentalLinkControlSearchResults", {
+    since: "6.8"
+  });
+  return /* @__PURE__ */ jsx(LinkControlSearchResults, { ...props });
+};
+export {
+  __experimentalLinkControlSearchResults,
+  search_results_default as default
+};
+//# sourceMappingURL=search-results.mjs.map

package/build-module/components/link-control/settings-drawer.mjs

@@ -0,0 +1,56 @@
+// packages/block-editor/src/components/link-control/settings-drawer.js
+import {
+  Button,
+  __unstableMotion as motion,
+  __unstableAnimatePresence as AnimatePresence
+} from "@wordpress/components";
+import { chevronLeftSmall, chevronRightSmall } from "@wordpress/icons";
+import { useReducedMotion, useInstanceId } from "@wordpress/compose";
+import { _x, isRTL } from "@wordpress/i18n";
+import { Fragment } from "@wordpress/element";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function LinkSettingsDrawer({ children, settingsOpen, setSettingsOpen }) {
+  const prefersReducedMotion = useReducedMotion();
+  const MaybeAnimatePresence = prefersReducedMotion ? Fragment : AnimatePresence;
+  const MaybeMotionDiv = prefersReducedMotion ? "div" : motion.div;
+  const id = useInstanceId(LinkSettingsDrawer);
+  const settingsDrawerId = `link-control-settings-drawer-${id}`;
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        __next40pxDefaultSize: true,
+        className: "block-editor-link-control__drawer-toggle",
+        "aria-expanded": settingsOpen,
+        onClick: () => setSettingsOpen(!settingsOpen),
+        icon: isRTL() ? chevronLeftSmall : chevronRightSmall,
+        "aria-controls": settingsDrawerId,
+        children: _x("Advanced", "Additional link settings")
+      }
+    ),
+    /* @__PURE__ */ jsx(MaybeAnimatePresence, { children: settingsOpen && /* @__PURE__ */ jsx(
+      MaybeMotionDiv,
+      {
+        className: "block-editor-link-control__drawer",
+        hidden: !settingsOpen,
+        id: settingsDrawerId,
+        initial: "collapsed",
+        animate: "open",
+        exit: "collapsed",
+        variants: {
+          open: { opacity: 1, height: "auto" },
+          collapsed: { opacity: 0, height: 0 }
+        },
+        transition: {
+          duration: 0.1
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "block-editor-link-control__drawer-inner", children })
+      }
+    ) })
+  ] });
+}
+var settings_drawer_default = LinkSettingsDrawer;
+export {
+  settings_drawer_default as default
+};
+//# sourceMappingURL=settings-drawer.mjs.map

package/build-module/components/link-control/settings.mjs

@@ -0,0 +1,57 @@
+// packages/block-editor/src/components/link-control/settings.js
+import { __ } from "@wordpress/i18n";
+import { CheckboxControl, VisuallyHidden } from "@wordpress/components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var noop = () => {
+};
+var LinkControlSettings = ({ value, onChange = noop, settings }) => {
+  if (!settings || !settings.length) {
+    return null;
+  }
+  const handleSettingChange = (setting) => (newValue) => {
+    onChange({
+      ...value,
+      [setting.id]: newValue
+    });
+  };
+  const theSettings = settings.map((setting) => {
+    if ("render" in setting) {
+      if (typeof setting.render === "function") {
+        const renderedContent = setting.render(
+          setting,
+          value,
+          onChange
+        );
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "block-editor-link-control__setting",
+            children: renderedContent
+          },
+          setting.id
+        );
+      }
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      CheckboxControl,
+      {
+        className: "block-editor-link-control__setting",
+        label: setting.title,
+        onChange: handleSettingChange(setting),
+        checked: value ? !!value[setting.id] : false,
+        help: setting?.help
+      },
+      setting.id
+    );
+  }).filter(Boolean);
+  return /* @__PURE__ */ jsxs("fieldset", { className: "block-editor-link-control__settings", children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { as: "legend", children: __("Currently selected link settings") }),
+    theSettings
+  ] });
+};
+var settings_default = LinkControlSettings;
+export {
+  settings_default as default
+};
+//# sourceMappingURL=settings.mjs.map

package/build-module/components/link-control/use-create-page.mjs

@@ -0,0 +1,63 @@
+// packages/block-editor/src/components/link-control/use-create-page.js
+import { __ } from "@wordpress/i18n";
+import { useEffect, useState, useRef } from "@wordpress/element";
+function useCreatePage(handleCreatePage) {
+  const cancelableCreateSuggestion = useRef();
+  const [isCreatingPage, setIsCreatingPage] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const createPage = async function(suggestionTitle) {
+    setIsCreatingPage(true);
+    setErrorMessage(null);
+    try {
+      cancelableCreateSuggestion.current = makeCancelable(
+        // Using Promise.resolve to allow createSuggestion to return a
+        // non-Promise based value.
+        Promise.resolve(handleCreatePage(suggestionTitle))
+      );
+      return await cancelableCreateSuggestion.current.promise;
+    } catch (error) {
+      if (error && error.isCanceled) {
+        return;
+      }
+      setErrorMessage(
+        error.message || __(
+          "An unknown error occurred during creation. Please try again."
+        )
+      );
+      throw error;
+    } finally {
+      setIsCreatingPage(false);
+    }
+  };
+  useEffect(() => {
+    return () => {
+      if (cancelableCreateSuggestion.current) {
+        cancelableCreateSuggestion.current.cancel();
+      }
+    };
+  }, []);
+  return {
+    createPage,
+    isCreatingPage,
+    errorMessage
+  };
+}
+var makeCancelable = (promise) => {
+  let hasCanceled_ = false;
+  const wrappedPromise = new Promise((resolve, reject) => {
+    promise.then(
+      (val) => hasCanceled_ ? reject({ isCanceled: true }) : resolve(val),
+      (error) => hasCanceled_ ? reject({ isCanceled: true }) : reject(error)
+    );
+  });
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      hasCanceled_ = true;
+    }
+  };
+};
+export {
+  useCreatePage as default
+};
+//# sourceMappingURL=use-create-page.mjs.map

package/build-module/components/link-control/use-internal-value.mjs

@@ -0,0 +1,49 @@
+// packages/block-editor/src/components/link-control/use-internal-value.js
+import { useState } from "@wordpress/element";
+import fastDeepEqual from "fast-deep-equal";
+function useInternalValue(value) {
+  const [internalValue, setInternalValue] = useState(value || {});
+  const [previousValue, setPreviousValue] = useState(value);
+  if (!fastDeepEqual(value, previousValue)) {
+    setPreviousValue(value);
+    setInternalValue(value);
+  }
+  const setInternalURLInputValue = (nextValue) => {
+    setInternalValue({
+      ...internalValue,
+      url: nextValue
+    });
+  };
+  const setInternalTextInputValue = (nextValue) => {
+    setInternalValue({
+      ...internalValue,
+      title: nextValue
+    });
+  };
+  const createSetInternalSettingValueHandler = (settingsKeys) => (nextValue) => {
+    const settingsUpdates = Object.keys(nextValue).reduce(
+      (acc, key) => {
+        if (settingsKeys.includes(key)) {
+          acc[key] = nextValue[key];
+        }
+        return acc;
+      },
+      {}
+    );
+    setInternalValue({
+      ...internalValue,
+      ...settingsUpdates
+    });
+  };
+  return [
+    internalValue,
+    setInternalValue,
+    setInternalURLInputValue,
+    setInternalTextInputValue,
+    createSetInternalSettingValueHandler
+  ];
+}
+export {
+  useInternalValue as default
+};
+//# sourceMappingURL=use-internal-value.mjs.map

package/build-module/components/link-control/use-rich-url-data.mjs

@@ -0,0 +1,71 @@
+// packages/block-editor/src/components/link-control/use-rich-url-data.js
+import { store as blockEditorStore } from "../../store/index.mjs";
+import { useSelect } from "@wordpress/data";
+import { useEffect, useReducer } from "@wordpress/element";
+function reducer(state, action) {
+  switch (action.type) {
+    case "RESOLVED":
+      return {
+        ...state,
+        isFetching: false,
+        richData: action.richData
+      };
+    case "ERROR":
+      return {
+        ...state,
+        isFetching: false,
+        richData: null
+      };
+    case "LOADING":
+      return {
+        ...state,
+        isFetching: true
+      };
+    default:
+      throw new Error(`Unexpected action type ${action.type}`);
+  }
+}
+function useRemoteUrlData(url) {
+  const [state, dispatch] = useReducer(reducer, {
+    richData: null,
+    isFetching: false
+  });
+  const { fetchRichUrlData } = useSelect((select) => {
+    const { getSettings } = select(blockEditorStore);
+    return {
+      fetchRichUrlData: getSettings().__experimentalFetchRichUrlData
+    };
+  }, []);
+  useEffect(() => {
+    if (url?.length && fetchRichUrlData && typeof AbortController !== "undefined") {
+      dispatch({
+        type: "LOADING"
+      });
+      const controller = new window.AbortController();
+      const signal = controller.signal;
+      fetchRichUrlData(url, {
+        signal
+      }).then((urlData) => {
+        dispatch({
+          type: "RESOLVED",
+          richData: urlData
+        });
+      }).catch(() => {
+        if (!signal.aborted) {
+          dispatch({
+            type: "ERROR"
+          });
+        }
+      });
+      return () => {
+        controller.abort();
+      };
+    }
+  }, [url]);
+  return state;
+}
+var use_rich_url_data_default = useRemoteUrlData;
+export {
+  use_rich_url_data_default as default
+};
+//# sourceMappingURL=use-rich-url-data.mjs.map