@wordpress/block-library/build-module/columns/transforms.mjs

Block library for the WordPress editor.

// packages/block-library/src/columns/transforms.js
import {
  createBlock,
  createBlocksFromInnerBlocksTemplate
} from "@wordpress/blocks";
var MAXIMUM_SELECTED_BLOCKS = 6;
var getColumnBlocksFromGrid = (innerBlocks, columnCount) => {
  const columnWidth = +(100 / columnCount).toFixed(2);
  const innerBlocksTemplate = Array.from(
    { length: columnCount },
    (_, columnIndex) => [
      "core/column",
      { width: `${columnWidth}%` },
      innerBlocks.filter(
        (_innerBlock, blockIndex) => blockIndex % columnCount === columnIndex
      )
    ]
  );
  return createBlocksFromInnerBlocksTemplate(innerBlocksTemplate);
};
var getGridInnerBlocks = (innerBlocks) => innerBlocks.flatMap((column) => {
  const columnInnerBlocks = column.innerBlocks || [];
  if (columnInnerBlocks.length > 1) {
    return [
      createBlock(
        "core/group",
        { layout: { type: "constrained" } },
        columnInnerBlocks
      )
    ];
  }
  return columnInnerBlocks;
});
var transforms = {
  from: [
    {
      type: "block",
      blocks: ["core/group"],
      priority: 1,
      transform: (attributes, innerBlocks) => {
        const { layout, ...rest } = attributes;
        const { columnCount } = layout;
        return createBlock(
          "core/columns",
          rest,
          getColumnBlocksFromGrid(innerBlocks, columnCount)
        );
      },
      isMatch: ({ layout }) => layout?.type === "grid" && Number.isInteger(layout?.columnCount) && layout.columnCount > 0
    },
    {
      type: "block",
      isMultiBlock: true,
      blocks: ["*"],
      __experimentalConvert: (blocks) => {
        const columnWidth = +(100 / blocks.length).toFixed(2);
        const innerBlocksTemplate = blocks.map(
          ({ name, attributes, innerBlocks }) => [
            "core/column",
            { width: `${columnWidth}%` },
            [[name, { ...attributes }, innerBlocks]]
          ]
        );
        return createBlock(
          "core/columns",
          {},
          createBlocksFromInnerBlocksTemplate(innerBlocksTemplate)
        );
      },
      isMatch: ({ length: selectedBlocksLength }, blocks) => {
        if (blocks.length === 1 && blocks[0].name === "core/columns") {
          return false;
        }
        return selectedBlocksLength && selectedBlocksLength <= MAXIMUM_SELECTED_BLOCKS;
      }
    },
    {
      type: "block",
      blocks: ["core/media-text"],
      priority: 1,
      transform: (attributes, innerBlocks) => {
        const {
          align,
          backgroundColor,
          textColor,
          style,
          mediaAlt: alt,
          mediaId: id,
          mediaPosition,
          mediaSizeSlug: sizeSlug,
          mediaType,
          mediaUrl: url,
          mediaWidth,
          verticalAlignment
        } = attributes;
        let media;
        if (mediaType === "image" || !mediaType) {
          const imageAttrs = { id, alt, url, sizeSlug };
          const linkAttrs = {
            href: attributes.href,
            linkClass: attributes.linkClass,
            linkDestination: attributes.linkDestination,
            linkTarget: attributes.linkTarget,
            rel: attributes.rel
          };
          media = ["core/image", { ...imageAttrs, ...linkAttrs }];
        } else {
          media = ["core/video", { id, src: url }];
        }
        const innerBlocksTemplate = [
          ["core/column", { width: `${mediaWidth}%` }, [media]],
          [
            "core/column",
            { width: `${100 - mediaWidth}%` },
            innerBlocks
          ]
        ];
        if (mediaPosition === "right") {
          innerBlocksTemplate.reverse();
        }
        return createBlock(
          "core/columns",
          {
            align,
            backgroundColor,
            textColor,
            style,
            verticalAlignment
          },
          createBlocksFromInnerBlocksTemplate(innerBlocksTemplate)
        );
      }
    }
  ],
  to: [
    {
      type: "block",
      blocks: ["core/group"],
      variationName: "group-grid",
      transform: (attributes, innerBlocks) => {
        const columnCount = innerBlocks.length;
        return createBlock(
          "core/group",
          {
            ...attributes,
            isStackedOnMobile: void 0,
            verticalAlignment: void 0,
            layout: {
              type: "grid",
              ...columnCount && { columnCount }
            }
          },
          getGridInnerBlocks(innerBlocks)
        );
      }
    }
  ],
  ungroup: (attributes, innerBlocks) => innerBlocks.flatMap((innerBlock) => innerBlock.innerBlocks)
};
var transforms_default = transforms;
export {
  transforms_default as default
};
//# sourceMappingURL=transforms.mjs.map