diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js index b46e77ea6a572..9304115b0b7f1 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 && ( - ( - - ) } - /> - ) } - - - ) } ); diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss index 965780179e6ef..3b14662bf1d42 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; +}