@wordpress/editor 12.0.1 → 12.0.5

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

@@ -199,7 +199,7 @@ export default function PostTitle() {
 		preserveWhiteSpace: true,
 	} );
 
-	/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-interactions */
+	/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 	return (
 		<PostTypeSupportCheck supportKeys="title">
 			<h1
@@ -207,6 +207,8 @@ export default function PostTitle() {
 				contentEditable
 				className={ className }
 				aria-label={ decodedPlaceholder }
+				role="textbox"
+				aria-multiline="true"
 				onFocus={ onSelect }
 				onBlur={ onUnselect }
 				onKeyDown={ onKeyDown }
@@ -215,5 +217,5 @@ export default function PostTitle() {
 			/>
 		</PostTypeSupportCheck>
 	);
-	/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-interactions */
+	/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 }

package/src/components/provider/use-block-editor-settings.js

@@ -94,8 +94,6 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				'__experimentalBlockPatternCategories',
 				'__experimentalBlockPatterns',
 				'__experimentalFeatures',
-				'__experimentalGlobalStylesBaseConfig',
-				'__experimentalGlobalStylesUserEntityId',
 				'__experimentalPreferredStyleVariations',
 				'__experimentalSetIsInserterOpened',
 				'__unstableGalleryWithImageBlocks',