Post author dropdown: add accessible-autocomplete

docs/designers-developers/developers/data/data-core.md

@@ -232,6 +232,18 @@ _Returns_
 
 -   `?Object`: The entity record's save error.
 
+<a name="getPostAuthor" href="#getPostAuthor">#</a> **getPostAuthor**
+
+Returns post author.
+
+_Parameters_
+
+-   _state_ `Object`: Data state.
+
+_Returns_
+
+-   `Array`: Authors list.
+
 <a name="getRawEntityRecord" href="#getRawEntityRecord">#</a> **getRawEntityRecord**
 
 Returns the entity's record object by key,

lib/client-assets.php

@@ -674,6 +674,14 @@ function gutenberg_extend_block_editor_preload_paths( $preload_paths, $post ) {
 		$preload_paths[] = $blocks_path;
 	}
 
+	/**
+	 * Attach the current post author data.
+	 */
+	$author_path = '/wp/v2/users/' . $post->post_author;
+	if ( ! in_array( $author_path, $preload_paths, true ) ) {
+		$preload_paths[] = $author_path;
+	}
+
 	return $preload_paths;
 }
 add_filter( 'block_editor_preload_paths', 'gutenberg_extend_block_editor_preload_paths', 10, 2 );

packages/base-styles/_z-index.scss

@@ -47,6 +47,9 @@ $z-layers: (
 	".components-drop-zone": 40,
 	".components-drop-zone__content": 50,
 
+	// Autocomplete dropdown shows over other sidebar elements.
+	".autocomplete__menu--overlay": 100,
+
 	// The block mover for floats should overlap the controls of adjacent blocks.
 	".block-editor-block-list__block {core/image aligned left or right}": 21,
 

packages/core-data/README.md

@@ -445,6 +445,18 @@ _Returns_
 
 -   `?Object`: The entity record's save error.
 
+<a name="getPostAuthor" href="#getPostAuthor">#</a> **getPostAuthor**
+
+Returns post author.
+
+_Parameters_
+
+-   _state_ `Object`: Data state.
+
+_Returns_
+
+-   `Array`: Authors list.
+
 <a name="getRawEntityRecord" href="#getRawEntityRecord">#</a> **getRawEntityRecord**
 
 Returns the entity's record object by key,

packages/core-data/src/resolvers.js

@@ -28,10 +28,20 @@ import { apiFetch, resolveSelect } from './controls';
  * Requests authors from the REST API.
  */
 export function* getAuthors() {
-	const users = yield apiFetch( { path: '/wp/v2/users/?who=authors&per_page=-1' } );
+	const users = yield apiFetch( { path: '/wp/v2/users/?who=authors&per_page=100' } );
 	yield receiveUserQuery( 'authors', users );
 }
 
+/**
+ * Requests a post author by ID from the REST API.
+ *
+ * @param {string} id Author id.
+ */
+export function* getPostAuthor( id ) {
+	const postAuthor = yield apiFetch( { path: `/wp/v2/users/${ id }` } );
+	yield receiveUserQuery( 'postAuthor', postAuthor );
+}
+
 /**
  * Requests the current user from the REST API.
  */

packages/core-data/src/selectors.js

@@ -40,6 +40,18 @@ export function getAuthors( state ) {
 	return getUserQueryResults( state, 'authors' );
 }
 
+/**
+ * Returns post author.
+ *
+ * @param {Object} state Data state.
+ *
+ * @return {Array} Authors list.
+ */
+
+export function getPostAuthor( state ) {
+	return getUserQueryResults( state, 'postAuthor' )[ 0 ];
+}
+
 /**
  * Returns the current user.
  *

packages/editor/package.json

@@ -48,6 +48,7 @@
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/wordcount": "file:../wordcount",
+		"accessible-autocomplete": "2.0.1",
 		"classnames": "^2.2.5",
 		"equivalent-key-map": "^0.2.2",
 		"lodash": "^4.17.15",

packages/editor/src/components/autocompleters/user.js

@@ -17,9 +17,9 @@ export default {
 	options( search ) {
 		let payload = '';
 		if ( search ) {
-			payload = '?search=' + encodeURIComponent( search );
+			payload = `?search=${ encodeURIComponent( search ) }`;
 		}
-		return apiFetch( { path: '/wp/v2/users' + payload } );
+		return apiFetch( { path: `/wp/v2/users${ payload }` } );
 	},
 	isDebounced: true,
 	getOptionKeywords( user ) {

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

@@ -1,11 +1,18 @@
+/**
+ * External dependencies
+ */
+import Autocomplete from 'accessible-autocomplete/react';
+import { debounce } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { sprintf, __, _n } from '@wordpress/i18n';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -17,34 +24,192 @@ export class PostAuthor extends Component {
 		super( ...arguments );
 
 		this.setAuthorId = this.setAuthorId.bind( this );
+		this.suggestAuthor = this.suggestAuthor.bind( this );
+		this.getCurrentAuthor = this.getCurrentAuthor.bind( this );
+		this.resolveResults = this.resolveResults.bind( this );
+		this.requestResults = debounce( ( query, populateResults ) => {
+			const payload = '?search=' + encodeURIComponent( query );
+			apiFetch( { path: `/wp/v2/users${ payload }` } ).then( ( results ) => {
+				populateResults( this.resolveResults( results ) );
+				this.searchCache[ query ] = results;
+			} );
+		}, 300 );
+		this.searchCache = [];
+		this.state = {
+			postAuthor: false,
+			initialAuthors: [],
+			currentSelection: '',
+		};
+	}
+
+	// Get the initial author from props if available.
+	getInitialPostAuthor() {
+		return this.props.postAuthor;
+	}
+
+	componentDidMount() {
+		const { authors } = this.props;
+
+		// Store a set of authors for display as initial results when using an autocomplete.
+		this.setState( { initialAuthors: authors.slice( 0, 9 ) } );
+	}
+
+	/**
+	 * Construct a unique author string from an author object in the form `${ author.name } (${ author.slug })`.
+	 *
+	 * @param {Object} author An author object.
+	 *
+	 * @return {string} An author name for display.
+	 */
+	authorUniqueName( author ) {
+		if ( ! author || ! author.name || ! author.slug ) {
+			return '';
+		}
+		return `${ author.name } (${ author.slug })`;
+	}
+
+	/**
+	 * Search for authors that match the passed query, passing them to a callback function when resolved.
+	 *
+	 * @param {string} query             The search query.
+	 * @param {Function} populateResults A callback function which receives the results.
+	 */
+	suggestAuthor( query, populateResults ) {
+		// If the query is the current selection, return the first 10 users.
+		const {
+			initialAuthors,
+			currentSelection,
+		} = this.state;
+		if ( query === currentSelection ) {
+			populateResults( this.resolveResults( initialAuthors ) );
+			return;
+		}
+
+		if ( query.length < 2 ) {
+			populateResults( this.resolveResults( initialAuthors ) );
+			return;
+		}
+
+		if ( this.searchCache[ query ] ) {
+			populateResults( this.resolveResults( this.searchCache[ query ] ) );
+			return;
+		}
+
+		this.requestResults( query, populateResults );
+	}
+
+	/**
+	 * Resolve the author objects into strings for display.
+	 *
+	 * @param {Array} results The array of authors that matched the search.
+	 *
+	 * @return {Array} an array of strings ready for displaying.
+	 */
+	resolveResults( results ) {
+		this.authors = results;
+		return results.map( ( author ) => ( this.authorUniqueName( author ) ) );
+	}
+
+	/**
+	 * Retrieve the author object by id and set in state.
+	 *
+	 * @param {number} authorId The id of the author to fetch.
+	 */
+	getCurrentAuthor( authorId ) {
+		if ( ! authorId ) {
+			return;
+		}
+		// Note: This route is cached at load time.
+		apiFetch( { path: `/wp/v2/users/${ encodeURIComponent( authorId ) }` } ).then( ( results ) => {
+			this.setState( {
+				postAuthor: results,
+				currentSelection: this.authorUniqueName( results ),
+			} );
+		} );
 	}
 
-	setAuthorId( event ) {
+	/**
+	 * Set the current author based on the selection. Handles strings passed from the HTML
+	 * select element or strings passed from the auto-complete component.
+	 *
+	 * @param {number|string} selection The author id or name that was selected.
+	 */
+	setAuthorId( selection ) {
+		if ( ! selection ) {
+			return;
+		}
 		const { onUpdateAuthor } = this.props;
-		const { value } = event.target;
-		onUpdateAuthor( Number( value ) );
+		if ( typeof selection === 'string' ) {
+			// Author name from the auto-completer.
+			const author = this.authors.find( ( singleAuthor ) => {
+				return this.authorUniqueName( singleAuthor ) === selection;
+			} );
+			if ( author ) {
+				this.setState( { currentSelection: selection } );
+				onUpdateAuthor( Number( author.id ) );
+			}
+		} else {
+			// Author ID from the select.
+			onUpdateAuthor( Number( selection.target.value ) );
+		}
 	}
 
 	render() {
-		const { postAuthor, instanceId, authors } = this.props;
-		const selectId = 'post-author-selector-' + instanceId;
-
-		// Disable reason: A select with an onchange throws a warning
+		const { postAuthorId, instanceId, authors, postAuthor } = this.props;
+		const selectId = `post-author-selector-${ instanceId }`;
+		let selector;
+		if ( ! postAuthor ) {
+			return null;
+		}
 
-		/* eslint-disable jsx-a11y/no-onchange */
-		return (
-			<PostAuthorCheck>
-				<label htmlFor={ selectId }>{ __( 'Author' ) }</label>
+		// If there are a small number of users, use a regular select element; once the list grows to a certain size, switch
+		// to an accessible auto-complete component.
+		if ( authors.length < 99 ) {
+			// Disable reason: A select with an onchange throws a warning.
+			/* eslint-disable jsx-a11y/no-onchange */
+			selector =
 				<select
 					id={ selectId }
-					value={ postAuthor }
+					value={ postAuthorId }
 					onChange={ this.setAuthorId }
 					className="editor-post-author__select"
 				>
 					{ authors.map( ( author ) => (
 						<option key={ author.id } value={ author.id }>{ decodeEntities( author.name ) }</option>
 					) ) }
-				</select>
+				</select>;
+		} else {
+			selector =
+				<Autocomplete
+					id={ selectId }
+					minLength={ 2 }
+					showAllValues={ true }
+					defaultValue={ postAuthor ? this.authorUniqueName( postAuthor ) : '' }
+					displayMenu="overlay"
+					onConfirm={ this.setAuthorId }
+					source={ this.suggestAuthor }
+					showNoOptionsFound={ false }
+					preserveNullOptions={ true }
+					tStatusQueryTooShort={ ( minQueryLength ) =>
+						// translators: %d: the number characters required to initiate an author search.
+						sprintf( __( 'Type in %d or more characters for results' ), minQueryLength )
+					}
+					tStatusNoResults={ () => __( 'No search results' ) }
+					// translators: 1: the index of thre selected result. 2: The total number of results.
+					tStatusSelectedOption={ ( selectedOption, length, index ) => sprintf( __( '%1$s (%2$s of %3$s) is selected' ), selectedOption, index + 1, length ) }
+					tStatusResults={ ( length, contentSelectedOption ) => {
+						const resultString = _n( '%d result is available.', '%d results are available.', length ) + ' ' + contentSelectedOption;
+						return sprintf( resultString, length );
+					} }
+					cssNamespace="components-post-author__autocomplete"
+
+				/>;
+		}
+
+		return (
+			<PostAuthorCheck>
+				<label htmlFor={ selectId }>{ __( 'Author' ) }</label>
+				{ selector }
 			</PostAuthorCheck>
 		);
 		/* eslint-enable jsx-a11y/no-onchange */
@@ -54,8 +219,9 @@ export class PostAuthor extends Component {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			postAuthor: select( 'core/editor' ).getEditedPostAttribute( 'author' ),
+			postAuthorId: select( 'core/editor' ).getEditedPostAttribute( 'author' ),
 			authors: select( 'core' ).getAuthors(),
+			postAuthor: select( 'core' ).getPostAuthor( select( 'core/editor' ).getEditedPostAttribute( 'author' ) ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {