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

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _blocks = require("@wordpress/blocks");

/**
 * WordPress dependencies
 */
const MAXIMUM_SELECTED_BLOCKS = 6;
const transforms = {
  from: [{
    type: 'block',
    isMultiBlock: true,
    blocks: ['*'],
    __experimentalConvert: blocks => {
      const columnWidth = +(100 / blocks.length).toFixed(2);
      const innerBlocksTemplate = blocks.map(_ref => {
        let {
          name,
          attributes,
          innerBlocks
        } = _ref;
        return ['core/column', {
          width: `${columnWidth}%`
        }, [[name, { ...attributes
        }, innerBlocks]]];
      });
      return (0, _blocks.createBlock)('core/columns', {}, (0, _blocks.createBlocksFromInnerBlocksTemplate)(innerBlocksTemplate));
    },
    isMatch: (_ref2, blocks) => {
      let {
        length: selectedBlocksLength
      } = _ref2;

      // If a user is trying to transform a single Columns block, skip
      // the transformation. Enabling this functiontionality creates
      // nested Columns blocks resulting in an unintuitive user experience.
      // Multiple Columns blocks can still be transformed.
      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, _blocks.createBlock)('core/columns', {
        align,
        backgroundColor,
        textColor,
        style,
        verticalAlignment
      }, (0, _blocks.createBlocksFromInnerBlocksTemplate)(innerBlocksTemplate));
    }
  }]
};
var _default = transforms;
exports.default = _default;
//# sourceMappingURL=transforms.js.map