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

Block library for the WordPress editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
import { isEmpty } from 'lodash';
/**
 * WordPress dependencies
 */

import { RichText, useBlockProps } from '@wordpress/block-editor';
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 = isEmpty(rel) ? undefined : rel;
    const classes = classnames({
      [`align${align}`]: align,
      [`size-${sizeSlug}`]: sizeSlug,
      'is-resized': width || height
    });
    const image = createElement("img", {
      src: url,
      alt: alt,
      className: id ? `wp-image-${id}` : null,
      width: width,
      height: height,
      title: title
    });
    const figure = createElement(Fragment, null, href ? createElement("a", {
      className: linkClass,
      href: href,
      target: linkTarget,
      rel: newRel
    }, image) : image, !RichText.isEmpty(caption) && createElement(RichText.Content, {
      tagName: "figcaption",
      value: caption
    }));
    return createElement("figure", 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 = isEmpty(rel) ? undefined : rel;
    const classes = classnames({
      [`align${align}`]: align,
      [`size-${sizeSlug}`]: sizeSlug,
      'is-resized': width || height
    });
    const image = createElement("img", {
      src: url,
      alt: alt,
      className: id ? `wp-image-${id}` : null,
      width: width,
      height: height,
      title: title
    });
    const figure = createElement(Fragment, null, href ? createElement("a", {
      className: linkClass,
      href: href,
      target: linkTarget,
      rel: newRel
    }, image) : image, !RichText.isEmpty(caption) && createElement(RichText.Content, {
      tagName: "figcaption",
      value: caption
    }));

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

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

}, {
  attributes: blockAttributes,

  save(_ref3) {
    let {
      attributes
    } = _ref3;
    const {
      url,
      alt,
      caption,
      align,
      href,
      width,
      height,
      id
    } = attributes;
    const classes = classnames({
      [`align${align}`]: align,
      'is-resized': width || height
    });
    const image = createElement("img", {
      src: url,
      alt: alt,
      className: id ? `wp-image-${id}` : null,
      width: width,
      height: height
    });
    return createElement("figure", {
      className: classes
    }, href ? createElement("a", {
      href: href
    }, image) : image, !RichText.isEmpty(caption) && createElement(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 = createElement("img", {
      src: url,
      alt: alt,
      className: id ? `wp-image-${id}` : null,
      width: width,
      height: height
    });
    return createElement("figure", {
      className: align ? `align${align}` : null
    }, href ? createElement("a", {
      href: href
    }, image) : image, !RichText.isEmpty(caption) && createElement(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 = createElement("img", _extends({
      src: url,
      alt: alt
    }, extraImageProps));
    let figureStyle = {};

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

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

}];
export default deprecated;
//# sourceMappingURL=deprecated.js.map