feat: add connection control

assets/block.json

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

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

@@ -0,0 +1,143 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { RadioControl } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import ConnectionToggleControl from './connection-toggle-control';
+import ConnectionSelectControl from './connection-select-control';
+import ConnectionRadioControl from './connection-radio-control';
+import { fetchRegisteredPostTypes, fetchBlockSettings } from '../../utils/api';
+import { mapPostTypesToOptions } from '../../utils/helpers';
+import { filterPostTypes } from '../../utils/post-types';
+
+const ConnectionControl = ( props ) => {
+	const { attributes, setAttributes } = props;
+	const {
+		postTypes,
+		enableConnection,
+		enableManualSelection,
+		connectionOption,
+	} = attributes;
+	const [ connections, setConnections ] = useState( [] );
+
+	const { currentPostId, currentPostTitle } = useSelect(
+		( select ) => ( {
+			currentPostId: select( 'core/editor' ).getCurrentPostId(),
+			currentPostTitle:
+				select( 'core/editor' ).getEditedPostAttribute( 'title' ),
+		} ),
+		[]
+	);
+
+	/**
+	 * 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 ] );
+
+	/**
+	 * Auto-fill connectionPosts with the current post when:
+	 *  - toggle is enabled
+	 *  - the "current-post-connections" option is selected.
+	 */
+	useEffect( () => {
+		if (
+			enableConnection &&
+			connectionOption === 'current-post-connections' &&
+			connections.length > 0
+		) {
+			const newConnectionPosts = {};
+
+			connections.forEach( ( connection ) => {
+				newConnectionPosts[ connection.value ] = {
+					value: currentPostId,
+					label: currentPostTitle,
+				};
+			} );
+
+			setAttributes( {
+				connectionPosts: newConnectionPosts,
+			} );
+		}
+	}, [
+		enableConnection,
+		connectionOption,
+		connections,
+		currentPostId,
+		currentPostTitle,
+		setAttributes,
+	] );
+
+	return (
+		! enableManualSelection &&
+		connections.length !== 0 && (
+			<>
+				<ConnectionToggleControl { ...props } />
+
+				{ enableConnection && (
+					<ConnectionRadioControl
+						connectionOption={ connectionOption }
+						setAttributes={ setAttributes }
+					/>
+				) }
+
+				{ connectionOption === 'specific-post-connections' &&
+					connections.map( ( connection ) => {
+						return (
+							<div key={ connection.value }>
+								<ConnectionSelectControl
+									connection={ connection }
+									{ ...props }
+								/>
+							</div>
+						);
+					} ) }
+			</>
+		)
+	);
+};
+
+export default ConnectionControl;

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RadioControl } from '@wordpress/components';
+
+const CONNECTION_OPTIONS = [
+	{
+		label: __(
+			'Toon berichten verbonden aan dit bericht',
+			'yard-query-block'
+		),
+		value: 'current-post-connections',
+	},
+	{
+		label: __(
+			'Toon berichten verbonden aan een specifiek bericht',
+			'yard-query-block'
+		),
+		value: 'specific-post-connections',
+	},
+];
+
+const ConnectionRadioControl = ( { connectionOption, setAttributes } ) => {
+	const handleChange = ( value ) => {
+		setAttributes( {
+			connectionOption: value,
+			connectionPosts: {}, // reset when switching mode
+		} );
+	};
+
+	return (
+		<RadioControl
+			label={ __( 'Connectie opties', 'yard-query-block' ) }
+			hideLabelFromVision={ true }
+			selected={ connectionOption }
+			options={ CONNECTION_OPTIONS }
+			onChange={ handleChange }
+		/>
+	);
+};
+
+export default ConnectionRadioControl;

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 } )