Gutenberg-Eingabefeld wie das für Schlagwörter erstellen

In einem meiner aktuellen Projekte sollte es möglich sein, für Beiträge eines Custom-Post-Types Verknüpfungen zu Beiträgen eines anderen CPTs herzustellen. Ich wusste nicht genau, welche Gutenberg-Komponente dafür am besten geeignet wäre, bin dann aber an dem Feld für die Schlagwörter normaler Beiträge hängen geblieben: bei Nutzereingabe erscheinen passende Schlagwörter und können einer Auswahl hinzugefügt werden.

Mit dem FormTokenField-Feld kann das Verhalten nachgebaut werden, in der verlinkten Readme sind alle Optionen für die Komponente aufgeführt. Damit war die Komponente gefunden, die ich nutzen wollte, statt Schlagwörtern werden CPT-Posts vorgeschlagen.

So sieht die Komponente bei mir im Einsatz aus (Code ist auf das Minimum verkürzt):

// […]
// `posts` contains post objects from REST API call.
// `selectedPosts` contains array of currently selected post IDs.
let postNames = [];
let postFieldValue = [];
if ( posts !== null ) {
	// Create post names array.
	postNames = posts.map( ( post ) => post.title.raw );

	// Create array of post titles that match the post IDs that are currently selected.
	postFieldValue = selectedPosts.map( ( postId ) => {
		let wantedPost = posts.find( ( post ) => {
			return post.id === postId;
		} );
		if ( wantedPost === undefined || ! wantedPost ) {
			return false;
		}
		return wantedPost.title.raw;
	} );
}

const postsSelectComponent = <FormTokenField
	label='Posts'
	value={ postFieldValue }
	suggestions={ postNames }
	maxSuggestions={ 20 }
	onChange={ ( selectedPosts ) => {
		// Build array of selected posts.
		let selectedPostsArray = [];
		selectedPosts.map(
			( postName ) => {
				const matchingPost = posts.find( ( post ) => {
					return post.title.raw === postName;
				} );
				if ( matchingPost !== undefined ) {
					selectedPostsArray.push( matchingPost.id );
				}
			}
		)

		setAttributes( { selectedPosts: selectedPostsArray } );
	} }
/>
Code-Sprache: JavaScript (javascript)

Da ich für den User bei den Vorschlägen natürlich nicht die Post-IDs anzeigen möchte, die ich letztlich als Metawert für den Beitrag speichern will, sondern die Titel der Beiträge, ist es etwas komplizierter als das Beispiel aus der Readme, da ich nach dem Auswählen eines oder mehrerer Werte ab Zeile 27 erst die Namen der gewählten Beiträge in die ID umwandeln muss, bevor ich sie speichern kann.

Am Anfang des Codes wiederum muss ich die IDs in die Titel umwandeln, um das FormTokenField mit den bereits gewählten Beiträgen befüllen zu können.

Wenn ihr bisher noch nicht für Gutenberg entwickelt habt, kann ich euch meinen Beitrag Einrichtung von Webpack für die Gutenberg-Entwicklung bei KrautPress ans Herz legen.