Feature: Native Block Editor Interface

.gitignore

@@ -28,5 +28,4 @@ sassdoc
 scss-lint-report.xml
 config.codekit
 
-/assets/js/content-connect.js
-/assets/js/content-connect.min.js
+/dist/

.nvmrc

@@ -0,0 +1 @@
+20

assets/js/components/relationship-manager.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ContentPicker } from '@10up/block-components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { addQueryArgs } from '@wordpress/url';
+import { store } from '../store';
+import { ContentConnectRelationship } from '../store/types';
+
+type RelationshipManagerProps = {
+	postId: number | null;
+	relationship: ContentConnectRelationship;
+};
+
+export function RelationshipManager({ postId, relationship }: RelationshipManagerProps) {
+	const { updateRelatedEntities } = useDispatch(store);
+
+	const { relatedEntities } = useSelect((select) => ({
+		relatedEntities: select(store).getRelatedEntities(postId, {
+			rel_key: relationship.rel_key,
+			rel_type: relationship.rel_type,
+		}),
+	}), [postId, relationship.rel_key]);
+
+	const handleChange = async (newEntities: any[]) => {
+		await updateRelatedEntities(
+			postId,
+			relationship.rel_key,
+			relationship.rel_type,
+			newEntities
+		);
+	};
+
+	return (
+		<ContentPicker
+			onPickChange={handleChange}
+			mode={relationship?.object_type ?? 'post'}
+			content={relatedEntities}
+			contentTypes={relationship?.post_type}
+			maxContentItems={relationship?.max_items ?? 100}
+			isOrderable={relationship?.sortable ?? false}
+			queryFilter={(query) => {
+				if (relationship?.rel_key) {
+					return addQueryArgs(query, {
+						content_connect: relationship.rel_key
+					});
+				}
+				return query;
+			}}
+		/>
+	);
+}

assets/js/components/relationships-panel.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+import { store } from '../store';
+import { RelationshipManager } from './relationship-manager';
+
+export function RelationshipsPanel() {
+	const { postId, relationships } = useSelect((select) => {
+		const postId = select(editorStore).getCurrentPostId();
+		const relationships = select(store).getRelationships(postId);
+
+		return {
+			postId,
+			relationships,
+		};
+	}, []);
+
+	if (!relationships || Object.keys(relationships).length === 0) {
+		return null;
+	}
+
+	const enabledRelationships = Object.values(relationships).filter(
+		(relationship) => relationship.enable_ui === true
+	);
+
+	if (enabledRelationships.length === 0) {
+		return null;
+	}
+
+	return (
+		<>
+			{enabledRelationships.map((relationship) => (
+				<PluginDocumentSettingPanel
+					name={`content-connect-relationship-${relationship.rel_key}`}
+					title={relationship.labels.name}
+				>
+					<RelationshipManager
+						postId={postId}
+						relationship={relationship}
+					/>
+				</PluginDocumentSettingPanel>
+			))}
+		</>
+	);
+}

assets/js/hooks/index.ts

@@ -0,0 +1,2 @@
+import './use-relationships';
+import './use-related-entities';

assets/js/hooks/use-related-entities.ts

@@ -0,0 +1,31 @@
+import { store } from '../store';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from 'react';
+import { GetRelatedEntitiesOptions } from '../store/api';
+import { ContentConnectRelatedEntities } from '../store/types';
+
+export function useRelatedEntities(postId: number, options: GetRelatedEntitiesOptions) {
+		const { hasResolved, relatedEntities } = useSelect(
+			(select) => {
+				const params = [postId, options] as const;
+				const relatedEntities = select(store).getRelatedEntities(...params);
+				// @ts-expect-error - The hasFinishedResolution method is a meta-method that coming
+				// from WordPress. Because of that, it's not typed correctly in our custom store.
+				const hasResolved: boolean = select(store).hasFinishedResolution('getRelatedEntities', params);
+
+				return {
+					relatedEntities,
+					hasResolved,
+			};
+		},
+		[postId, options]
+	);
+
+	const { updateRelatedEntities } = useDispatch(store);
+
+	const _updateRelatedEntities = useCallback((entities: ContentConnectRelatedEntities) => {
+		updateRelatedEntities(postId, options.rel_key, options.rel_type, entities);
+	}, [postId, options, updateRelatedEntities]);
+
+	return [hasResolved, relatedEntities, _updateRelatedEntities] as const;
+}

assets/js/hooks/use-relationships.ts

@@ -0,0 +1,26 @@
+import { store } from '../store';
+import { useSelect } from '@wordpress/data';
+import { GetRelationshipsOptions } from '../store/api';
+
+export function useRelationships(
+	postId: number,
+	options?: GetRelationshipsOptions
+) {
+	const { relationships, hasResolved } = useSelect(
+		(select) => {
+			const params = [postId, options] as const;
+			const relationships = select(store).getRelationships(...params);
+			// @ts-expect-error - The hasFinishedResolution method is a meta-method that coming
+			// from WordPress. Because of that, it's not typed correctly in our custom store.
+			const hasResolved: boolean = select(store).hasFinishedResolution('getRelationships', params);
+
+			return {
+				relationships,
+				hasResolved,
+			};
+		},
+		[postId, options]
+	);
+
+	return [hasResolved, relationships] as const;
+}

assets/js/index.ts

@@ -0,0 +1,9 @@
+import './store';
+import './hooks';
+
+import { registerPlugin } from '@wordpress/plugins';
+import { RelationshipsPanel } from './components/relationships-panel';
+
+registerPlugin('wp-content-connect', {
+	render: RelationshipsPanel,
+});