Programmatically add/select terms on WordPress Gutenberg editor

wp-gutenberg-select-terms.js

/**
 * Programmatically add/select term on Gutenberg editor.
 * On this function we are also ready if the classic-editor is loaded.
 * Related issue: https://github.com/WordPress/gutenberg/issues/15147
 */
$('.bike-types').on('click', '.bike-type-item', function() {
	var tag_id   = $( this ).data( 'id' );
	var tag_name = $( this ).data( 'name' );

	if ( typeof wp !== 'undefined' && typeof wp.blocks !== 'undefined' ) {
		var is_tax_panel_opened = wp.data.select( 'core/edit-post' ).isEditorPanelOpened( 'taxonomy-panel-bike-type' );
		var selected_ids        = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'bike-type' );
		var new_ids             = [ tag_id ];

		// add selected ids if any
		for ( var i = 0; i < selected_ids.length; i++ ) {
			var new_id = selected_ids[ i ];

			if ( ! new_ids.includes( new_id ) ) {
				new_ids.push( new_id ); 
			}
		}

		// update tags
		wp.data.dispatch( 'core/editor' ).editPost( { 'bike-type': new_ids } );

		// close and re-open the panel to reload the term data
		if ( is_tax_panel_opened ) {
			wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-bike-type' );
			wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-bike-type' );
		}
	} else {
		$( 'input[name="newtag[bike-type]"]' ).val( tag_name ).next().click();
	}

	return false;
});