Editor: Refactor PostFeaturedImage component (#40126)

Improve uploading state
WordPress · Apr 29, 2022 · fae087b · fae087b
1 parent ea06ebc
commit fae087b
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 69 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -33,6 +33,7 @@
  "@babel/runtime": "^7.16.0",
  "@wordpress/a11y": "file:../a11y",
  "@wordpress/api-fetch": "file:../api-fetch",
+ "@wordpress/blob": "file:../blob",
  "@wordpress/block-editor": "file:../block-editor",
  "@wordpress/blocks": "file:../blocks",
  "@wordpress/components": "file:../components",

diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
@@ -16,8 +16,10 @@ import {
  withNotices,
  withFilters,
 } from '@wordpress/components';
+import { isBlobURL } from '@wordpress/blob';
+import { useState } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect, withDispatch, withSelect } from '@wordpress/data';
 import {
  MediaUpload,
  MediaUploadCheck,
@@ -38,63 +40,94 @@ const DEFAULT_FEATURE_IMAGE_LABEL = __( 'Featured image' );
 const DEFAULT_SET_FEATURE_IMAGE_LABEL = __( 'Set featured image' );
 const DEFAULT_REMOVE_FEATURE_IMAGE_LABEL = __( 'Remove image' );
 
+const instructions = (
+ <p>
+ { __(
+ 'To edit the featured image, you need permission to upload media.'
+ ) }
+ </p>
+);
+
+function getMediaDetails( media, postId ) {
+ if ( ! media ) {
+ return {};
+ }
+
+ const defaultSize = applyFilters(
+ 'editor.PostFeaturedImage.imageSize',
+ 'large',
+ media.id,
+ postId
+ );
+ if ( has( media, [ 'media_details', 'sizes', defaultSize ] ) ) {
+ return {
+ mediaWidth: media.media_details.sizes[ defaultSize ].width,
+ mediaHeight: media.media_details.sizes[ defaultSize ].height,
+ mediaSourceUrl: media.media_details.sizes[ defaultSize ].source_url,
+ };
+ }
+
+ // Use fallbackSize when defaultSize is not available.
+ const fallbackSize = applyFilters(
+ 'editor.PostFeaturedImage.imageSize',
+ 'thumbnail',
+ media.id,
+ postId
+ );
+ if ( has( media, [ 'media_details', 'sizes', fallbackSize ] ) ) {
+ return {
+ mediaWidth: media.media_details.sizes[ fallbackSize ].width,
+ mediaHeight: media.media_details.sizes[ fallbackSize ].height,
+ mediaSourceUrl:
+ media.media_details.sizes[ fallbackSize ].source_url,
+ };
+ }
+
+ // Use full image size when fallbackSize and defaultSize are not available.
+ return {
+ mediaWidth: media.media_details.width,
+ mediaHeight: media.media_details.height,
+ mediaSourceUrl: media.source_url,
+ };
+}
+
 function PostFeaturedImage( {
  currentPostId,
  featuredImageId,
  onUpdateImage,
- onDropImage,
  onRemoveImage,
  media,
  postType,
  noticeUI,
+ noticeOperations,
 } ) {
+ const [ isLoading, setIsLoading ] = useState( false );
+ const mediaUpload = useSelect( ( select ) => {
+ return select( blockEditorStore ).getSettings().mediaUpload;
+ }, [] );
  const postLabel = get( postType, [ 'labels' ], {} );
- const instructions = (
- <p>
- { __(
- 'To edit the featured image, you need permission to upload media.'
- ) }
- </p>
+ const { mediaWidth, mediaHeight, mediaSourceUrl } = getMediaDetails(
+ media,
+ currentPostId
  );
 
- let mediaWidth, mediaHeight, mediaSourceUrl;
- if ( media ) {
- const mediaSize = applyFilters(
- 'editor.PostFeaturedImage.imageSize',
- 'post-thumbnail',
- media.id,
- currentPostId
- );
- if ( 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 = applyFilters(
- 'editor.PostFeaturedImage.imageSize',
- 'thumbnail',
- media.id,
- currentPostId
- );
- if (
- 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;
- }
- }
+ function onDropFiles( filesList ) {
+ mediaUpload( {
+ allowedTypes: [ 'image' ],
+ filesList,
+ onFileChange( [ image ] ) {
+ if ( isBlobURL( image?.url ) ) {
+ setIsLoading( true );
+ return;
+ }
+ onUpdateImage( image );
+ setIsLoading( false );
+ },
+ onError( message ) {
+ noticeOperations.removeAllNotices();
+ noticeOperations.createErrorNotice( message );
+ },
+ } );
  }
 
  return (
@@ -165,40 +198,40 @@ function PostFeaturedImage( {
  />
  </ResponsiveWrapper>
  ) }
- { !! featuredImageId && ! media && (
- <Spinner />
- ) }
+ { isLoading && <Spinner /> }
  { ! featuredImageId &&
+ ! isLoading &&
  ( postLabel.set_featured_image ||
  DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
  </Button>
- <DropZone onFilesDrop={ onDropImage } />
+ <DropZone onFilesDrop={ onDropFiles } />
  </div>
  ) }
  value={ featuredImageId }
  />
  </MediaUploadCheck>
- { !! featuredImageId && media && ! media.isLoading && (
- <MediaUploadCheck>
- <MediaUpload
- title={
- postLabel.featured_image ||
- DEFAULT_FEATURE_IMAGE_LABEL
- }
- onSelect={ onUpdateImage }
- unstableFeaturedImageFlow
- allowedTypes={ ALLOWED_MEDIA_TYPES }
- modalClass="editor-post-featured-image__media-modal"
- render={ ( { open } ) => (
- <Button onClick={ open } variant="secondary">
- { __( 'Replace Image' ) }
- </Button>
- ) }
- />
- </MediaUploadCheck>
- ) }
  { !! featuredImageId && (
  <MediaUploadCheck>
+ { media && (
+ <MediaUpload
+ title={
+ postLabel.featured_image ||
+ DEFAULT_FEATURE_IMAGE_LABEL
+ }
+ onSelect={ onUpdateImage }
+ unstableFeaturedImageFlow
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ modalClass="editor-post-featured-image__media-modal"
+ render={ ( { open } ) => (
+ <Button
+ onClick={ open }
+ variant="secondary"
+ >
+ { __( 'Replace Image' ) }
+ </Button>
+ ) }
+ />
+ ) }
  <Button
  onClick={ onRemoveImage }
  variant="link"