@wordpress/block-library 9.36.2-next.8fd3f8831.0 → 9.37.2-next.79a2f3cdd.0

package/build-module/cover/edit/index.js

@@ -1,583 +0,0 @@
-// packages/block-library/src/cover/edit/index.js
-import clsx from "clsx";
-import { useEntityProp, store as coreStore } from "@wordpress/core-data";
-import { useEffect, useMemo, useRef } from "@wordpress/element";
-import { Placeholder, Spinner } from "@wordpress/components";
-import { compose, useResizeObserver } from "@wordpress/compose";
-import {
-  withColors,
-  ColorPalette,
-  useBlockProps,
-  useSettings,
-  useInnerBlocksProps,
-  __experimentalUseGradient,
-  store as blockEditorStore,
-  useBlockEditingMode
-} from "@wordpress/block-editor";
-import { __ } from "@wordpress/i18n";
-import { useSelect, useDispatch } from "@wordpress/data";
-import { isBlobURL } from "@wordpress/blob";
-import { store as noticesStore } from "@wordpress/notices";
-import {
-  attributesFromMedia,
-  IMAGE_BACKGROUND_TYPE,
-  VIDEO_BACKGROUND_TYPE,
-  EMBED_VIDEO_BACKGROUND_TYPE,
-  dimRatioToClass,
-  isContentPositionCenter,
-  getPositionClassName,
-  mediaPosition
-} from "../shared.js";
-import CoverInspectorControls from "./inspector-controls.js";
-import CoverBlockControls from "./block-controls.js";
-import CoverPlaceholder from "./cover-placeholder.js";
-import ResizableCoverPopover from "./resizable-cover-popover.js";
-import {
-  getMediaColor,
-  compositeIsDark,
-  DEFAULT_BACKGROUND_COLOR,
-  DEFAULT_OVERLAY_COLOR
-} from "./color-utils.js";
-import { DEFAULT_MEDIA_SIZE_SLUG } from "../constants.js";
-import { getIframeSrc, getBackgroundVideoSrc } from "../embed-video-utils.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function getInnerBlocksTemplate(attributes) {
-  return [
-    [
-      "core/paragraph",
-      {
-        style: {
-          typography: {
-            textAlign: "center"
-          }
-        },
-        placeholder: __("Write title\u2026"),
-        ...attributes
-      }
-    ]
-  ];
-}
-var isTemporaryMedia = (id, url) => !id && isBlobURL(url);
-function CoverEdit({
-  attributes,
-  clientId,
-  isSelected,
-  overlayColor,
-  setAttributes,
-  setOverlayColor,
-  toggleSelection,
-  context: { postId, postType }
-}) {
-  const {
-    contentPosition,
-    id,
-    url: originalUrl,
-    backgroundType: originalBackgroundType,
-    useFeaturedImage,
-    dimRatio,
-    focalPoint,
-    hasParallax,
-    isDark,
-    isRepeated,
-    minHeight,
-    minHeightUnit,
-    alt,
-    allowedBlocks,
-    templateLock,
-    tagName: TagName = "div",
-    isUserOverlayColor,
-    sizeSlug,
-    poster
-  } = attributes;
-  const [featuredImage] = useEntityProp(
-    "postType",
-    postType,
-    "featured_media",
-    postId
-  );
-  const { getSettings } = useSelect(blockEditorStore);
-  const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
-  const { media } = useSelect(
-    (select) => {
-      return {
-        media: featuredImage && useFeaturedImage ? select(coreStore).getEntityRecord(
-          "postType",
-          "attachment",
-          featuredImage,
-          {
-            context: "view"
-          }
-        ) : void 0
-      };
-    },
-    [featuredImage, useFeaturedImage]
-  );
-  const mediaUrl = media?.media_details?.sizes?.[sizeSlug]?.source_url ?? media?.source_url;
-  useEffect(() => {
-    (async () => {
-      if (!useFeaturedImage) {
-        return;
-      }
-      const averageBackgroundColor = await getMediaColor(mediaUrl);
-      let newOverlayColor = overlayColor.color;
-      if (!isUserOverlayColor) {
-        newOverlayColor = averageBackgroundColor;
-        __unstableMarkNextChangeAsNotPersistent();
-        setOverlayColor(newOverlayColor);
-      }
-      const newIsDark = compositeIsDark(
-        dimRatio,
-        newOverlayColor,
-        averageBackgroundColor
-      );
-      __unstableMarkNextChangeAsNotPersistent();
-      setAttributes({
-        isDark: newIsDark,
-        isUserOverlayColor: isUserOverlayColor || false
-      });
-    })();
-  }, [mediaUrl]);
-  const url = useFeaturedImage ? mediaUrl : (
-    // Ensure the url is not malformed due to sanitization through `wp_kses`.
-    originalUrl?.replaceAll("&", "&")
-  );
-  const backgroundType = useFeaturedImage ? IMAGE_BACKGROUND_TYPE : originalBackgroundType;
-  const { createErrorNotice } = useDispatch(noticesStore);
-  const { gradientClass, gradientValue } = __experimentalUseGradient();
-  const onSelectMedia = async (newMedia) => {
-    const mediaAttributes = attributesFromMedia(newMedia);
-    const isImage = [newMedia?.type, newMedia?.media_type].includes(
-      IMAGE_BACKGROUND_TYPE
-    );
-    const averageBackgroundColor = await getMediaColor(
-      isImage ? newMedia?.url : void 0
-    );
-    let newOverlayColor = overlayColor.color;
-    if (!isUserOverlayColor) {
-      newOverlayColor = averageBackgroundColor;
-      setOverlayColor(newOverlayColor);
-      __unstableMarkNextChangeAsNotPersistent();
-    }
-    const newDimRatio = originalUrl === void 0 && dimRatio === 100 ? 50 : dimRatio;
-    const newIsDark = compositeIsDark(
-      newDimRatio,
-      newOverlayColor,
-      averageBackgroundColor
-    );
-    if (backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes?.id) {
-      const { imageDefaultSize } = getSettings();
-      if (sizeSlug && (newMedia?.sizes?.[sizeSlug] || newMedia?.media_details?.sizes?.[sizeSlug])) {
-        mediaAttributes.sizeSlug = sizeSlug;
-        mediaAttributes.url = newMedia?.sizes?.[sizeSlug]?.url || newMedia?.media_details?.sizes?.[sizeSlug]?.source_url;
-      } else if (newMedia?.sizes?.[imageDefaultSize] || newMedia?.media_details?.sizes?.[imageDefaultSize]) {
-        mediaAttributes.sizeSlug = imageDefaultSize;
-        mediaAttributes.url = newMedia?.sizes?.[imageDefaultSize]?.url || newMedia?.media_details?.sizes?.[imageDefaultSize]?.source_url;
-      } else {
-        mediaAttributes.sizeSlug = DEFAULT_MEDIA_SIZE_SLUG;
-      }
-    }
-    setAttributes({
-      ...mediaAttributes,
-      focalPoint: void 0,
-      useFeaturedImage: void 0,
-      dimRatio: newDimRatio,
-      isDark: newIsDark,
-      isUserOverlayColor: isUserOverlayColor || false
-    });
-  };
-  const onClearMedia = () => {
-    let newOverlayColor = overlayColor.color;
-    if (!isUserOverlayColor) {
-      newOverlayColor = DEFAULT_OVERLAY_COLOR;
-      setOverlayColor(void 0);
-      __unstableMarkNextChangeAsNotPersistent();
-    }
-    const newIsDark = compositeIsDark(
-      dimRatio,
-      newOverlayColor,
-      DEFAULT_BACKGROUND_COLOR
-    );
-    setAttributes({
-      url: void 0,
-      id: void 0,
-      backgroundType: void 0,
-      focalPoint: void 0,
-      hasParallax: void 0,
-      isRepeated: void 0,
-      useFeaturedImage: void 0,
-      isDark: newIsDark
-    });
-  };
-  const onSetOverlayColor = async (newOverlayColor) => {
-    const averageBackgroundColor = await getMediaColor(url);
-    const newIsDark = compositeIsDark(
-      dimRatio,
-      newOverlayColor,
-      averageBackgroundColor
-    );
-    setOverlayColor(newOverlayColor);
-    __unstableMarkNextChangeAsNotPersistent();
-    setAttributes({
-      isUserOverlayColor: true,
-      isDark: newIsDark
-    });
-  };
-  const onUpdateDimRatio = async (newDimRatio) => {
-    const averageBackgroundColor = await getMediaColor(url);
-    const newIsDark = compositeIsDark(
-      newDimRatio,
-      overlayColor.color,
-      averageBackgroundColor
-    );
-    setAttributes({
-      dimRatio: newDimRatio,
-      isDark: newIsDark
-    });
-  };
-  const onUploadError = (message) => {
-    createErrorNotice(message, { type: "snackbar" });
-  };
-  const onSelectEmbedUrl = (embedUrl) => {
-    const newDimRatio = originalUrl === void 0 && dimRatio === 100 ? 50 : dimRatio;
-    setAttributes({
-      url: embedUrl,
-      backgroundType: EMBED_VIDEO_BACKGROUND_TYPE,
-      dimRatio: newDimRatio,
-      id: void 0,
-      focalPoint: void 0,
-      hasParallax: void 0,
-      isRepeated: void 0,
-      useFeaturedImage: void 0
-    });
-  };
-  const { embedPreview, isFetchingEmbed } = useSelect(
-    (select) => {
-      if (backgroundType !== EMBED_VIDEO_BACKGROUND_TYPE || !url) {
-        return {
-          embedPreview: void 0,
-          isFetchingEmbed: false
-        };
-      }
-      const { getEmbedPreview, isRequestingEmbedPreview } = select(coreStore);
-      return {
-        embedPreview: getEmbedPreview(url),
-        isFetchingEmbed: isRequestingEmbedPreview(url)
-      };
-    },
-    [url, backgroundType]
-  );
-  const embedSrc = useMemo(() => {
-    if (backgroundType !== EMBED_VIDEO_BACKGROUND_TYPE || !embedPreview?.html) {
-      return null;
-    }
-    const iframeSrc = getIframeSrc(embedPreview.html);
-    if (!iframeSrc) {
-      return null;
-    }
-    return getBackgroundVideoSrc(iframeSrc);
-  }, [embedPreview, backgroundType]);
-  const isUploadingMedia = isTemporaryMedia(id, url);
-  const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
-  const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
-  const isEmbedVideoBackground = EMBED_VIDEO_BACKGROUND_TYPE === backgroundType;
-  const blockEditingMode = useBlockEditingMode();
-  const hasNonContentControls = blockEditingMode === "default";
-  const [resizeListener, { height, width }] = useResizeObserver();
-  const resizableBoxDimensions = useMemo(() => {
-    return {
-      height: minHeightUnit === "px" && minHeight ? minHeight : "auto",
-      width: "auto"
-    };
-  }, [minHeight, minHeightUnit]);
-  const minHeightWithUnit = minHeight && minHeightUnit ? `${minHeight}${minHeightUnit}` : minHeight;
-  const isImgElement = !(hasParallax || isRepeated);
-  const style = {
-    minHeight: minHeightWithUnit || void 0
-  };
-  const backgroundImage = url ? `url(${url})` : void 0;
-  const backgroundPosition = mediaPosition(focalPoint);
-  const bgStyle = { backgroundColor: overlayColor.color };
-  const mediaStyle = {
-    objectPosition: focalPoint && isImgElement ? mediaPosition(focalPoint) : void 0
-  };
-  const hasBackground = !!(url || overlayColor.color || gradientValue);
-  const hasInnerBlocks = useSelect(
-    (select) => select(blockEditorStore).getBlock(clientId).innerBlocks.length > 0,
-    [clientId]
-  );
-  const ref = useRef();
-  const blockProps = useBlockProps({ ref });
-  const [fontSizes] = useSettings("typography.fontSizes");
-  const hasFontSizes = fontSizes?.length > 0;
-  const innerBlocksTemplate = getInnerBlocksTemplate({
-    fontSize: hasFontSizes ? "large" : void 0
-  });
-  const innerBlocksProps = useInnerBlocksProps(
-    {
-      className: "wp-block-cover__inner-container"
-    },
-    {
-      // Avoid template sync when the `templateLock` value is `all` or `contentOnly`.
-      // See: https://github.com/WordPress/gutenberg/pull/45632
-      template: !hasInnerBlocks ? innerBlocksTemplate : void 0,
-      templateInsertUpdatesSelection: true,
-      allowedBlocks,
-      templateLock,
-      dropZoneElement: ref.current
-    }
-  );
-  const mediaElement = useRef();
-  const currentSettings = {
-    isVideoBackground,
-    isImageBackground,
-    mediaElement,
-    hasInnerBlocks,
-    url,
-    isImgElement,
-    overlayColor
-  };
-  const toggleUseFeaturedImage = async () => {
-    const newUseFeaturedImage = !useFeaturedImage;
-    const averageBackgroundColor = newUseFeaturedImage ? await getMediaColor(mediaUrl) : DEFAULT_BACKGROUND_COLOR;
-    const newOverlayColor = !isUserOverlayColor ? averageBackgroundColor : overlayColor.color;
-    if (!isUserOverlayColor) {
-      if (newUseFeaturedImage) {
-        setOverlayColor(newOverlayColor);
-      } else {
-        setOverlayColor(void 0);
-      }
-      __unstableMarkNextChangeAsNotPersistent();
-    }
-    const newDimRatio = dimRatio === 100 ? 50 : dimRatio;
-    const newIsDark = compositeIsDark(
-      newDimRatio,
-      newOverlayColor,
-      averageBackgroundColor
-    );
-    setAttributes({
-      id: void 0,
-      url: void 0,
-      useFeaturedImage: newUseFeaturedImage,
-      dimRatio: newDimRatio,
-      backgroundType: useFeaturedImage ? IMAGE_BACKGROUND_TYPE : void 0,
-      isDark: newIsDark
-    });
-  };
-  const blockControls = /* @__PURE__ */ jsx(
-    CoverBlockControls,
-    {
-      attributes,
-      setAttributes,
-      onSelectMedia,
-      onSelectEmbedUrl,
-      currentSettings,
-      toggleUseFeaturedImage,
-      onClearMedia,
-      blockEditingMode
-    }
-  );
-  const inspectorControls = /* @__PURE__ */ jsx(
-    CoverInspectorControls,
-    {
-      attributes,
-      setAttributes,
-      clientId,
-      setOverlayColor: onSetOverlayColor,
-      coverRef: ref,
-      currentSettings,
-      toggleUseFeaturedImage,
-      updateDimRatio: onUpdateDimRatio,
-      onClearMedia,
-      featuredImage: media
-    }
-  );
-  const resizableCoverProps = {
-    className: "block-library-cover__resize-container",
-    clientId,
-    height,
-    minHeight: minHeightWithUnit,
-    onResizeStart: () => {
-      setAttributes({ minHeightUnit: "px" });
-      toggleSelection(false);
-    },
-    onResize: (value) => {
-      setAttributes({ minHeight: value });
-    },
-    onResizeStop: (newMinHeight) => {
-      toggleSelection(true);
-      setAttributes({ minHeight: newMinHeight });
-    },
-    // Hide the resize handle if an aspect ratio is set, as the aspect ratio takes precedence.
-    showHandle: !attributes.style?.dimensions?.aspectRatio,
-    size: resizableBoxDimensions,
-    width
-  };
-  if (!useFeaturedImage && !hasInnerBlocks && !hasBackground) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      blockControls,
-      inspectorControls,
-      hasNonContentControls && isSelected && /* @__PURE__ */ jsx(ResizableCoverPopover, { ...resizableCoverProps }),
-      /* @__PURE__ */ jsxs(
-        TagName,
-        {
-          ...blockProps,
-          className: clsx("is-placeholder", blockProps.className),
-          style: {
-            ...blockProps.style,
-            minHeight: minHeightWithUnit || void 0
-          },
-          children: [
-            resizeListener,
-            /* @__PURE__ */ jsx(
-              CoverPlaceholder,
-              {
-                onSelectMedia,
-                onError: onUploadError,
-                toggleUseFeaturedImage,
-                children: /* @__PURE__ */ jsx("div", { className: "wp-block-cover__placeholder-background-options", children: /* @__PURE__ */ jsx(
-                  ColorPalette,
-                  {
-                    disableCustomColors: true,
-                    value: overlayColor.color,
-                    onChange: onSetOverlayColor,
-                    clearable: false,
-                    asButtons: true,
-                    "aria-label": __("Overlay color")
-                  }
-                ) })
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-  const classes = clsx(
-    {
-      "is-dark-theme": isDark,
-      "is-light": !isDark,
-      "is-transient": isUploadingMedia,
-      "has-parallax": hasParallax,
-      "is-repeated": isRepeated,
-      "has-custom-content-position": !isContentPositionCenter(contentPosition)
-    },
-    getPositionClassName(contentPosition)
-  );
-  const showOverlay = url || !useFeaturedImage || useFeaturedImage && !url;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    blockControls,
-    inspectorControls,
-    /* @__PURE__ */ jsxs(
-      TagName,
-      {
-        ...blockProps,
-        className: clsx(classes, blockProps.className),
-        style: { ...style, ...blockProps.style },
-        "data-url": url,
-        children: [
-          resizeListener,
-          !url && useFeaturedImage && /* @__PURE__ */ jsx(
-            Placeholder,
-            {
-              className: "wp-block-cover__image--placeholder-image",
-              withIllustration: true
-            }
-          ),
-          url && isImageBackground && (isImgElement ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              ref: mediaElement,
-              className: "wp-block-cover__image-background",
-              alt,
-              src: url,
-              style: mediaStyle
-            }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: mediaElement,
-              role: alt ? "img" : void 0,
-              "aria-label": alt ? alt : void 0,
-              className: clsx(
-                classes,
-                "wp-block-cover__image-background"
-              ),
-              style: { backgroundImage, backgroundPosition }
-            }
-          )),
-          url && isVideoBackground && /* @__PURE__ */ jsx(
-            "video",
-            {
-              ref: mediaElement,
-              className: "wp-block-cover__video-background",
-              autoPlay: true,
-              muted: true,
-              loop: true,
-              src: url,
-              poster,
-              style: mediaStyle
-            }
-          ),
-          isEmbedVideoBackground && embedSrc && /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: mediaElement,
-              className: "wp-block-cover__video-background wp-block-cover__embed-background",
-              style: mediaStyle,
-              children: /* @__PURE__ */ jsx(
-                "iframe",
-                {
-                  src: embedSrc,
-                  title: "Background video",
-                  frameBorder: "0",
-                  allow: "autoplay; fullscreen"
-                }
-              )
-            }
-          ),
-          isEmbedVideoBackground && !embedSrc && isFetchingEmbed && /* @__PURE__ */ jsx(Spinner, {}),
-          showOverlay && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: clsx(
-                "wp-block-cover__background",
-                dimRatioToClass(dimRatio),
-                {
-                  [overlayColor.class]: overlayColor.class,
-                  "has-background-dim": dimRatio !== void 0,
-                  // For backwards compatibility. Former versions of the Cover Block applied
-                  // `.wp-block-cover__gradient-background` in the presence of
-                  // media, a gradient and a dim.
-                  "wp-block-cover__gradient-background": url && gradientValue && dimRatio !== 0,
-                  "has-background-gradient": gradientValue,
-                  [gradientClass]: gradientClass
-                }
-              ),
-              style: { backgroundImage: gradientValue, ...bgStyle }
-            }
-          ),
-          isUploadingMedia && /* @__PURE__ */ jsx(Spinner, {}),
-          /* @__PURE__ */ jsx(
-            CoverPlaceholder,
-            {
-              disableMediaButtons: true,
-              onSelectMedia,
-              onError: onUploadError,
-              toggleUseFeaturedImage
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { ...innerBlocksProps })
-        ]
-      }
-    ),
-    hasNonContentControls && isSelected && /* @__PURE__ */ jsx(ResizableCoverPopover, { ...resizableCoverProps })
-  ] });
-}
-var edit_default = compose([
-  withColors({ overlayColor: "background-color" })
-])(CoverEdit);
-export {
-  edit_default as default
-};
-//# sourceMappingURL=index.js.map