dwp-guten/src/index.js

import { registerPlugin } from "@wordpress/plugins";
import { PluginSidebar, PluginSidebarMoreMenuItem } from "@wordpress/edit-post";
import { __ } from "@wordpress/i18n";
import { PanelBody, TextControl, TextareaControl } from "@wordpress/components";
import { withSelect, withDispatch } from "@wordpress/data";

let PluginMetaFields_media_url = (props) => {
	return (
	<>
		<PanelBody
			title={__("Media URL", "textdomain")}
			icon="format-video"
			intialOpen={ true }
		>
		<TextControl
			value={props.text_metafield}
			label={__("video for meta", "textdomain")}
			help="( postmeta: dwp23_media_meta_url )"
			onChange={(value) => props.onMetaFieldChange_media_url(value)}
		/>
		</PanelBody>
	</>
	)
}

let PluginMetaFields_poster_image_url = (props) => {
	return (
	<>
		<PanelBody
			title={__("Poster Image URL", "textdomain")}
			icon="format-image"
			intialOpen={ true }
		>
		<TextControl
			value={props.text_metafield_poster_image_url}
			label={__("image for video poster", "textdomain")}
			help="( postmeta: dwp23_image_meta_url )"
			onChange={(value) => props.onMetaFieldChange_poster_image_url(value)}
		/>
		</PanelBody>
	</>
	)
}


PluginMetaFields_media_url = withSelect(
	(select) => { return {
		text_metafield: select('core/editor').getEditedPostAttribute('meta')['dwp23_media_url_meta']}
})(PluginMetaFields_media_url);

PluginMetaFields_media_url = withDispatch(
	(dispatch) => { return {
		onMetaFieldChange_media_url: (value) => {
			dispatch('core/editor').editPost({meta: {dwp23_media_url_meta: value}})
		}
	}
})(PluginMetaFields_media_url);

PluginMetaFields_poster_image_url = withSelect(
	(select) => { return {
		text_metafield_featured_image_url: select('core/editor').getEditedPostAttribute('meta')['dwp23_poster_url_meta']
	}
})(PluginMetaFields_poster_image_url);

PluginMetaFields_poster_image_url = withDispatch(
	(dispatch) => { return {
		onMetaFieldChange_poster_image_url: (value) => {
			dispatch('core/editor').editPost({meta: {dwp23_poster_url_meta: value}})
		}
	}
})(PluginMetaFields_poster_image_url);


registerPlugin( 'dwp-guten-sidebar', {
	icon: 'welcome-widgets-menus',
	render: () => { return (
		<>
		<PluginSidebarMoreMenuItem
		target="dwp-guten-sidebar"
		>
		{__('Meta Options', 'textdomain')}
		</PluginSidebarMoreMenuItem>
		<PluginSidebar
		name="dwp-guten-sidebar"
		title={__('Post Meta', 'textdomain')}
		>
		<PluginMetaFields_media_url />
		<PluginMetaFields_poster_image_url />
		</PluginSidebar>
		</>
	)}
})