Skip to content

Commit

Permalink
Use only one button for Set featured image and image preview. (#14415)
Browse files Browse the repository at this point in the history
  • Loading branch information
afercia authored and youknowriad committed Mar 20, 2019
1 parent 2a49a46 commit 3e376a9
Showing 1 changed file with 26 additions and 41 deletions.
67 changes: 26 additions & 41 deletions packages/editor/src/components/post-featured-image/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,30 +46,32 @@ function PostFeaturedImage( { currentPostId, featuredImageId, onUpdateImage, onR
return (
<PostFeaturedImageCheck>
<div className="editor-post-featured-image">
{ !! featuredImageId &&
<MediaUploadCheck fallback={ instructions }>
<MediaUpload
title={ postLabel.featured_image || DEFAULT_FEATURE_IMAGE_LABEL }
onSelect={ onUpdateImage }
allowedTypes={ ALLOWED_MEDIA_TYPES }
modalClass="editor-post-featured-image__media-modal"
render={ ( { open } ) => (
<Button className="editor-post-featured-image__preview" onClick={ open } aria-label={ __( 'Edit or update the image' ) }>
{ media &&
<ResponsiveWrapper
naturalWidth={ mediaWidth }
naturalHeight={ mediaHeight }
>
<img src={ mediaSourceUrl } alt="" />
</ResponsiveWrapper>
}
{ ! media && <Spinner /> }
</Button>
) }
value={ featuredImageId }
/>
</MediaUploadCheck>
}
<MediaUploadCheck fallback={ instructions }>
<MediaUpload
title={ postLabel.featured_image || DEFAULT_FEATURE_IMAGE_LABEL }
onSelect={ onUpdateImage }
allowedTypes={ ALLOWED_MEDIA_TYPES }
modalClass={ ! featuredImageId ? 'editor-post-featured-image__media-modal' : 'editor-post-featured-image__media-modal' }
render={ ( { open } ) => (
<Button
className={ ! featuredImageId ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview' }
onClick={ open }
aria-label={ ! featuredImageId ? null : __( 'Edit or update the image' ) }>
{ !! featuredImageId && media &&
<ResponsiveWrapper
naturalWidth={ mediaWidth }
naturalHeight={ mediaHeight }
>
<img src={ mediaSourceUrl } alt="" />
</ResponsiveWrapper>
}
{ !! featuredImageId && ! media && <Spinner /> }
{ ! featuredImageId && ( postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
</Button>
) }
value={ featuredImageId }
/>
</MediaUploadCheck>
{ !! featuredImageId && media && ! media.isLoading &&
<MediaUploadCheck>
<MediaUpload
Expand All @@ -85,23 +87,6 @@ function PostFeaturedImage( { currentPostId, featuredImageId, onUpdateImage, onR
/>
</MediaUploadCheck>
}
{ ! featuredImageId &&
<div>
<MediaUploadCheck fallback={ instructions }>
<MediaUpload
title={ postLabel.featured_image || DEFAULT_FEATURE_IMAGE_LABEL }
onSelect={ onUpdateImage }
allowedTypes={ ALLOWED_MEDIA_TYPES }
modalClass="editor-post-featured-image__media-modal"
render={ ( { open } ) => (
<Button className="editor-post-featured-image__toggle" onClick={ open }>
{ postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL }
</Button>
) }
/>
</MediaUploadCheck>
</div>
}
{ !! featuredImageId &&
<MediaUploadCheck>
<Button onClick={ onRemoveImage } isLink isDestructive>
Expand Down

0 comments on commit 3e376a9

Please sign in to comment.