@wordpress/block-library/build/image/deprecated.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

var _blockEditor = require("@wordpress/block-editor");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
const blockAttributes = {
  align: {
    type: 'string'
  },
  url: {
    type: 'string',
    source: 'attribute',
    selector: 'img',
    attribute: 'src'
  },
  alt: {
    type: 'string',
    source: 'attribute',
    selector: 'img',
    attribute: 'alt',
    default: ''
  },
  caption: {
    type: 'string',
    source: 'html',
    selector: 'figcaption'
  },
  title: {
    type: 'string',
    source: 'attribute',
    selector: 'img',
    attribute: 'title'
  },
  href: {
    type: 'string',
    source: 'attribute',
    selector: 'figure > a',
    attribute: 'href'
  },
  rel: {
    type: 'string',
    source: 'attribute',
    selector: 'figure > a',
    attribute: 'rel'
  },
  linkClass: {
    type: 'string',
    source: 'attribute',
    selector: 'figure > a',
    attribute: 'class'
  },
  id: {
    type: 'number'
  },
  width: {
    type: 'number'
  },
  height: {
    type: 'number'
  },
  sizeSlug: {
    type: 'string'
  },
  linkDestination: {
    type: 'string'
  },
  linkTarget: {
    type: 'string',
    source: 'attribute',
    selector: 'figure > a',
    attribute: 'target'
  }
};
const blockSupports = {
  anchor: true,
  color: {
    __experimentalDuotone: 'img',
    text: false,
    background: false
  },
  __experimentalBorder: {
    radius: true,
    __experimentalDefaultControls: {
      radius: true
    }
  }
};
const deprecated = [// The following deprecation moves existing border radius styles onto the
// inner img element where new border block support styles must be applied.
// It will also add a new `.has-custom-border` class for existing blocks
// with border radii set. This class is required to improve caption position
// and styling when an image within a gallery has a custom border or
// rounded corners.
//
// See: https://github.com/WordPress/gutenberg/pull/31366/
{
  attributes: blockAttributes,
  supports: blockSupports,

  save(_ref) {
    let {
      attributes
    } = _ref;
    const {
      url,
      alt,
      caption,
      align,
      href,
      rel,
      linkClass,
      width,
      height,
      id,
      linkTarget,
      sizeSlug,
      title
    } = attributes;
    const newRel = (0, _lodash.isEmpty)(rel) ? undefined : rel;
    const classes = (0, _classnames.default)({
      [`align${align}`]: align,
      [`size-${sizeSlug}`]: sizeSlug,
      'is-resized': width || height
    });
    const image = (0, _element.createElement)("img", {
      src: url,
      alt: alt,
      className: id ? `wp-image-${id}` : null,
      width: width,
      height: height,
      title: title
    });
    const figure = (0, _element.createElement)(_element.Fragment, null, href ? (0, _element.createElement)("a", {
      className: linkClass,
      href: href,
      target: linkTarget,
      rel: newRel
    }, image) : image, !_blockEditor.RichText.isEmpty(caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
      tagName: "figcaption",
      value: caption
    }));
    return (0, _element.createElement)("figure", _blockEditor.useBlockProps.save({
      className: classes
    }), figure);
  }

}, {
  attributes: { ...blockAttributes,
    title: {
      type: 'string',
      source: 'attribute',
      selector: 'img',
      attribute: 'title'
    },
    sizeSlug: {
      type: 'string'
    }
  },
  supports: blockSupports,

  save(_ref2) {
    let {
      attributes
    } = _ref2;
    const {
      url,
      alt,
      caption,
      align,
      href,
      rel,
      linkClass,
      width,
      height,
      id,
      linkTarget,
      sizeSlug,
      title
    } = attributes;
    const newRel = (0, _lodash.isEmpty)(rel) ? undefined : rel;
    const classes = (0, _classnames.default)({
      [`align${align}`]: align,
      [`size-${sizeSlug}`]: sizeSlug,
      'is-resized': width || height
    });
    const image = (0, _element.createElement)("img", {
      src: url,
      alt: alt,
      className: id ? `wp-image-${id}` : null,
      width: width,
      height: height,
      title: title
    });
    const figure = (0, _element.createElement)(_element.Fragment, null, href ? (0, _element.createElement)("a", {
      className: linkClass,
      href: href,
      target: linkTarget,
      rel: newRel
    }, image) : image, !_blockEditor.RichText.isEmpty(caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
      tagName: "figcaption",
      value: caption
    }));

    if ('left' === align || 'right' === align || 'center' === align) {
      return (0, _element.createElement)("div", _blockEditor.useBlockProps.save(), (0, _element.createElement)("figure", {
        className: classes
      }, figure));
    }

    return (0, _element.createElement)("figure", _blockEditor.useBlockProps.save({
      className: classes
    }), figure);
  }

}, {
  attributes: blockAttributes,

  save(_ref3) {
    let {
      attributes
    } = _ref3;
    const {
      url,
      alt,
      caption,
      align,
      href,
      width,
      height,
      id
    } = attributes;
    const classes = (0, _classnames.default)({
      [`align${align}`]: align,
      'is-resized': width || height
    });
    const image = (0, _element.createElement)("img", {
      src: url,
      alt: alt,
      className: id ? `wp-image-${id}` : null,
      width: width,
      height: height
    });
    return (0, _element.createElement)("figure", {
      className: classes
    }, href ? (0, _element.createElement)("a", {
      href: href
    }, image) : image, !_blockEditor.RichText.isEmpty(caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
      tagName: "figcaption",
      value: caption
    }));
  }

}, {
  attributes: blockAttributes,

  save(_ref4) {
    let {
      attributes
    } = _ref4;
    const {
      url,
      alt,
      caption,
      align,
      href,
      width,
      height,
      id
    } = attributes;
    const image = (0, _element.createElement)("img", {
      src: url,
      alt: alt,
      className: id ? `wp-image-${id}` : null,
      width: width,
      height: height
    });
    return (0, _element.createElement)("figure", {
      className: align ? `align${align}` : null
    }, href ? (0, _element.createElement)("a", {
      href: href
    }, image) : image, !_blockEditor.RichText.isEmpty(caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
      tagName: "figcaption",
      value: caption
    }));
  }

}, {
  attributes: blockAttributes,

  save(_ref5) {
    let {
      attributes
    } = _ref5;
    const {
      url,
      alt,
      caption,
      align,
      href,
      width,
      height
    } = attributes;
    const extraImageProps = width || height ? {
      width,
      height
    } : {};
    const image = (0, _element.createElement)("img", (0, _extends2.default)({
      src: url,
      alt: alt
    }, extraImageProps));
    let figureStyle = {};

    if (width) {
      figureStyle = {
        width
      };
    } else if (align === 'left' || align === 'right') {
      figureStyle = {
        maxWidth: '50%'
      };
    }

    return (0, _element.createElement)("figure", {
      className: align ? `align${align}` : null,
      style: figureStyle
    }, href ? (0, _element.createElement)("a", {
      href: href
    }, image) : image, !_blockEditor.RichText.isEmpty(caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
      tagName: "figcaption",
      value: caption
    }));
  }

}];
var _default = deprecated;
exports.default = _default;
//# sourceMappingURL=deprecated.js.map