@wordpress/block-library/build-module/gallery/transforms.js

Block library for the WordPress editor.

// packages/block-library/src/gallery/transforms.js
import { createBlock } from "@wordpress/blocks";
import { createBlobURL } from "@wordpress/blob";
import { addFilter } from "@wordpress/hooks";
import {
  LINK_DESTINATION_ATTACHMENT,
  LINK_DESTINATION_NONE,
  LINK_DESTINATION_MEDIA
} from "./constants";
var parseShortcodeIds = (ids) => {
  if (!ids) {
    return [];
  }
  return ids.split(",").map((id) => parseInt(id, 10));
};
function updateThirdPartyTransformToGallery(block) {
  if (block.name === "core/gallery" && block.attributes?.images.length > 0) {
    const innerBlocks = block.attributes.images.map(
      ({ url, id, alt }) => {
        return createBlock("core/image", {
          url,
          id: id ? parseInt(id, 10) : null,
          alt,
          sizeSlug: block.attributes.sizeSlug,
          linkDestination: block.attributes.linkDestination
        });
      }
    );
    delete block.attributes.ids;
    delete block.attributes.images;
    block.innerBlocks = innerBlocks;
  }
  return block;
}
addFilter(
  "blocks.switchToBlockType.transformedBlock",
  "core/gallery/update-third-party-transform-to",
  updateThirdPartyTransformToGallery
);
function updateThirdPartyTransformFromGallery(toBlock, fromBlocks) {
  const from = Array.isArray(fromBlocks) ? fromBlocks : [fromBlocks];
  const galleryBlock = from.find(
    (transformedBlock) => transformedBlock.name === "core/gallery" && transformedBlock.innerBlocks.length > 0 && !transformedBlock.attributes.images?.length > 0 && !toBlock.name.includes("core/")
  );
  if (galleryBlock) {
    const images = galleryBlock.innerBlocks.map(
      ({ attributes: { url, id, alt } }) => ({
        url,
        id: id ? parseInt(id, 10) : null,
        alt
      })
    );
    const ids = images.map(({ id }) => id);
    galleryBlock.attributes.images = images;
    galleryBlock.attributes.ids = ids;
  }
  return toBlock;
}
addFilter(
  "blocks.switchToBlockType.transformedBlock",
  "core/gallery/update-third-party-transform-from",
  updateThirdPartyTransformFromGallery
);
var transforms = {
  from: [
    {
      type: "block",
      isMultiBlock: true,
      blocks: ["core/image"],
      transform: (attributes) => {
        let { align, sizeSlug } = attributes[0];
        align = attributes.every(
          (attribute) => attribute.align === align
        ) ? align : void 0;
        sizeSlug = attributes.every(
          (attribute) => attribute.sizeSlug === sizeSlug
        ) ? sizeSlug : void 0;
        const validImages = attributes.filter(({ url }) => url);
        const innerBlocks = validImages.map((image) => {
          image.width = void 0;
          image.height = void 0;
          return createBlock("core/image", image);
        });
        return createBlock(
          "core/gallery",
          {
            align,
            sizeSlug
          },
          innerBlocks
        );
      }
    },
    {
      type: "shortcode",
      tag: "gallery",
      transform({ named: { ids, columns = 3, link, orderby, size } }) {
        const imageIds = parseShortcodeIds(ids).map(
          (id) => parseInt(id, 10)
        );
        let linkTo = LINK_DESTINATION_NONE;
        if (link === "post") {
          linkTo = LINK_DESTINATION_ATTACHMENT;
        } else if (link === "file") {
          linkTo = LINK_DESTINATION_MEDIA;
        }
        const galleryBlock = createBlock(
          "core/gallery",
          {
            columns: parseInt(columns, 10),
            linkTo,
            randomOrder: orderby === "rand",
            ...size && { sizeSlug: size }
          },
          imageIds.map(
            (imageId) => createBlock("core/image", {
              id: imageId,
              ...size && { sizeSlug: size }
            })
          )
        );
        return galleryBlock;
      },
      isMatch({ named }) {
        return void 0 !== named.ids;
      }
    },
    {
      // When created by drag and dropping multiple files on an insertion point. Because multiple
      // files must not be transformed to a gallery when dropped within a gallery there is another transform
      // within the image block to handle that case. Therefore this transform has to have priority 1
      // set so that it overrides the image block transformation when multiple images are dropped outside
      // of a gallery block.
      type: "files",
      priority: 1,
      isMatch(files) {
        return files.length !== 1 && files.every(
          (file) => file.type.indexOf("image/") === 0
        );
      },
      transform(files) {
        const innerBlocks = files.map(
          (file) => createBlock("core/image", {
            blob: createBlobURL(file)
          })
        );
        return createBlock("core/gallery", {}, innerBlocks);
      }
    }
  ],
  to: [
    {
      type: "block",
      blocks: ["core/image"],
      transform: ({ align }, innerBlocks) => {
        if (innerBlocks.length > 0) {
          return innerBlocks.map(
            ({
              attributes: {
                url,
                alt,
                caption,
                title,
                href,
                rel,
                linkClass,
                id,
                sizeSlug: imageSizeSlug,
                linkDestination,
                linkTarget,
                anchor,
                className
              }
            }) => createBlock("core/image", {
              align,
              url,
              alt,
              caption,
              title,
              href,
              rel,
              linkClass,
              id,
              sizeSlug: imageSizeSlug,
              linkDestination,
              linkTarget,
              anchor,
              className
            })
          );
        }
        return createBlock("core/image", { align });
      }
    }
  ]
};
var transforms_default = transforms;
export {
  transforms_default as default
};
//# sourceMappingURL=transforms.js.map