From 6d10f97e15009e9d3471f280a273986847e9fb58 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 4 Nov 2019 12:46:37 +1300
Subject: [PATCH 1/3] Check for existing of avatar_urls array before trying to
 return the avatar img part of user autocomplete fragment

---
 .../components/autocompleters/test/user.js    | 29 +++++++++++++++++++
 .../src/components/autocompleters/user.js     |  8 +++--
 2 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 packages/editor/src/components/autocompleters/test/user.js

diff --git a/packages/editor/src/components/autocompleters/test/user.js b/packages/editor/src/components/autocompleters/test/user.js
new file mode 100644
index 0000000000000..759bc86aa012f
--- /dev/null
+++ b/packages/editor/src/components/autocompleters/test/user.js
@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import userCompleter from '../user';
+
+describe( 'user', () => {
+	describe( 'getOptionLabel', () => {
+		it( 'should return user details fragment', () => {
+			const user = {
+				name: 'Smithers Jones',
+				slug: 'userSlug',
+				avatar_urls: { 24: 'http://my.avatar' },
+			};
+			const userLabel = userCompleter.getOptionLabel( user );
+			expect( userLabel[ 0 ] ).toEqual( <img key="avatar" className="editor-autocompleters__user-avatar" alt="" src="http://my.avatar" /> );
+			expect( userLabel[ 1 ] ).toEqual( <span key="name" className="editor-autocompleters__user-name">Smithers Jones</span> );
+			expect( userLabel[ 2 ] ).toEqual( <span key="slug" className="editor-autocompleters__user-slug">userSlug</span> );
+		} );
+		it( 'should return user details fragment without img if avatar_urls array not set', () => {
+			const user = {
+				name: 'Smithers Jones',
+				slug: 'userSlug',
+			};
+			const userLabel = userCompleter.getOptionLabel( user );
+			expect( userLabel[ 0 ] ).toEqual( <span key="name" className="editor-autocompleters__user-name">Smithers Jones</span> );
+			expect( userLabel[ 1 ] ).toEqual( <span key="slug" className="editor-autocompleters__user-slug">userSlug</span> );
+		} );
+	} );
+} );
diff --git a/packages/editor/src/components/autocompleters/user.js b/packages/editor/src/components/autocompleters/user.js
index 45eecce3b8e4d..d722b3932278f 100644
--- a/packages/editor/src/components/autocompleters/user.js
+++ b/packages/editor/src/components/autocompleters/user.js
@@ -26,11 +26,15 @@ export default {
 		return [ user.slug, user.name ];
 	},
 	getOptionLabel( user ) {
-		return [
-			<img key="avatar" className="editor-autocompleters__user-avatar" alt="" src={ user.avatar_urls[ 24 ] } />,
+		const userDetails = [
 			<span key="name" className="editor-autocompleters__user-name">{ user.name }</span>,
 			<span key="slug" className="editor-autocompleters__user-slug">{ user.slug }</span>,
 		];
+		const avatar = user.avatar_urls && user.avatar_urls[ 24 ] ?
+			<img key="avatar" className="editor-autocompleters__user-avatar" alt="" src={ user.avatar_urls[ 24 ] } /> :
+			null;
+
+		return avatar ? [ avatar, ...userDetails ] : userDetails;
 	},
 	getOptionCompletion( user ) {
 		return `@${ user.slug }`;

From 8c716a3850f8f7eac267c27b40cce2ee27e50aa6 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 11 Nov 2019 13:58:33 +1300
Subject: [PATCH 2/3] Show avatar dash icon if show avatars is off

---
 .../editor/src/components/autocompleters/style.scss  |  8 ++++++++
 .../editor/src/components/autocompleters/user.js     | 12 ++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/components/autocompleters/style.scss b/packages/editor/src/components/autocompleters/style.scss
index 48a6e1fb299ec..c48cc9f05d14a 100644
--- a/packages/editor/src/components/autocompleters/style.scss
+++ b/packages/editor/src/components/autocompleters/style.scss
@@ -5,6 +5,14 @@
 }
 
 .editor-autocompleters__user {
+	.editor-autocompleters__no-avatar::before {
+		/* stylelint-disable */
+		font: normal 20px/1 dashicons;
+		/* stylelint-enable */
+		content: "\f110";
+		margin-right: 5px;
+		vertical-align: middle;
+	}
 	.editor-autocompleters__user-avatar {
 		margin-right: 8px;
 		flex-grow: 0;
diff --git a/packages/editor/src/components/autocompleters/user.js b/packages/editor/src/components/autocompleters/user.js
index d722b3932278f..be8107c39e645 100644
--- a/packages/editor/src/components/autocompleters/user.js
+++ b/packages/editor/src/components/autocompleters/user.js
@@ -26,15 +26,15 @@ export default {
 		return [ user.slug, user.name ];
 	},
 	getOptionLabel( user ) {
-		const userDetails = [
-			<span key="name" className="editor-autocompleters__user-name">{ user.name }</span>,
-			<span key="slug" className="editor-autocompleters__user-slug">{ user.slug }</span>,
-		];
 		const avatar = user.avatar_urls && user.avatar_urls[ 24 ] ?
 			<img key="avatar" className="editor-autocompleters__user-avatar" alt="" src={ user.avatar_urls[ 24 ] } /> :
-			null;
+			<span className="editor-autocompleters__no-avatar"></span>;
 
-		return avatar ? [ avatar, ...userDetails ] : userDetails;
+		return [
+			avatar,
+			<span key="name" className="editor-autocompleters__user-name">{ user.name }</span>,
+			<span key="slug" className="editor-autocompleters__user-slug">{ user.slug }</span>,
+		];
 	},
 	getOptionCompletion( user ) {
 		return `@${ user.slug }`;

From 3cf3bd24c643bceba8440a1bce8dbcb841fbec0d Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 11 Nov 2019 14:03:20 +1300
Subject: [PATCH 3/3] Fix unit test

---
 packages/editor/src/components/autocompleters/test/user.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/autocompleters/test/user.js b/packages/editor/src/components/autocompleters/test/user.js
index 759bc86aa012f..c6e8bbce4b5dc 100644
--- a/packages/editor/src/components/autocompleters/test/user.js
+++ b/packages/editor/src/components/autocompleters/test/user.js
@@ -16,14 +16,15 @@ describe( 'user', () => {
 			expect( userLabel[ 1 ] ).toEqual( <span key="name" className="editor-autocompleters__user-name">Smithers Jones</span> );
 			expect( userLabel[ 2 ] ).toEqual( <span key="slug" className="editor-autocompleters__user-slug">userSlug</span> );
 		} );
-		it( 'should return user details fragment without img if avatar_urls array not set', () => {
+		it( 'should return user details fragment without default avatar dashicon if avatar_urls array not set', () => {
 			const user = {
 				name: 'Smithers Jones',
 				slug: 'userSlug',
 			};
 			const userLabel = userCompleter.getOptionLabel( user );
-			expect( userLabel[ 0 ] ).toEqual( <span key="name" className="editor-autocompleters__user-name">Smithers Jones</span> );
-			expect( userLabel[ 1 ] ).toEqual( <span key="slug" className="editor-autocompleters__user-slug">userSlug</span> );
+			expect( userLabel[ 0 ] ).toEqual( <span className="editor-autocompleters__no-avatar"></span> );
+			expect( userLabel[ 1 ] ).toEqual( <span key="name" className="editor-autocompleters__user-name">Smithers Jones</span> );
+			expect( userLabel[ 2 ] ).toEqual( <span key="slug" className="editor-autocompleters__user-slug">userSlug</span> );
 		} );
 	} );
 } );