@wordpress/block-library/build-module/image/index.mjs

Block library for the WordPress editor.

// packages/block-library/src/image/index.js
import { __ } from "@wordpress/i18n";
import { image as icon } from "@wordpress/icons";
import { privateApis as blocksPrivateApis } from "@wordpress/blocks";
import initBlock from "../utils/init-block.mjs";
import deprecated from "./deprecated.mjs";
import edit from "./edit.mjs";
import metadata from "./block.json";
import save from "./save.mjs";
import transforms from "./transforms.mjs";
import { unlock } from "../lock-unlock.mjs";
var { fieldsKey, formKey } = unlock(blocksPrivateApis);
var { name } = metadata;
var settings = {
  icon,
  example: {
    attributes: {
      sizeSlug: "large",
      url: "https://s.w.org/images/core/5.3/MtBlanc1.jpg",
      // translators: Caption accompanying an image of the Mont Blanc, which serves as an example for the Image block.
      caption: __("Mont Blanc appears—still, snowy, and serene.")
    }
  },
  __experimentalLabel(attributes, { context }) {
    const customName = attributes?.metadata?.name;
    if ((context === "list-view" || context === "breadcrumb") && customName) {
      return customName;
    }
    if (context === "accessibility") {
      const { caption, alt, url } = attributes;
      if (!url) {
        return __("Empty");
      }
      if (!alt) {
        return caption || "";
      }
      return alt + (caption ? ". " + caption : "");
    }
  },
  getEditWrapperProps(attributes) {
    return {
      "data-align": attributes.align
    };
  },
  transforms,
  edit,
  save,
  deprecated
};
if (window.__experimentalContentOnlyInspectorFields) {
  settings[fieldsKey] = [
    {
      id: "image",
      label: __("Image"),
      type: "media",
      Edit: {
        control: "media",
        // TODO: replace with custom component
        allowedTypes: ["image"],
        multiple: false
      },
      getValue: ({ item }) => ({
        id: item.id,
        url: item.url,
        alt: item.alt,
        caption: item.caption
      }),
      setValue: ({ value }) => ({
        id: value.id,
        url: value.url,
        alt: value.alt,
        caption: value.caption
      })
    },
    {
      id: "link",
      label: __("Link"),
      type: "url",
      Edit: "link",
      // TODO: replace with custom component
      getValue: ({ item }) => ({
        url: item.href,
        rel: item.rel,
        linkTarget: item.linkTarget
      }),
      setValue: ({ value }) => ({
        href: value.url,
        rel: value.rel,
        linkTarget: value.linkTarget
      }),
      isVisible: (item) => !item.isDecorative
    },
    {
      id: "caption",
      label: __("Caption"),
      type: "text",
      Edit: "rich-text",
      // TODO: replace with custom component
      isVisible: (item) => !item.isDecorative
    },
    {
      id: "alt",
      label: __("Alt text"),
      type: "text",
      isVisible: (item) => !item.isDecorative
    },
    {
      id: "isDecorative",
      label: __("Mark as decorative"),
      type: "boolean",
      setValue: ({ value }) => ({
        isDecorative: value || void 0,
        ...value && {
          alt: "",
          caption: void 0,
          href: void 0,
          linkDestination: void 0,
          linkTarget: void 0,
          rel: void 0
        }
      })
    }
  ];
  settings[formKey] = {
    fields: ["image", "link", "caption", "alt", "isDecorative"]
  };
}
var init = () => initBlock({ name, metadata, settings });
export {
  init,
  metadata,
  name,
  settings
};
//# sourceMappingURL=index.mjs.map