@wordpress/block-library/build-module/utils/poster-image.js

Block library for the WordPress editor.

import { jsx, jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import {
  MediaUpload,
  MediaUploadCheck,
  store as blockEditorStore
} from "@wordpress/block-editor";
import { store as noticesStore } from "@wordpress/notices";
import {
  Button,
  BaseControl,
  DropZone,
  Spinner,
  __experimentalHStack as HStack,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { isBlobURL } from "@wordpress/blob";
import { __, sprintf } from "@wordpress/i18n";
import { useRef, useState } from "@wordpress/element";
import { useInstanceId } from "@wordpress/compose";
import { useSelect, useDispatch } from "@wordpress/data";
const POSTER_IMAGE_ALLOWED_MEDIA_TYPES = ["image"];
function PosterImage({ poster, onChange }) {
  const posterButtonRef = useRef();
  const [isLoading, setIsLoading] = useState(false);
  const descriptionId = useInstanceId(
    PosterImage,
    "block-library-poster-image-description"
  );
  const { getSettings } = useSelect(blockEditorStore);
  const { createErrorNotice } = useDispatch(noticesStore);
  const onDropFiles = (filesList) => {
    getSettings().mediaUpload({
      allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,
      filesList,
      onFileChange: ([image]) => {
        if (isBlobURL(image?.url)) {
          setIsLoading(true);
          return;
        }
        if (image) {
          onChange(image);
        }
        setIsLoading(false);
      },
      onError: (message) => {
        createErrorNotice(message, {
          id: "poster-image-upload-notice",
          type: "snackbar"
        });
        setIsLoading(false);
      },
      multiple: false
    });
  };
  const getPosterButtonContent = () => {
    if (!poster && isLoading) {
      return /* @__PURE__ */ jsx(Spinner, {});
    }
    return !poster ? __("Set poster image") : __("Replace");
  };
  return /* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsxs(
    ToolsPanelItem,
    {
      label: __("Poster image"),
      isShownByDefault: true,
      hasValue: () => !!poster,
      onDeselect: () => onChange(void 0),
      children: [
        /* @__PURE__ */ jsx(BaseControl.VisualLabel, { children: __("Poster image") }),
        /* @__PURE__ */ jsx(
          MediaUpload,
          {
            title: __("Select poster image"),
            onSelect: onChange,
            allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,
            render: ({ open }) => /* @__PURE__ */ jsxs("div", { className: "block-library-poster-image__container", children: [
              poster && /* @__PURE__ */ jsxs(
                Button,
                {
                  __next40pxDefaultSize: true,
                  onClick: open,
                  "aria-haspopup": "dialog",
                  "aria-label": __(
                    "Edit or replace the poster image."
                  ),
                  className: "block-library-poster-image__preview",
                  disabled: isLoading,
                  accessibleWhenDisabled: true,
                  children: [
                    /* @__PURE__ */ jsx(
                      "img",
                      {
                        src: poster,
                        alt: __("Poster image preview"),
                        className: "block-library-poster-image__preview-image"
                      }
                    ),
                    isLoading && /* @__PURE__ */ jsx(Spinner, {})
                  ]
                }
              ),
              /* @__PURE__ */ jsxs(
                HStack,
                {
                  className: clsx(
                    "block-library-poster-image__actions",
                    {
                      "block-library-poster-image__actions-select": !poster
                    }
                  ),
                  children: [
                    /* @__PURE__ */ jsx(
                      Button,
                      {
                        __next40pxDefaultSize: true,
                        onClick: open,
                        ref: posterButtonRef,
                        className: "block-library-poster-image__action",
                        "aria-describedby": descriptionId,
                        "aria-haspopup": "dialog",
                        variant: !poster ? "secondary" : void 0,
                        disabled: isLoading,
                        accessibleWhenDisabled: true,
                        children: getPosterButtonContent()
                      }
                    ),
                    /* @__PURE__ */ jsx("p", { id: descriptionId, hidden: true, children: poster ? sprintf(
                      /* translators: %s: poster image URL. */
                      __(
                        "The current poster image url is %s."
                      ),
                      poster
                    ) : __(
                      "There is no poster image currently selected."
                    ) }),
                    !!poster && /* @__PURE__ */ jsx(
                      Button,
                      {
                        __next40pxDefaultSize: true,
                        onClick: () => {
                          onChange(void 0);
                          posterButtonRef.current.focus();
                        },
                        className: "block-library-poster-image__action",
                        disabled: isLoading,
                        accessibleWhenDisabled: true,
                        children: __("Remove")
                      }
                    )
                  ]
                }
              ),
              /* @__PURE__ */ jsx(DropZone, { onFilesDrop: onDropFiles })
            ] })
          }
        )
      ]
    }
  ) });
}
var poster_image_default = PosterImage;
export {
  poster_image_default as default
};
//# sourceMappingURL=poster-image.js.map