feat: update author profile icon and fix loading alignment (#848)

package.json

@@ -55,7 +55,7 @@
 		"@wordpress/hooks": "^2.6.0",
 		"@wordpress/html-entities": "^2.5.0",
 		"@wordpress/i18n": "^3.7.0",
-		"@wordpress/icons": "^4.0.1",
+		"@wordpress/icons": "^4.1.0",
 		"@wordpress/keycodes": "^2.9.0",
 		"@wordpress/plugins": "^2.12.0",
 		"lodash": "^4.17.20",

src/blocks/author-profile/edit.js

@@ -20,7 +20,7 @@ import {
 } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
-import { Icon, edit, people, pullLeft, pullRight } from '@wordpress/icons';
+import { Icon, edit, postAuthor, pullLeft, pullRight } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -340,7 +340,7 @@ export default ( { attributes, setAttributes } ) => {
 				) }
 				{ ! author && (
 					<Placeholder
-						icon={ <Icon icon={ people } /> }
+						icon={ <Icon icon={ postAuthor } /> }
 						label={ __( 'Author Profile', 'newspack-blocks' ) }
 					>
 						{ error && (
@@ -349,12 +349,10 @@ export default ( { attributes, setAttributes } ) => {
 							</Notice>
 						) }
 						{ isLoading && (
-							<>
-								<p style={ { margin: 0 } }>
-									{ __( 'Fetching author info...', 'newspack-blocks' ) }
-								</p>
+							<div className="is-loading">
+								{ __( 'Fetching author info...', 'newspack-blocks' ) }
 								<Spinner />
-							</>
+							</div>
 						) }
 						{ ! isLoading && (
 							<AutocompleteWithSuggestions

src/blocks/author-profile/editor.scss

@@ -7,6 +7,16 @@
 			width: 100%;
 		}
 
+		.is-loading {
+			align-items: center;
+			display: flex;
+
+			.components-spinner {
+				margin-right: 0;
+				margin-top: 0;
+			}
+		}
+
 		a.no-op {
 			pointer-events: none;
 		}

src/blocks/author-profile/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Icon, people } from '@wordpress/icons';
+import { Icon, postAuthor } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -25,7 +25,7 @@ export const title = __( 'Author Profile', 'newspack-blocks' );
 export const settings = {
 	title,
 	icon: {
-		src: <Icon icon={ people } />,
+		src: <Icon icon={ postAuthor } />,
 		foreground: '#36f',
 	},
 	keywords: [ __( 'author', 'newspack-blocks' ), __( 'profile', 'newspack-blocks' ) ],