feat: add connection control

assets/block.json

@@ -87,6 +87,14 @@
 		"taxonomyTerms": {
 			"type": "object"
 		},
+		"enableConnection": {
+			"type": "boolean",
+			"default": false
+		},
+		"connectionPosts": {
+			"type": "object",
+			"default": {}
+		},
 		"template": {
 			"type": "string",
 			"default": "default"
@@ -114,10 +122,7 @@
 	},
 	"supports": {
 		"html": false,
-		"align": [
-			"wide",
-			"full"
-		]
+		"align": [ "wide", "full" ]
 	},
 	"textdomain": "yard-query-block"
 }

assets/components/filters-controls/connection-control.js

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ConnectionToggleControl from './connection-toggle-control';
+import ConnectionSelectControl from './connection-select-control';
+import { fetchRegisteredPostTypes, fetchBlockSettings } from '../../utils/api';
+import { mapPostTypesToOptions } from '../../utils/helpers';
+import { filterPostTypes } from '../../utils/post-types';
+
+const ConnectionControl = ( props ) => {
+	const { attributes } = props;
+	const { postTypes, enableConnection, enableManualSelection } = attributes;
+	const [ connections, setConnections ] = useState( [] );
+
+	/**
+	 * Fetch connections of selected post types
+	 */
+	useEffect( () => {
+		const getConnections = async () => {
+			const settings = await fetchBlockSettings();
+
+			if ( ! settings.connections || settings.connections.length < 1 ) {
+				setConnections( [] );
+				return;
+			}
+
+			// Filter connections that match selected post types
+			const match = settings.connections.filter( ( a ) =>
+				postTypes.some( ( b ) => a.from === b.value )
+			);
+
+			if ( match.length < 1 ) {
+				setConnections( [] );
+				return;
+			}
+
+			const allPostTypes = await fetchRegisteredPostTypes();
+			const filteredPostTypes = filterPostTypes( allPostTypes );
+			const mappedPostTypes = mapPostTypesToOptions( filteredPostTypes );
+
+			const connectionPostTypes = match.map( ( connection ) => {
+				return mappedPostTypes.find(
+					( postType ) => postType.value === connection.to
+				);
+			} );
+
+			if ( connectionPostTypes.length < 1 ) {
+				setConnections( [] );
+				return;
+			}
+
+			setConnections( connectionPostTypes );
+		};
+
+		getConnections();
+	}, [ postTypes ] );
+
+	return (
+		! enableManualSelection &&
+		connections.length !== 0 && (
+			<>
+				<ConnectionToggleControl { ...props } />
+
+				{ enableConnection &&
+					connections.map( ( connection ) => {
+						return (
+							<div key={ connection.value }>
+								<ConnectionSelectControl
+									connection={ connection }
+									{ ...props }
+								/>
+							</div>
+						);
+					} ) }
+			</>
+		)
+	);
+};
+
+export default ConnectionControl;

assets/components/filters-controls/connection-select-control.js

@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import AsyncSelectPostsControl from '../shared/async-select-posts-control';
+
+const ConnectionSelectControl = ( props ) => {
+	const { connection, attributes, setAttributes } = props;
+	const { connectionPosts } = attributes;
+
+	/**
+	 * Save the selected posts as an attribute
+	 *
+	 * @param {Array} selectedPosts - The new posts to save
+	 */
+	const onChange = ( selectedPosts ) => {
+		const newOption = {
+			[ connection.value ]:
+				selectedPosts === null ? undefined : selectedPosts,
+		};
+
+		if ( ! connectionPosts ) {
+			setAttributes( { connectionPosts: newOption } );
+		} else {
+			const newConnectionPosts = { ...connectionPosts, ...newOption };
+			setAttributes( { connectionPosts: newConnectionPosts } );
+		}
+	};
+
+	return (
+		<AsyncSelectPostsControl
+			subtype={ connection.value }
+			enable={ true }
+			handleChange={ onChange }
+			isClearable={ true }
+			isMulti={ false }
+			label={ connection.label }
+			value={ connectionPosts[ connection.value ] }
+		/>
+	);
+};
+
+export default ConnectionSelectControl;

assets/components/filters-controls/connection-toggle-control.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const ConnectionToggleControl = ( props ) => {
+	const { attributes, setAttributes } = props;
+	const { enableConnection } = attributes;
+
+	/**
+	 * Save state in attributes and reset connection posts attribute if the toggle is disabled
+	 *
+	 * @param {boolean} state - State of toggle
+	 */
+	const onChange = ( state ) => {
+		setAttributes( { enableConnection: state } );
+
+		if ( ! state ) {
+			setAttributes( { connectionPosts: {} } );
+		}
+	};
+
+	return (
+		<ToggleControl
+			label={ __( 'Filter op connectie', 'yard-query-block' ) }
+			checked={ enableConnection }
+			onChange={ onChange }
+		/>
+	);
+};
+
+export default ConnectionToggleControl;

assets/components/filters-controls/exclude-posts-select-control.js

@@ -6,15 +6,16 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { getSubtype } from '../../utils/helpers';
 import AsyncSelectPostsControl from '../shared/async-select-posts-control';
 
 const ExcludePostsSelectControl = ( props ) => {
 	const { attributes, setAttributes } = props;
-	const { enableExcludePosts, excludePosts } = attributes;
+	const { postTypes, enableExcludePosts, excludePosts } = attributes;
 
 	return (
 		<AsyncSelectPostsControl
-			attributes={ attributes }
+			subtype={ getSubtype( postTypes ) }
 			enable={ enableExcludePosts }
 			handleChange={ ( selectedPosts ) =>
 				setAttributes( { excludePosts: selectedPosts } )

assets/components/filters-controls/manual-selection-select-control.js

@@ -6,16 +6,21 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { getSubtype } from '../../utils/helpers';
 import AsyncSortableSelectPostsControl from '../shared/async-sortable-select-posts-control';
 
 const ManualSelectionSelectControl = ( props ) => {
 	const { attributes, setAttributes } = props;
-	const { postsPerPage, enableManualSelection, manualSelectionPosts } =
-		attributes;
+	const {
+		postTypes,
+		postsPerPage,
+		enableManualSelection,
+		manualSelectionPosts,
+	} = attributes;
 
 	return (
 		<AsyncSortableSelectPostsControl
-			attributes={ attributes }
+			subtype={ getSubtype( postTypes ) }
 			enable={ enableManualSelection }
 			handleChange={ ( selectedPosts ) =>
 				setAttributes( { manualSelectionPosts: selectedPosts } )

assets/components/filters-controls/manual-selection-toggle-control.js

@@ -28,6 +28,8 @@ const ManualSelectionToggleControl = ( props ) => {
 				postParent: {},
 				enableTaxonomies: false,
 				taxonomyTerms: undefined,
+				enableConnections: false,
+				connectionPosts: {},
 			} );
 		}
 	};

assets/components/filters-controls/post-parent-select-control.js

@@ -6,11 +6,13 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { getSubtype } from '../../utils/helpers';
 import AsyncSelectPostsControl from '../shared/async-select-posts-control';
 
 const PostParentSelectControl = ( props ) => {
 	const { attributes, setAttributes } = props;
 	const {
+		postTypes,
 		postParentOption,
 		postParent,
 		enableManualSelection,
@@ -19,7 +21,7 @@ const PostParentSelectControl = ( props ) => {
 
 	return (
 		<AsyncSelectPostsControl
-			attributes={ attributes }
+			subtype={ getSubtype( postTypes ) }
 			enable={
 				! enableManualSelection &&
 				enablePostParent &&

assets/components/filters-controls/sticky-post-select-control.js

@@ -6,15 +6,16 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { getSubtype } from '../../utils/helpers';
 import AsyncSelectPostsControl from '../shared/async-select-posts-control';
 
 const StickyPostSelectControl = ( props ) => {
 	const { attributes, setAttributes } = props;
-	const { enableStickyPost, stickyPost } = attributes;
+	const { postTypes, enableStickyPost, stickyPost } = attributes;
 
 	return (
 		<AsyncSelectPostsControl
-			attributes={ attributes }
+			subtype={ getSubtype( postTypes ) }
 			enable={ enableStickyPost }
 			handleChange={ ( selectedPost ) =>
 				setAttributes( { stickyPost: selectedPost } )

assets/components/inspector.js

@@ -31,6 +31,7 @@ import PostTypeSelectControl from './settings-controls/post-type-select-control'
 import StickyPostSelectControl from './filters-controls/sticky-post-select-control';
 import StickyPostToggleControl from './filters-controls/sticky-post-toggle-control';
 import TaxonomyControl from './filters-controls/taxonomy-control';
+import ConnectionControl from './filters-controls/connection-control';
 import TemplateSelectControl from './display-controls/template-select-control';
 
 import { getInspectorControls } from './../config/inspector-config';
@@ -125,6 +126,9 @@ const Inspector = ( props ) => {
 					{ inspectorConfig.showTaxonomyControl && (
 						<TaxonomyControl { ...props } />
 					) }
+					{ inspectorConfig.showConnectionControl && (
+						<ConnectionControl { ...props } />
+					) }
 				</PanelBody>
 			) }
 			{ postTypes.length > 0 && inspectorConfig.showDisplayPanel && (

assets/components/settings-controls/post-type-select-control.js

@@ -64,6 +64,8 @@ const PostTypeSelectControl = ( props ) => {
 			postParent: {},
 			enableTaxonomies: false,
 			taxonomyTerms: undefined,
+			enableConnections: false,
+			connectionPosts: {},
 		} );
 	};
 

assets/components/shared/async-select-posts-control.js

@@ -13,20 +13,19 @@ import { useState, useEffect, useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { mapPostsToOptions, getSubtype } from '../../utils/helpers';
+import { mapPostsToOptions } from '../../utils/helpers';
 import { searchPosts } from '../../utils/api';
 
 const AsyncSelectPostsControl = ( props ) => {
 	const {
-		attributes,
+		subtype,
 		enable,
 		handleChange,
 		isClearable,
 		isMulti,
 		label,
 		value,
 	} = props;
-	const { postTypes } = attributes;
 	const [ defaultOptions, setDefaultOptions ] = useState( [] );
 
 	/**
@@ -36,11 +35,10 @@ const AsyncSelectPostsControl = ( props ) => {
 	 */
 	const getPostsAsOptions = useCallback(
 		async ( input = '' ) => {
-			const subtype = getSubtype( postTypes );
 			const posts = await searchPosts( input, subtype );
 			return posts ? mapPostsToOptions( posts ) : [];
 		},
-		[ postTypes ]
+		[ subtype ]
 	);
 
 	/**

assets/components/shared/async-sortable-select-posts-control.js

@@ -23,7 +23,7 @@ import { useState, useEffect, useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { mapPostsToOptions, getSubtype } from '../../utils/helpers';
+import { mapPostsToOptions } from '../../utils/helpers';
 import { searchPosts } from '../../utils/api';
 
 const MultiValue = ( props ) => {
@@ -68,9 +68,8 @@ const MultiValueRemove = ( props ) => {
 };
 
 const AsyncSortableSelectPostsControl = ( props ) => {
-	const { attributes, enable, handleChange, isOptionDisabled, label, value } =
+	const { subtype, enable, handleChange, isOptionDisabled, label, value } =
 		props;
-	const { postTypes } = attributes;
 	const [ defaultOptions, setDefaultOptions ] = useState( [] );
 
 	/**
@@ -80,11 +79,10 @@ const AsyncSortableSelectPostsControl = ( props ) => {
 	 */
 	const getPostsAsOptions = useCallback(
 		async ( input = '' ) => {
-			const subtype = getSubtype( postTypes );
 			const posts = await searchPosts( input, subtype );
 			return posts ? mapPostsToOptions( posts ) : [];
 		},
-		[ postTypes ]
+		[ subtype ]
 	);
 
 	/**

assets/config/inspector-config.js

@@ -24,6 +24,7 @@ export const defaultConfig = {
 	showPostStatusToggleControl: true,
 	showPostStatusSelectControl: true,
 	showTaxonomyControl: true,
+	showConnectionControl: true,
 	showDisplayPanel: true,
 	showTemplateSelectControl: true,
 	showDisplayImageToggleControl: true,