Post author selector with FormTokenField component.

packages/block-library/src/post-author/edit.js

@@ -23,7 +23,7 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 
 	const { authorId, authorDetails, authors } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, getUser, getAuthors } = select(
+			const { getEditedEntityRecord, getUser, getUsers } = select(
 				'core'
 			);
 			const _authorId = getEditedEntityRecord(
@@ -35,7 +35,7 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 			return {
 				authorId: _authorId,
 				authorDetails: _authorId ? getUser( _authorId ) : null,
-				authors: getAuthors(),
+				authors: getUsers( { who: 'authors' } ),
 			};
 		},
 		[ postType, postId ]

packages/components/src/combobox-control/index.js

@@ -3,21 +3,28 @@
  */
 import { useCombobox } from 'downshift';
 import classnames from 'classnames';
+import { isEqual } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { check, chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Button, Dashicon } from '../';
+import { Button, Icon, Spinner } from '../';
 
 const itemToString = ( item ) => item && item.name;
 export default function ComboboxControl( {
 	className,
 	hideLabelFromVision,
 	label,
+	isLoading,
 	options: items,
 	onInputValueChange: onInputValueChange,
 	onChange: onSelectedItemChange,
-	value: _selectedItem,
+	initialSelectedItem,
 } ) {
 	const {
 		getLabelProps,
@@ -30,15 +37,16 @@ export default function ComboboxControl( {
 		highlightedIndex,
 		selectedItem,
 	} = useCombobox( {
-		initialSelectedItem: items[ 0 ],
+		initialSelectedItem,
 		items,
 		itemToString,
 		onInputValueChange,
 		onSelectedItemChange,
-		selectedItem: _selectedItem,
 	} );
 	const menuProps = getMenuProps( {
-		className: 'components-combobox-control__menu',
+		className: classnames( 'components-combobox-control__menu', {
+			'is-loading': isLoading,
+		} ),
 	} );
 	// We need this here, because the null active descendant is not
 	// fully ARIA compliant.
@@ -68,6 +76,7 @@ export default function ComboboxControl( {
 			>
 				{ label }
 			</label>
+			{ isLoading && <Spinner /> }
 			<div
 				{ ...getComboboxProps( {
 					className: 'components-combobox-control__button',
@@ -86,9 +95,9 @@ export default function ComboboxControl( {
 						className: 'components-combobox-control__button-button',
 					} ) }
 				>
-					<Dashicon
-						icon="arrow-down-alt2"
+					<Icon
 						className="components-combobox-control__button-icon"
+						icon={ chevronDown }
 					/>
 				</Button>
 			</div>
@@ -111,10 +120,10 @@ export default function ComboboxControl( {
 								style: item.style,
 							} ) }
 						>
-							{ item === selectedItem && (
-								<Dashicon
-									icon="saved"
+							{ isEqual( item, selectedItem ) && (
+								<Icon
 									className="components-combobox-control__item-icon"
+									icon={ check }
 								/>
 							) }
 							{ item.name }

packages/components/src/combobox-control/style.scss

@@ -1,46 +1,48 @@
 .components-combobox-control {
 	position: relative;
+	margin-bottom: $grid-unit-15;
 }
 
 .components-combobox-control__label {
 	display: block;
-	margin-bottom: 5px;
+	margin-bottom: $grid-unit-05;
 }
 
 .components-combobox-control__button {
 	border: 1px solid $gray-600;
 	border-radius: 4px;
 	display: inline-block;
-	min-height: 30px;
-	min-width: 130px;
+	min-height: $button-size-small;
+	min-width: 140px;
 	position: relative;
 	text-align: left;
 
-	&:focus {
-		border-color: var(--wp-admin-theme-color);
-	}
-
-	&-input {
-		border: none;
-		height: calc(100% - 2px);
-		left: 1px;
-		padding: 0 4px;
+	.components-combobox-control__button-input {
+		height: 100%;
+		width: 100%;
+		left: 0;
+		top: 0;
 		position: absolute;
-		top: 1px;
-		width: calc(100% - 2px);
-	}
+		margin: 0;
 
-	&-button:hover {
-		box-shadow: none !important;
+		@include input-control;
 	}
 
-	&-icon {
+	.components-combobox-control__button-icon {
 		height: 100%;
-		padding: 0 4px;
+		padding: 0;
 		position: absolute;
 		right: 0;
 		top: 0;
 	}
+
+	.components-combobox-control__button-button {
+		height: $button-size-small + $border-width + $border-width;
+
+		&:focus:not(:disabled) {
+			box-shadow: none;
+		}
+	}
 }
 
 .components-combobox-control__menu {
@@ -49,20 +51,26 @@
 	padding: 0;
 	position: absolute;
 	z-index: z-index(".components-popover");
+
+	&:not(:empty) {
+		margin: $grid-unit-15 0 0 0;
+		border-radius: $radius-block-ui;
+		border: $border-width solid $gray-900;
+	}
 }
 
 .components-combobox-control__item {
 	align-items: center;
 	display: flex;
 	list-style-type: none;
-	padding: 10px 5px 10px 25px;
+	padding: $grid-unit-10 $grid-unit-15 $grid-unit-10 ($button-size-small + $grid-unit-15);
 
 	&.is-highlighted {
 		background: $gray-200;
 	}
 
-	&-icon {
-		margin-left: -20px;
-		margin-right: 0;
+	.components-combobox-control__item-icon {
+		margin-left: -$button-size-small - $grid-unit-05;
+		margin-right: $grid-unit-05;
 	}
 }

packages/components/src/form-token-field/index.js

@@ -393,6 +393,9 @@ class FormTokenField extends Component {
 				[ this.getIndexOfInput(), 0 ].concat( tokensToAdd )
 			);
 			this.props.onChange( newValue );
+			if ( this.props.blurAfterSelection ) {
+				this.onBlur();
+			}
 		}
 	}
 
@@ -620,6 +623,17 @@ class FormTokenField extends Component {
 			} );
 		}
 
+		let helpMessage;
+		if ( this.props.helpMessage !== false ) {
+			helpMessage = this.props.helpMessage;
+		} else {
+			helpMessage = this.props.tokenizeOnSpace
+				? __(
+						'Separate with commas, spaces, or the Enter key.'
+				)
+				: __( 'Separate with commas or the Enter key.' )
+		}
+
 		// Disable reason: There is no appropriate role which describes the
 		// input container intended accessible usability.
 		// TODO: Refactor click detection to use blur to stop propagation.
@@ -661,11 +675,7 @@ class FormTokenField extends Component {
 					id={ `components-form-token-suggestions-howto-${ instanceId }` }
 					className="components-form-token-field__help"
 				>
-					{ this.props.tokenizeOnSpace
-						? __(
-								'Separate with commas, spaces, or the Enter key.'
-						  )
-						: __( 'Separate with commas or the Enter key.' ) }
+					{ helpMessage }
 				</p>
 			</div>
 		);
@@ -683,6 +693,8 @@ FormTokenField.defaultProps = {
 	onInputChange: () => {},
 	isBorderless: false,
 	disabled: false,
+	blurAfterSelection: false,
+	helpMessage: false,
 	tokenizeOnSpace: false,
 	messages: {
 		added: __( 'Item added.' ),

packages/components/src/form-token-field/style.scss

@@ -51,6 +51,19 @@
 	font-style: italic;
 }
 
+.components-form-token-field {
+	width: 100%;
+}
+
+.is-active.components-form-author_selector .components-form-token-field__token,
+.components-form-author_selector .components-form-token-field__remove-token.components-button {
+	display: none;
+}
+
+.components-form-author_selector .components-form-token-field__token-text {
+	background: transparent;
+}
+
 // Tokens
 .components-form-token-field__token {
 	font-size: $default-font-size;

packages/components/src/index.js

@@ -30,6 +30,7 @@ export { default as ClipboardButton } from './clipboard-button';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
 export { default as ColorPicker } from './color-picker';
+export { default as ComboboxControl } from './combobox-control';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
 export { DateTimePicker, DatePicker, TimePicker } from './date-time';

packages/core-data/src/selectors.js

@@ -44,6 +44,9 @@ export const isRequestingEmbedPreview = createRegistrySelector(
  * @return {Array} Authors list.
  */
 export function getAuthors( state ) {
+	deprecated( "select( 'core' ).getAuthors()", {
+		alternative: "select( 'core' ).getUsers({ who: 'authors' })",
+	} );
 	return getUserQueryResults( state, 'authors' );
 }
 

packages/editor/src/components/post-author/check.js

@@ -19,7 +19,7 @@ export function PostAuthorCheck( {
 	authors,
 	children,
 } ) {
-	if ( ! hasAssignAuthorAction || authors.length < 2 ) {
+	if ( ! hasAssignAuthorAction || ! authors || authors.length < 2 ) {
 		return null;
 	}
 
@@ -40,7 +40,7 @@ export default compose( [
 				false
 			),
 			postType: select( 'core/editor' ).getCurrentPostType(),
-			authors: select( 'core' ).getAuthors(),
+			authors: select( 'core' ).getUsers( { who: 'authors' } ),
 		};
 	} ),
 	withInstanceId,