Use only one button for Set featured image and image preview. (#14415)

WordPress · Mar 20, 2019 · 3e376a9 · 3e376a9
1 parent 2a49a46
commit 3e376a9
Showing 1 changed file with 26 additions and 41 deletions.
diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
@@ -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
@@ -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>