Use standard button variations for the Post featured image UI.

WordPress · Oct 18, 2024 · 3860024 · 3860024
1 parent 388dd81
commit 3860024
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 60 deletions.
diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
@@ -158,53 +158,57 @@ function PostFeaturedImage( {
 						allowedTypes={ ALLOWED_MEDIA_TYPES }
 						modalClass="editor-post-featured-image__media-modal"
 						render={ ( { open } ) => (
-							<div className="editor-post-featured-image__container">
-								<Button
-									__next40pxDefaultSize
-									ref={ toggleRef }
-									className={
-										! featuredImageId
-											? 'editor-post-featured-image__toggle'
-											: 'editor-post-featured-image__preview'
-									}
-									onClick={ open }
-									aria-label={
-										! featuredImageId
-											? null
-											: __(
-													'Edit or replace the featured image'
-											  )
-									}
-									aria-describedby={
-										! featuredImageId
-											? null
-											: `editor-post-featured-image-${ featuredImageId }-describedby`
-									}
-									aria-haspopup="dialog"
-									disabled={ isLoading }
-									accessibleWhenDisabled
-								>
-									{ !! featuredImageId && media && (
-										<img
-											className="editor-post-featured-image__preview-image"
-											src={ mediaSourceUrl }
-											alt=""
-										/>
-									) }
-									{ isLoading && <Spinner /> }
-									{ ! featuredImageId &&
-										! isLoading &&
-										( postType?.labels
-											?.set_featured_image ||
-											DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
-								</Button>
+							<>
+								<div className="editor-post-featured-image__container">
+									<Button
+										__next40pxDefaultSize
+										ref={ toggleRef }
+										className={
+											! featuredImageId
+												? 'editor-post-featured-image__toggle'
+												: 'editor-post-featured-image__preview'
+										}
+										onClick={ open }
+										aria-label={
+											! featuredImageId
+												? null
+												: __(
+														'Edit or replace the featured image'
+												  )
+										}
+										aria-describedby={
+											! featuredImageId
+												? null
+												: `editor-post-featured-image-${ featuredImageId }-describedby`
+										}
+										aria-haspopup="dialog"
+										disabled={ isLoading }
+										accessibleWhenDisabled
+									>
+										{ !! featuredImageId && media && (
+											<img
+												className="editor-post-featured-image__preview-image"
+												src={ mediaSourceUrl }
+												alt=""
+											/>
+										) }
+										{ isLoading && <Spinner /> }
+										{ ! featuredImageId &&
+											! isLoading &&
+											( postType?.labels
+												?.set_featured_image ||
+												DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
+									</Button>
+									<DropZone onFilesDrop={ onDropFiles } />
+								</div>
 								{ !! featuredImageId && (
 									<HStack className="editor-post-featured-image__actions">
 										<Button
 											__next40pxDefaultSize
 											className="editor-post-featured-image__action"
 											onClick={ open }
 											aria-haspopup="dialog"
+											variant="secondary"
 										>
 											{ __( 'Replace' ) }
 										</Button>
@@ -215,13 +219,14 @@ function PostFeaturedImage( {
 												onRemoveImage();
 												toggleRef.current.focus();
 											} }
+											variant="secondary"
+											isDestructive
 										>
 											{ __( 'Remove' ) }
 										</Button>
 									</HStack>
 								) }
-								<DropZone onFilesDrop={ onDropFiles } />
-							</div>
+							</>
 						) }
 						value={ featuredImageId }
 					/>

diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss
@@ -5,22 +5,14 @@
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		margin-top: -9px;
-		margin-left: -9px;
+		margin: 0;
+		transform: translate(-50%, -50%);
 	}
 }
 
 .editor-post-featured-image__container {
 	position: relative;
 
-	&:hover,
-	&:focus,
-	&:focus-within {
-		.editor-post-featured-image__actions {
-			opacity: 1;
-		}
-	}
-
 	.components-drop-zone__content {
 		border-radius: $radius-small;
 	}
@@ -72,17 +64,10 @@
 }
 
 .editor-post-featured-image__actions {
-	@include reduce-motion("transition");
-	bottom: 0;
-	opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
-	padding: $grid-unit-10;
-	position: absolute;
-	transition: opacity 50ms ease-out;
+	padding: $grid-unit-10 0;
 }
 
 .editor-post-featured-image__action {
-	backdrop-filter: blur(16px) saturate(180%);
-	background: rgba(255, 255, 255, 0.75);
 	flex-grow: 1;
 	justify-content: center;
 }