10up · s3rgiosan · Feb 21, 2025 · Feb 21, 2025 · Feb 21, 2025 · Feb 21, 2025
@@ -0,0 +1,5 @@
+{
+	"extends": [
+		"@10up/eslint-config/wordpress"
+	]
+}
@@ -0,0 +1,263 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/extensions */
+/**
+ * External dependencies
+ */
+import { ContentPicker } from '@10up/block-components/components/content-picker';
+import { registerBlockExtension } from '@10up/block-components/api/register-block-extension';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	ToggleControl,
+	Notice,
+	SelectControl,
+	BaseControl,
+	__experimentalVStack as VStack,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { useMemo, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store } from '../store';
+
+const BlockEdit = ({ setAttributes, attributes }) => {
+	const { query, showRelated, relationshipKey, sourcePost, orderByRelationship } = attributes;
+	const { postType: queriedPostType } = query;
+
+	const { postTypes, relationships, hasRelationships, hasMultipleRelationships, currentPostId } =
+		useSelect(
+			(select) => {
+				const { getPostTypes } = select(coreStore);
+				const excludedPostTypes = ['attachment'];
+				const filteredPostTypes = getPostTypes({ per_page: -1 })?.filter(
+					({ viewable, slug }) => viewable && !excludedPostTypes.includes(slug),
+				);
+
+				const currentPostId = select(editorStore).getCurrentPostId();
+
+				const postRelationships = select(store).getRelationships(
+					sourcePost?.[0]?.id || currentPostId,
+				);
+				const filteredRelationships = Object.values(postRelationships).filter(
+					(relationship) =>
+						Array.isArray(relationship.post_type) &&
+						relationship.post_type.includes(queriedPostType),
+				);
+
+				return {
+					postTypes: filteredPostTypes,
+					relationships: filteredRelationships,
+					hasRelationships: filteredRelationships.length > 0,
+					hasMultipleRelationships: filteredRelationships.length > 1,
+					currentPostId,
+				};
+			},
+			[queriedPostType, sourcePost?.length],
+		);
+
+	const postTypesSlugs = useMemo(() => (postTypes || []).map(({ slug }) => slug), [postTypes]);
+
+	const relationshipsOptions = useMemo(
+		() =>
+			relationships.map((relationship) => ({
+				value: relationship.rel_key,
+				label: relationship.labels.name,
+			})),
+		[relationships],
+	);
+
+	const selectedRelationshipKey = useMemo(
+		() =>
+			relationshipKey && relationships.some((rel) => rel.rel_key === relationshipKey)
+				? relationshipKey
+				: relationships[0]?.rel_key,
+		[relationshipKey, relationships],
+	);
+
+	const selectedRelationship = useMemo(
+		() =>
+			relationships.find((relationship) => relationship.rel_key === selectedRelationshipKey),
+		[relationships, selectedRelationshipKey],
+	);
+
+	const lastQueryRef = useRef(query);
+
+	const updatedQuery = useMemo(() => {
+		if (!showRelated || !selectedRelationship) {
+			const { relationshipQuery, orderByRelationship, ...cleanQuery } = query;
+			return cleanQuery;
+		}
+
+		return {
+			...query,
+			orderByRelationship: (orderByRelationship ?? true) && selectedRelationship.sortable,
+			relationshipQuery: [
+				{
+					name: selectedRelationship.rel_name,
+					related_to_post: sourcePost?.[0]?.id || currentPostId,
+				},
+			],
+		};
+	}, [query, showRelated, orderByRelationship, selectedRelationship, sourcePost, currentPostId]);
+
+	useEffect(() => {
+		if (JSON.stringify(lastQueryRef.current) !== JSON.stringify(updatedQuery)) {
+			setAttributes({ query: updatedQuery });
+			lastQueryRef.current = updatedQuery;
+		}
+	}, [updatedQuery, setAttributes]);
+
+	const relationshipsControlLabel = __('Relationship', 'tenup-content-connect');
+	const relationshipsControlHelp = __(
+		'Select a relationship to determine how related entities are retrieved.',
+		'tenup-content-connect',
+	);
+	const sourcePostControlHelp = __(
+		'Choose the post from which related entities will be pulled. Defaults to the current post.',
+		'tenup-content-connect',
+	);
+
+	const resetAll = () => {
+		setAttributes({
+			showRelated: false,
+			sourcePost: undefined,
+			relationshipKey: undefined,
+			orderByRelationship: undefined,
+		});
+	};
+
+	const onShowRelatedChange = (value) => {
+		if (!value) {
+			resetAll();
+		} else {
+			setAttributes({ showRelated: value });
+		}
+	};
+
+	const onSourcePostChange = (ids) => {
+		setAttributes({ sourcePost: ids.length ? ids : undefined });
+	};
+
+	const onRelationshipChange = (value) => {
+		setAttributes({ relationshipKey: value });
+	};
+
+	const onOrderByRelationshipChange = (value) => {
+		setAttributes({ orderByRelationship: value });
+	};
+
+	return (
+		<InspectorControls>
+			<ToolsPanel label={__('Related', 'tenup-content-connect')} resetAll={resetAll}>
+				<ToolsPanelItem
+					hasValue={() => !!showRelated}
+					label={__('Related entities', 'tenup-content-connect')}
+					onDeselect={() => resetAll()}
+					isShownByDefault
+				>
+					<VStack spacing={4}>
+						<ToggleControl
+							label={__('Only show related entities', 'tenup-content-connect')}
+							checked={showRelated}
+							onChange={onShowRelatedChange}
+						/>
+						{showRelated && !hasRelationships && (
+							<Notice spokenMessage={null} status="warning" isDismissible={false}>
+								{__(
+									'No relationships exist for the selected post type or post. Try selecting a different post or post type.',
+									'tenup-content-connect',
+								)}
+							</Notice>
+						)}
+					</VStack>
+				</ToolsPanelItem>
+				{showRelated && (
+					<ToolsPanelItem
+						hasValue={() => !!sourcePost}
+						label={__('Source post', 'tenup-content-connect')}
+						onDeselect={() => setAttributes({ sourcePost: undefined })}
+					>
+						<BaseControl help={sourcePostControlHelp}>
+							<ContentPicker
+								onPickChange={onSourcePostChange}
+								mode="post"
+								content={sourcePost}
+								contentTypes={postTypesSlugs}
+								maxContentItems={1}
+								singlePickedLabel={__('Selected post:', 'tenup-content-connect')}
+							/>
+						</BaseControl>
+					</ToolsPanelItem>
+				)}
+				{showRelated && hasMultipleRelationships && (
+					<ToolsPanelItem
+						hasValue={() => !!relationshipKey}
+						label={__('Relationship', 'tenup-content-connect')}
+						onDeselect={() => setAttributes({ relationshipKey: undefined })}
+						isShownByDefault
+					>
+						<SelectControl
+							options={relationshipsOptions}
+							value={relationshipKey}
+							label={relationshipsControlLabel}
+							onChange={onRelationshipChange}
+							help={relationshipsControlHelp}
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+						/>
+					</ToolsPanelItem>
+				)}
+				{showRelated && selectedRelationship?.sortable && (
+					<ToolsPanelItem
+						hasValue={() => orderByRelationship !== undefined}
+						label={__('Order by relationship', 'tenup-content-connect')}
+						onDeselect={() => setAttributes({ orderByRelationship: undefined })}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={__('Order by relationship', 'tenup-content-connect')}
+							checked={orderByRelationship ?? true}
+							onChange={onOrderByRelationshipChange}
+							help={__(
+								'If enabled, the order of the posts will be determined by the selected relationship. This supersedes any other ordering.',
+								'tenup-content-connect',
+							)}
+						/>
+					</ToolsPanelItem>
+				)}
+			</ToolsPanel>
+		</InspectorControls>
+	);
+};
+
+registerBlockExtension('core/query', {
+	extensionName: 'content-connect',
+	attributes: {
+		showRelated: {
+			type: 'boolean',
+			default: false,
+		},
+		sourcePost: {
+			type: 'array',
+		},
+		relationshipKey: {
+			type: 'string',
+		},
+		orderByRelationship: {
+			type: 'boolean',
+		},
+	},
+	classNameGenerator: () => '',
+	Edit: BlockEdit,
+});
@@ -0,0 +1 @@
+import './core-query';
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { ContentPicker } from '@10up/block-components';
+import { ContentPicker } from '@10up/block-components/components/content-picker';
 import type { WP_REST_API_Search_Result, WP_REST_API_User } from 'wp-types';
 
 /**

@@ -7,8 +7,7 @@ import React from 'react';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+import { store as editorStore, PluginDocumentSettingPanel } from '@wordpress/editor';
 
 /**
  * Internal dependencies

@@ -8,6 +8,8 @@ import { registerPlugin } from '@wordpress/plugins';
  */
 import './store';
 import './hooks';
+import './block-extensions';
+
 import { RelationshipsPanel } from './components/RelationshipsPanel';
 
 registerPlugin('wp-content-connect', {

@@ -254,17 +254,17 @@ register(store);
  * @returns Promise that resolves when all changes are persisted.
  */
 export async function persistContentConnectChanges() {
-	const dirtyEntityIds = select(STORE_NAME).getDirtyEntityIds();
+	const dirtyEntityIds = select(store).getDirtyEntityIds();
 
 	// Process each dirty post
 	await Promise.all(
 		dirtyEntityIds.map(async (postId) => {
-			const relationships = select(STORE_NAME).getRelationships(postId);
+			const relationships = select(store).getRelationships(postId);
 
 			// Update each relationship for the post
 			await Promise.all(
 				(Object.values(relationships) as Array<{ rel_key: string; rel_type: string }>).map(async (relationship) => {
-					const relatedEntities = select(STORE_NAME).getRelatedEntities(postId, {
+					const relatedEntities = select(store).getRelatedEntities(postId, {
 						rel_key: relationship.rel_key,
 						rel_type: relationship.rel_type,
 					});
@@ -285,7 +285,7 @@ export async function persistContentConnectChanges() {
 	);
 
 	// Clear dirty entities after successful save
-	dispatch(STORE_NAME).clearDirtyEntities();
+	dispatch(store).clearDirtyEntities();
 }
 
 // Add the pre-save hook to persist changes

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-dom-ready', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => '82ac952edad0ee4ec44c');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => '377f6f6490bfd79cc04f');
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => '4f272cda04d4a62a55fe');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => 'ce1d1d5d9c62f539010a');
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-dom-ready', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => '82ac952edad0ee4ec44c');
		<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => '377f6f6490bfd79cc04f');