@wordpress/block-library/build/columns/transforms.cjs

Block library for the WordPress editor.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-library/src/columns/transforms.js
var transforms_exports = {};
__export(transforms_exports, {
  default: () => transforms_default
});
module.exports = __toCommonJS(transforms_exports);
var import_blocks = require("@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 (0, import_blocks.createBlocksFromInnerBlocksTemplate)(innerBlocksTemplate);
};
var getGridInnerBlocks = (innerBlocks) => innerBlocks.flatMap((column) => {
  const columnInnerBlocks = column.innerBlocks || [];
  if (columnInnerBlocks.length > 1) {
    return [
      (0, import_blocks.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 (0, import_blocks.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 (0, import_blocks.createBlock)(
          "core/columns",
          {},
          (0, import_blocks.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 (0, import_blocks.createBlock)(
          "core/columns",
          {
            align,
            backgroundColor,
            textColor,
            style,
            verticalAlignment
          },
          (0, import_blocks.createBlocksFromInnerBlocksTemplate)(innerBlocksTemplate)
        );
      }
    }
  ],
  to: [
    {
      type: "block",
      blocks: ["core/group"],
      variationName: "group-grid",
      transform: (attributes, innerBlocks) => {
        const columnCount = innerBlocks.length;
        return (0, import_blocks.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;
//# sourceMappingURL=transforms.cjs.map