Add panel body

assets/src/js/index.js

@@ -6,9 +6,19 @@ import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
 import { link } from '@wordpress/icons';
 import { registerPlugin } from '@wordpress/plugins';
 
+import PanelBody from './panel-body';
+
 const { postTypes } = externalPermalinksReduxConfig;
 const slug = 'external-permalinks-redux';
 
+/**
+ * Render panel view.
+ *
+ * @param {Object} props Component props.
+ * @param {string} props.postType Post type.
+ * @returns {JSX.Element|null}
+ * @constructor
+ */
 const View = ( { postType } ) => {
 	if ( ! postType ) {
 		return null;
@@ -20,11 +30,14 @@ const View = ( { postType } ) => {
 			title={ postTypes[ postType ] }
 			className={ slug }
 		>
-			Hi
+			<PanelBody />
 		</PluginDocumentSettingPanel>
 	);
 };
 
+/**
+ * HOC to provide the post type.
+ */
 const Panel = compose( [
 	withSelect( ( select ) => {
 		const { type: postType } = select( 'core/editor' ).getCurrentPost();

assets/src/js/panel-body.js

+/* global externalPermalinksReduxConfig */
+
+import { TextControl, SelectControl } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+const {
+	metaKeys: { target: metaKeyTarget, type: metaKeyType },
+	statusCodes,
+} = externalPermalinksReduxConfig;
+
+const View = ( { setTarget, setType, target, type } ) => {
+	return (
+		<>
+			<TextControl
+				label={ __(
+					'Destination Address:',
+					'external-permalinks-redux'
+				) }
+				help={ __(
+					'To restore the original permalink, remove the link entered above.',
+					'external-permalinks-redux'
+				) }
+				type="url"
+				value={ target }
+				onChange={ setTarget }
+			/>
+
+			<SelectControl
+				label={ __( 'Redirect Type:', 'external-permalinks-redux' ) }
+				options={ statusCodes }
+				selected={ type }
+				onChange={ setType }
+			/>
+		</>
+	);
+};
+
+/**
+ * HOC to provide meta values and methods for updating meta.
+ */
+const PanelBody = compose( [
+	withSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( 'core/editor' );
+		const meta = getEditedPostAttribute( 'meta' );
+
+		return {
+			target: meta[ metaKeyTarget ],
+			type: meta[ metaKeyType ],
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { editPost } = dispatch( 'core/editor' );
+
+		const setTarget = ( target ) => {
+			editPost( {
+				meta: {
+					[ metaKeyTarget ]: target.trim(),
+				},
+			} );
+		};
+
+		const setType = ( type ) => {
+			editPost( {
+				meta: {
+					[ metaKeyType ]: parseInt( type, 10 ),
+				},
+			} );
+		};
+
+		return {
+			setTarget,
+			setType,
+		};
+	} ),
+] )( View );
+
+export default PanelBody;

inc/class-external-permalinks-redux-block-editor.php

@@ -80,8 +80,7 @@ class External_Permalinks_Redux_Block_Editor {
 			'post',
 			external_permalinks_redux::get_instance()->meta_key_type,
 			array(
-				// Matches fallback in `external_permalinks_redux::get_redirect_data()`.
-				'default'           => 302,
+				'default'           => 0,
 				'description'       => __(
 					'Redirect status code',
 					'external-permalinks-redux'
@@ -126,8 +125,32 @@ class External_Permalinks_Redux_Block_Editor {
 					'type'   => external_permalinks_redux::get_instance()->meta_key_type,
 				),
 				'postTypes'   => external_permalinks_redux::get_instance()->post_types,
-				'statusCodes' => external_permalinks_redux::get_instance()->status_codes,
+				'statusCodes' => $this->_get_status_codes(),
 			)
 		);
 	}
+
+	/**
+	 * Format status codes for use with `SelectControl` component.
+	 *
+	 * @return array
+	 */
+	protected function _get_status_codes() {
+		$codes = external_permalinks_redux::get_instance()->status_codes;
+		$formatted = [
+			[
+				'label'    => __( '-- Select --', 'external-permalinks-redux' ),
+				'value'    => 0,
+			],
+		];
+
+		foreach ( $codes as $code => $label ) {
+			$formatted[] = [
+				'label' => $label,
+				'value' => $code,
+			];
+		}
+
+		return $formatted;
+	}
 }