Add plugin sidebar example (#182)

Pairs with WordPress/gutenberg#37490

index.php

@@ -25,3 +25,4 @@
 include '06-inner-blocks-esnext/index.php';
 include '07-slotfills-esnext/index.php';
 include 'format-api/index.php';
+include 'plugin-sidebar/plugin-sidebar.php';

plugin-sidebar/plugin-sidebar.css

@@ -0,0 +1,3 @@
+.plugin-sidebar-content {
+	padding: 16px;
+}

plugin-sidebar/plugin-sidebar.js

@@ -0,0 +1,47 @@
+( function ( wp ) {
+	var registerPlugin = wp.plugins.registerPlugin;
+	var PluginSidebar = wp.editPost.PluginSidebar;
+	var el = wp.element.createElement;
+	var TextControl = wp.components.TextControl;
+	var useSelect = wp.data.useSelect;
+	var useDispatch = wp.data.useDispatch;
+
+	var MetaBlockField = function ( props ) {
+		var metaFieldValue = useSelect( function ( select ) {
+			return select( 'core/editor' ).getEditedPostAttribute(
+				'meta'
+			)[ 'sidebar_plugin_meta_block_field' ];
+		}, [] );
+
+		var editPost = useDispatch( 'core/editor' ).editPost;
+
+		return el( TextControl, {
+			label: 'Meta Block Field',
+			value: metaFieldValue,
+			onChange: function ( content ) {
+				editPost( {
+					meta: { sidebar_plugin_meta_block_field: content },
+				} );
+			},
+		} );
+	};
+
+	registerPlugin( 'my-plugin-sidebar', {
+		render: function () {
+			return el(
+				PluginSidebar,
+				{
+					name: 'my-plugin-sidebar',
+					icon: 'admin-post',
+					title: 'My plugin sidebar',
+				},
+				el(
+					'div',
+					{ className: 'plugin-sidebar-content' },
+					el( MetaBlockField )
+				)
+			);
+		},
+	} );
+} )( window.wp );
+

plugin-sidebar/plugin-sidebar.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Examples Sidebar Example
+ * Plugin URI: https://github.com/WordPress/gutenberg-examples
+ * Description: This is a plugin demonstrating how to add a sidebar in the block editor.
+ * Version: 1.0.0
+ * Author: the Gutenberg Team
+ *
+ * @package gutenberg-examples
+ */
+
+// Init. Register scripts and styles.
+function sidebar_plugin_register() {
+	wp_register_script(
+		'plugin-sidebar-js',
+		plugins_url( 'plugin-sidebar.js', __FILE__ ),
+		array(
+			'wp-plugins',
+			'wp-edit-post',
+			'wp-element',
+			'wp-components'
+		)
+	);
+	wp_register_style(
+		'plugin-sidebar-css',
+		plugins_url( 'plugin-sidebar.css', __FILE__ )
+	);
+}
+add_action( 'init', 'sidebar_plugin_register' );
+
+// Enqueue scripts and style.
+function sidebar_plugin_script_enqueue() {
+	wp_enqueue_script( 'plugin-sidebar-js' );
+	wp_enqueue_style( 'plugin-sidebar-css' );
+}
+add_action( 'enqueue_block_editor_assets', 'sidebar_plugin_script_enqueue' );
+
+// Register post meta field.
+register_post_meta( 'post', 'sidebar_plugin_meta_block_field', array(
+	'show_in_rest' => true,
+	'single' => true,
+	'type' => 'string',
+) );