@wordpress/block-library/build-module/media-text/transforms.js

Block library for the WordPress editor.

/**
 * WordPress dependencies
 */
import { createBlock } from '@wordpress/blocks';
const transforms = {
  from: [{
    type: 'block',
    blocks: ['core/image'],
    transform: _ref => {
      let {
        alt,
        url,
        id,
        anchor
      } = _ref;
      return createBlock('core/media-text', {
        mediaAlt: alt,
        mediaId: id,
        mediaUrl: url,
        mediaType: 'image',
        anchor
      });
    }
  }, {
    type: 'block',
    blocks: ['core/video'],
    transform: _ref2 => {
      let {
        src,
        id,
        anchor
      } = _ref2;
      return createBlock('core/media-text', {
        mediaId: id,
        mediaUrl: src,
        mediaType: 'video',
        anchor
      });
    }
  }, {
    type: 'block',
    blocks: ['core/cover'],
    transform: (_ref3, innerBlocks) => {
      let {
        align,
        alt,
        anchor,
        backgroundType,
        customGradient,
        customOverlayColor,
        gradient,
        id,
        overlayColor,
        url
      } = _ref3;
      let additionalAttributes = {};

      if (customGradient) {
        additionalAttributes = {
          style: {
            color: {
              gradient: customGradient
            }
          }
        };
      } else if (customOverlayColor) {
        additionalAttributes = {
          style: {
            color: {
              background: customOverlayColor
            }
          }
        };
      }

      return createBlock('core/media-text', {
        align,
        anchor,
        backgroundColor: overlayColor,
        gradient,
        mediaAlt: alt,
        mediaId: id,
        mediaType: backgroundType,
        mediaUrl: url,
        ...additionalAttributes
      }, innerBlocks);
    }
  }],
  to: [{
    type: 'block',
    blocks: ['core/image'],
    isMatch: _ref4 => {
      let {
        mediaType,
        mediaUrl
      } = _ref4;
      return !mediaUrl || mediaType === 'image';
    },
    transform: _ref5 => {
      let {
        mediaAlt,
        mediaId,
        mediaUrl,
        anchor
      } = _ref5;
      return createBlock('core/image', {
        alt: mediaAlt,
        id: mediaId,
        url: mediaUrl,
        anchor
      });
    }
  }, {
    type: 'block',
    blocks: ['core/video'],
    isMatch: _ref6 => {
      let {
        mediaType,
        mediaUrl
      } = _ref6;
      return !mediaUrl || mediaType === 'video';
    },
    transform: _ref7 => {
      let {
        mediaId,
        mediaUrl,
        anchor
      } = _ref7;
      return createBlock('core/video', {
        id: mediaId,
        src: mediaUrl,
        anchor
      });
    }
  }, {
    type: 'block',
    blocks: ['core/cover'],
    transform: (_ref8, innerBlocks) => {
      var _style$color, _style$color2, _style$color3;

      let {
        align,
        anchor,
        backgroundColor,
        focalPoint,
        gradient,
        mediaAlt,
        mediaId,
        mediaType,
        mediaUrl,
        style,
        textColor
      } = _ref8;
      const additionalAttributes = {};

      if (style !== null && style !== void 0 && (_style$color = style.color) !== null && _style$color !== void 0 && _style$color.gradient) {
        additionalAttributes.customGradient = style.color.gradient;
      } else if (style !== null && style !== void 0 && (_style$color2 = style.color) !== null && _style$color2 !== void 0 && _style$color2.background) {
        additionalAttributes.customOverlayColor = style.color.background;
      }

      const coverAttributes = {
        align,
        alt: mediaAlt,
        anchor,
        backgroundType: mediaType,
        dimRatio: !!mediaUrl ? 50 : 100,
        focalPoint,
        gradient,
        id: mediaId,
        overlayColor: backgroundColor,
        url: mediaUrl,
        ...additionalAttributes
      };
      const customTextColor = style === null || style === void 0 ? void 0 : (_style$color3 = style.color) === null || _style$color3 === void 0 ? void 0 : _style$color3.text; // Attempt to maintain any text color selection.
      // Cover block's do not opt into color block support so we
      // cannot directly copy the color attributes across.

      if (!textColor && !customTextColor) {
        return createBlock('core/cover', coverAttributes, innerBlocks);
      }

      const coloredInnerBlocks = innerBlocks.map(innerBlock => {
        var _innerStyle$color;

        const {
          attributes: {
            style: innerStyle
          }
        } = innerBlock; // Only apply the media and text color if the inner block
        // doesn't set its own color block support selection.

        if (innerBlock.attributes.textColor || innerStyle !== null && innerStyle !== void 0 && (_innerStyle$color = innerStyle.color) !== null && _innerStyle$color !== void 0 && _innerStyle$color.text) {
          return innerBlock;
        }

        const newAttributes = {
          textColor
        }; // Only add or extend inner block's style object if we have
        // a custom text color from the media & text block.

        if (customTextColor) {
          newAttributes.style = { ...innerStyle,
            color: { ...(innerStyle === null || innerStyle === void 0 ? void 0 : innerStyle.color),
              text: customTextColor
            }
          };
        }

        return createBlock(innerBlock.name, { ...innerBlock.attributes,
          ...newAttributes
        }, innerBlock.innerBlocks);
      });
      return createBlock('core/cover', coverAttributes, coloredInnerBlocks);
    }
  }]
};
export default transforms;
//# sourceMappingURL=transforms.js.map