newspack-components 4.3.0 → 4.4.0-epic-editor-refactor.1

package/shared/hooks/use-coauthors.js

@@ -6,11 +6,11 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import apiFetch from '@wordpress/api-fetch';
 
-/**
- * CoAuthors Plus store name.
- */
+// Detection key for the optional Redux store published by CAP <4.0. When present and exposing
+// `getAuthors`, prefer the synchronous path; otherwise fall back to term-ID resolution via REST.
 const CAP_STORE = 'cap/authors';
 const COAUTHORS_ENDPOINT = '/coauthors/v1/coauthors';
+const COAUTHORS_BY_TERM_IDS_ENDPOINT = '/coauthors/v1/authors-by-term-ids';
 
 // Module-level cache for guest author avatar URLs, keyed by user_nicename.
 // Prevents duplicate REST requests when components re-mount or when
@@ -23,6 +23,66 @@ const guestAvatarCache = {};
 // any fetch has completed.
 const inflightRequests = {};
 
+// Term-ID to author object cache (new CAP). A cached `false` means the server omitted the ID.
+const coauthorDetailsCache = {};
+
+// In-flight term-ID fetches keyed by sorted CSV, so concurrent mounts share one REST call.
+const inflightTermResolves = {};
+
+// Stable empty-state reference so setState is a no-op when already empty.
+const EMPTY_AUTHORS = Object.freeze( [] );
+
+/**
+ * Fetch coauthor details for an array of taxonomy term IDs (new CAP).
+ * Deduplicates concurrent requests and caches results by term ID.
+ *
+ * @param {number[]} termIds Array of coauthor taxonomy term IDs.
+ * @return {Promise} Resolves once results are in `coauthorDetailsCache`.
+ */
+function fetchCoauthorsByTermIds( termIds ) {
+	if ( ! termIds || termIds.length === 0 ) {
+		return Promise.resolve();
+	}
+	const uncachedIds = termIds.filter( id => ! ( id in coauthorDetailsCache ) );
+	if ( uncachedIds.length === 0 ) {
+		return Promise.resolve();
+	}
+	const key = [ ...uncachedIds ].sort( ( a, b ) => a - b ).join( ',' );
+	if ( inflightTermResolves[ key ] ) {
+		return inflightTermResolves[ key ];
+	}
+	inflightTermResolves[ key ] = apiFetch( {
+		path: `${ COAUTHORS_BY_TERM_IDS_ENDPOINT }?ids=${ uncachedIds.join( ',' ) }`,
+	} )
+		.then( results => {
+			if ( Array.isArray( results ) ) {
+				results.forEach( author => {
+					if ( author?.termId ) {
+						coauthorDetailsCache[ author.termId ] = author;
+					}
+				} );
+			}
+			// Mark IDs that the server omitted as permanently unresolved (e.g. deleted author).
+			// Only done on a successful response — transient errors leave cache untouched to allow retries.
+			uncachedIds.forEach( id => {
+				if ( ! ( id in coauthorDetailsCache ) ) {
+					coauthorDetailsCache[ id ] = false;
+				}
+			} );
+		} )
+		.catch( () => {
+			// Do not poison the cache on transient errors (network, 5xx) or permission errors (403).
+			// Concurrent calls are already deduped via `inflightTermResolves`, and leaving the cache
+			// untouched allows a later call to `fetchCoauthorsByTermIds` to retry after this
+			// in-flight request clears. Failure is signalled to consumers via `hasCoauthorTermIds`
+			// remaining true while `authors` stays empty.
+		} )
+		.finally( () => {
+			delete inflightTermResolves[ key ];
+		} );
+	return inflightTermResolves[ key ];
+}
+
 /**
  * Fetch a single coauthor's avatar URLs, deduplicating concurrent requests.
  *
@@ -59,6 +119,14 @@ export function resetGuestAvatarCacheForTests() {
 	Object.keys( inflightRequests ).forEach( key => delete inflightRequests[ key ] );
 }
 
+/**
+ * Reset the module-level coauthor details cache. Exposed for testing only.
+ */
+export function resetCoauthorDetailsCacheForTests() {
+	Object.keys( coauthorDetailsCache ).forEach( key => delete coauthorDetailsCache[ key ] );
+	Object.keys( inflightTermResolves ).forEach( key => delete inflightTermResolves[ key ] );
+}
+
 /**
  * Extract user_nicename from an author archive URL.
  *
@@ -83,58 +151,144 @@ function extractNicenameFromLink( link ) {
 /**
  * Hook to get CoAuthors Plus authors from the CAP store or REST API.
  *
- * For the currently-edited post, it uses CAP's JS store for real-time updates.
- * For Query Loop posts, it uses REST API data since CAP's store only works for the
- * currently-edited post.
+ * For the currently-edited post, uses one of two sources depending on which CAP version is active:
+ *   - Legacy CAP (Redux store published by CAP <4.0): reads from `cap/authors` for real-time updates.
+ *   - New CAP (no Redux store, CAP 4.0+): reads taxonomy term IDs from
+ *     `getEditedPostAttribute('coauthors')` and resolves them to rich author data via the
+ *     `authors-by-term-ids` REST endpoint.
+ * For Query Loop posts, it uses REST data from `newspack_author_info` (unaffected by CAP version).
  *
  * @param {number}  postId   Post ID to get authors for.
  * @param {string}  postType Post type (default: 'post').
  * @param {boolean} skip     Skip fetching (default: false).
- * @return {Object} Authors array and availability state.
+ * @return {Object} `{ authors, isCapAvailable, isLoading, hasCoauthorTermIds }`.
+ *                  `isLoading` is true during the new-CAP term-ID resolution window (including the
+ *                  pre-flight render before the effect fires); legacy CAP is synchronous.
+ *                  `hasCoauthorTermIds` is true when the new-CAP path is in use AND term IDs are
+ *                  assigned — consumers should treat `authors.length === 0` while this flag is true
+ *                  as "resolution unavailable" (e.g. permission-denied REST) rather than "no coauthors",
+ *                  to avoid silently falling back to default state.
  */
 export function useCoAuthors( postId, postType = 'post', skip = false ) {
 	// Return raw store references from useSelect to avoid creating new objects
 	// on every render (which triggers useSelect memoization warnings).
 	// The .map() transformations happen in useMemo below.
-	const { capAuthors, restAuthors, isCapAvailable } = useSelect(
+	const { legacyCapAuthors, coauthorTermIdsKey, restAuthors, isCapAvailable } = useSelect(
 		select => {
 			if ( skip ) {
-				return { capAuthors: null, restAuthors: null, isCapAvailable: false };
+				return { legacyCapAuthors: null, coauthorTermIdsKey: null, restAuthors: null, isCapAvailable: false };
 			}
 
 			const capStore = select( CAP_STORE );
-			const isCapStoreAvailable = Boolean( capStore && typeof capStore.getAuthors === 'function' );
+			const isLegacyCapStoreAvailable = Boolean( capStore && typeof capStore.getAuthors === 'function' );
 
 			const editorStore = select( 'core/editor' );
 			const currentPostId = editorStore?.getCurrentPostId?.();
 			const isQueryLoopContext = postId && currentPostId && postId !== currentPostId;
 
-			// For the currently-edited post, use CAP's store for real-time updates.
-			if ( isCapStoreAvailable && ! isQueryLoopContext ) {
-				const rawCapAuthors = postId ? capStore.getAuthors( postId ) : null;
-				return { capAuthors: rawCapAuthors, restAuthors: null, isCapAvailable: true };
-			}
-
-			// For Query Loop context, try to get coauthors from REST API.
-			// If REST author data exists, treat CAP as available (matching original behavior)
-			// since the server-side plugin provided the data even if the JS store isn't loaded.
+			// Query Loop: read from newspack_author_info on the post entity.
+			// Unaffected by CAP version.
 			if ( isQueryLoopContext && postId ) {
 				const { getEntityRecord } = select( coreStore );
 				const post = getEntityRecord( 'postType', postType, postId );
 				const restData = post?.newspack_author_info || null;
-				return { capAuthors: null, restAuthors: restData, isCapAvailable: restData ? true : isCapStoreAvailable };
+				return {
+					legacyCapAuthors: null,
+					coauthorTermIdsKey: null,
+					restAuthors: restData,
+					isCapAvailable: restData ? true : isLegacyCapStoreAvailable,
+				};
 			}
 
-			return { capAuthors: null, restAuthors: null, isCapAvailable: isCapStoreAvailable };
+			// Legacy CAP: read from cap/authors store for real-time updates.
+			if ( isLegacyCapStoreAvailable ) {
+				const rawCapAuthors = postId ? capStore.getAuthors( postId ) : null;
+				return { legacyCapAuthors: rawCapAuthors, coauthorTermIdsKey: null, restAuthors: null, isCapAvailable: true };
+			}
+
+			// New CAP: read taxonomy term IDs from the post entity. Serialize to a stable string
+			// inside the selector so a fresh array reference from `getEditedPostAttribute` doesn't
+			// trigger spurious re-renders. `null` = attribute not loaded; `''` = loaded but empty;
+			// CSV (e.g. `'471,488'`) = term IDs assigned.
+			const termIds = editorStore?.getEditedPostAttribute?.( 'coauthors' );
+			if ( Array.isArray( termIds ) ) {
+				const validIds = termIds.map( Number ).filter( Number.isInteger );
+				return {
+					legacyCapAuthors: null,
+					coauthorTermIdsKey: validIds.length === 0 ? '' : validIds.join( ',' ),
+					restAuthors: null,
+					isCapAvailable: true,
+				};
+			}
+
+			// No CAP detected (plugin inactive).
+			return { legacyCapAuthors: null, coauthorTermIdsKey: null, restAuthors: null, isCapAvailable: false };
 		},
 		[ postId, postType, skip ]
 	);
 
+	// Resolve coauthor term IDs to author data via REST (new CAP path only).
+	// Uses a module-level cache + in-flight dedup so concurrent mounts share a single fetch.
+	const [ resolvedTermAuthors, setResolvedTermAuthors ] = useState( EMPTY_AUTHORS );
+	const [ asyncIsLoading, setAsyncIsLoading ] = useState( false );
+	// Tracks the last `coauthorTermIdsKey` the effect has processed. Used to derive a synchronous
+	// pre-flight loading state during the render between key change and effect firing — without
+	// it, consumers briefly see "term IDs assigned but isLoading false" and may pick wrong defaults.
+	const [ processedKey, setProcessedKey ] = useState( null );
+
+	const hasCoauthorTermIds = coauthorTermIdsKey !== null && coauthorTermIdsKey !== '';
+	const isPreFlight = hasCoauthorTermIds && processedKey !== coauthorTermIdsKey;
+	const isLoading = isPreFlight || asyncIsLoading;
+
+	useEffect( () => {
+		if ( skip || coauthorTermIdsKey === null ) {
+			// Use the module-level frozen empty array so the identity is stable
+			// and setState is a no-op when already empty.
+			setResolvedTermAuthors( EMPTY_AUTHORS );
+			setAsyncIsLoading( false );
+			setProcessedKey( coauthorTermIdsKey );
+			return;
+		}
+		const ids = coauthorTermIdsKey === '' ? [] : coauthorTermIdsKey.split( ',' ).map( Number ).filter( Number.isInteger );
+		if ( ids.length === 0 ) {
+			setResolvedTermAuthors( EMPTY_AUTHORS );
+			setAsyncIsLoading( false );
+			setProcessedKey( coauthorTermIdsKey );
+			return;
+		}
+
+		// If everything is already cached, resolve synchronously without flipping loading state.
+		const allCached = ids.every( id => id in coauthorDetailsCache );
+		if ( allCached ) {
+			const resolved = ids.map( id => coauthorDetailsCache[ id ] ).filter( author => author && typeof author === 'object' );
+			setResolvedTermAuthors( resolved.length === 0 ? EMPTY_AUTHORS : resolved );
+			setAsyncIsLoading( false );
+			setProcessedKey( coauthorTermIdsKey );
+			return;
+		}
+
+		let cancelled = false;
+		setAsyncIsLoading( true );
+		fetchCoauthorsByTermIds( ids ).then( () => {
+			if ( cancelled ) {
+				return;
+			}
+			const resolved = ids.map( id => coauthorDetailsCache[ id ] ).filter( author => author && typeof author === 'object' );
+			setResolvedTermAuthors( resolved.length === 0 ? EMPTY_AUTHORS : resolved );
+			setAsyncIsLoading( false );
+			setProcessedKey( coauthorTermIdsKey );
+		} );
+
+		return () => {
+			cancelled = true;
+		};
+	}, [ coauthorTermIdsKey, skip ] );
+
 	// Map raw store data to our normalized author format.
 	const authors = useMemo( () => {
-		// CAP store authors: { id, label, display, value, userType }
-		if ( capAuthors && capAuthors.length > 0 ) {
-			return capAuthors.map( author => ( {
+		// Legacy CAP store authors: { id, label, display, value, userType }
+		if ( legacyCapAuthors && legacyCapAuthors.length > 0 ) {
+			return legacyCapAuthors.map( author => ( {
 				id: author.id,
 				display_name: author.display || author.value || author.label,
 				user_nicename: author.value,
@@ -142,7 +296,21 @@ export function useCoAuthors( postId, postType = 'post', skip = false ) {
 			} ) );
 		}
 
-		// REST API authors from newspack_author_info.
+		// New CAP authors resolved from term IDs.
+		// REST shape: { id (string), termId, displayName, userNicename, userType, ... }
+		// Coerce `id` to Number at the source so consumers and the in-file dedupe (`other.id === author.id`)
+		// see a consistent shape across legacy CAP (numeric id) and new CAP (string id).
+		if ( resolvedTermAuthors && resolvedTermAuthors.length > 0 ) {
+			return resolvedTermAuthors.map( author => ( {
+				id: Number( author.id ),
+				termId: author.termId,
+				display_name: author.displayName,
+				user_nicename: author.userNicename,
+				isGuest: author.userType === 'guest-author',
+			} ) );
+		}
+
+		// REST API authors from newspack_author_info (Query Loop).
 		if ( restAuthors && Array.isArray( restAuthors ) && restAuthors.length > 0 ) {
 			return restAuthors.map( author => ( {
 				id: author.id,
@@ -155,7 +323,7 @@ export function useCoAuthors( postId, postType = 'post', skip = false ) {
 		}
 
 		return [];
-	}, [ capAuthors, restAuthors ] );
+	}, [ legacyCapAuthors, resolvedTermAuthors, restAuthors ] );
 
 	// Fetch avatar URLs from the CAP REST API for authors that need it.
 	// The CAP store strips avatar data via formatAuthorData(), so we need
@@ -216,5 +384,5 @@ export function useCoAuthors( postId, postType = 'post', skip = false ) {
 		return { ...author, avatar_urls: urls };
 	} );
 
-	return { authors: authorsWithAvatars, isCapAvailable };
+	return { authors: authorsWithAvatars, isCapAvailable, isLoading, hasCoauthorTermIds };
 }

package/shared/hooks/use-coauthors.test.js

@@ -12,7 +12,7 @@ import apiFetch from '@wordpress/api-fetch';
 /**
  * Internal dependencies
  */
-import { useCoAuthors, resetGuestAvatarCacheForTests } from './use-coauthors';
+import { useCoAuthors, resetGuestAvatarCacheForTests, resetCoauthorDetailsCacheForTests } from './use-coauthors';
 
 jest.mock( '@wordpress/data', () => ( {
 	useSelect: jest.fn(),
@@ -27,13 +27,16 @@ jest.mock( '@wordpress/api-fetch', () => jest.fn() );
 /**
  * Helper to create a mock select function for multiple stores.
  *
- * @param {Object} options               Mock options.
- * @param {Object} options.capStore      CAP store mock (null if unavailable).
- * @param {number} options.currentPostId Currently-edited post ID.
- * @param {Object} options.entityRecords Map of postId -> post entity record.
+ * @param {Object}   options                 Mock options.
+ * @param {Object}   options.capStore        Legacy CAP store mock (null if unavailable — i.e., new CAP).
+ * @param {number}   options.currentPostId   Currently-edited post ID.
+ * @param {Object}   options.entityRecords   Map of postId -> post entity record (used for Query Loop).
+ * @param {number[]} options.coauthorTermIds `coauthors` post attribute (new CAP).
+ *                                           `undefined` means attribute not set (legacy CAP / plugin missing);
+ *                                           `[]` means the attribute is present but empty.
  * @return {Function} Mock select function.
  */
-const createMockSelect = ( { capStore = null, currentPostId = 123, entityRecords = {} } = {} ) => {
+const createMockSelect = ( { capStore = null, currentPostId = 123, entityRecords = {}, coauthorTermIds } = {} ) => {
 	return storeName => {
 		if ( storeName === 'cap/authors' ) {
 			return capStore;
@@ -41,6 +44,7 @@ const createMockSelect = ( { capStore = null, currentPostId = 123, entityRecords
 		if ( storeName === 'core/editor' ) {
 			return {
 				getCurrentPostId: () => currentPostId,
+				getEditedPostAttribute: attr => ( attr === 'coauthors' ? coauthorTermIds : undefined ),
 			};
 		}
 		if ( storeName === 'core' ) {
@@ -56,6 +60,7 @@ describe( 'useCoAuthors', () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
 		resetGuestAvatarCacheForTests();
+		resetCoauthorDetailsCacheForTests();
 		// Default: apiFetch resolves with empty object (no avatar_urls).
 		apiFetch.mockResolvedValue( {} );
 	} );
@@ -181,6 +186,227 @@ describe( 'useCoAuthors', () => {
 		} );
 	} );
 
+	describe( 'currently-edited post (new CAP, term ID resolution)', () => {
+		const NEW_CAP_RESPONSE = [
+			{ id: '1', termId: 471, displayName: 'Jane Doe', userNicename: 'jane-doe', userType: 'wpuser', login: 'jane', email: 'jane@x.com' },
+			{ id: '2', termId: 488, displayName: 'John Smith', userNicename: 'john-smith', userType: 'wpuser', login: 'john', email: 'john@x.com' },
+			{ id: '1591', termId: 483, displayName: 'External', userNicename: 'external', userType: 'guest-author', login: 'external', email: '' },
+		];
+
+		it( 'should resolve term IDs via REST when legacy CAP store is absent', async () => {
+			apiFetch.mockResolvedValueOnce( NEW_CAP_RESPONSE );
+
+			useSelect.mockImplementation( callback =>
+				callback(
+					createMockSelect( {
+						capStore: null, // legacy CAP not registered
+						currentPostId: 123,
+						coauthorTermIds: [ 471, 488, 483 ],
+					} )
+				)
+			);
+
+			const { result } = renderHook( () => useCoAuthors( 123 ) );
+
+			await waitFor( () => {
+				expect( result.current.authors ).toHaveLength( 3 );
+			} );
+
+			expect( apiFetch ).toHaveBeenCalledWith( {
+				path: '/coauthors/v1/authors-by-term-ids?ids=471,488,483',
+			} );
+			expect( result.current.authors[ 0 ] ).toMatchObject( {
+				id: 1,
+				termId: 471,
+				display_name: 'Jane Doe',
+				user_nicename: 'jane-doe',
+				isGuest: false,
+			} );
+			expect( result.current.authors[ 2 ].isGuest ).toBe( true );
+			expect( result.current.isCapAvailable ).toBe( true );
+			expect( result.current.hasCoauthorTermIds ).toBe( true );
+		} );
+
+		it( 'should return empty authors when coauthors attribute is an empty array', async () => {
+			useSelect.mockImplementation( callback =>
+				callback(
+					createMockSelect( {
+						capStore: null,
+						currentPostId: 123,
+						coauthorTermIds: [],
+					} )
+				)
+			);
+
+			const { result } = renderHook( () => useCoAuthors( 123 ) );
+
+			await act( () => Promise.resolve() );
+
+			expect( result.current.authors ).toEqual( [] );
+			expect( result.current.isCapAvailable ).toBe( true );
+			expect( apiFetch ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should mark isCapAvailable false when neither legacy store nor coauthors attribute are present', () => {
+			useSelect.mockImplementation( callback =>
+				callback(
+					createMockSelect( {
+						capStore: null,
+						currentPostId: 123,
+						// coauthorTermIds undefined
+					} )
+				)
+			);
+
+			const { result } = renderHook( () => useCoAuthors( 123 ) );
+
+			expect( result.current.isCapAvailable ).toBe( false );
+			expect( result.current.authors ).toEqual( [] );
+		} );
+
+		it( 'should prefer legacy CAP store when both legacy store and coauthors attribute are present', async () => {
+			// This simulates an in-flight upgrade scenario where old JS is still loaded.
+			// Legacy path should win to keep behavior consistent.
+			useSelect.mockImplementation( callback =>
+				callback(
+					createMockSelect( {
+						capStore: {
+							getAuthors: () => [ { id: 99, display: 'Legacy', value: 'legacy', userType: 'wpuser' } ],
+						},
+						currentPostId: 123,
+						coauthorTermIds: [ 471 ],
+					} )
+				)
+			);
+
+			const { result } = renderHook( () => useCoAuthors( 123 ) );
+
+			await act( () => Promise.resolve() );
+
+			expect( apiFetch ).not.toHaveBeenCalled();
+			expect( result.current.authors ).toEqual( [ { id: 99, display_name: 'Legacy', user_nicename: 'legacy', isGuest: false } ] );
+		} );
+
+		it( 'should cache results so subsequent mounts skip the REST call', async () => {
+			apiFetch.mockResolvedValue( NEW_CAP_RESPONSE );
+
+			useSelect.mockImplementation( callback =>
+				callback(
+					createMockSelect( {
+						capStore: null,
+						currentPostId: 123,
+						coauthorTermIds: [ 471, 488, 483 ],
+					} )
+				)
+			);
+
+			const { result: result1 } = renderHook( () => useCoAuthors( 123 ) );
+
+			await waitFor( () => {
+				expect( result1.current.authors ).toHaveLength( 3 );
+			} );
+
+			const callsAfterFirstMount = apiFetch.mock.calls.length;
+
+			// A later mount re-uses the cache and makes no additional calls.
+			const { result: result2 } = renderHook( () => useCoAuthors( 123 ) );
+
+			await waitFor( () => {
+				expect( result2.current.authors ).toHaveLength( 3 );
+			} );
+
+			expect( apiFetch ).toHaveBeenCalledTimes( callsAfterFirstMount );
+		} );
+
+		it( 'should silently drop term IDs that do not resolve', async () => {
+			// REST returns only 2 of 3 requested IDs (the third was deleted).
+			apiFetch.mockResolvedValueOnce( [ NEW_CAP_RESPONSE[ 0 ], NEW_CAP_RESPONSE[ 1 ] ] );
+
+			useSelect.mockImplementation( callback =>
+				callback(
+					createMockSelect( {
+						capStore: null,
+						currentPostId: 123,
+						coauthorTermIds: [ 471, 488, 99999 ],
+					} )
+				)
+			);
+
+			const { result } = renderHook( () => useCoAuthors( 123 ) );
+
+			await waitFor( () => {
+				expect( result.current.authors ).toHaveLength( 2 );
+			} );
+
+			expect( result.current.authors.map( a => a.termId ) ).toEqual( [ 471, 488 ] );
+		} );
+
+		it( 'should handle REST errors without blocking the component', async () => {
+			apiFetch.mockRejectedValueOnce( new Error( 'Server error' ) );
+
+			useSelect.mockImplementation( callback =>
+				callback(
+					createMockSelect( {
+						capStore: null,
+						currentPostId: 123,
+						coauthorTermIds: [ 471 ],
+					} )
+				)
+			);
+
+			const { result } = renderHook( () => useCoAuthors( 123 ) );
+
+			// Allow the failed promise to settle.
+			await act( () => Promise.resolve().then( () => Promise.resolve() ) );
+
+			expect( result.current.authors ).toEqual( [] );
+			expect( result.current.isCapAvailable ).toBe( true );
+			// Term IDs are assigned but resolution returned empty — surface this so consumers
+			// don't silently fall back to `post_author` and credit the wrong person.
+			expect( result.current.hasCoauthorTermIds ).toBe( true );
+		} );
+
+		it( 'should allow retry after a transient REST error (no negative caching on catch)', async () => {
+			const RETRY_RESPONSE = [
+				{ id: '1', termId: 471, displayName: 'Jane', userNicename: 'jane', userType: 'wpuser', login: 'jane', email: '' },
+			];
+
+			useSelect.mockImplementation( callback =>
+				callback(
+					createMockSelect( {
+						capStore: null,
+						currentPostId: 123,
+						coauthorTermIds: [ 471 ],
+					} )
+				)
+			);
+
+			// First attempt fails with a transient error; cache should NOT be poisoned.
+			apiFetch.mockRejectedValueOnce( new Error( 'Transient 500' ) );
+
+			const { result: result1, unmount: unmount1 } = renderHook( () => useCoAuthors( 123 ) );
+
+			await act( () => Promise.resolve().then( () => Promise.resolve() ) );
+
+			expect( result1.current.authors ).toEqual( [] );
+			expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+
+			unmount1();
+
+			// Second attempt succeeds — we should actually re-fetch (not a cached failure).
+			apiFetch.mockResolvedValueOnce( RETRY_RESPONSE );
+
+			const { result: result2 } = renderHook( () => useCoAuthors( 123 ) );
+
+			await waitFor( () => {
+				expect( result2.current.authors ).toHaveLength( 1 );
+			} );
+
+			expect( apiFetch ).toHaveBeenCalledTimes( 2 );
+			expect( result2.current.authors[ 0 ].display_name ).toBe( 'Jane' );
+		} );
+	} );
+
 	describe( 'Query Loop context (uses REST API)', () => {
 		it( 'should use REST API when postId differs from currently-edited post', () => {
 			const restAuthors = [

package/shared/scss/_mixins.scss

@@ -15,14 +15,21 @@
 // Used by: author-profile-social, author-social-link blocks
 // Hex fallbacks from newspack-block-theme theme.json defaults.
 @mixin socialButton {
-	background: var(--wp--preset--color--base-2, #f0f0f0);
 	border-radius: 50%; // Circular
-	color: var(--wp--preset--color--contrast, #1e1e1e);
 	display: grid;
 	place-items: center;
 	text-decoration: none;
-	transition: background 125ms ease-in-out, color 125ms ease-in-out;
 
+	// Use :not(.wp-element-button) to beat wp-elements parent link colour rules,
+	// which use :where() and therefore have lower specificity.
+	&:not(.wp-element-button) {
+		background: var(--icon-background, var(--wp--preset--color--base-2, #f0f0f0));
+		color: var(--icon-color, var(--wp--preset--color--contrast, #1e1e1e));
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition: transform 100ms ease;
+	}
 	// Sizing - makes circular by using equal width/height
 	// --icon-size controls the circle diameter (e.g., 36px)
 	// Icon inside is 2/3 of circle size (e.g., 24px icon in 36px circle)
@@ -32,9 +39,10 @@
 	padding: 0;
 
 	&:hover {
-		background: var(--wp--preset--color--base-3, #ddd);
-		color: var(--wp--preset--color--contrast, #1e1e1e);
+		background: var(--icon-background, var(--wp--preset--color--base-2, #f0f0f0));
+		color: var(--icon-color, var(--wp--preset--color--contrast, #1e1e1e));
 		text-decoration: none;
+		transform: scale(1.1);
 	}
 
 	&:focus {

package/src/accordion/index.js

@@ -1,6 +1,3 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-
 /**
  * WordPress dependencies
  */
@@ -17,11 +14,15 @@ import classNames from 'classnames';
  */
 import './style.scss';
 
-const Accordion = ( { children, title } ) => {
-	const [ isOpen, setIsOpen ] = useState( false );
+const Accordion = ( { children, title, defaultOpen = false } ) => {
+	const [ isOpen, setIsOpen ] = useState( defaultOpen );
 	return (
-		<details className={ classNames( 'newspack-accordion', { 'newspack-accordion--is-open': isOpen } ) }>
-			<summary onClick={ () => setIsOpen( ! isOpen ) }>
+		<details
+			className={ classNames( 'newspack-accordion', { 'newspack-accordion--is-open': isOpen } ) }
+			open={ isOpen }
+			onToggle={ e => setIsOpen( e.currentTarget.open ) }
+		>
+			<summary>
 				{ title }
 				<Icon className="newspack-accordion__icon" icon={ chevronRight } size={ 24 } />
 			</summary>

package/src/action-card/index.js

@@ -39,6 +39,9 @@ const ActionCard = ( {
 	heading = 2,
 	description,
 	handoff,
+	handoffUrl,
+	bannerText,
+	bannerButtonText,
 	editLink,
 	href,
 	notification,
@@ -187,7 +190,18 @@ const ActionCard = ( {
 						{ actionContent && actionContent }
 						{ actionText &&
 							( handoff ? (
-								<Handoff plugin={ handoff } editLink={ editLink } compact isLink>
+								<Handoff
+									plugin={ handoff }
+									editLink={ editLink }
+									bannerText={ bannerText }
+									bannerButtonText={ bannerButtonText }
+									compact
+									isLink
+								>
+									{ actionText }
+								</Handoff>
+							) : handoffUrl ? (
+								<Handoff url={ handoffUrl } bannerText={ bannerText } bannerButtonText={ bannerButtonText } compact isLink>
 									{ actionText }
 								</Handoff>
 							) : onClick || hasInternalLink ? (

package/src/badge/index.tsx

@@ -8,9 +8,11 @@ import './style.scss';
  */
 import classnames from 'classnames';
 
+export type BadgeLevel = 'default' | 'info' | 'success' | 'warning' | 'error';
+
 type BadgeProps = {
 	text: string;
-	level?: 'default' | 'info' | 'success' | 'warning' | 'error';
+	level?: BadgeLevel;
 };
 
 /**