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

Block library for the WordPress editor.

import { createBlock } from "@wordpress/blocks";
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from "./shared";
import { unlock } from "../lock-unlock";
const { cleanEmptyObject } = unlock(blockEditorPrivateApis);
const transforms = {
  from: [
    {
      type: "block",
      blocks: ["core/image"],
      transform: ({ caption, url, alt, align, id, anchor, style }) => createBlock(
        "core/cover",
        {
          dimRatio: 50,
          url,
          alt,
          align,
          id,
          anchor,
          style: {
            color: {
              duotone: style?.color?.duotone
            }
          }
        },
        [
          createBlock("core/paragraph", {
            content: caption,
            fontSize: "large",
            align: "center"
          })
        ]
      )
    },
    {
      type: "block",
      blocks: ["core/video"],
      transform: ({ caption, src, align, id, anchor }) => createBlock(
        "core/cover",
        {
          dimRatio: 50,
          url: src,
          align,
          id,
          backgroundType: VIDEO_BACKGROUND_TYPE,
          anchor
        },
        [
          createBlock("core/paragraph", {
            content: caption,
            fontSize: "large",
            align: "center"
          })
        ]
      )
    },
    {
      type: "block",
      blocks: ["core/group"],
      transform: (attributes, innerBlocks) => {
        const { align, anchor, backgroundColor, gradient, style } = attributes;
        if (innerBlocks?.length === 1 && innerBlocks[0]?.name === "core/cover") {
          return createBlock(
            "core/cover",
            innerBlocks[0].attributes,
            innerBlocks[0].innerBlocks
          );
        }
        const dimRatio = backgroundColor || gradient || style?.color?.background || style?.color?.gradient ? void 0 : 50;
        const parentAttributes = {
          align,
          anchor,
          dimRatio,
          overlayColor: backgroundColor,
          customOverlayColor: style?.color?.background,
          gradient,
          customGradient: style?.color?.gradient
        };
        const attributesWithoutBackgroundColors = {
          ...attributes,
          backgroundColor: void 0,
          gradient: void 0,
          style: cleanEmptyObject({
            ...attributes?.style,
            color: style?.color ? {
              ...style?.color,
              background: void 0,
              gradient: void 0
            } : void 0
          })
        };
        return createBlock("core/cover", parentAttributes, [
          createBlock(
            "core/group",
            attributesWithoutBackgroundColors,
            innerBlocks
          )
        ]);
      }
    }
  ],
  to: [
    {
      type: "block",
      blocks: ["core/image"],
      isMatch: ({
        backgroundType,
        url,
        overlayColor,
        customOverlayColor,
        gradient,
        customGradient
      }) => {
        if (url) {
          return backgroundType === IMAGE_BACKGROUND_TYPE;
        }
        return !overlayColor && !customOverlayColor && !gradient && !customGradient;
      },
      transform: ({ title, url, alt, align, id, anchor, style }) => createBlock("core/image", {
        caption: title,
        url,
        alt,
        align,
        id,
        anchor,
        style: {
          color: {
            duotone: style?.color?.duotone
          }
        }
      })
    },
    {
      type: "block",
      blocks: ["core/video"],
      isMatch: ({
        backgroundType,
        url,
        overlayColor,
        customOverlayColor,
        gradient,
        customGradient
      }) => {
        if (url) {
          return backgroundType === VIDEO_BACKGROUND_TYPE;
        }
        return !overlayColor && !customOverlayColor && !gradient && !customGradient;
      },
      transform: ({ title, url, align, id, anchor }) => createBlock("core/video", {
        caption: title,
        src: url,
        id,
        align,
        anchor
      })
    },
    {
      type: "block",
      blocks: ["core/group"],
      isMatch: ({ url, useFeaturedImage }) => {
        if (url || useFeaturedImage) {
          return false;
        }
        return true;
      },
      transform: (attributes, innerBlocks) => {
        const transformedColorAttributes = {
          backgroundColor: attributes?.overlayColor,
          gradient: attributes?.gradient,
          style: cleanEmptyObject({
            ...attributes?.style,
            color: attributes?.customOverlayColor || attributes?.customGradient || attributes?.style?.color ? {
              background: attributes?.customOverlayColor,
              gradient: attributes?.customGradient,
              ...attributes?.style?.color
            } : void 0
          })
        };
        if (innerBlocks?.length === 1 && innerBlocks[0]?.name === "core/group") {
          const groupAttributes = cleanEmptyObject(
            innerBlocks[0].attributes || {}
          );
          if (groupAttributes?.backgroundColor || groupAttributes?.gradient || groupAttributes?.style?.color?.background || groupAttributes?.style?.color?.gradient) {
            return createBlock(
              "core/group",
              groupAttributes,
              innerBlocks[0]?.innerBlocks
            );
          }
          return createBlock(
            "core/group",
            {
              ...transformedColorAttributes,
              ...groupAttributes,
              style: cleanEmptyObject({
                ...groupAttributes?.style,
                color: transformedColorAttributes?.style?.color || groupAttributes?.style?.color ? {
                  ...transformedColorAttributes?.style?.color,
                  ...groupAttributes?.style?.color
                } : void 0
              })
            },
            innerBlocks[0]?.innerBlocks
          );
        }
        return createBlock(
          "core/group",
          { ...attributes, ...transformedColorAttributes },
          innerBlocks
        );
      }
    }
  ]
};
var transforms_default = transforms;
export {
  transforms_default as default
};
//# sourceMappingURL=transforms.js.map