fix(avatar): resolve guest author avatars in editor (#4460)

Author: rbcorrales

src/blocks/avatar/class-avatar-block.php

@@ -36,8 +36,8 @@ public static function register_block_styles() {
 			register_block_style(
 				'newspack/avatar',
 				[
-					'name'  => 'stacked',
-					'label' => __( 'Stacked', 'newspack-plugin' ),
+					'name'  => 'overlapped',
+					'label' => __( 'Overlapped', 'newspack-plugin' ),
 				]
 			);
 		}

src/blocks/avatar/style.scss

@@ -3,8 +3,8 @@
 	display: flex;
 	gap: 0.5rem;
 
-	&.is-style-stacked,
-	&[class*="is-style-stacked"] {
+	&.is-style-overlapped,
+	&[class*="is-style-overlapped"] {
 		gap: 0;
 
 		.newspack-avatar-wrapper:not(:last-of-type) {

src/shared/hooks/use-coauthors.js

@@ -12,11 +12,74 @@ import apiFetch from '@wordpress/api-fetch';
 const CAP_STORE = 'cap/authors';
 const COAUTHORS_ENDPOINT = '/coauthors/v1/coauthors';
 
-// Module-level cache for guest author avatar URLs, keyed by post ID.
+// Module-level cache for guest author avatar URLs, keyed by user_nicename.
 // Prevents duplicate REST requests when components re-mount or when
 // multiple avatar blocks in a Query Loop share the same guest authors.
 const guestAvatarCache = {};
 
+// In-flight request promises, keyed by user_nicename.
+// Prevents duplicate concurrent requests when multiple block instances
+// mount simultaneously (e.g. Query Loop) and all check the cache before
+// any fetch has completed.
+const inflightRequests = {};
+
+/**
+ * Fetch a single coauthor's avatar URLs, deduplicating concurrent requests.
+ *
+ * @param {string} nicename Author nicename (slug).
+ * @return {Promise} Resolves when the fetch completes (result is stored in guestAvatarCache).
+ */
+function fetchCoauthorAvatar( nicename ) {
+	if ( guestAvatarCache[ nicename ] ) {
+		return Promise.resolve();
+	}
+	if ( inflightRequests[ nicename ] ) {
+		return inflightRequests[ nicename ];
+	}
+	inflightRequests[ nicename ] = apiFetch( {
+		path: `${ COAUTHORS_ENDPOINT }/${ encodeURIComponent( nicename ) }`,
+	} )
+		.then( result => {
+			if ( result?.avatar_urls ) {
+				guestAvatarCache[ nicename ] = result.avatar_urls;
+			}
+		} )
+		.catch( () => {} ) // Silently skip failed fetches.
+		.finally( () => {
+			delete inflightRequests[ nicename ];
+		} );
+	return inflightRequests[ nicename ];
+}
+
+/**
+ * Reset the module-level guest avatar cache. Exposed for testing only.
+ */
+export function resetGuestAvatarCacheForTests() {
+	Object.keys( guestAvatarCache ).forEach( key => delete guestAvatarCache[ key ] );
+	Object.keys( inflightRequests ).forEach( key => delete inflightRequests[ key ] );
+}
+
+/**
+ * Extract user_nicename from an author archive URL.
+ *
+ * @param {string} link Author archive URL (e.g. /author/jane/).
+ * @return {string|undefined} Extracted nicename, or undefined.
+ */
+function extractNicenameFromLink( link ) {
+	if ( ! link ) {
+		return undefined;
+	}
+	const cleaned = link.split( '?' )[ 0 ].split( '#' )[ 0 ].replace( /\/$/, '' );
+	const segments = cleaned.split( '/' );
+	const slug = segments.pop();
+	// Require a parent path segment so root URLs and plain permalinks are rejected.
+	const parent = segments[ segments.length - 1 ];
+	if ( ! slug || ! parent ) {
+		return undefined;
+	}
+	return slug;
+}
+
 /**
  * Hook to get CoAuthors Plus authors from the CAP store or REST API.
  *
@@ -74,10 +137,13 @@ export function useCoAuthors( postId, postType = 'post', skip = false ) {
 
 				if ( restAuthors && Array.isArray( restAuthors ) && restAuthors.length > 0 ) {
 					// Map REST API author objects to our expected format.
+					// Extract user_nicename from author_link so the avatar
+					// effect can fetch from the CAP single-author endpoint.
 					const mappedAuthors = restAuthors.map( author => ( {
 						id: author.id,
 						display_name: author.display_name,
 						author_link: author.author_link,
+						user_nicename: extractNicenameFromLink( author.author_link ),
 					} ) );
 					return { authors: mappedAuthors, isCapAvailable: true };
 				}
@@ -89,57 +155,63 @@ export function useCoAuthors( postId, postType = 'post', skip = false ) {
 		[ postId, postType, skip ]
 	);
 
-	// Fetch avatar URLs from the CAP REST API for guest authors only.
+	// Fetch avatar URLs from the CAP REST API for authors that need it.
 	// The CAP store strips avatar data via formatAuthorData(), so we need
 	// to fetch the raw REST response to get the avatar URL (especially for
 	// guest authors whose avatars come from featured images).
-	const [ avatarMap, setAvatarMap ] = useState( () => guestAvatarCache[ postId ] || {} );
-
-	// Build a stable key from guest author IDs to avoid re-fetching on every render.
-	const guestAuthorIds = authors
-		.filter( author => author.isGuest )
-		.map( author => author.id )
-		.join( ',' );
+	//
+	// Fetches per-author (by nicename) instead of per-post so that avatars
+	// resolve immediately when a guest author is added — before the post is saved.
+	//
+	// For currently-edited post authors, isGuest is explicitly true/false.
+	// For Query Loop authors, isGuest is undefined (we can't distinguish from
+	// REST data alone), so we fetch for all of them and let the consumer
+	// (hooks.js) prefer WP user data when available.
+	const [ avatarMap, setAvatarMap ] = useState( {} );
+
+	// Build a stable key from author nicenames to control effect re-runs.
+	// isGuest !== false: includes guest authors (true) and Query Loop authors (undefined),
+	// but excludes known WP users from the currently-edited post (false).
+	const authorsNeedingAvatars = authors.filter( author => author.isGuest !== false && author.user_nicename );
+	const avatarNicenames = authorsNeedingAvatars.map( author => author.user_nicename ).join( ',' );
 
 	useEffect( () => {
-		if ( skip || ! isCapAvailable || ! guestAuthorIds || ! postId ) {
-			return;
-		}
-
-		// Use cached data if available (avoids duplicate requests on re-mount).
-		if ( guestAvatarCache[ postId ] ) {
-			setAvatarMap( guestAvatarCache[ postId ] );
+		if ( skip || ! isCapAvailable || ! avatarNicenames ) {
 			return;
 		}
 
 		let cancelled = false;
-		apiFetch( { path: `${ COAUTHORS_ENDPOINT }?post_id=${ postId }` } ).then( result => {
-			if ( cancelled || ! Array.isArray( result ) ) {
+		Promise.all( authorsNeedingAvatars.map( a => fetchCoauthorAvatar( a.user_nicename ) ) ).then( () => {
+			if ( cancelled ) {
 				return;
 			}
 			const map = {};
-			result.forEach( item => {
-				if ( item.id && item.avatar_urls ) {
-					map[ item.id ] = item.avatar_urls;
+			authorsNeedingAvatars.forEach( a => {
+				if ( guestAvatarCache[ a.user_nicename ] ) {
+					map[ a.id ] = guestAvatarCache[ a.user_nicename ];
 				}
 			} );
-			if ( Object.keys( map ).length ) {
-				guestAvatarCache[ postId ] = map;
-				setAvatarMap( map );
-			}
+			setAvatarMap( map );
 		} );
 
 		return () => {
 			cancelled = true;
 		};
-	}, [ skip, isCapAvailable, guestAuthorIds, postId ] );
+	}, [ skip, isCapAvailable, avatarNicenames ] );
 
 	// Merge avatar URLs into guest authors.
+	// Check both the async avatarMap (populated by the effect) and the
+	// synchronous guestAvatarCache (populated by previous fetches) so that
+	// cached avatars render immediately without waiting for an effect cycle.
 	const authorsWithAvatars = authors.map( author => {
-		if ( ! author.isGuest || ! avatarMap[ author.id ] ) {
+		if ( author.isGuest === false || ! author.user_nicename ) {
+			return author;
+		}
+		const urls = avatarMap[ author.id ] || guestAvatarCache[ author.user_nicename ];
+		if ( ! urls ) {
 			return author;
 		}
-		return { ...author, avatar_urls: avatarMap[ author.id ] };
+		return { ...author, avatar_urls: urls };
 	} );
 
 	return { authors: authorsWithAvatars, isCapAvailable };