diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
index b46e77ea6a5726..9304115b0b7f11 100644
--- a/packages/editor/src/components/post-featured-image/index.js
+++ b/packages/editor/src/components/post-featured-image/index.js
@@ -10,9 +10,10 @@ import {
ResponsiveWrapper,
withNotices,
withFilters,
+ __experimentalHStack as HStack,
} from '@wordpress/components';
import { isBlobURL } from '@wordpress/blob';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { useSelect, withDispatch, withSelect } from '@wordpress/data';
import {
@@ -33,7 +34,6 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ];
// Used when labels from post type were not yet loaded or when they are not present.
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 = (
@@ -96,6 +96,7 @@ function PostFeaturedImage( {
noticeUI,
noticeOperations,
} ) {
+ const toggleRef = useRef();
const [ isLoading, setIsLoading ] = useState( false );
const mediaUpload = useSelect( ( select ) => {
return select( blockEditorStore ).getSettings().mediaUpload;
@@ -163,6 +164,7 @@ function PostFeaturedImage( {
render={ ( { open } ) => (
) }
value={ featuredImageId }
/>
- { !! featuredImageId && (
-
- { media && (
- (
-
- { __( 'Replace Image' ) }
-
- ) }
- />
- ) }
-
- { postType?.labels?.remove_featured_image ||
- DEFAULT_REMOVE_FEATURE_IMAGE_LABEL }
-
-
- ) }
);
diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss
index 965780179e6ef9..3b14662bf1d427 100644
--- a/packages/editor/src/components/post-featured-image/style.scss
+++ b/packages/editor/src/components/post-featured-image/style.scss
@@ -1,10 +1,6 @@
.editor-post-featured-image {
padding: 0;
- &__container {
- margin-bottom: 1em;
- position: relative;
- }
.components-spinner {
position: absolute;
@@ -14,12 +10,6 @@
margin-left: -9px;
}
- // Stack consecutive buttons.
- .components-button + .components-button {
- display: block;
- margin-top: 1em;
- }
-
// This keeps images at their intrinsic size (eg. a 50px
// image will never be wider than 50px).
.components-responsive-wrapper__content {
@@ -28,22 +18,40 @@
}
}
+.editor-post-featured-image__container {
+ position: relative;
+
+ &:hover,
+ &:focus,
+ &:focus-within {
+ .editor-post-featured-image__actions {
+ opacity: 1;
+ }
+ }
+}
+
.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;
+ }
}
.editor-post-featured-image__toggle {
@@ -59,3 +67,19 @@
color: $gray-900;
}
}
+
+.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;
+}
+
+.editor-post-featured-image__action {
+ backdrop-filter: blur(16px) saturate(180%);
+ background: rgba(255, 255, 255, 0.75);
+ flex-grow: 1;
+ justify-content: center;
+}