Post Author Block: Add default avatar fallback for editor display outside postId context (#71775)

theaminuli · theaminuli · t-hamano · web-flow · commit 238c7e29cad9 · 2025-09-20T18:00:18.000+09:00
* Post Author Block: Add useDefaultAvatar fallback to display avatar placeholder outside postId context

* Post Author Block: Update alt text for default avatar to improve accessibility

Co-authored-by: theaminuli &lt;theaminuldev@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
diff --git a/packages/block-library/src/avatar/hooks.js b/packages/block-library/src/avatar/hooks.js
@@ -1,11 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore, useEntityProp } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { useDefaultAvatar } from '../utils/hooks';
+
 function getAvatarSizes( sizes ) {
 	const minSize = sizes ? sizes[ 0 ] : 24;
 	const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96;
@@ -16,15 +20,6 @@ function getAvatarSizes( sizes ) {
 	};
 }
 
-function useDefaultAvatar() {
-	const { avatarURL: defaultAvatarUrl } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const { __experimentalDiscussionSettings } = getSettings();
-		return __experimentalDiscussionSettings;
-	} );
-	return defaultAvatarUrl;
-}
-
 export function useCommentAvatar( { commentId } ) {
 	const [ avatars ] = useEntityProp(
 		'root',
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
@@ -21,16 +21,19 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo, useState } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
-import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import {
+	useDefaultAvatar,
+	useToolsPanelDropdownMenuProps,
+} from '../utils/hooks';
 
 const AUTHORS_QUERY = {
 	who: 'authors',
@@ -115,6 +118,7 @@ function PostAuthorEdit( {
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const defaultAvatar = useDefaultAvatar();
 
 	const { authorDetails, canAssignAuthor, supportsAuthor } = useSelect(
 		( select ) => {
@@ -323,12 +327,17 @@ function PostAuthorEdit( {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				{ showAvatar && authorDetails?.avatar_urls && (
+				{ showAvatar && (
 					<div className="wp-block-post-author__avatar">
 						<img
 							width={ avatarSize }
-							src={ authorDetails.avatar_urls[ avatarSize ] }
-							alt={ authorDetails.name }
+							src={
+								authorDetails?.avatar_urls?.[ avatarSize ] ||
+								defaultAvatar
+							}
+							alt={
+								authorDetails?.name || __( 'Default Avatar' )
+							}
 						/>
 					</div>
 				) }
diff --git a/packages/block-library/src/utils/hooks.js b/packages/block-library/src/utils/hooks.js
@@ -93,6 +93,15 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 	}, [ getSettings ] );
 }
 
+export function useDefaultAvatar() {
+	const { avatarURL: defaultAvatarUrl } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
+	return defaultAvatarUrl;
+}
+
 export function useToolsPanelDropdownMenuProps() {
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return ! isMobile
