@wordpress/block-library/build-module/media-text/media-container.js

Block library for the WordPress editor.

// packages/block-library/src/media-text/media-container.js
import clsx from "clsx";
import { ResizableBox, Spinner, Placeholder } from "@wordpress/components";
import {
  BlockControls,
  BlockIcon,
  MediaPlaceholder,
  MediaReplaceFlow,
  store as blockEditorStore
} from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { useViewportMatch } from "@wordpress/compose";
import { useDispatch } from "@wordpress/data";
import { forwardRef } from "@wordpress/element";
import { isBlobURL } from "@wordpress/blob";
import { store as noticesStore } from "@wordpress/notices";
import { media as icon } from "@wordpress/icons";
import { imageFillStyles } from "./image-fill";
import { jsx, jsxs } from "react/jsx-runtime";
var ALLOWED_MEDIA_TYPES = ["image", "video"];
var noop = () => {
};
var ResizableBoxContainer = forwardRef(
  ({ isSelected, isStackedOnMobile, ...props }, ref) => {
    const isMobile = useViewportMatch("small", "<");
    return /* @__PURE__ */ jsx(
      ResizableBox,
      {
        ref,
        showHandle: isSelected && (!isMobile || !isStackedOnMobile),
        ...props
      }
    );
  }
);
function ToolbarEditButton({
  mediaId,
  mediaUrl,
  onSelectMedia,
  toggleUseFeaturedImage,
  useFeaturedImage
}) {
  return /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(
    MediaReplaceFlow,
    {
      mediaId,
      mediaURL: mediaUrl,
      allowedTypes: ALLOWED_MEDIA_TYPES,
      onSelect: onSelectMedia,
      onToggleFeaturedImage: toggleUseFeaturedImage,
      useFeaturedImage,
      onReset: () => onSelectMedia(void 0)
    }
  ) });
}
function PlaceholderContainer({
  className,
  mediaUrl,
  onSelectMedia,
  toggleUseFeaturedImage
}) {
  const { createErrorNotice } = useDispatch(noticesStore);
  const onUploadError = (message) => {
    createErrorNotice(message, { type: "snackbar" });
  };
  return /* @__PURE__ */ jsx(
    MediaPlaceholder,
    {
      icon: /* @__PURE__ */ jsx(BlockIcon, { icon }),
      labels: {
        title: __("Media area")
      },
      className,
      onSelect: onSelectMedia,
      onToggleFeaturedImage: toggleUseFeaturedImage,
      allowedTypes: ALLOWED_MEDIA_TYPES,
      onError: onUploadError,
      disableMediaButtons: mediaUrl
    }
  );
}
function MediaContainer(props, ref) {
  const {
    className,
    commitWidthChange,
    focalPoint,
    imageFill,
    isSelected,
    isStackedOnMobile,
    mediaAlt,
    mediaId,
    mediaPosition,
    mediaType,
    mediaUrl,
    mediaWidth,
    onSelectMedia,
    onWidthChange,
    enableResize,
    toggleUseFeaturedImage,
    useFeaturedImage,
    featuredImageURL,
    featuredImageAlt,
    refMedia
  } = props;
  const isTemporaryMedia = !mediaId && isBlobURL(mediaUrl);
  const { toggleSelection } = useDispatch(blockEditorStore);
  if (mediaUrl || featuredImageURL || useFeaturedImage) {
    const onResizeStart = () => {
      toggleSelection(false);
    };
    const onResize = (event, direction, elt) => {
      onWidthChange(parseInt(elt.style.width));
    };
    const onResizeStop = (event, direction, elt) => {
      toggleSelection(true);
      commitWidthChange(parseInt(elt.style.width));
    };
    const enablePositions = {
      right: enableResize && mediaPosition === "left",
      left: enableResize && mediaPosition === "right"
    };
    const positionStyles = mediaType === "image" && imageFill ? imageFillStyles(mediaUrl || featuredImageURL, focalPoint) : {};
    const mediaTypeRenderers = {
      image: () => useFeaturedImage && featuredImageURL ? /* @__PURE__ */ jsx(
        "img",
        {
          ref: refMedia,
          src: featuredImageURL,
          alt: featuredImageAlt,
          style: positionStyles
        }
      ) : mediaUrl && /* @__PURE__ */ jsx(
        "img",
        {
          ref: refMedia,
          src: mediaUrl,
          alt: mediaAlt,
          style: positionStyles
        }
      ),
      video: () => /* @__PURE__ */ jsx("video", { controls: true, ref: refMedia, src: mediaUrl })
    };
    return /* @__PURE__ */ jsxs(
      ResizableBoxContainer,
      {
        as: "figure",
        className: clsx(
          className,
          "editor-media-container__resizer",
          { "is-transient": isTemporaryMedia }
        ),
        size: { width: mediaWidth + "%" },
        minWidth: "10%",
        maxWidth: "100%",
        enable: enablePositions,
        onResizeStart,
        onResize,
        onResizeStop,
        axis: "x",
        isSelected,
        isStackedOnMobile,
        ref,
        children: [
          /* @__PURE__ */ jsx(
            ToolbarEditButton,
            {
              onSelectMedia,
              mediaUrl: useFeaturedImage && featuredImageURL ? featuredImageURL : mediaUrl,
              mediaId,
              toggleUseFeaturedImage,
              useFeaturedImage
            }
          ),
          (mediaTypeRenderers[mediaType] || noop)(),
          isTemporaryMedia && /* @__PURE__ */ jsx(Spinner, {}),
          !useFeaturedImage && /* @__PURE__ */ jsx(PlaceholderContainer, { ...props }),
          !featuredImageURL && useFeaturedImage && /* @__PURE__ */ jsx(
            Placeholder,
            {
              className: "wp-block-media-text--placeholder-image",
              style: positionStyles,
              withIllustration: true
            }
          )
        ]
      }
    );
  }
  return /* @__PURE__ */ jsx(PlaceholderContainer, { ...props });
}
var media_container_default = forwardRef(MediaContainer);
export {
  media_container_default as default
};
//# sourceMappingURL=media-container.js.map