@wordpress/editor 14.33.3 → 14.34.0

package/build/components/style-book/index.js

@@ -0,0 +1,627 @@
+"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);
+var style_book_exports = {};
+__export(style_book_exports, {
+  StyleBookBody: () => StyleBookBody,
+  StyleBookPreview: () => StyleBookPreview,
+  default: () => style_book_default,
+  getExamplesForSinglePageUse: () => getExamplesForSinglePageUse
+});
+module.exports = __toCommonJS(style_book_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_block_editor = require("@wordpress/block-editor");
+var import_data = require("@wordpress/data");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_element = require("@wordpress/element");
+var import_keycodes = require("@wordpress/keycodes");
+var import_media_utils = require("@wordpress/media-utils");
+var import_core_data = require("@wordpress/core-data");
+var import_lock_unlock = require("../../lock-unlock");
+var import_constants = require("./constants");
+var import_categories = require("./categories");
+var import_examples = require("./examples");
+var import_global_styles_renderer = require("../global-styles-renderer");
+var import_constants2 = require("../style-book/constants");
+var import_use_global_styles_output = require("../../hooks/use-global-styles-output");
+var import_global_styles = require("../global-styles");
+var import_store = require("../../store");
+const { ExperimentalBlockEditorProvider } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+const { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+function isObjectEmpty(object) {
+  return !object || Object.keys(object).length === 0;
+}
+const scrollToSection = (anchorId, iframe) => {
+  if (!anchorId || !iframe || !iframe?.contentDocument) {
+    return;
+  }
+  const element = anchorId === "top" ? iframe.contentDocument.body : iframe.contentDocument.getElementById(anchorId);
+  if (element) {
+    element.scrollIntoView({
+      behavior: "smooth"
+    });
+  }
+};
+const getStyleBookNavigationFromPath = (path) => {
+  if (path && typeof path === "string") {
+    if (path === "/" || path.startsWith("/typography") || path.startsWith("/colors") || path.startsWith("/blocks")) {
+      return {
+        top: true
+      };
+    }
+  }
+  return null;
+};
+function useMultiOriginPalettes() {
+  const { colors, gradients } = (0, import_block_editor.__experimentalUseMultipleOriginColorsAndGradients)();
+  const [
+    shouldDisplayDefaultDuotones,
+    customDuotones,
+    themeDuotones,
+    defaultDuotones
+  ] = (0, import_block_editor.useSettings)(
+    "color.defaultDuotone",
+    "color.duotone.custom",
+    "color.duotone.theme",
+    "color.duotone.default"
+  );
+  const palettes = (0, import_element.useMemo)(() => {
+    const result = { colors, gradients, duotones: [] };
+    if (themeDuotones && themeDuotones.length) {
+      result.duotones.push({
+        name: (0, import_i18n._x)(
+          "Theme",
+          "Indicates these duotone filters come from the theme."
+        ),
+        slug: "theme",
+        duotones: themeDuotones
+      });
+    }
+    if (shouldDisplayDefaultDuotones && defaultDuotones && defaultDuotones.length) {
+      result.duotones.push({
+        name: (0, import_i18n._x)(
+          "Default",
+          "Indicates these duotone filters come from WordPress."
+        ),
+        slug: "default",
+        duotones: defaultDuotones
+      });
+    }
+    if (customDuotones && customDuotones.length) {
+      result.duotones.push({
+        name: (0, import_i18n._x)(
+          "Custom",
+          "Indicates these doutone filters are created by the user."
+        ),
+        slug: "custom",
+        duotones: customDuotones
+      });
+    }
+    return result;
+  }, [
+    colors,
+    gradients,
+    customDuotones,
+    themeDuotones,
+    defaultDuotones,
+    shouldDisplayDefaultDuotones
+  ]);
+  return palettes;
+}
+function getExamplesForSinglePageUse(examples) {
+  const examplesForSinglePageUse = [];
+  const overviewCategoryExamples = (0, import_categories.getExamplesByCategory)(
+    { slug: "overview" },
+    examples
+  );
+  examplesForSinglePageUse.push(...overviewCategoryExamples.examples);
+  const otherExamples = examples.filter((example) => {
+    return example.category !== "overview" && !overviewCategoryExamples.examples.find(
+      (overviewExample) => overviewExample.name === example.name
+    );
+  });
+  examplesForSinglePageUse.push(...otherExamples);
+  return examplesForSinglePageUse;
+}
+function applyBlockVariationsToExamples(examples, variation) {
+  if (!variation) {
+    return examples;
+  }
+  return examples.map((example) => {
+    return {
+      ...example,
+      variation,
+      blocks: Array.isArray(example.blocks) ? example.blocks.map((block) => ({
+        ...block,
+        attributes: {
+          ...block.attributes,
+          style: void 0,
+          className: `is-style-${variation}`
+        }
+      })) : {
+        ...example.blocks,
+        attributes: {
+          ...example.blocks.attributes,
+          style: void 0,
+          className: `is-style-${variation}`
+        }
+      }
+    };
+  });
+}
+function StyleBook({
+  isSelected,
+  onClick,
+  onSelect,
+  showTabs = true,
+  userConfig = {},
+  path = ""
+}, ref) {
+  const textColor = (0, import_global_styles.useStyle)("color.text");
+  const backgroundColor = (0, import_global_styles.useStyle)("color.background");
+  const colors = useMultiOriginPalettes();
+  const examples = (0, import_element.useMemo)(() => (0, import_examples.getExamples)(colors), [colors]);
+  const tabs = (0, import_element.useMemo)(
+    () => (0, import_categories.getTopLevelStyleBookCategories)().filter(
+      (category) => examples.some(
+        (example) => example.category === category.slug
+      )
+    ),
+    [examples]
+  );
+  const examplesForSinglePageUse = getExamplesForSinglePageUse(examples);
+  const { base: baseConfig } = (0, import_global_styles.useGlobalStyles)();
+  const goTo = getStyleBookNavigationFromPath(path);
+  const mergedConfig = (0, import_element.useMemo)(() => {
+    if (!isObjectEmpty(userConfig) && !isObjectEmpty(baseConfig)) {
+      return (0, import_global_styles_engine.mergeGlobalStyles)(baseConfig, userConfig);
+    }
+    return {};
+  }, [baseConfig, userConfig]);
+  const originalSettings = (0, import_data.useSelect)(
+    (select) => select(import_block_editor.store).getSettings(),
+    []
+  );
+  const [globalStyles] = (0, import_use_global_styles_output.useGlobalStylesOutputWithConfig)(mergedConfig);
+  const settings = (0, import_element.useMemo)(
+    () => ({
+      ...originalSettings,
+      styles: !isObjectEmpty(globalStyles) && !isObjectEmpty(userConfig) ? globalStyles : originalSettings.styles,
+      isPreviewMode: true
+    }),
+    [globalStyles, originalSettings, userConfig]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: (0, import_clsx.default)("editor-style-book", {
+        "is-button": !!onClick
+      }),
+      style: {
+        color: textColor,
+        background: backgroundColor
+      },
+      children: showTabs ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-style-book__tablist-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.TabList, { children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: tab.slug, children: tab.title }, tab.slug)) }) }),
+        tabs.map((tab) => {
+          const categoryDefinition = tab.slug ? (0, import_categories.getTopLevelStyleBookCategories)().find(
+            (_category) => _category.slug === tab.slug
+          ) : null;
+          const filteredExamples = categoryDefinition ? (0, import_categories.getExamplesByCategory)(
+            categoryDefinition,
+            examples
+          ) : { examples };
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Tabs.TabPanel,
+            {
+              tabId: tab.slug,
+              focusable: false,
+              className: "editor-style-book__tabpanel",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                StyleBookBody,
+                {
+                  category: tab.slug,
+                  examples: filteredExamples,
+                  isSelected,
+                  onSelect,
+                  settings,
+                  title: tab.title,
+                  goTo
+                }
+              )
+            },
+            tab.slug
+          );
+        })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyleBookBody,
+        {
+          examples: { examples: examplesForSinglePageUse },
+          isSelected,
+          onClick,
+          onSelect,
+          settings,
+          goTo
+        }
+      )
+    }
+  );
+}
+const StyleBookPreview = ({
+  userConfig = {},
+  isStatic = false,
+  path,
+  onPathChange
+}) => {
+  const editorSettings = (0, import_data.useSelect)(
+    (select) => select(import_store.store).getEditorSettings(),
+    []
+  );
+  const canUserUploadMedia = (0, import_data.useSelect)(
+    (select) => select(import_core_data.store).canUser("create", {
+      kind: "postType",
+      name: "attachment"
+    }),
+    []
+  );
+  (0, import_element.useEffect)(() => {
+    (0, import_data.dispatch)(import_block_editor.store).updateSettings({
+      ...editorSettings,
+      mediaUpload: canUserUploadMedia ? import_media_utils.uploadMedia : void 0
+    });
+  }, [editorSettings, canUserUploadMedia]);
+  const [internalPath, setInternalPath] = (0, import_element.useState)("/");
+  const section = path ?? internalPath;
+  const onChangeSection = onPathChange ?? setInternalPath;
+  const isSelected = (blockName) => {
+    return section === `/blocks/${encodeURIComponent(blockName)}` || section.startsWith(
+      `/blocks/${encodeURIComponent(blockName)}/`
+    );
+  };
+  const onSelect = (blockName, isBlockVariation = false) => {
+    if (import_constants2.STYLE_BOOK_COLOR_GROUPS.find(
+      (group) => group.slug === blockName
+    )) {
+      onChangeSection("/colors/palette");
+      return;
+    }
+    if (blockName === "typography") {
+      onChangeSection("/typography");
+      return;
+    }
+    if (isBlockVariation) {
+      return;
+    }
+    onChangeSection(`/blocks/${encodeURIComponent(blockName)}`);
+  };
+  const colors = useMultiOriginPalettes();
+  const examples = (0, import_examples.getExamples)(colors);
+  const examplesForSinglePageUse = getExamplesForSinglePageUse(examples);
+  let previewCategory = null;
+  let blockVariation = null;
+  if (section.includes("/colors")) {
+    previewCategory = "colors";
+  } else if (section.includes("/typography")) {
+    previewCategory = "text";
+  } else if (section.includes("/blocks")) {
+    previewCategory = "blocks";
+    let blockName = decodeURIComponent(section).split("/blocks/")[1];
+    if (blockName?.includes("/variations")) {
+      [blockName, blockVariation] = blockName.split("/variations/");
+    }
+    if (blockName && examples.find((example) => example.name === blockName)) {
+      previewCategory = blockName;
+    }
+  } else if (!isStatic) {
+    previewCategory = "overview";
+  }
+  const categoryDefinition = import_constants2.STYLE_BOOK_PREVIEW_CATEGORIES.find(
+    (category) => category.slug === previewCategory
+  );
+  const filteredExamples = (0, import_element.useMemo)(() => {
+    if (!categoryDefinition) {
+      return {
+        examples: [
+          examples.find(
+            (example) => example.name === previewCategory
+          )
+        ]
+      };
+    }
+    return (0, import_categories.getExamplesByCategory)(categoryDefinition, examples);
+  }, [categoryDefinition, examples, previewCategory]);
+  const displayedExamples = (0, import_element.useMemo)(() => {
+    if (!previewCategory) {
+      return { examples: examplesForSinglePageUse };
+    }
+    if (blockVariation) {
+      return {
+        examples: applyBlockVariationsToExamples(
+          filteredExamples.examples,
+          blockVariation
+        )
+      };
+    }
+    return filteredExamples;
+  }, [
+    previewCategory,
+    examplesForSinglePageUse,
+    blockVariation,
+    filteredExamples
+  ]);
+  const { base: baseConfig } = (0, import_global_styles.useGlobalStyles)();
+  const goTo = getStyleBookNavigationFromPath(section);
+  const mergedConfig = (0, import_element.useMemo)(() => {
+    if (!isObjectEmpty(userConfig) && !isObjectEmpty(baseConfig)) {
+      return (0, import_global_styles_engine.mergeGlobalStyles)(baseConfig, userConfig);
+    }
+    return {};
+  }, [baseConfig, userConfig]);
+  const [globalStyles] = (0, import_use_global_styles_output.useGlobalStylesOutputWithConfig)(mergedConfig);
+  const settings = (0, import_element.useMemo)(
+    () => ({
+      ...editorSettings,
+      styles: !isObjectEmpty(globalStyles) && !isObjectEmpty(userConfig) ? globalStyles : editorSettings.styles,
+      isPreviewMode: true
+    }),
+    [globalStyles, editorSettings, userConfig]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-style-book", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.BlockEditorProvider, { settings, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_global_styles_renderer.GlobalStylesRenderer, { disableRootPadding: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyleBookBody,
+      {
+        examples: displayedExamples,
+        settings,
+        goTo,
+        isSelected: !isStatic ? isSelected : null,
+        onSelect: !isStatic ? onSelect : null
+      }
+    )
+  ] }) });
+};
+const StyleBookBody = ({
+  examples,
+  isSelected,
+  onClick,
+  onSelect,
+  settings,
+  title,
+  goTo
+}) => {
+  const [isFocused, setIsFocused] = (0, import_element.useState)(false);
+  const [hasIframeLoaded, setHasIframeLoaded] = (0, import_element.useState)(false);
+  const iframeRef = (0, import_element.useRef)(null);
+  const buttonModeProps = {
+    role: "button",
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    onKeyDown: (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      const { keyCode } = event;
+      if (onClick && (keyCode === import_keycodes.ENTER || keyCode === import_keycodes.SPACE)) {
+        event.preventDefault();
+        onClick(event);
+      }
+    },
+    onClick: (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (onClick) {
+        event.preventDefault();
+        onClick(event);
+      }
+    },
+    readonly: true
+  };
+  const handleLoad = () => setHasIframeLoaded(true);
+  (0, import_element.useLayoutEffect)(() => {
+    if (hasIframeLoaded && iframeRef?.current) {
+      if (goTo?.top) {
+        scrollToSection("top", iframeRef?.current);
+      }
+    }
+  }, [iframeRef?.current, goTo, scrollToSection, hasIframeLoaded]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_block_editor.__unstableIframe,
+    {
+      onLoad: handleLoad,
+      ref: iframeRef,
+      className: (0, import_clsx.default)("editor-style-book__iframe", {
+        "is-focused": isFocused && !!onClick,
+        "is-button": !!onClick
+      }),
+      name: "style-book-canvas",
+      tabIndex: 0,
+      ...onClick ? buttonModeProps : {},
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.__unstableEditorStyles, { styles: settings.styles }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("style", { children: [
+          import_constants.STYLE_BOOK_IFRAME_STYLES,
+          !!onClick && "body { cursor: pointer; } body * { pointer-events: none; }"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Examples,
+          {
+            className: "editor-style-book__examples",
+            filteredExamples: examples,
+            label: title ? (0, import_i18n.sprintf)(
+              // translators: %s: Category of blocks, e.g. Text.
+              (0, import_i18n.__)("Examples of blocks in the %s category"),
+              title
+            ) : (0, import_i18n.__)("Examples of blocks"),
+            isSelected,
+            onSelect
+          },
+          title
+        )
+      ]
+    }
+  );
+};
+const Examples = (0, import_element.memo)(
+  ({ className, filteredExamples, label, isSelected, onSelect }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.Composite,
+      {
+        orientation: "vertical",
+        className,
+        "aria-label": label,
+        role: "grid",
+        children: [
+          !!filteredExamples?.examples?.length && filteredExamples.examples.map((example) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Example,
+            {
+              id: `example-${example.name}`,
+              title: example.title,
+              content: example.content,
+              blocks: example.blocks,
+              isSelected: isSelected?.(example.name),
+              onClick: !!onSelect ? () => onSelect(
+                example.name,
+                !!example.variation
+              ) : null
+            },
+            example.name
+          )),
+          !!filteredExamples?.subcategories?.length && filteredExamples.subcategories.map((subcategory) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_components.Composite.Group,
+            {
+              className: "editor-style-book__subcategory",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Composite.GroupLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "editor-style-book__subcategory-title", children: subcategory.title }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Subcategory,
+                  {
+                    examples: subcategory.examples,
+                    isSelected,
+                    onSelect
+                  }
+                )
+              ]
+            },
+            `subcategory-${subcategory.slug}`
+          ))
+        ]
+      }
+    );
+  }
+);
+const Subcategory = ({ examples, isSelected, onSelect }) => {
+  return !!examples?.length && examples.map((example) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Example,
+    {
+      id: `example-${example.name}`,
+      title: example.title,
+      content: example.content,
+      blocks: example.blocks,
+      isSelected: isSelected?.(example.name),
+      onClick: !!onSelect ? () => onSelect(example.name) : null
+    },
+    example.name
+  ));
+};
+const disabledExamples = ["example-duotones"];
+const Example = ({ id, title, blocks, isSelected, onClick, content }) => {
+  const originalSettings = (0, import_data.useSelect)(
+    (select) => select(import_block_editor.store).getSettings(),
+    []
+  );
+  const settings = (0, import_element.useMemo)(
+    () => ({
+      ...originalSettings,
+      focusMode: false,
+      // Disable "Spotlight mode".
+      isPreviewMode: true
+    }),
+    [originalSettings]
+  );
+  const renderedBlocks = (0, import_element.useMemo)(
+    () => Array.isArray(blocks) ? blocks : [blocks],
+    [blocks]
+  );
+  const disabledProps = disabledExamples.includes(id) || !onClick ? {
+    disabled: true,
+    accessibleWhenDisabled: !!onClick
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.Composite.Item,
+    {
+      className: (0, import_clsx.default)("editor-style-book__example", {
+        "is-selected": isSelected,
+        "is-disabled-example": !!disabledProps?.disabled
+      }),
+      id,
+      "aria-label": !!onClick ? (0, import_i18n.sprintf)(
+        // translators: %s: Title of a block, e.g. Heading.
+        (0, import_i18n.__)("Open %s styles in Styles panel"),
+        title
+      ) : void 0,
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+      role: !!onClick ? "button" : null,
+      onClick,
+      ...disabledProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "editor-style-book__example-title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "editor-style-book__example-preview",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Disabled, { className: "editor-style-book__example-preview__content", children: content ? content : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              ExperimentalBlockEditorProvider,
+              {
+                value: renderedBlocks,
+                settings,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.__unstableEditorStyles, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockList, { renderAppender: false })
+                ]
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  ) }) });
+};
+var style_book_default = (0, import_element.forwardRef)(StyleBook);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyleBookBody,
+  StyleBookPreview,
+  getExamplesForSinglePageUse
+});
+//# sourceMappingURL=index.js.map