diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 96295a641a13cc..843f1cf66cdfcd 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -43,6 +43,11 @@ function getMediaSourceUrlBySizeSlug( media, slug ) { ); } +const disabledClickProps = { + onClick: ( event ) => event.preventDefault(), + 'aria-disabled': true, +}; + export default function PostFeaturedImageEdit( { clientId, attributes, @@ -67,9 +72,10 @@ export default function PostFeaturedImageEdit( { postId ); - const { media, postType } = useSelect( + const { media, postType, postPermalink } = useSelect( ( select ) => { - const { getMedia, getPostType } = select( coreStore ); + const { getMedia, getPostType, getEditedEntityRecord } = + select( coreStore ); return { media: featuredImage && @@ -77,10 +83,16 @@ export default function PostFeaturedImageEdit( { context: 'view', } ), postType: postTypeSlug && getPostType( postTypeSlug ), + postPermalink: getEditedEntityRecord( + 'postType', + postTypeSlug, + postId + )?.link, }; }, - [ featuredImage, postTypeSlug ] + [ featuredImage, postTypeSlug, postId ] ); + const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug ); const imageSizes = useSelect( @@ -197,7 +209,17 @@ export default function PostFeaturedImageEdit( { <> { controls }
- { placeholder() } + { !! isLink ? ( + + { placeholder() } + + ) : ( + placeholder() + ) } ) }
- { image } + { /* If the featured image is linked, wrap in an tag to trigger any inherited link element styles */ } + { !! isLink ? ( + + { image } + + ) : ( + image + ) } tag. + // Restore cursor style so it doesn't appear 'clickable'. + > a { + cursor: default; + } + + // When the Post Featured Image block is linked, + // and wrapped with a disabled tag + // ensure that the placeholder items are visible when selected. + &.is-selected .components-placeholder.has-illustration { + .components-button, + .components-placeholder__instructions, + .components-placeholder__label { + opacity: 1; + pointer-events: auto; + } + } } div[data-type="core/post-featured-image"] {