Post Featured Image: New design for Replace and Remove buttons

packages/components/src/menu-item/style.scss

@@ -49,6 +49,15 @@
 			opacity: 0.3;
 		}
 	}
+
+	// Override the button component's destructive background and border.
+	&.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
+		box-shadow: none;
+
+		&:active:not(:disabled) {
+			background: none;
+		}
+	}
 }
 
 .components-menu-item__info-wrapper {

packages/editor/src/components/post-featured-image/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -10,6 +15,9 @@ import {
 	ResponsiveWrapper,
 	withNotices,
 	withFilters,
+	FormFileUpload,
+	Dropdown,
+	Icon,
 } from '@wordpress/components';
 import { isBlobURL } from '@wordpress/blob';
 import { useState } from '@wordpress/element';
@@ -21,12 +29,14 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { pencil as pencilIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import PostFeaturedImageCheck from './check';
 import { store as editorStore } from '../../store';
+import PostFeaturedImageMenu from './menu';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -160,83 +170,111 @@ function PostFeaturedImage( {
 						unstableFeaturedImageFlow
 						allowedTypes={ ALLOWED_MEDIA_TYPES }
 						modalClass="editor-post-featured-image__media-modal"
-						render={ ( { open } ) => (
-							<div className="editor-post-featured-image__container">
-								<Button
-									className={
-										! featuredImageId
-											? 'editor-post-featured-image__toggle'
-											: 'editor-post-featured-image__preview'
-									}
-									onClick={ open }
-									aria-label={
-										! featuredImageId
-											? null
-											: __( 'Edit or update the image' )
-									}
-									aria-describedby={
-										! featuredImageId
-											? null
-											: `editor-post-featured-image-${ featuredImageId }-describedby`
-									}
-								>
-									{ !! featuredImageId && media && (
-										<ResponsiveWrapper
-											naturalWidth={ mediaWidth }
-											naturalHeight={ mediaHeight }
-											isInline
-										>
-											<img
-												src={ mediaSourceUrl }
-												alt=""
-											/>
-										</ResponsiveWrapper>
-									) }
-									{ isLoading && <Spinner /> }
-									{ ! featuredImageId &&
-										! isLoading &&
-										( postType?.labels
-											?.set_featured_image ||
-											DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
-								</Button>
-								<DropZone onFilesDrop={ onDropFiles } />
-							</div>
-						) }
-						value={ featuredImageId }
-					/>
-				</MediaUploadCheck>
-				{ !! featuredImageId && (
-					<MediaUploadCheck>
-						{ media && (
-							<MediaUpload
-								title={
-									postType?.labels?.featured_image ||
-									DEFAULT_FEATURE_IMAGE_LABEL
+						render={ ( { open: openMediaLibrary } ) => (
+							<FormFileUpload
+								accept="image/*"
+								onChange={ ( event ) =>
+									onDropFiles( event.target.files )
 								}
-								onSelect={ onUpdateImage }
-								unstableFeaturedImageFlow
-								allowedTypes={ ALLOWED_MEDIA_TYPES }
-								modalClass="editor-post-featured-image__media-modal"
-								render={ ( { open } ) => (
-									<Button
-										onClick={ open }
-										variant="secondary"
-									>
-										{ __( 'Replace Image' ) }
-									</Button>
+								render={ ( { openFileDialog } ) => (
+									<div className="editor-post-featured-image__container">
+										<Dropdown
+											className="editor-post-featured-image__dropdown"
+											popoverProps={ {
+												placement: 'left-start',
+												shift: true,
+											} }
+											renderToggle={ ( {
+												isOpen,
+												onToggle,
+											} ) => (
+												<Button
+													className={ classnames(
+														! featuredImageId
+															? 'editor-post-featured-image__toggle'
+															: 'editor-post-featured-image__preview',
+														{
+															'is-menu-open':
+																isOpen,
+														}
+													) }
+													onClick={ onToggle }
+													aria-label={
+														! featuredImageId
+															? null
+															: __(
+																	'Edit or update the image'
+															  )
+													}
+													aria-describedby={
+														! featuredImageId
+															? null
+															: `editor-post-featured-image-${ featuredImageId }-describedby`
+													}
+												>
+													{ !! featuredImageId &&
+														media && (
+															<ResponsiveWrapper
+																naturalWidth={
+																	mediaWidth
+																}
+																naturalHeight={
+																	mediaHeight
+																}
+																isInline
+															>
+																<img
+																	src={
+																		mediaSourceUrl
+																	}
+																	alt=""
+																/>
+															</ResponsiveWrapper>
+														) }
+													{ isLoading && <Spinner /> }
+													{ !! featuredImageId && (
+														<Icon
+															className="editor-post-featured-image__preview-icon"
+															icon={ pencilIcon }
+														/>
+													) }
+													{ ! featuredImageId &&
+														! isLoading &&
+														( postType?.labels
+															?.set_featured_image ||
+															DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
+												</Button>
+											) }
+											renderContent={ ( { onClose } ) => (
+												<PostFeaturedImageMenu
+													removeImageLabel={
+														postType?.labels
+															?.remove_featured_image ||
+														DEFAULT_REMOVE_FEATURE_IMAGE_LABEL
+													}
+													onClose={ onClose }
+													onOpenMediaLibrary={
+														openMediaLibrary
+													}
+													onOpenFileDialog={
+														openFileDialog
+													}
+													onRemoveImage={
+														featuredImageId
+															? onRemoveImage
+															: null
+													}
+												/>
+											) }
+										/>
+										<DropZone onFilesDrop={ onDropFiles } />
+									</div>
 								) }
 							/>
 						) }
-						<Button
-							onClick={ onRemoveImage }
-							variant="link"
-							isDestructive
-						>
-							{ postType?.labels?.remove_featured_image ||
-								DEFAULT_REMOVE_FEATURE_IMAGE_LABEL }
-						</Button>
-					</MediaUploadCheck>
-				) }
+						value={ featuredImageId }
+					/>
+				</MediaUploadCheck>
 			</div>
 		</PostFeaturedImageCheck>
 	);

packages/editor/src/components/post-featured-image/menu.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { NavigableMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	media as mediaIcon,
+	upload as uploadIcon,
+	trash as trashIcon,
+} from '@wordpress/icons';
+
+export default function PostFeaturedImageMenu( {
+	removeImageLabel,
+	onClose,
+	onOpenMediaLibrary,
+	onOpenFileDialog,
+	onRemoveImage,
+} ) {
+	return (
+		<NavigableMenu className="editor-post-featured-image__menu">
+			<MenuGroup>
+				<MenuItem
+					icon={ mediaIcon }
+					iconPosition="left"
+					onClick={ () => {
+						onOpenMediaLibrary();
+						onClose();
+					} }
+				>
+					{ __( 'Open Media Library' ) }
+				</MenuItem>
+				<MenuItem
+					icon={ uploadIcon }
+					iconPosition="left"
+					onClick={ () => {
+						onOpenFileDialog();
+						onClose();
+					} }
+				>
+					{ __( 'Upload file' ) }
+				</MenuItem>
+				{ onRemoveImage && (
+					<MenuItem
+						icon={ trashIcon }
+						iconPosition="left"
+						isDestructive
+						onClick={ () => {
+							onRemoveImage();
+							onClose();
+						} }
+					>
+						{ removeImageLabel }
+					</MenuItem>
+				) }
+			</MenuGroup>
+		</NavigableMenu>
+	);
+}

packages/editor/src/components/post-featured-image/style.scss

@@ -28,22 +28,40 @@
 	}
 }
 
+.editor-post-featured-image__dropdown {
+	display: block;
+}
+
 .editor-post-featured-image__toggle,
 .editor-post-featured-image__preview {
-	display: block;
 	width: 100%;
 	padding: 0;
 	transition: all 0.1s ease-out;
 	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
+	overflow: hidden; // Ensure the focus style properly encapsulates the image.
+
+	// Apply a max-height.
+	display: flex;
+	justify-content: center;
+	max-height: 150px;
 }
 
 .editor-post-featured-image__preview {
 	height: auto;
-}
 
-.editor-post-featured-image__preview:not(:disabled):not([aria-disabled="true"]):focus {
-	box-shadow: 0 0 0 4px var(--wp-admin-theme-color);
+	.components-responsive-wrapper {
+		width: 100%;
+		background: $gray-100;
+	}
+
+	&:hover,
+	&:focus,
+	&.is-menu-open {
+		.editor-post-featured-image__preview-icon {
+			visibility: visible;
+		}
+	}
 }
 
 .editor-post-featured-image__toggle {
@@ -59,3 +77,20 @@
 		color: $gray-900;
 	}
 }
+
+.editor-post-featured-image__preview-icon {
+	background: $white;
+	border-radius: $radius-block-ui;
+	display: block;
+	height: $grid-unit-40;
+	padding: $grid-unit-05;
+	position: absolute;
+	right: $grid-unit-10;
+	bottom: $grid-unit-10;
+	visibility: hidden;
+	width: $grid-unit-40;
+}
+
+.editor-post-featured-image__menu {
+	margin: $grid-unit-10 0;
+}