poc: sidebar custom fields

newspack-electionkit.php

@@ -445,6 +445,7 @@ function np_candidate_cpt_setup() {
 		'public'              => false,
 		'show_ui'             => true,
 		'show_in_menu'        => false,
+		'show_in_rest'        => true,
 		'menu_position'       => 25,
 		'show_in_admin_bar'   => true,
 		'show_in_nav_menus'   => false,
@@ -525,9 +526,48 @@ function np_candidate_cpt_setup() {
 	);
 	register_taxonomy( 'ek_race', array( 'ek_person' ), $race_args );
 
+	register_meta(
+		'post',
+		'political_party',
+		[
+			'object_subtype' => 'ek_person',
+			'show_in_rest'   => true,
+			'type'           => 'string',
+			'single'         => true,
+			'auth_callback'  => '__return_true',
+		]
+	);
+
+	register_meta(
+		'post',
+		'telephone_number',
+		[
+			'object_subtype' => 'ek_person',
+			'show_in_rest'   => true,
+			'type'           => 'string',
+			'single'         => true,
+			'auth_callback'  => '__return_true',
+		]
+	);
+
 }
 add_action( 'init', 'np_candidate_cpt_setup', 0 );
 
+/**
+ * Enqueue editor script.
+ */
+function npek_enqueue_block_editor_assets() {
+	wp_enqueue_script(
+		'newspack-electionkit',
+		plugins_url( 'dist/editor.js', __FILE__ ),
+		[ 'wp-components' ],
+		filemtime( dirname( __FILE__ ) . '/dist/editor.js' ),
+		true
+	);
+}
+
+add_action( 'enqueue_block_editor_assets', 'npek_enqueue_block_editor_assets' );
+
 /**
  * Enqueue scripts.
  */

src/editor/index.js

@@ -0,0 +1,89 @@
+/**
+ * Popup Custom Post Type
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { Component, Fragment } from '@wordpress/element';
+import { SelectControl, TextControl } from '@wordpress/components';
+import { registerPlugin } from '@wordpress/plugins';
+import { PluginDocumentSettingPanel, PluginPostStatusInfo } from '@wordpress/edit-post';
+import { ColorPaletteControl } from '@wordpress/block-editor';
+
+const segmentsList =
+  ( window && window.newspack_popups_data && window.newspack_popups_data.segments ) || [];
+
+class ElectionKitSidebar extends Component {
+  componentDidMount() {}
+  componentDidUpdate( prevProps ) {}
+  /**
+   * Render
+   */
+  render() {
+    const { political_party, telephone_number, onMetaFieldChange } = this.props;
+    return (
+      <Fragment>
+        <SelectControl
+          label={ __( 'Political Party', 'newspack-electionkit' ) }
+          value={ political_party }
+          onChange={ value => onMetaFieldChange( 'political_party', value ) }
+          options={ [
+            {
+              value: 'democrat',
+              label: __( 'Democrat', 'newspack-electionkit' ),
+            },
+            {
+              value: 'republican',
+              label: __( 'Republican', 'newspack-electionkit' ),
+            },
+            {
+              value: 'independent',
+              label: __( 'Independent', 'newspack-electionkit' ),
+            },
+          ] }
+        />
+        <TextControl
+          label={ __( 'Telephone Number', 'newspack-electionkit' ) }
+          value={ telephone_number }
+          onChange={ value => onMetaFieldChange( 'telephone_number', value ) }
+          placeholder="(111) 111-1111"
+        />
+      </Fragment>
+    );
+  }
+}
+
+const ElectionKitSidebarWithData = compose( [
+  withSelect( select => {
+    const { getEditedPostAttribute } = select( 'core/editor' );
+    const meta = getEditedPostAttribute( 'meta' );
+    const { political_party, telephone_number } = meta || {};
+    return {
+      political_party,
+      telephone_number,
+    };
+  } ),
+  withDispatch( dispatch => {
+    return {
+      onMetaFieldChange: ( key, value ) => {
+        dispatch( 'core/editor' ).editPost( { meta: { [ key ]: value } } );
+      },
+    };
+  } ),
+] )( ElectionKitSidebar );
+
+registerPlugin( 'newspack-electionkit', {
+  render: () => (
+    <PluginDocumentSettingPanel
+      name="electionkit-settings-panel"
+      title={ __( 'Profile Settings', 'newspack-electionkit' ) }
+    >
+      <ElectionKitSidebarWithData />
+    </PluginDocumentSettingPanel>
+  ),
+  icon: null,
+} );

webpack.config.js

@@ -13,13 +13,14 @@ const path = require( 'path' );
  * Internal variables
  */
 const electionkit = path.join( __dirname, 'src', 'electionkit' );
+const editor = path.join( __dirname, 'src', 'editor' );
 
 const webpackConfig = getBaseWebpackConfig(
-	{ WP: true },
-	{
-		entry: { electionkit },
-		'output-path': path.join( __dirname, 'dist' ),
-	}
+  { WP: true },
+  {
+    entry: { electionkit, editor },
+    'output-path': path.join( __dirname, 'dist' ),
+  }
 );
 
 module.exports = webpackConfig;