@wordpress/editor/build/components/post-featured-image/index.js

Enhanced block editor for WordPress posts.

"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 _lodash = require("lodash");

var _i18n = require("@wordpress/i18n");

var _hooks = require("@wordpress/hooks");

var _components = require("@wordpress/components");

var _compose = require("@wordpress/compose");

var _data = require("@wordpress/data");

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

var _check = _interopRequireDefault(require("./check"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const ALLOWED_MEDIA_TYPES = ['image']; // Used when labels from post type were not yet loaded or when they are not present.

const DEFAULT_FEATURE_IMAGE_LABEL = (0, _i18n.__)('Featured image');
const DEFAULT_SET_FEATURE_IMAGE_LABEL = (0, _i18n.__)('Set featured image');
const DEFAULT_REMOVE_FEATURE_IMAGE_LABEL = (0, _i18n.__)('Remove image');

function PostFeaturedImage({
  currentPostId,
  featuredImageId,
  onUpdateImage,
  onDropImage,
  onRemoveImage,
  media,
  postType,
  noticeUI
}) {
  var _media$media_details$, _media$media_details$2;

  const postLabel = (0, _lodash.get)(postType, ['labels'], {});
  const instructions = (0, _element.createElement)("p", null, (0, _i18n.__)('To edit the featured image, you need permission to upload media.'));
  let mediaWidth, mediaHeight, mediaSourceUrl;

  if (media) {
    const mediaSize = (0, _hooks.applyFilters)('editor.PostFeaturedImage.imageSize', 'post-thumbnail', media.id, currentPostId);

    if ((0, _lodash.has)(media, ['media_details', 'sizes', mediaSize])) {
      // use mediaSize when available
      mediaWidth = media.media_details.sizes[mediaSize].width;
      mediaHeight = media.media_details.sizes[mediaSize].height;
      mediaSourceUrl = media.media_details.sizes[mediaSize].source_url;
    } else {
      // get fallbackMediaSize if mediaSize is not available
      const fallbackMediaSize = (0, _hooks.applyFilters)('editor.PostFeaturedImage.imageSize', 'thumbnail', media.id, currentPostId);

      if ((0, _lodash.has)(media, ['media_details', 'sizes', fallbackMediaSize])) {
        // use fallbackMediaSize when mediaSize is not available
        mediaWidth = media.media_details.sizes[fallbackMediaSize].width;
        mediaHeight = media.media_details.sizes[fallbackMediaSize].height;
        mediaSourceUrl = media.media_details.sizes[fallbackMediaSize].source_url;
      } else {
        // use full image size when mediaFallbackSize and mediaSize are not available
        mediaWidth = media.media_details.width;
        mediaHeight = media.media_details.height;
        mediaSourceUrl = media.source_url;
      }
    }
  }

  return (0, _element.createElement)(_check.default, null, noticeUI, (0, _element.createElement)("div", {
    className: "editor-post-featured-image"
  }, media && (0, _element.createElement)("div", {
    id: `editor-post-featured-image-${featuredImageId}-describedby`,
    className: "hidden"
  }, media.alt_text && (0, _i18n.sprintf)( // Translators: %s: The selected image alt text.
  (0, _i18n.__)('Current image: %s'), media.alt_text), !media.alt_text && (0, _i18n.sprintf)( // Translators: %s: The selected image filename.
  (0, _i18n.__)('The current image has no alternative text. The file name is: %s'), ((_media$media_details$ = media.media_details.sizes) === null || _media$media_details$ === void 0 ? void 0 : (_media$media_details$2 = _media$media_details$.full) === null || _media$media_details$2 === void 0 ? void 0 : _media$media_details$2.file) || media.slug)), (0, _element.createElement)(_blockEditor.MediaUploadCheck, {
    fallback: instructions
  }, (0, _element.createElement)(_blockEditor.MediaUpload, {
    title: postLabel.featured_image || DEFAULT_FEATURE_IMAGE_LABEL,
    onSelect: onUpdateImage,
    unstableFeaturedImageFlow: true,
    allowedTypes: ALLOWED_MEDIA_TYPES,
    modalClass: "editor-post-featured-image__media-modal",
    render: ({
      open
    }) => (0, _element.createElement)("div", {
      className: "editor-post-featured-image__container"
    }, (0, _element.createElement)(_components.Button, {
      className: !featuredImageId ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview',
      onClick: open,
      "aria-label": !featuredImageId ? null : (0, _i18n.__)('Edit or update the image'),
      "aria-describedby": !featuredImageId ? null : `editor-post-featured-image-${featuredImageId}-describedby`
    }, !!featuredImageId && media && (0, _element.createElement)(_components.ResponsiveWrapper, {
      naturalWidth: mediaWidth,
      naturalHeight: mediaHeight,
      isInline: true
    }, (0, _element.createElement)("img", {
      src: mediaSourceUrl,
      alt: ""
    })), !!featuredImageId && !media && (0, _element.createElement)(_components.Spinner, null), !featuredImageId && (postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL)), (0, _element.createElement)(_components.DropZone, {
      onFilesDrop: onDropImage
    })),
    value: featuredImageId
  })), !!featuredImageId && media && !media.isLoading && (0, _element.createElement)(_blockEditor.MediaUploadCheck, null, (0, _element.createElement)(_blockEditor.MediaUpload, {
    title: postLabel.featured_image || DEFAULT_FEATURE_IMAGE_LABEL,
    onSelect: onUpdateImage,
    unstableFeaturedImageFlow: true,
    allowedTypes: ALLOWED_MEDIA_TYPES,
    modalClass: "editor-post-featured-image__media-modal",
    render: ({
      open
    }) => (0, _element.createElement)(_components.Button, {
      onClick: open,
      isSecondary: true
    }, (0, _i18n.__)('Replace Image'))
  })), !!featuredImageId && (0, _element.createElement)(_blockEditor.MediaUploadCheck, null, (0, _element.createElement)(_components.Button, {
    onClick: onRemoveImage,
    isLink: true,
    isDestructive: true
  }, postLabel.remove_featured_image || DEFAULT_REMOVE_FEATURE_IMAGE_LABEL))));
}

const applyWithSelect = (0, _data.withSelect)(select => {
  const {
    getMedia,
    getPostType
  } = select('core');
  const {
    getCurrentPostId,
    getEditedPostAttribute
  } = select('core/editor');
  const featuredImageId = getEditedPostAttribute('featured_media');
  return {
    media: featuredImageId ? getMedia(featuredImageId) : null,
    currentPostId: getCurrentPostId(),
    postType: getPostType(getEditedPostAttribute('type')),
    featuredImageId
  };
});
const applyWithDispatch = (0, _data.withDispatch)((dispatch, {
  noticeOperations
}, {
  select
}) => {
  const {
    editPost
  } = dispatch('core/editor');
  return {
    onUpdateImage(image) {
      editPost({
        featured_media: image.id
      });
    },

    onDropImage(filesList) {
      select(_blockEditor.store).getSettings().mediaUpload({
        allowedTypes: ['image'],
        filesList,

        onFileChange([image]) {
          editPost({
            featured_media: image.id
          });
        },

        onError(message) {
          noticeOperations.removeAllNotices();
          noticeOperations.createErrorNotice(message);
        }

      });
    },

    onRemoveImage() {
      editPost({
        featured_media: 0
      });
    }

  };
});

var _default = (0, _compose.compose)(_components.withNotices, applyWithSelect, applyWithDispatch, (0, _components.withFilters)('editor.PostFeaturedImage'))(PostFeaturedImage);

exports.default = _default;
//# sourceMappingURL=index.js.map