React Component for Gutenberg - Post Selector

block.jsx

const { _x } = wp.i18n;

import { PostSelector } from './components/postselector.jsx';

wp.blocks.registerBlockType('sht/clubgallery-teaser', {
	title: _x('Bildergalerie - Teaser', 'Block title', 'sha'),
	icon: 'format-gallery',
	category: 'sht/flugbasis',
	supports: {
		align: [
			'wide', 'full'
		],
		anchor: true,
		html: false
	},
	attributes: {
		post: {
			type: 'string',
			default: ''
		}
	},

	edit(props) {
		return <PostSelector blockProps={ props } postType="clubgallery"/>;
	},

	save() {
		return null;
	}
});

postselector.jsx

const { _x } = wp.i18n;
const { ServerSideRender, PanelBody, SelectControl } = wp.components;
const { select } = wp.data;
const { InspectorControls } = wp.editor;
const { Component } = wp.element;

const POST_SELECTION_DEFAULT = {
	label: _x('Auswählen', 'Default selector label', 'sha'),
	value: ''
};
const POST_LIST_QUERY_PARAMS = {
	per_page: -1,
	orderby: 'title',
	order: 'asc'
};

export class PostSelector extends Component {

	constructor() {
		super( ...arguments );
		this.blockProps = this.props.blockProps;
		this.setPost = this.setPost.bind( this );
	}

	getPostOptions() {
		let posts = select( 'core' ).getEntityRecords( 'postType', this.props.postType, POST_LIST_QUERY_PARAMS );
		let postOptions = [
			POST_SELECTION_DEFAULT
		];

		if(!posts){
			return;
		}

		posts.map(post => {
			postOptions.push({
				value: post.id,
				label: post.title.raw,
			});
		});

		return postOptions;
	}

	setPost( post ) {
		const { setAttributes } = this.blockProps;
		setAttributes({ post });
	}

	/**
	 * Must return a single DOM node, hence the anonymous wrapper
	 */
	render() {

		const { attributes, name } = this.blockProps; // Get attributes and block name passed in from parent Class via blockProps attribute
		const { post } = attributes; // Get post from attributes
		const postOptions = this.getPostOptions();

		return (<>
			<InspectorControls>
				<PanelBody title={_x('Block Options', 'Editor panel title', 'sha')} initialOpen={true}>
					<SelectControl
						label={ _x('Bildgalerie auswählen', 'Select field label', 'sha') }
						value={ post }
						options={ postOptions }
						onChange={ this.setPost }
					/>
				</PanelBody>
			</InspectorControls>
			<ServerSideRender block={ name } attributes={ attributes }/>
		</>);
	}
}