@wordpress/block-library/build/media-text/save.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = save;
var _clsx = _interopRequireDefault(require("clsx"));
var _blockEditor = require("@wordpress/block-editor");
var _imageFill = require("./image-fill");
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const DEFAULT_MEDIA_WIDTH = 50;
const noop = () => {};
function save({
  attributes
}) {
  const {
    isStackedOnMobile,
    mediaAlt,
    mediaPosition,
    mediaType,
    mediaUrl,
    mediaWidth,
    mediaId,
    verticalAlignment,
    imageFill,
    focalPoint,
    linkClass,
    href,
    linkTarget,
    rel
  } = attributes;
  const mediaSizeSlug = attributes.mediaSizeSlug || _constants.DEFAULT_MEDIA_SIZE_SLUG;
  const newRel = !rel ? undefined : rel;
  const imageClasses = (0, _clsx.default)({
    [`wp-image-${mediaId}`]: mediaId && mediaType === 'image',
    [`size-${mediaSizeSlug}`]: mediaId && mediaType === 'image'
  });
  const positionStyles = imageFill ? (0, _imageFill.imageFillStyles)(mediaUrl, focalPoint) : {};
  let image = mediaUrl ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
    src: mediaUrl,
    alt: mediaAlt,
    className: imageClasses || null,
    style: positionStyles
  }) : null;
  if (href) {
    image = /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
      className: linkClass,
      href: href,
      target: linkTarget,
      rel: newRel,
      children: image
    });
  }
  const mediaTypeRenders = {
    image: () => image,
    video: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
      controls: true,
      src: mediaUrl
    })
  };
  const className = (0, _clsx.default)({
    'has-media-on-the-right': 'right' === mediaPosition,
    'is-stacked-on-mobile': isStackedOnMobile,
    [`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
    'is-image-fill-element': imageFill
  });
  let gridTemplateColumns;
  if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
    gridTemplateColumns = 'right' === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
  }
  const style = {
    gridTemplateColumns
  };
  if ('right' === mediaPosition) {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      ..._blockEditor.useBlockProps.save({
        className,
        style
      }),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        ..._blockEditor.useInnerBlocksProps.save({
          className: 'wp-block-media-text__content'
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("figure", {
        className: "wp-block-media-text__media",
        children: (mediaTypeRenders[mediaType] || noop)()
      })]
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ..._blockEditor.useBlockProps.save({
      className,
      style
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("figure", {
      className: "wp-block-media-text__media",
      children: (mediaTypeRenders[mediaType] || noop)()
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ..._blockEditor.useInnerBlocksProps.save({
        className: 'wp-block-media-text__content'
      })
    })]
  });
}
//# sourceMappingURL=save.js.map