@wordpress/edit-site 6.33.3 → 6.34.0

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

@@ -1,635 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import {
-  Disabled,
-  Composite,
-  privateApis as componentsPrivateApis
-} from "@wordpress/components";
-import { __, _x, sprintf } from "@wordpress/i18n";
-import {
-  BlockList,
-  privateApis as blockEditorPrivateApis,
-  store as blockEditorStore,
-  useSettings,
-  BlockEditorProvider,
-  __unstableEditorStyles as EditorStyles,
-  __unstableIframe as Iframe,
-  __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients
-} from "@wordpress/block-editor";
-import { privateApis as editorPrivateApis } from "@wordpress/editor";
-import { useSelect, dispatch } from "@wordpress/data";
-import {
-  useMemo,
-  useState,
-  memo,
-  useContext,
-  useRef,
-  useLayoutEffect,
-  useEffect
-} from "@wordpress/element";
-import { ENTER, SPACE } from "@wordpress/keycodes";
-import { uploadMedia } from "@wordpress/media-utils";
-import { store as coreStore } from "@wordpress/core-data";
-import { unlock } from "../../lock-unlock";
-import EditorCanvasContainer from "../editor-canvas-container";
-import { STYLE_BOOK_IFRAME_STYLES } from "./constants";
-import {
-  getExamplesByCategory,
-  getTopLevelStyleBookCategories
-} from "./categories";
-import { getExamples } from "./examples";
-import { store as siteEditorStore } from "../../store";
-import { useSection } from "../sidebar-global-styles-wrapper";
-import { GlobalStylesRenderer } from "../global-styles-renderer";
-import { getVariationClassName } from "../global-styles/utils";
-import {
-  STYLE_BOOK_COLOR_GROUPS,
-  STYLE_BOOK_PREVIEW_CATEGORIES
-} from "../style-book/constants";
-const {
-  ExperimentalBlockEditorProvider,
-  useGlobalStyle,
-  GlobalStylesContext,
-  useGlobalStylesOutputWithConfig
-} = unlock(blockEditorPrivateApis);
-const { mergeBaseAndUserConfigs } = unlock(editorPrivateApis);
-const { Tabs } = unlock(componentsPrivateApis);
-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 } = useMultipleOriginColorsAndGradients();
-  const [
-    shouldDisplayDefaultDuotones,
-    customDuotones,
-    themeDuotones,
-    defaultDuotones
-  ] = useSettings(
-    "color.defaultDuotone",
-    "color.duotone.custom",
-    "color.duotone.theme",
-    "color.duotone.default"
-  );
-  const palettes = useMemo(() => {
-    const result = { colors, gradients, duotones: [] };
-    if (themeDuotones && themeDuotones.length) {
-      result.duotones.push({
-        name: _x(
-          "Theme",
-          "Indicates these duotone filters come from the theme."
-        ),
-        slug: "theme",
-        duotones: themeDuotones
-      });
-    }
-    if (shouldDisplayDefaultDuotones && defaultDuotones && defaultDuotones.length) {
-      result.duotones.push({
-        name: _x(
-          "Default",
-          "Indicates these duotone filters come from WordPress."
-        ),
-        slug: "default",
-        duotones: defaultDuotones
-      });
-    }
-    if (customDuotones && customDuotones.length) {
-      result.duotones.push({
-        name: _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 = 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: getVariationClassName(variation)
-        }
-      })) : {
-        ...example.blocks,
-        attributes: {
-          ...example.blocks.attributes,
-          style: void 0,
-          className: getVariationClassName(variation)
-        }
-      }
-    };
-  });
-}
-function StyleBook({
-  enableResizing = true,
-  isSelected,
-  onClick,
-  onSelect,
-  showCloseButton = true,
-  onClose,
-  showTabs = true,
-  userConfig = {},
-  path = ""
-}) {
-  const [textColor] = useGlobalStyle("color.text");
-  const [backgroundColor] = useGlobalStyle("color.background");
-  const colors = useMultiOriginPalettes();
-  const examples = useMemo(() => getExamples(colors), [colors]);
-  const tabs = useMemo(
-    () => getTopLevelStyleBookCategories().filter(
-      (category) => examples.some(
-        (example) => example.category === category.slug
-      )
-    ),
-    [examples]
-  );
-  const examplesForSinglePageUse = getExamplesForSinglePageUse(examples);
-  const { base: baseConfig } = useContext(GlobalStylesContext);
-  const goTo = getStyleBookNavigationFromPath(path);
-  const mergedConfig = useMemo(() => {
-    if (!isObjectEmpty(userConfig) && !isObjectEmpty(baseConfig)) {
-      return mergeBaseAndUserConfigs(baseConfig, userConfig);
-    }
-    return {};
-  }, [baseConfig, userConfig]);
-  const originalSettings = useSelect(
-    (select) => select(blockEditorStore).getSettings(),
-    []
-  );
-  const [globalStyles] = useGlobalStylesOutputWithConfig(mergedConfig);
-  const settings = useMemo(
-    () => ({
-      ...originalSettings,
-      styles: !isObjectEmpty(globalStyles) && !isObjectEmpty(userConfig) ? globalStyles : originalSettings.styles,
-      isPreviewMode: true
-    }),
-    [globalStyles, originalSettings, userConfig]
-  );
-  return /* @__PURE__ */ jsx(
-    EditorCanvasContainer,
-    {
-      onClose,
-      enableResizing,
-      closeButtonLabel: showCloseButton ? __("Close") : null,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx("edit-site-style-book", {
-            "is-button": !!onClick
-          }),
-          style: {
-            color: textColor,
-            background: backgroundColor
-          },
-          children: showTabs ? /* @__PURE__ */ jsxs(Tabs, { children: [
-            /* @__PURE__ */ jsx("div", { className: "edit-site-style-book__tablist-container", children: /* @__PURE__ */ jsx(Tabs.TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
-              Tabs.Tab,
-              {
-                tabId: tab.slug,
-                children: tab.title
-              },
-              tab.slug
-            )) }) }),
-            tabs.map((tab) => {
-              const categoryDefinition = tab.slug ? getTopLevelStyleBookCategories().find(
-                (_category) => _category.slug === tab.slug
-              ) : null;
-              const filteredExamples = categoryDefinition ? getExamplesByCategory(
-                categoryDefinition,
-                examples
-              ) : { examples };
-              return /* @__PURE__ */ jsx(
-                Tabs.TabPanel,
-                {
-                  tabId: tab.slug,
-                  focusable: false,
-                  className: "edit-site-style-book__tabpanel",
-                  children: /* @__PURE__ */ jsx(
-                    StyleBookBody,
-                    {
-                      category: tab.slug,
-                      examples: filteredExamples,
-                      isSelected,
-                      onSelect,
-                      settings,
-                      title: tab.title,
-                      goTo
-                    }
-                  )
-                },
-                tab.slug
-              );
-            })
-          ] }) : /* @__PURE__ */ jsx(
-            StyleBookBody,
-            {
-              examples: { examples: examplesForSinglePageUse },
-              isSelected,
-              onClick,
-              onSelect,
-              settings,
-              goTo
-            }
-          )
-        }
-      )
-    }
-  );
-}
-const StyleBookPreview = ({ userConfig = {}, isStatic = false }) => {
-  const siteEditorSettings = useSelect(
-    (select) => select(siteEditorStore).getSettings(),
-    []
-  );
-  const canUserUploadMedia = useSelect(
-    (select) => select(coreStore).canUser("create", {
-      kind: "postType",
-      name: "attachment"
-    }),
-    []
-  );
-  useEffect(() => {
-    dispatch(blockEditorStore).updateSettings({
-      ...siteEditorSettings,
-      mediaUpload: canUserUploadMedia ? uploadMedia : void 0
-    });
-  }, [siteEditorSettings, canUserUploadMedia]);
-  const [section, onChangeSection] = useSection();
-  const isSelected = (blockName) => {
-    return section === `/blocks/${encodeURIComponent(blockName)}` || section.startsWith(
-      `/blocks/${encodeURIComponent(blockName)}/`
-    );
-  };
-  const onSelect = (blockName, isBlockVariation = false) => {
-    if (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 = 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 = STYLE_BOOK_PREVIEW_CATEGORIES.find(
-    (category) => category.slug === previewCategory
-  );
-  const filteredExamples = useMemo(() => {
-    if (!categoryDefinition) {
-      return {
-        examples: [
-          examples.find(
-            (example) => example.name === previewCategory
-          )
-        ]
-      };
-    }
-    return getExamplesByCategory(categoryDefinition, examples);
-  }, [categoryDefinition, examples, previewCategory]);
-  const displayedExamples = useMemo(() => {
-    if (!previewCategory) {
-      return { examples: examplesForSinglePageUse };
-    }
-    if (blockVariation) {
-      return {
-        examples: applyBlockVariationsToExamples(
-          filteredExamples.examples,
-          blockVariation
-        )
-      };
-    }
-    return filteredExamples;
-  }, [
-    previewCategory,
-    examplesForSinglePageUse,
-    blockVariation,
-    filteredExamples
-  ]);
-  const { base: baseConfig } = useContext(GlobalStylesContext);
-  const goTo = getStyleBookNavigationFromPath(section);
-  const mergedConfig = useMemo(() => {
-    if (!isObjectEmpty(userConfig) && !isObjectEmpty(baseConfig)) {
-      return mergeBaseAndUserConfigs(baseConfig, userConfig);
-    }
-    return {};
-  }, [baseConfig, userConfig]);
-  const [globalStyles] = useGlobalStylesOutputWithConfig(mergedConfig);
-  const settings = useMemo(
-    () => ({
-      ...siteEditorSettings,
-      styles: !isObjectEmpty(globalStyles) && !isObjectEmpty(userConfig) ? globalStyles : siteEditorSettings.styles,
-      isPreviewMode: true
-    }),
-    [globalStyles, siteEditorSettings, userConfig]
-  );
-  return /* @__PURE__ */ jsx("div", { className: "edit-site-style-book", children: /* @__PURE__ */ jsxs(BlockEditorProvider, { settings, children: [
-    /* @__PURE__ */ jsx(GlobalStylesRenderer, { disableRootPadding: true }),
-    /* @__PURE__ */ 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] = useState(false);
-  const [hasIframeLoaded, setHasIframeLoaded] = useState(false);
-  const iframeRef = useRef(null);
-  const buttonModeProps = {
-    role: "button",
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false),
-    onKeyDown: (event) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      const { keyCode } = event;
-      if (onClick && (keyCode === ENTER || keyCode === SPACE)) {
-        event.preventDefault();
-        onClick(event);
-      }
-    },
-    onClick: (event) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (onClick) {
-        event.preventDefault();
-        onClick(event);
-      }
-    },
-    readonly: true
-  };
-  const handleLoad = () => setHasIframeLoaded(true);
-  useLayoutEffect(() => {
-    if (hasIframeLoaded && iframeRef?.current) {
-      if (goTo?.top) {
-        scrollToSection("top", iframeRef?.current);
-      }
-    }
-  }, [iframeRef?.current, goTo, scrollToSection, hasIframeLoaded]);
-  return /* @__PURE__ */ jsxs(
-    Iframe,
-    {
-      onLoad: handleLoad,
-      ref: iframeRef,
-      className: clsx("edit-site-style-book__iframe", {
-        "is-focused": isFocused && !!onClick,
-        "is-button": !!onClick
-      }),
-      name: "style-book-canvas",
-      tabIndex: 0,
-      ...onClick ? buttonModeProps : {},
-      children: [
-        /* @__PURE__ */ jsx(EditorStyles, { styles: settings.styles }),
-        /* @__PURE__ */ jsxs("style", { children: [
-          STYLE_BOOK_IFRAME_STYLES,
-          !!onClick && "body { cursor: pointer; } body * { pointer-events: none; }"
-        ] }),
-        /* @__PURE__ */ jsx(
-          Examples,
-          {
-            className: "edit-site-style-book__examples",
-            filteredExamples: examples,
-            label: title ? sprintf(
-              // translators: %s: Category of blocks, e.g. Text.
-              __("Examples of blocks in the %s category"),
-              title
-            ) : __("Examples of blocks"),
-            isSelected,
-            onSelect
-          },
-          title
-        )
-      ]
-    }
-  );
-};
-const Examples = memo(
-  ({ className, filteredExamples, label, isSelected, onSelect }) => {
-    return /* @__PURE__ */ jsxs(
-      Composite,
-      {
-        orientation: "vertical",
-        className,
-        "aria-label": label,
-        role: "grid",
-        children: [
-          !!filteredExamples?.examples?.length && filteredExamples.examples.map((example) => /* @__PURE__ */ 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__ */ jsxs(
-            Composite.Group,
-            {
-              className: "edit-site-style-book__subcategory",
-              children: [
-                /* @__PURE__ */ jsx(Composite.GroupLabel, { children: /* @__PURE__ */ jsx("h2", { className: "edit-site-style-book__subcategory-title", children: subcategory.title }) }),
-                /* @__PURE__ */ jsx(
-                  Subcategory,
-                  {
-                    examples: subcategory.examples,
-                    isSelected,
-                    onSelect
-                  }
-                )
-              ]
-            },
-            `subcategory-${subcategory.slug}`
-          ))
-        ]
-      }
-    );
-  }
-);
-const Subcategory = ({ examples, isSelected, onSelect }) => {
-  return !!examples?.length && examples.map((example) => /* @__PURE__ */ 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 = useSelect(
-    (select) => select(blockEditorStore).getSettings(),
-    []
-  );
-  const settings = useMemo(
-    () => ({
-      ...originalSettings,
-      focusMode: false,
-      // Disable "Spotlight mode".
-      isPreviewMode: true
-    }),
-    [originalSettings]
-  );
-  const renderedBlocks = useMemo(
-    () => Array.isArray(blocks) ? blocks : [blocks],
-    [blocks]
-  );
-  const disabledProps = disabledExamples.includes(id) || !onClick ? {
-    disabled: true,
-    accessibleWhenDisabled: !!onClick
-  } : {};
-  return /* @__PURE__ */ jsx("div", { role: "row", children: /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsxs(
-    Composite.Item,
-    {
-      className: clsx("edit-site-style-book__example", {
-        "is-selected": isSelected,
-        "is-disabled-example": !!disabledProps?.disabled
-      }),
-      id,
-      "aria-label": !!onClick ? sprintf(
-        // translators: %s: Title of a block, e.g. Heading.
-        __("Open %s styles in Styles panel"),
-        title
-      ) : void 0,
-      render: /* @__PURE__ */ jsx("div", {}),
-      role: !!onClick ? "button" : null,
-      onClick,
-      ...disabledProps,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "edit-site-style-book__example-title", children: title }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "edit-site-style-book__example-preview",
-            "aria-hidden": true,
-            children: /* @__PURE__ */ jsx(Disabled, { className: "edit-site-style-book__example-preview__content", children: content ? content : /* @__PURE__ */ jsxs(
-              ExperimentalBlockEditorProvider,
-              {
-                value: renderedBlocks,
-                settings,
-                children: [
-                  /* @__PURE__ */ jsx(EditorStyles, {}),
-                  /* @__PURE__ */ jsx(BlockList, { renderAppender: false })
-                ]
-              }
-            ) })
-          }
-        )
-      ]
-    }
-  ) }) });
-};
-var style_book_default = StyleBook;
-export {
-  StyleBookBody,
-  StyleBookPreview,
-  style_book_default as default,
-  getExamplesForSinglePageUse
-};
-//# sourceMappingURL=index.js.map