@wordpress/block-library/build-module/post-featured-image/edit.js

Block library for the WordPress editor.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { useEntityProp, store as coreStore } from '@wordpress/core-data';
import { useSelect, useDispatch } from '@wordpress/data';
import { MenuItem, ToggleControl, PanelBody, Placeholder, Button, TextControl } from '@wordpress/components';
import { InspectorControls, BlockControls, MediaPlaceholder, MediaReplaceFlow, useBlockProps, store as blockEditorStore, __experimentalUseBorderProps as useBorderProps } from '@wordpress/block-editor';
import { __, sprintf } from '@wordpress/i18n';
import { upload } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
/**
 * Internal dependencies
 */

import DimensionControls from './dimension-controls';
import Overlay from './overlay';
const ALLOWED_MEDIA_TYPES = ['image'];

function getMediaSourceUrlBySizeSlug(media, slug) {
  var _media$media_details, _media$media_details$, _media$media_details$2;

  return (media === null || media === void 0 ? void 0 : (_media$media_details = media.media_details) === null || _media$media_details === void 0 ? void 0 : (_media$media_details$ = _media$media_details.sizes) === null || _media$media_details$ === void 0 ? void 0 : (_media$media_details$2 = _media$media_details$[slug]) === null || _media$media_details$2 === void 0 ? void 0 : _media$media_details$2.source_url) || (media === null || media === void 0 ? void 0 : media.source_url);
}

function PostFeaturedImageDisplay(_ref) {
  let {
    clientId,
    attributes,
    setAttributes,
    context: {
      postId,
      postType: postTypeSlug,
      queryId
    }
  } = _ref;
  const isDescendentOfQueryLoop = Number.isFinite(queryId);
  const {
    isLink,
    height,
    width,
    scale,
    sizeSlug,
    rel,
    linkTarget
  } = attributes;
  const [featuredImage, setFeaturedImage] = useEntityProp('postType', postTypeSlug, 'featured_media', postId);
  const {
    media,
    postType
  } = useSelect(select => {
    const {
      getMedia,
      getPostType
    } = select(coreStore);
    return {
      media: featuredImage && getMedia(featuredImage, {
        context: 'view'
      }),
      postType: postTypeSlug && getPostType(postTypeSlug)
    };
  }, [featuredImage, postTypeSlug]);
  const mediaUrl = getMediaSourceUrlBySizeSlug(media, sizeSlug);
  const imageSizes = useSelect(select => select(blockEditorStore).getSettings().imageSizes, []);
  const imageSizeOptions = imageSizes.filter(_ref2 => {
    var _media$media_details2, _media$media_details3, _media$media_details4;

    let {
      slug
    } = _ref2;
    return media === null || media === void 0 ? void 0 : (_media$media_details2 = media.media_details) === null || _media$media_details2 === void 0 ? void 0 : (_media$media_details3 = _media$media_details2.sizes) === null || _media$media_details3 === void 0 ? void 0 : (_media$media_details4 = _media$media_details3[slug]) === null || _media$media_details4 === void 0 ? void 0 : _media$media_details4.source_url;
  }).map(_ref3 => {
    let {
      name,
      slug
    } = _ref3;
    return {
      value: slug,
      label: name
    };
  });
  const blockProps = useBlockProps({
    style: {
      width,
      height
    }
  });
  const borderProps = useBorderProps(attributes);

  const placeholder = content => {
    return createElement(Placeholder, {
      className: classnames('block-editor-media-placeholder', borderProps.className),
      withIllustration: true,
      style: borderProps.style
    }, content);
  };

  const onSelectImage = value => {
    if (value !== null && value !== void 0 && value.id) {
      setFeaturedImage(value.id);
    }
  };

  const {
    createErrorNotice
  } = useDispatch(noticesStore);

  const onUploadError = message => {
    createErrorNotice(message, {
      type: 'snackbar'
    });
  };

  const controls = createElement(Fragment, null, createElement(DimensionControls, {
    clientId: clientId,
    attributes: attributes,
    setAttributes: setAttributes,
    imageSizeOptions: imageSizeOptions
  }), createElement(InspectorControls, null, createElement(PanelBody, {
    title: __('Link settings')
  }, createElement(ToggleControl, {
    label: postType !== null && postType !== void 0 && postType.labels.singular_name ? sprintf( // translators: %s: Name of the post type e.g: "post".
    __('Link to %s'), postType.labels.singular_name.toLowerCase()) : __('Link to post'),
    onChange: () => setAttributes({
      isLink: !isLink
    }),
    checked: isLink
  }), isLink && createElement(Fragment, null, createElement(ToggleControl, {
    label: __('Open in new tab'),
    onChange: value => setAttributes({
      linkTarget: value ? '_blank' : '_self'
    }),
    checked: linkTarget === '_blank'
  }), createElement(TextControl, {
    label: __('Link rel'),
    value: rel,
    onChange: newRel => setAttributes({
      rel: newRel
    })
  })))));
  let image;

  if (!featuredImage && isDescendentOfQueryLoop) {
    return createElement(Fragment, null, controls, createElement("div", blockProps, placeholder(), createElement(Overlay, {
      attributes: attributes,
      setAttributes: setAttributes,
      clientId: clientId
    })));
  }

  const label = __('Add a featured image');

  const imageStyles = { ...borderProps.style,
    height,
    objectFit: height && scale
  };

  if (!featuredImage) {
    image = createElement(MediaPlaceholder, {
      onSelect: onSelectImage,
      accept: "image/*",
      allowedTypes: ALLOWED_MEDIA_TYPES,
      onError: onUploadError,
      placeholder: placeholder,
      mediaLibraryButton: _ref4 => {
        let {
          open
        } = _ref4;
        return createElement(Button, {
          icon: upload,
          variant: "primary",
          label: label,
          showTooltip: true,
          tooltipPosition: "top center",
          onClick: () => {
            open();
          }
        });
      }
    });
  } else {
    // We have a Featured image so show a Placeholder if is loading.
    image = !media ? placeholder() : createElement("img", {
      className: borderProps.className,
      src: mediaUrl,
      alt: media.alt_text ? sprintf( // translators: %s: The image's alt text.
      __('Featured image: %s'), media.alt_text) : __('Featured image'),
      style: imageStyles
    });
  }

  return createElement(Fragment, null, controls, !!media && !isDescendentOfQueryLoop && createElement(BlockControls, {
    group: "other"
  }, createElement(MediaReplaceFlow, {
    mediaId: featuredImage,
    mediaURL: mediaUrl,
    allowedTypes: ALLOWED_MEDIA_TYPES,
    accept: "image/*",
    onSelect: onSelectImage,
    onError: onUploadError
  }, createElement(MenuItem, {
    onClick: () => setFeaturedImage(0)
  }, __('Reset')))), createElement("figure", blockProps, image, createElement(Overlay, {
    attributes: attributes,
    setAttributes: setAttributes,
    clientId: clientId
  })));
}

export default function PostFeaturedImageEdit(props) {
  var _props$context;

  const blockProps = useBlockProps();
  const borderProps = useBorderProps(props.attributes);

  if (!((_props$context = props.context) !== null && _props$context !== void 0 && _props$context.postId)) {
    return createElement("div", blockProps, createElement(Placeholder, {
      className: classnames('block-editor-media-placeholder', borderProps.className),
      withIllustration: true,
      style: borderProps.style
    }), createElement(Overlay, {
      attributes: props.attributes,
      setAttributes: props.setAttributes,
      clientId: props.clientId
    }));
  }

  return createElement(PostFeaturedImageDisplay, props);
}
//# sourceMappingURL=edit.js.map