@wordpress/block-library/build-module/utils/media-control.mjs

Block library for the WordPress editor.

// packages/block-library/src/utils/media-control.js
import {
  Button,
  DropZone,
  FlexBlock,
  Spinner,
  __experimentalItemGroup as ItemGroup,
  __experimentalHStack as HStack,
  __experimentalTruncate as Truncate
} from "@wordpress/components";
import {
  MediaReplaceFlow,
  store as blockEditorStore
} from "@wordpress/block-editor";
import { focus } from "@wordpress/dom";
import { useRef } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { reset as resetIcon } from "@wordpress/icons";
import { getFilename } from "@wordpress/url";
import { jsx, jsxs } from "react/jsx-runtime";
var focusToggleButton = (containerRef) => {
  window.requestAnimationFrame(() => {
    const [toggleButton] = focus.tabbable.find(containerRef?.current);
    if (!toggleButton) {
      return;
    }
    toggleButton.focus();
  });
};
function MediaControlPreview({
  url,
  filename,
  itemGroupProps,
  className,
  label
}) {
  return /* @__PURE__ */ jsx(ItemGroup, { ...itemGroupProps, as: "span", children: /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", children: [
    /* @__PURE__ */ jsx(
      "span",
      {
        className: "block-library-utils__media-control__inspector-image-indicator",
        style: {
          backgroundImage: url ? `url(${url})` : void 0
        }
      }
    ),
    /* @__PURE__ */ jsx(FlexBlock, { children: /* @__PURE__ */ jsx(Truncate, { numberOfLines: 1, className, children: filename ?? label }) })
  ] }) });
}
function MediaControl({
  mediaId,
  mediaUrl,
  filename,
  allowedTypes,
  onSelect,
  onSelectURL,
  onError,
  onReset,
  isUploading = false,
  emptyLabel = __("Media")
}) {
  const { getSettings } = useSelect(blockEditorStore);
  const onFilesDrop = (filesList) => {
    const { mediaUpload } = getSettings();
    if (!mediaUpload) {
      return;
    }
    mediaUpload({
      allowedTypes,
      filesList,
      onFileChange([media]) {
        onSelect(media);
      },
      onError,
      multiple: false
    });
  };
  const containerRef = useRef();
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: containerRef,
      className: "block-library-utils__media-control",
      children: [
        /* @__PURE__ */ jsx(
          MediaReplaceFlow,
          {
            className: "block-library-utils__media-control__replace-flow",
            mediaId,
            mediaURL: mediaUrl,
            allowedTypes,
            onSelect,
            onSelectURL,
            onError,
            name: /* @__PURE__ */ jsx(
              MediaControlPreview,
              {
                url: mediaUrl,
                filename,
                className: "block-library-utils__media-control__inspector-media-replace-title",
                label: mediaUrl ? getFilename(filename) || emptyLabel : emptyLabel
              }
            ),
            renderToggle: (props) => /* @__PURE__ */ jsx(Button, { ...props, __next40pxDefaultSize: true, children: isUploading ? /* @__PURE__ */ jsx(Spinner, {}) : props.children }),
            onReset
          }
        ),
        mediaUrl && onReset && /* @__PURE__ */ jsx(
          Button,
          {
            label: __("Reset"),
            className: "block-library-utils__media-control__reset",
            size: "small",
            icon: resetIcon,
            onClick: () => {
              onReset();
              focusToggleButton(containerRef);
            }
          }
        ),
        /* @__PURE__ */ jsx(DropZone, { onFilesDrop })
      ]
    }
  );
}
export {
  MediaControl,
  MediaControlPreview
};
//# sourceMappingURL=media-control.mjs.map