Post feature image block: wrap images with hrefs in an A tag (#55498)

* Wrap post featured image in an A tag so that it simulates the frontend, and ensures any styles the IMG elements inherits from the A element are also displayed in the editor. The cursor style should be default since, in the editor, we don't want to indicate that the image is clickable. * - also wrap the placeholder in an a tag for consistency * Ensure that the placeholder items are visible by overwriting the components CSS, which has an immediate child selector to show the button. With the A tag, the placeholder is no longer the immediate child.
WordPress · Nov 14, 2023 · 0f2c264 · 0f2c264
1 parent 8fb5e52
commit 0f2c264
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 5 deletions.
diff --git 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,20 +72,27 @@ 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 &&
 					getMedia( featuredImage, {
 						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 }
 				<div { ...blockProps }>
-					{ placeholder() }
+					{ !! isLink ? (
+						<a
+							href={ postPermalink }
+							target={ linkTarget }
+							{ ...disabledClickProps }
+						>
+							{ placeholder() }
+						</a>
+					) : (
+						placeholder()
+					) }
 					<Overlay
 						attributes={ attributes }
 						setAttributes={ setAttributes }
@@ -295,7 +317,18 @@ export default function PostFeaturedImageEdit( {
 				</BlockControls>
 			) }
 			<figure { ...blockProps }>
-				{ image }
+				{ /* If the featured image is linked, wrap in an <a /> tag to trigger any inherited link element styles */ }
+				{ !! isLink ? (
+					<a
+						href={ postPermalink }
+						target={ linkTarget }
+						{ ...disabledClickProps }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
 				<Overlay
 					attributes={ attributes }
 					setAttributes={ setAttributes }

diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
@@ -96,6 +96,25 @@
 		height: 100%;
 		width: 100%;
 	}
+
+	// When the Post Featured Image block is linked,
+	// it's wrapped with a disabled <a /> 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 <a /> 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"] {