dw-guten/sidebar.js

/**
 * "Post Meta" block-editor sidebar — no build step, uses the global wp.* runtime.
 * Binds three post-meta fields edited via core/editor: media (og:video),
 * featured_image_url (og:image), and meta_desc (meta description).
 */
( function ( wp ) {
	var el       = wp.element.createElement;
	var Fragment = wp.element.Fragment;
	var __       = wp.i18n.__;
	var PluginSidebar             = wp.editor.PluginSidebar;
	var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
	var PanelBody       = wp.components.PanelBody;
	var TextControl     = wp.components.TextControl;
	var TextareaControl = wp.components.TextareaControl;
	var useSelect   = wp.data.useSelect;
	var useDispatch = wp.data.useDispatch;

	function MetaField( props ) {
		var meta = useSelect( function ( select ) {
			return select( 'core/editor' ).getEditedPostAttribute( 'meta' );
		}, [] );
		var editPost = useDispatch( 'core/editor' ).editPost;
		var Control  = props.multiline ? TextareaControl : TextControl;

		return el(
			PanelBody,
			{ title: props.title, initialOpen: true },
			el( Control, {
				label: props.label,
				help: props.help,
				value: ( meta && meta[ props.metaKey ] ) || '',
				onChange: function ( value ) {
					var next = {};
					next[ props.metaKey ] = value;
					editPost( { meta: next } );
				},
				__nextHasNoMarginBottom: true,
			} )
		);
	}

	wp.plugins.registerPlugin( 'dw-sidebar', {
		icon: 'welcome-widgets-menus',
		render: function () {
			return el(
				Fragment,
				{},
				el(
					PluginSidebarMoreMenuItem,
					{ target: 'dw-sidebar' },
					__( 'Meta Options', 'dw-guten' )
				),
				el(
					PluginSidebar,
					{ name: 'dw-sidebar', title: __( 'Post Meta', 'dw-guten' ) },
					el( MetaField, {
						metaKey: 'media',
						title: __( 'Media URL (og:video)', 'dw-guten' ),
						label: __( 'og:video', 'dw-guten' ),
						help: 'postmeta:media — absolute URL to an mp4 for OpenGraph og:video',
					} ),
					el( MetaField, {
						metaKey: 'featured_image_url',
						title: __( 'Image URL (og:image)', 'dw-guten' ),
						label: __( 'og:image', 'dw-guten' ),
						help: 'postmeta:featured_image_url — absolute URL to an image',
					} ),
					el( MetaField, {
						metaKey: 'meta_desc',
						title: __( 'Meta Excerpt', 'dw-guten' ),
						label: __( 'meta description', 'dw-guten' ),
						help: 'postmeta:meta_desc — alternative to the post excerpt',
						multiline: true,
					} )
				)
			);
		},
	} );
} )( window.wp );