@wordpress/editor 11.0.1 → 12.0.2

package/src/components/post-taxonomies/flat-term-selector.js

@@ -1,31 +1,20 @@
 /**
  * External dependencies
  */
-import {
-	debounce,
-	escape as escapeString,
-	find,
-	get,
-	invoke,
-	isEmpty,
-	uniqBy,
-} from 'lodash';
+import { escape as escapeString, find, get, uniqBy } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import {
-	FormTokenField,
-	withFilters,
-	withSpokenMessages,
-} from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useEffect, useMemo, useState } from '@wordpress/element';
+import { FormTokenField, withFilters } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { compose } from '@wordpress/compose';
+import { useDebounce } from '@wordpress/compose';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -34,6 +23,14 @@ import { store as editorStore } from '../../store';
 import { unescapeString, unescapeTerm, unescapeTerms } from '../../utils/terms';
 import MostUsedTerms from './most-used-terms';
 
+/**
+ * Shared reference to an empty array for cases where it is important to avoid
+ * returning a new array reference on every invocation.
+ *
+ * @type {Array<any>}
+ */
+const EMPTY_ARRAY = [];
+
 /**
  * Module constants
  */
@@ -42,7 +39,8 @@ const DEFAULT_QUERY = {
 	per_page: MAX_TERMS_SUGGESTIONS,
 	orderby: 'count',
 	order: 'desc',
-	_fields: 'id,name,count',
+	_fields: 'id,name',
+	context: 'view',
 };
 
 const isSameTermName = ( termA, termB ) =>
@@ -56,171 +54,195 @@ const termNamesToIds = ( names, terms ) => {
 	);
 };
 
-class FlatTermSelector extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onChange = this.onChange.bind( this );
-		this.searchTerms = debounce( this.searchTerms.bind( this ), 500 );
-		this.findOrCreateTerm = this.findOrCreateTerm.bind( this );
-		this.appendTerm = this.appendTerm.bind( this );
-		this.state = {
-			loading: ! isEmpty( this.props.terms ),
-			availableTerms: [],
-			selectedTerms: [],
-		};
-	}
+// Tries to create a term or fetch it if it already exists.
+function findOrCreateTerm( termName, restBase ) {
+	const escapedTermName = escapeString( termName );
 
-	componentDidMount() {
-		if ( ! isEmpty( this.props.terms ) ) {
-			this.initRequest = this.fetchTerms( {
-				include: this.props.terms.join( ',' ),
-				per_page: -1,
-			} );
-			this.initRequest.then(
-				() => {
-					this.setState( { loading: false } );
-				},
-				( xhr ) => {
-					if ( xhr.statusText === 'abort' ) {
-						return;
-					}
-					this.setState( {
-						loading: false,
-					} );
-				}
+	return apiFetch( {
+		path: `/wp/v2/${ restBase }`,
+		method: 'POST',
+		data: { name: escapedTermName },
+	} )
+		.catch( ( error ) => {
+			const errorCode = error.code;
+			if ( errorCode === 'term_exists' ) {
+				// If the terms exist, fetch it instead of creating a new one.
+				const addRequest = apiFetch( {
+					path: addQueryArgs( `/wp/v2/${ restBase }`, {
+						...DEFAULT_QUERY,
+						search: escapedTermName,
+					} ),
+				} ).then( unescapeTerms );
+
+				return addRequest.then( ( searchResult ) => {
+					return find( searchResult, ( result ) =>
+						isSameTermName( result.name, termName )
+					);
+				} );
+			}
+
+			return Promise.reject( error );
+		} )
+		.then( unescapeTerm );
+}
+
+function FlatTermSelector( { slug } ) {
+	const [ values, setValues ] = useState( [] );
+	const [ search, setSearch ] = useState( '' );
+	const debouncedSearch = useDebounce( setSearch, 500 );
+
+	const {
+		terms,
+		termIds,
+		taxonomy,
+		hasAssignAction,
+		hasCreateAction,
+		hasResolvedTerms,
+	} = useSelect(
+		( select ) => {
+			const { getCurrentPost, getEditedPostAttribute } = select(
+				editorStore
 			);
-		}
-	}
+			const {
+				getEntityRecords,
+				getTaxonomy,
+				hasFinishedResolution,
+			} = select( coreStore );
+			const post = getCurrentPost();
+			const _taxonomy = getTaxonomy( slug );
+			const _termIds = _taxonomy
+				? getEditedPostAttribute( _taxonomy.rest_base )
+				: EMPTY_ARRAY;
 
-	componentWillUnmount() {
-		invoke( this.initRequest, [ 'abort' ] );
-		invoke( this.searchRequest, [ 'abort' ] );
-	}
+			const query = {
+				...DEFAULT_QUERY,
+				include: _termIds.join( ',' ),
+				per_page: -1,
+			};
 
-	componentDidUpdate( prevProps ) {
-		if ( prevProps.terms !== this.props.terms ) {
-			this.updateSelectedTerms( this.props.terms );
-		}
-	}
+			return {
+				hasCreateAction: _taxonomy
+					? get(
+							post,
+							[
+								'_links',
+								'wp:action-create-' + _taxonomy.rest_base,
+							],
+							false
+					  )
+					: false,
+				hasAssignAction: _taxonomy
+					? get(
+							post,
+							[
+								'_links',
+								'wp:action-assign-' + _taxonomy.rest_base,
+							],
+							false
+					  )
+					: false,
+				taxonomy: _taxonomy,
+				termIds: _termIds,
+				terms: _termIds.length
+					? getEntityRecords( 'taxonomy', slug, query )
+					: EMPTY_ARRAY,
+				hasResolvedTerms: hasFinishedResolution( 'getEntityRecords', [
+					'taxonomy',
+					slug,
+					query,
+				] ),
+			};
+		},
+		[ slug ]
+	);
 
-	fetchTerms( params = {} ) {
-		const { taxonomy } = this.props;
-		const query = { ...DEFAULT_QUERY, ...params };
-		const request = apiFetch( {
-			path: addQueryArgs( `/wp/v2/${ taxonomy.rest_base }`, query ),
-		} );
-		request.then( unescapeTerms ).then( ( terms ) => {
-			this.setState( ( state ) => ( {
-				availableTerms: state.availableTerms.concat(
-					terms.filter(
-						( term ) =>
-							! find(
-								state.availableTerms,
-								( availableTerm ) =>
-									availableTerm.id === term.id
-							)
-					)
-				),
-			} ) );
-			this.updateSelectedTerms( this.props.terms );
-		} );
+	const { searchResults } = useSelect(
+		( select ) => {
+			const { getEntityRecords } = select( coreStore );
 
-		return request;
-	}
+			return {
+				searchResults: !! search
+					? getEntityRecords( 'taxonomy', slug, {
+							...DEFAULT_QUERY,
+							search,
+					  } )
+					: EMPTY_ARRAY,
+			};
+		},
+		[ search ]
+	);
 
-	updateSelectedTerms( terms = [] ) {
-		const selectedTerms = terms.reduce( ( accumulator, termId ) => {
-			const termObject = find(
-				this.state.availableTerms,
-				( term ) => term.id === termId
+	// Update terms state only after the selectors are resolved.
+	// We're using this to avoid terms temporarily disappearing on slow networks
+	// while core data makes REST API requests.
+	useEffect( () => {
+		if ( hasResolvedTerms ) {
+			const newValues = terms.map( ( term ) =>
+				unescapeString( term.name )
 			);
-			if ( termObject ) {
-				accumulator.push( termObject.name );
-			}
 
-			return accumulator;
-		}, [] );
-		this.setState( {
-			selectedTerms,
-		} );
+			setValues( newValues );
+		}
+	}, [ terms, hasResolvedTerms ] );
+
+	const suggestions = useMemo( () => {
+		return ( searchResults ?? [] ).map( ( term ) =>
+			unescapeString( term.name )
+		);
+	}, [ searchResults ] );
+
+	const { editPost } = useDispatch( editorStore );
+
+	if ( ! hasAssignAction ) {
+		return null;
 	}
 
-	findOrCreateTerm( termName ) {
-		const { taxonomy } = this.props;
-		const termNameEscaped = escapeString( termName );
-		// Tries to create a term or fetch it if it already exists.
-		return apiFetch( {
-			path: `/wp/v2/${ taxonomy.rest_base }`,
-			method: 'POST',
-			data: { name: termNameEscaped },
-		} )
-			.catch( ( error ) => {
-				const errorCode = error.code;
-				if ( errorCode === 'term_exists' ) {
-					// If the terms exist, fetch it instead of creating a new one.
-					this.addRequest = apiFetch( {
-						path: addQueryArgs( `/wp/v2/${ taxonomy.rest_base }`, {
-							...DEFAULT_QUERY,
-							search: termNameEscaped,
-						} ),
-					} ).then( unescapeTerms );
-					return this.addRequest.then( ( searchResult ) => {
-						return find( searchResult, ( result ) =>
-							isSameTermName( result.name, termName )
-						);
-					} );
-				}
-				return Promise.reject( error );
-			} )
-			.then( unescapeTerm );
+	function onUpdateTerms( newTermIds ) {
+		editPost( { [ taxonomy.rest_base ]: newTermIds } );
 	}
 
-	onChange( termNames ) {
+	function onChange( termNames ) {
+		const availableTerms = [ ...terms, ...( searchResults ?? [] ) ];
 		const uniqueTerms = uniqBy( termNames, ( term ) => term.toLowerCase() );
-		this.setState( { selectedTerms: uniqueTerms } );
 		const newTermNames = uniqueTerms.filter(
 			( termName ) =>
-				! find( this.state.availableTerms, ( term ) =>
+				! find( availableTerms, ( term ) =>
 					isSameTermName( term.name, termName )
 				)
 		);
 
+		// Optimistically update term values.
+		// The selector will always re-fetch terms later.
+		setValues( uniqueTerms );
+
 		if ( newTermNames.length === 0 ) {
-			return this.props.onUpdateTerms(
-				termNamesToIds( uniqueTerms, this.state.availableTerms ),
-				this.props.taxonomy.rest_base
+			return onUpdateTerms(
+				termNamesToIds( uniqueTerms, availableTerms )
 			);
 		}
-		Promise.all( newTermNames.map( this.findOrCreateTerm ) ).then(
-			( newTerms ) => {
-				const newAvailableTerms = this.state.availableTerms.concat(
-					newTerms
-				);
-				this.setState( { availableTerms: newAvailableTerms } );
-				return this.props.onUpdateTerms(
-					termNamesToIds( uniqueTerms, newAvailableTerms ),
-					this.props.taxonomy.rest_base
-				);
-			}
-		);
-	}
 
-	searchTerms( search = '' ) {
-		invoke( this.searchRequest, [ 'abort' ] );
-		if ( search.length >= 3 ) {
-			this.searchRequest = this.fetchTerms( { search } );
+		if ( ! hasCreateAction ) {
+			return;
 		}
-	}
 
-	appendTerm( newTerm ) {
-		const { onUpdateTerms, taxonomy, terms = [], slug, speak } = this.props;
+		Promise.all(
+			newTermNames.map( ( termName ) =>
+				findOrCreateTerm( termName, taxonomy.rest_base )
+			)
+		).then( ( newTerms ) => {
+			const newAvailableTerms = availableTerms.concat( newTerms );
+			return onUpdateTerms(
+				termNamesToIds( uniqueTerms, newAvailableTerms )
+			);
+		} );
+	}
 
-		if ( terms.includes( newTerm.id ) ) {
+	function appendTerm( newTerm ) {
+		if ( termIds.includes( newTerm.id ) ) {
 			return;
 		}
 
-		const newTerms = [ ...terms, newTerm.id ];
-
+		const newTermIds = [ ...termIds, newTerm.id ];
 		const termAddedMessage = sprintf(
 			/* translators: %s: term name. */
 			_x( '%s added', 'term' ),
@@ -232,109 +254,53 @@ class FlatTermSelector extends Component {
 		);
 
 		speak( termAddedMessage, 'assertive' );
-
-		this.setState( {
-			availableTerms: [ ...this.state.availableTerms, newTerm ],
-		} );
-
-		onUpdateTerms( newTerms, taxonomy.rest_base );
+		onUpdateTerms( newTermIds );
 	}
 
-	render() {
-		const { slug, taxonomy, hasAssignAction } = this.props;
-
-		if ( ! hasAssignAction ) {
-			return null;
-		}
-
-		const { loading, availableTerms, selectedTerms } = this.state;
-		const termNames = availableTerms.map( ( term ) => term.name );
-		const newTermLabel = get(
-			taxonomy,
-			[ 'labels', 'add_new_item' ],
-			slug === 'post_tag' ? __( 'Add new tag' ) : __( 'Add new Term' )
-		);
-		const singularName = get(
-			taxonomy,
-			[ 'labels', 'singular_name' ],
-			slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' )
-		);
-		const termAddedLabel = sprintf(
-			/* translators: %s: term name. */
-			_x( '%s added', 'term' ),
-			singularName
-		);
-		const termRemovedLabel = sprintf(
-			/* translators: %s: term name. */
-			_x( '%s removed', 'term' ),
-			singularName
-		);
-		const removeTermLabel = sprintf(
-			/* translators: %s: term name. */
-			_x( 'Remove %s', 'term' ),
-			singularName
-		);
+	const newTermLabel = get(
+		taxonomy,
+		[ 'labels', 'add_new_item' ],
+		slug === 'post_tag' ? __( 'Add new tag' ) : __( 'Add new Term' )
+	);
+	const singularName = get(
+		taxonomy,
+		[ 'labels', 'singular_name' ],
+		slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' )
+	);
+	const termAddedLabel = sprintf(
+		/* translators: %s: term name. */
+		_x( '%s added', 'term' ),
+		singularName
+	);
+	const termRemovedLabel = sprintf(
+		/* translators: %s: term name. */
+		_x( '%s removed', 'term' ),
+		singularName
+	);
+	const removeTermLabel = sprintf(
+		/* translators: %s: term name. */
+		_x( 'Remove %s', 'term' ),
+		singularName
+	);
 
-		return (
-			<>
-				<FormTokenField
-					value={ selectedTerms }
-					suggestions={ termNames }
-					onChange={ this.onChange }
-					onInputChange={ this.searchTerms }
-					maxSuggestions={ MAX_TERMS_SUGGESTIONS }
-					disabled={ loading }
-					label={ newTermLabel }
-					messages={ {
-						added: termAddedLabel,
-						removed: termRemovedLabel,
-						remove: removeTermLabel,
-					} }
-				/>
-				<MostUsedTerms
-					taxonomy={ taxonomy }
-					onSelect={ this.appendTerm }
-				/>
-			</>
-		);
-	}
+	return (
+		<>
+			<FormTokenField
+				value={ values }
+				suggestions={ suggestions }
+				onChange={ onChange }
+				onInputChange={ debouncedSearch }
+				maxSuggestions={ MAX_TERMS_SUGGESTIONS }
+				label={ newTermLabel }
+				messages={ {
+					added: termAddedLabel,
+					removed: termRemovedLabel,
+					remove: removeTermLabel,
+				} }
+			/>
+			<MostUsedTerms taxonomy={ taxonomy } onSelect={ appendTerm } />
+		</>
+	);
 }
 
-export default compose(
-	withSelect( ( select, { slug } ) => {
-		const { getCurrentPost } = select( editorStore );
-		const { getTaxonomy } = select( coreStore );
-		const taxonomy = getTaxonomy( slug );
-		return {
-			hasCreateAction: taxonomy
-				? get(
-						getCurrentPost(),
-						[ '_links', 'wp:action-create-' + taxonomy.rest_base ],
-						false
-				  )
-				: false,
-			hasAssignAction: taxonomy
-				? get(
-						getCurrentPost(),
-						[ '_links', 'wp:action-assign-' + taxonomy.rest_base ],
-						false
-				  )
-				: false,
-			terms: taxonomy
-				? select( editorStore ).getEditedPostAttribute(
-						taxonomy.rest_base
-				  )
-				: [],
-			taxonomy,
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		return {
-			onUpdateTerms( terms, restBase ) {
-				dispatch( editorStore ).editPost( { [ restBase ]: terms } );
-			},
-		};
-	} ),
-	withSpokenMessages,
-	withFilters( 'editor.PostTaxonomyType' )
-)( FlatTermSelector );
+export default withFilters( 'editor.PostTaxonomyType' )( FlatTermSelector );

package/src/components/post-title/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import TextareaAutosize from 'react-autosize-textarea';
 import classnames from 'classnames';
 
 /**
@@ -12,10 +11,10 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { VisuallyHidden } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { pasteHandler } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __unstableUseRichText as useRichText } from '@wordpress/rich-text';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -29,7 +28,6 @@ import { store as editorStore } from '../../store';
 const REGEXP_NEWLINES = /[\r\n]+/g;
 
 export default function PostTitle() {
-	const instanceId = useInstanceId( PostTitle );
 	const ref = useRef();
 	const [ isSelected, setIsSelected ] = useState( false );
 	const { editPost } = useDispatch( editorStore );
@@ -63,7 +61,7 @@ export default function PostTitle() {
 			isFocusMode: focusMode,
 			hasFixedToolbar: _hasFixedToolbar,
 		};
-	} );
+	}, [] );
 
 	useEffect( () => {
 		if ( ! ref.current ) {
@@ -94,6 +92,8 @@ export default function PostTitle() {
 		editPost( { title: newTitle } );
 	}
 
+	const [ selection, setSelection ] = useState( {} );
+
 	function onSelect() {
 		setIsSelected( true );
 		clearSelectedBlock();
@@ -101,10 +101,11 @@ export default function PostTitle() {
 
 	function onUnselect() {
 		setIsSelected( false );
+		setSelection( {} );
 	}
 
-	function onChange( event ) {
-		onUpdate( event.target.value.replace( REGEXP_NEWLINES, ' ' ) );
+	function onChange( value ) {
+		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
 	}
 
 	function onKeyDown( event ) {
@@ -167,38 +168,54 @@ export default function PostTitle() {
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
 	const className = classnames(
-		'wp-block editor-post-title editor-post-title__block',
+		'wp-block wp-block-post-title block-editor-block-list__block editor-post-title editor-post-title__input rich-text',
 		{
 			'is-selected': isSelected,
 			'is-focus-mode': isFocusMode,
 			'has-fixed-toolbar': hasFixedToolbar,
 		}
 	);
-	const decodedPlaceholder = decodeEntities( placeholder );
+	const decodedPlaceholder =
+		decodeEntities( placeholder ) || __( 'Add title' );
+	const { ref: richTextRef } = useRichText( {
+		value: title,
+		onChange,
+		placeholder: decodedPlaceholder,
+		selectionStart: selection.start,
+		selectionEnd: selection.end,
+		onSelectionChange( newStart, newEnd ) {
+			setSelection( ( sel ) => {
+				const { start, end } = sel;
+				if ( start === newStart && end === newEnd ) {
+					return sel;
+				}
+				return {
+					start: newStart,
+					end: newEnd,
+				};
+			} );
+		},
+		__unstableDisableFormats: true,
+		preserveWhiteSpace: true,
+	} );
 
+	/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 	return (
 		<PostTypeSupportCheck supportKeys="title">
-			<div className={ className }>
-				<VisuallyHidden
-					as="label"
-					htmlFor={ `post-title-${ instanceId }` }
-				>
-					{ decodedPlaceholder || __( 'Add title' ) }
-				</VisuallyHidden>
-				<TextareaAutosize
-					ref={ ref }
-					id={ `post-title-${ instanceId }` }
-					className="editor-post-title__input"
-					value={ title }
-					onChange={ onChange }
-					placeholder={ decodedPlaceholder || __( 'Add title' ) }
-					onFocus={ onSelect }
-					onBlur={ onUnselect }
-					onKeyDown={ onKeyDown }
-					onKeyPress={ onUnselect }
-					onPaste={ onPaste }
-				/>
-			</div>
+			<h1
+				ref={ useMergeRefs( [ richTextRef, ref ] ) }
+				contentEditable
+				className={ className }
+				aria-label={ decodedPlaceholder }
+				role="textbox"
+				aria-multiline="true"
+				onFocus={ onSelect }
+				onBlur={ onUnselect }
+				onKeyDown={ onKeyDown }
+				onKeyPress={ onUnselect }
+				onPaste={ onPaste }
+			/>
 		</PostTypeSupportCheck>
 	);
+	/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 }