Render shared mentions in H2

functions.php

@@ -23,6 +23,7 @@
 add_filter( 'pre_option_permalink_structure', __NAMESPACE__ . '\\get_permalink_structure' );
 add_action( 'init', __NAMESPACE__ . '\\update_wp_rewrite_permalink_structure' );
 add_action( 'init', __NAMESPACE__ . '\\register_custom_meta' );
+add_action( 'init', __NAMESPACE__ . '\\register_mention_support', 15 );
 add_action( 'rest_api_init', __NAMESPACE__ . '\\register_rest_routes' );
 add_filter( 'rest_user_collection_params', __NAMESPACE__ . '\\increase_api_user_limit' );
 add_action( 'customize_register', __NAMESPACE__ . '\\register_customizer_settings' );

inc/namespace.php

@@ -34,6 +34,15 @@ function adjust_default_filters() {
 	add_filter( 'comment_text', [ $wp_embed, 'autoembed' ], 8 );
 }
 
+/**
+ * Opt discussion post types into mentions while comments are open.
+ */
+function register_mention_support(): void {
+	foreach ( get_post_types_by_support( 'comments' ) as $post_type ) {
+		add_post_type_support( $post_type, 'hm-human-activity', [ 'requires_open_comments' => true ] );
+	}
+}
+
 /**
  * Set up theme global settings.
  */

src/components/Comment.stories.js

@@ -5,8 +5,7 @@ import { withPadding, withStore } from '../stories/decorators';
 import { comment, post, user } from '../stories/stubs';
 
 import { Comment as CommentComponent } from './Comment';
-import BotMention from './Comment/BotMention';
-import SlackMention from './Comment/SlackMention';
+import ActivityMention from './Comment/ActivityMention';
 import { WriteComment as WriteCommentComponent } from './Message/WriteComment';
 
 export default {
@@ -44,46 +43,26 @@ export const WriteComment = () => (
 
 export const ActivityMentions = () => (
 	<div>
-		<SlackMention
+		<ActivityMention
 			comment={ {
 				...comment,
 				id: 2,
-				type: 'slack_mention',
-				slack: {
-					channel_name: 'design',
-					permalink: 'https://humanmade.slack.com/archives/CDEMO/p1234567890',
-					shared_by: 'Noel',
-					shared_by_id: 1,
-					shared_by_username: 'noel',
-					source: 'manual',
-					visibility: 'public',
-				},
+				type: 'mention',
+				content: { rendered: 'Shared by <a href="/author/noel/">@noel</a> in <strong>#design</strong> on Slack' },
+				mention: { source: 'slack' },
 			} }
 		/>
-		<BotMention
+		<ActivityMention
 			comment={ {
 				...comment,
-				author_avatar_urls: user.avatar_urls,
-				author_name: 'Helpful Bot',
 				id: 3,
-				type: 'human_mention',
-				human: {
-					asker: 'Noel',
-					asker_id: 1,
-					asker_username: 'noel',
-					question_url: 'https://humanmade.slack.com/archives/CDEMO/p1234567891',
+				type: 'mention',
+				content: { rendered: 'Referenced by <a href="/author/human/">@human</a> to answer a question' },
+				mention: {
+					source: 'human',
+					icon_url: user.avatar_urls['24'],
 				},
 			} }
 		/>
-		<BotMention
-			comment={ {
-				...comment,
-				author_avatar_urls: user.avatar_urls,
-				author_name: 'human',
-				id: 4,
-				type: 'human_mention',
-				human: {},
-			} }
-		/>
 	</div>
 );

src/components/Comment/ActivityMention.css

@@ -46,48 +46,18 @@
 	background: #fff;
 }
 
-.Comment-SlackMention__logo {
+.Comment-ActivityMention__icon {
 	display: block;
+	object-fit: contain;
 }
 
-.Comment-ActivityMention__node .Comment-BotMention__logo {
-	display: block;
-	width: 14px;
-	height: 14px;
-	margin: 0;
-	border-radius: 50%;
-}
-
-.Comment-ActivityMention__node .Comment-BotMention__logo--fallback {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: var( --hm-red );
-	color: #fff;
-	font-size: 9px;
-	font-weight: 600;
-	line-height: 1;
-}
-
-.Comment-BotMention__question {
-	color: inherit;
-	font-weight: 600;
-}
-
-.Comment-BotMention__question:hover,
-.Comment-BotMention__question:focus {
-	text-decoration: underline;
-}
-
-.Comment-SlackMention__channel {
+.Comment-ActivityMention__text a {
 	color: inherit;
 	font-weight: 600;
 }
 
-/* Only the linked (manual-share) channel underlines on hover; the auto-share
- * channel is plain text, so it must not. */
-a.Comment-SlackMention__channel:hover,
-a.Comment-SlackMention__channel:focus {
+.Comment-ActivityMention__text a:hover,
+.Comment-ActivityMention__text a:focus {
 	text-decoration: underline;
 }
 

src/components/Comment/ActivityMention.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Comment } from '../../shapes';
+import FormattedDate from '../FormattedDate';
+
+import './ActivityMention.css';
+
+export default function ActivityMention( { comment } ) {
+	const { mention } = comment;
+
+	return (
+		<div className="Comment-ActivityMention" id={ `comment-${ comment.id }` }>
+			{ mention?.icon_url && (
+				<span className="Comment-ActivityMention__node">
+					<img
+						alt={ mention.icon_label || '' }
+						className="Comment-ActivityMention__icon"
+						src={ mention.icon_url }
+						width={ 14 }
+						height={ 14 }
+					/>
+				</span>
+			) }
+			<span
+				className="Comment-ActivityMention__text"
+				dangerouslySetInnerHTML={ { __html: comment.content.rendered } }
+			/>
+			<span className="Comment-ActivityMention__date">
+				<FormattedDate date={ comment.date_gmt + 'Z' } />
+			</span>
+		</div>
+	);
+}
+
+ActivityMention.propTypes = {
+	comment: Comment.isRequired,
+};