@plaudit/gutenberg-api-extensions 2.8.0 → 2.9.0

package/src/blocks/common-native-property-implementations.tsx

@@ -1,8 +1,9 @@
-import {MediaUpload, MediaUploadCheck} from "@wordpress/block-editor";
+import {MediaUpload, MediaUploadCheck, __experimentalLinkControl as LinkControl, type LinkControlProps} from "@wordpress/block-editor";
 import {
 	Button,
 	Card,
 	CardBody,
+	CardFooter,
 	CardHeader,
 	FocalPointPicker,
 	RadioControl,
@@ -12,11 +13,12 @@ import {
 	TextareaControl,
 	TextControl,
 	ToggleControl,
-	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalHeading as Heading,
+	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon
 } from "@wordpress/components";
+import type {ComboboxControlOption} from "@wordpress/components/build-types/combobox-control/types";
 import type {RadioControlProps} from "@wordpress/components/build-types/radio-control/types";
 import type {RangeControlProps} from "@wordpress/components/build-types/range-control/types";
 import type {TextControlProps} from "@wordpress/components/build-types/text-control/types";
@@ -26,6 +28,8 @@ import type {ToggleGroupControlProps} from "@wordpress/components/build-types/to
 import {useSelect} from "@wordpress/data";
 import {__} from "@wordpress/i18n";
 
+import {ExtendedPostPicker, type ExtendedPostPickerConstructorProps, LazySuggestionsComboboxControl, type LazySuggestionsComboboxControlProps} from "../controls";
+import {requestPostsFromAPI} from "../controls/shared";
 import type {PickableOptions} from "../controls/types";
 import type {SimpleNativeProperty} from "./simple-native-property";
 
@@ -35,7 +39,7 @@ export type ActualBlockEditProps = { attributes: Record<string, any>, setAttribu
 type CommonPropertyConfig<T, V> = {
 	name: string,
 	label: string,
-	default: T,
+	default?: T,
 	enum?: T[],
 	component?: Partial<V>,
 	help?: string,
@@ -96,6 +100,69 @@ export function selectProperty(config: CommonPropertyConfig<string, never> & {
 	};
 }
 
+export function linkProperty(config: CommonPropertyConfig<Record<string, unknown>, LinkControlProps>): SimpleNativeProperty {
+	return {
+		name: config.name,
+		type: 'object',
+		default: config.default,
+		condition: config.condition,
+		alwaysStore: config.alwaysStore,
+		renderer(value, onChange) {
+			return wrapInCard(() => <LinkControl value={value} onChange={onChange} {...config.component} />, config.label, config.help);
+		}
+	};
+}
+
+function comboboxControlOptionFromAPIResponse(response: Array<{id: string, title: string}>): ComboboxControlOption[] {
+	return response.map(({id, title}) => ({value: id, label: `${title} (#${id})`}));
+}
+
+type SharedPostPropertyType = {
+	postTypes?: string[];
+};
+type PostPropertyType =
+	(CommonPropertyConfig<number, LazySuggestionsComboboxControlProps>&SharedPostPropertyType&{multiple?: false})|
+	(CommonPropertyConfig<number[], ExtendedPostPickerConstructorProps>&SharedPostPropertyType&{multiple: true});
+export function postProperty(config: PostPropertyType): SimpleNativeProperty {
+	if (config.multiple) {
+		return {
+			name: config.name,
+			type: 'array',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			renderer(value: number[]|undefined, onChange) {
+				return <ExtendedPostPicker
+					label={config.label}
+					help={config.help}
+					value={value?.map(v => v.toString())}
+					onChange={(v) => onChange(v.map(v => parseInt(v)))}
+					postTypes={config.postTypes}
+					{...config.component}
+				/>;
+			}
+		};
+	} else {
+		const makeRequest = (v: string|undefined) => requestPostsFromAPI({search: v, postTypes: config.postTypes?.join(',')});
+		return {
+			name: config.name,
+			type: 'number',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			renderer(value: number|undefined, onChange) {
+				return <LazySuggestionsComboboxControl
+					value={value?.toString()}
+					onChange={v => onChange(v ? parseInt(v) : undefined)}
+					getOption={v => makeRequest(v).then(comboboxControlOptionFromAPIResponse).then(res => res[0])}
+					getSuggestions={v => makeRequest(v).then(comboboxControlOptionFromAPIResponse)}
+					{...config.component}
+				/>
+			}
+		};
+	}
+}
+
 export function toggleProperty(config: CommonPropertyConfig<boolean, ToggleControlProps>): SimpleNativeProperty {
 	return {
 		name: config.name,
@@ -148,7 +215,7 @@ export function toggleGroupProperty(config: ToggleGroupPropertyConfig): SimpleNa
 	}
 }
 
-export function textProperty(config: CommonPropertyConfig<string, TextControlProps>): SimpleNativeProperty {
+export function textProperty(config: CommonPropertyConfig<string, TextControlProps>&{placeholder?: string|undefined}): SimpleNativeProperty {
 	return {
 		name: config.name,
 		type: 'string',
@@ -156,12 +223,12 @@ export function textProperty(config: CommonPropertyConfig<string, TextControlPro
 		condition: config.condition,
 		alwaysStore: config.alwaysStore,
 		renderer(value, onChange) {
-			return <TextControl value={value} onChange={onChange} label={config.label} help={config.help} {...config.component} />;
+			return <TextControl value={value ?? ''} onChange={onChange} label={config.label} help={config.help} placeholder={config.placeholder} {...config.component} />;
 		}
 	};
 }
 
-export function textareaProperty(config: CommonPropertyConfig<string, TextareaControlProps>): SimpleNativeProperty {
+export function textareaProperty(config: CommonPropertyConfig<string, TextareaControlProps>&{placeholder?: string|undefined, newline?: undefined|"\n"|"br"|"p"}): SimpleNativeProperty {
 	return {
 		name: config.name,
 		type: 'string',
@@ -169,7 +236,21 @@ export function textareaProperty(config: CommonPropertyConfig<string, TextareaCo
 		condition: config.condition,
 		alwaysStore: config.alwaysStore,
 		renderer(value, onChange) {
-			return <TextareaControl value={value} onChange={onChange} label={config.label} help={config.help} {...config.component} />;
+			let v = value ?? '';
+			if (config.newline === "br") {
+				v = v.replaceAll("<br/>", "\n");
+			} else if (config.newline === "p") {
+				v = v.replaceAll(/<p>(.*?)<\/p>/gi, "$1\n");
+			}
+			return <TextareaControl value={v} onChange={v => {
+				if (config.newline === "br") {
+					onChange(v.replaceAll(/\r?\n/g, "<br/>"));
+				} else if (config.newline === "p") {
+					onChange(v.split(/\r?\n/g).map(v => "<p>" + v + "</p>").join(""));
+				} else {
+					onChange(v);
+				}
+			}} label={config.label} help={config.help} placeholder={config.placeholder} {...config.component} />;
 		}
 	};
 }
@@ -248,20 +329,29 @@ export function imageProperty(config: Omit<CommonPropertyConfig<ImagePropertyDat
 					<Button onClick={() => onChange({...value, media: {id: 0, url: ''}})} isDestructive>{__('Remove image', 'plaudit')}</Button>
 				</MediaUploadCheck>
 			</>;
-			return <Card>
-				<CardHeader>
-					<Heading>{config.label}</Heading>
-				</CardHeader>
-				<CardBody>
+			return wrapInCard(() =>
 					<div className="editor-post-featured-image">
 						{value.media?.id ? imageUploadedVersion : noImageUploadedVersion}
-					</div>
-				</CardBody>
-			</Card>;
+					</div>,
+				config.label, config.help);
 		}
 	};
 }
 
+function wrapInCard(wrapped: () => ReactElement, label: string, help?: string): ReactElement {
+	return <Card>
+		<CardHeader>
+			<Heading>{label}</Heading>
+		</CardHeader>
+		<CardBody>
+			{wrapped()}
+		</CardBody>
+		{help && <CardFooter>
+			{help}
+        </CardFooter>}
+	</Card>;
+}
+
 function asOptions<T extends string|number>(options: PickableOptions<T>, noSelectionValue?: T): Array<{ value: T, label: string }> {
 	const res = options.map(opt => ({value: opt[0], label: typeof opt[1] === 'string' ? opt[1] : opt[1].text}));
 	if (noSelectionValue !== undefined && !res.some(opt => !opt.value)) {

package/src/blocks/simple-native-property.tsx

@@ -12,9 +12,9 @@ type GenericSimpleNativeProperty<T, V extends 'string'|'number'|'boolean'|'array
 	name: string,
 	type: V,
 	enum?: T[],
-	default: T,
+	default?: T,
 	alwaysStore?: boolean,
-	renderer(value: T, onChange: (v: T|undefined) => void): React.JSX.Element,
+	renderer(value: T|undefined, onChange: (v: T|undefined) => void): React.JSX.Element,
 	condition?(blockEditProps: ActualBlockEditProps): boolean
 };
 export type SimpleNativeProperty = GenericSimpleNativeProperty<string, 'string'>&{enum?: string[]}
@@ -134,39 +134,43 @@ export function installSimpleNativePropertiesSupport() {
 					const propPath = prop.name.split('.');
 
 					let existingValue;
-					if (propPath.length === 1) {
-						existingValue = blockEditProps.attributes[prop.name];
-						if (existingValue === undefined) {
-							existingValue = prop.default;
-							blockEditProps.setAttributes({[prop.name]: prop.default});
-						}
-					} else {
-						let graphExistingValue = blockEditProps.attributes[propPath[0]];
-						if (graphExistingValue === undefined) {
-							blockEditProps.attributes[propPath[0]] = graphExistingValue = {};
-						}
-						for (let i = 1; i < propPath.length; i++) {
-							if (graphExistingValue[propPath[i]] === undefined) {
-								for (; i < propPath.length - 1; i++) {
-									graphExistingValue = graphExistingValue[propPath[i]] = {};
+					if (prop.default !== undefined) {
+						if (propPath.length === 1) {
+							existingValue = blockEditProps.attributes[prop.name];
+							if (existingValue === undefined) {
+								existingValue = prop.default;
+								blockEditProps.setAttributes({[prop.name]: prop.default});
+							}
+						} else {
+							let graphExistingValue = blockEditProps.attributes[propPath[0]];
+							if (graphExistingValue === undefined) {
+								blockEditProps.attributes[propPath[0]] = graphExistingValue = {};
+							}
+							for (let i = 1; i < propPath.length; i++) {
+								if (graphExistingValue[propPath[i]] === undefined) {
+									for (; i < propPath.length - 1; i++) {
+										graphExistingValue = graphExistingValue[propPath[i]] = {};
+									}
+									graphExistingValue[propPath[propPath.length - 1]] = existingValue = prop.default;
+									blockEditProps.setAttributes({[propPath[0]]: blockEditProps.attributes[propPath[0]]});
+									break;
+								} else {
+									graphExistingValue = graphExistingValue[propPath[i]];
 								}
-								graphExistingValue[propPath[propPath.length - 1]] = existingValue = prop.default;
-								blockEditProps.setAttributes({[propPath[0]]: blockEditProps.attributes[propPath[0]]});
-								break;
-							} else {
-								graphExistingValue = graphExistingValue[propPath[i]];
 							}
+							existingValue = graphExistingValue ?? prop.default;
 						}
-						existingValue = graphExistingValue ?? prop.default;
+					} else {
+						existingValue = undefined;
 					}
 					let ele: React.JSX.Element;
 					if (prop.type === "array") {// If the value is not an array or is a sparse array, then it will cause unrecoverable errors upon conversion to PHP
-						if (!Array.isArray(existingValue) || existingValue.length > existingValue.filter(() => true).length) {
+						if (existingValue !== undefined && (!Array.isArray(existingValue) || existingValue.length > existingValue.filter(() => true).length)) {
 							throw new Error(`Invalid value passed to an array-type property: ${existingValue}`);
 						}
 						ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
 					} else if (prop.type === "object") {
-						if (Array.isArray(existingValue) || typeof existingValue !== 'object') {
+						if (existingValue !== undefined && (Array.isArray(existingValue) || typeof existingValue !== 'object')) {
 							throw new Error(`Invalid value passed to an object-type property: ${existingValue}`);
 						}
 						ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));

package/src/controls/AsynchronousFormTokenField.tsx

@@ -3,6 +3,7 @@ import type {TokenItem} from "@wordpress/components/build-types/form-token-field
 import {__} from "@wordpress/i18n";
 import {useEffect, useState} from '@wordpress/element';
 import debounce from "debounce";
+import React from "react";
 
 // The strange values correspond to the literals that are expected by TokenItem.status, which allows the assignment code to be cleaner
 export const enum ValidationState {
@@ -13,7 +14,8 @@ export const enum ValidationState {
 
 export interface AsynchronousFormTokenFieldProps {
 	label: string;
-	value: string[];
+	help?: string;
+	value?: string[];
 	onChange: (value: string[]) => void;
 
 	validationQuery(tokens: string[]): Promise<Array<TokenItem>>;
@@ -21,6 +23,8 @@ export interface AsynchronousFormTokenFieldProps {
 	makeTokenFromSuggestion(suggestion: string): TokenItem;
 	validValues: Map<string, ValidationState>;
 	validator?: (value: string) => boolean;
+
+	multiple?: boolean;
 }
 
 export function AsynchronousFormTokenField(props: AsynchronousFormTokenFieldProps) {
@@ -103,19 +107,21 @@ export function AsynchronousFormTokenField(props: AsynchronousFormTokenFieldProp
 	}));
 
 	useEffect(() => {
-		props.validationQuery(props.value).then(data => {
+		props.validationQuery(props.value ?? []).then(data => {
 			const tokenLabels = new Map<string, string|undefined>();
 			for (const rep of data) {
 				tokenLabels.set(rep.value, rep.title);
 				props.validValues.set(rep.value, ValidationState.Valid);
 			}
 
-			for (const value of props.value) {
-				if (!props.validValues.has(value)) {
-					props.validValues.set(value, ValidationState.Invalid);
+			if (props.value) {
+				for (const value of props.value) {
+					if (!props.validValues.has(value)) {
+						props.validValues.set(value, ValidationState.Invalid);
+					}
 				}
 			}
-			setCurrentTokens(props.value.map(value => ({value, title: tokenLabels.get(value) ?? value, status: props.validValues.get(value)})));
+			setCurrentTokens(props.value?.map(value => ({value, title: tokenLabels.get(value) ?? value, status: props.validValues.get(value)})) ?? []);
 			setIsInitializing(false);
 		});
 	}, []);
@@ -145,6 +151,7 @@ export function AsynchronousFormTokenField(props: AsynchronousFormTokenFieldProp
 			displayTransform={token => tokenTitleMappings.get(token) ?? token}
 			onInputChange={mySuggestionRequestQueue.debouncer}
 		/>
+		{props.help && <div><span className="components-form-token-field__help">{props.help}</span></div>}
 		{isLoading && <div><Spinner /><span className="components-form-token-field__help">{__("Updating Suggestions")}</span></div>}
 		{isValidating && <div><Spinner /><span className="components-form-token-field__help">{__("Validating")}</span></div>}
 	</>;

package/src/controls/ExtendedPostPicker.tsx

@@ -1,22 +1,22 @@
-import apiFetch from '@wordpress/api-fetch';
 import {AsynchronousFormTokenField, ValidationState} from "./AsynchronousFormTokenField";
 import {useState} from "@wordpress/element";
-import {addQueryArgs} from "@wordpress/url";
+
+import {requestPostsFromAPI} from "./shared";
+
+import React from "react";
 
 type ExtendedPostPickerProps = {
 	onChange: (value: string[]) => void;
 	label: string;
+	help?: string;
 	postTypes: string[];
 	placeholder: string;
-	value: string[]
+	value?: string[];
+	multiple?: boolean;
 };
 
 export type ExtendedPostPickerConstructorProps = Partial<Omit<ExtendedPostPickerProps, 'onChange'|'value'|'label'>> & Pick<ExtendedPostPickerProps, 'onChange'|'value'|'label'>;
 
-async function makeAPIRequest(data: {search?: string, ids?: string, postTypes?: string}) {
-	return (await apiFetch<Array<{ id: number, title: string }>>({path: addQueryArgs("/plaudit/common/v1/post-table-search", data)}))
-		.map(item => ({id: item.id.toString(), title: item.title}));
-}
 export function ExtendedPostPicker(props: ExtendedPostPickerConstructorProps) {
 	const [validPostIds, _] = useState(new Map<string, ValidationState>());
 	const value = props.value ?? [];
@@ -34,9 +34,9 @@ export function ExtendedPostPicker(props: ExtendedPostPickerConstructorProps) {
 				return {value: token, status: ValidationState.Invalid, title: token};
 			}
 		}}
-		suggestionQuery={input => makeAPIRequest({search: input, postTypes: props.postTypes?.join(',')})
+		suggestionQuery={input => requestPostsFromAPI({search: input, postTypes: props.postTypes?.join(',')})
 			.then(posts => posts.map(post => `${post.title} (#${post.id})`))}
-		validationQuery={idsBeingValidated => makeAPIRequest({ids: idsBeingValidated.join(','), postTypes: props.postTypes?.join(',')})
+		validationQuery={idsBeingValidated => requestPostsFromAPI({ids: idsBeingValidated.join(','), postTypes: props.postTypes?.join(',')})
 			.then(posts => posts.map(post => ({value: post.id, title: post.title, status: ValidationState.Valid})))}
 		validValues={validPostIds}
 		validator={token => /\(#([0-9]+)\)$/.exec(token)?.[1] !== undefined}

package/src/controls/LazySuggestionsComboboxControl.tsx

@@ -0,0 +1,84 @@
+import {BaseControl, ComboboxControl, Spinner} from "@wordpress/components";
+import type {ComboboxControlOption, ComboboxControlProps} from "@wordpress/components/build-types/combobox-control/types";
+import {useEffect, useState} from "@wordpress/element";
+import {__} from "@wordpress/i18n";
+
+import debounce from "debounce";
+
+import React from "react";
+
+export type LazySuggestionsComboboxControlProps = Omit<ComboboxControlProps, 'options'> & {
+	getOption(value?: string): Promise<ComboboxControlOption|undefined>;
+	getSuggestions(filterValue: string): Promise<ComboboxControlOption[]>;
+};
+export function LazySuggestionsComboboxControl(props: LazySuggestionsComboboxControlProps) {
+	const [isInitializing, setIsInitializing] = useState(true);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const [suggestions, setSuggestions] = useState<ComboboxControlOption[]>([]);
+
+	const [mySuggestionRequestQueue] = useState<{
+		queue: Promise<boolean>, currentRequest: number, debouncer: (input: string) => void
+	}>(() => ({
+		queue: Promise.resolve(true),
+		currentRequest: 0,
+		debouncer: debounce((input: string) => {
+				setIsLoading(true);
+				const myNumber = ++mySuggestionRequestQueue.currentRequest;
+				mySuggestionRequestQueue.queue = mySuggestionRequestQueue.queue.then(async () => {
+					let suggestions: ComboboxControlOption[];
+					if (input.length < 2) {
+						if (props.value) {
+							const propValue = await props.getOption(props.value);
+							if (propValue) {
+								suggestions = [propValue];
+							} else {
+								suggestions = [];
+							}
+						} else {
+							suggestions = [];
+						}
+					} else {
+						suggestions = await props.getSuggestions(input);
+					}
+					if (myNumber === mySuggestionRequestQueue.currentRequest) {
+						if (props.onFilterValueChange) {
+							props.onFilterValueChange(input);
+						}
+						setSuggestions(suggestions);
+						setIsLoading(false);
+					}
+					return true;
+				});
+		}, 500)
+	}));
+
+	useEffect(() => {
+		if (props.value) {
+			props.getOption(props.value).then(option => {
+				setSuggestions(option ? [option] : []);
+				setIsInitializing(false);
+			}, () => {
+				//TODO: Add a notice for the error
+			});
+		} else {
+			setIsInitializing(false);
+		}
+	}, []);
+
+	if (isInitializing) {
+		return <BaseControl {...props}>
+			<Spinner /><span>{__(`Initializing ${props.label}`)}</span>
+		</BaseControl>
+	}
+
+	return <>
+		<ComboboxControl
+			{...props}
+			options={suggestions}
+			onFilterValueChange={mySuggestionRequestQueue.debouncer}
+			allowReset={props.allowReset !== false}
+		/>
+		{isLoading && <div><Spinner /><span className="components-base-control__help">{__("Updating Suggestions")}</span></div>}
+	</>;
+}

package/src/controls/SortableItemsControl.tsx

@@ -0,0 +1,70 @@
+import {useEffect, useRef, useState} from "@wordpress/element";
+
+import React, {type PropsWithChildren, type ReactNode} from "react";
+import {Button} from "@wordpress/components";
+
+export type SortableItemsControlProps<D> = {
+	value: D[],
+	onChange: (value: D[]) => void,
+	childProducer: (datum: D, props: { onChange: (datum: D) => void, index: number }) => ReactNode,
+	emptyValue: D
+};
+
+export function SortableItemsControl<D>(props: SortableItemsControlProps<D>) {
+	const value = [...props.value];
+	const containerRef = useRef<HTMLDivElement|null>(null);
+	useEffect(() => {
+
+	}, [containerRef]);
+	const [dirtiness, setDirtiness] = useState(0);
+	const makeDirty = () => setDirtiness(dirtiness + 1);
+
+	const onChangeByIndex = (datum: D, index: number) => {
+		value[index] = datum;
+		props.onChange(value);
+		makeDirty();
+	};
+	const moveByIndex = (index: number, direction: -1|1) => {
+		const moved = value.splice(index, 1);
+		value.splice(index + direction, 0, ...moved);
+		makeDirty();
+	};
+	const remove = (index: number) => {
+		value.splice(index, 1);
+		props.onChange(value);
+		makeDirty();
+	}
+	return <div>
+		<div ref={containerRef}>
+			{...props.value.map((datum, index) => <SortableItem index={index} children={makeSortableItemChildren(props, datum, index, onChangeByIndex, remove)}/>)}
+		</div>
+		<div>
+			<Button onClick={() => {
+				value.push(props.emptyValue);
+				makeDirty();
+			}}>
+				Add Row
+			</Button>
+		</div>
+	</div>;
+}
+
+function makeSortableItemChildren<D>(
+	props: SortableItemsControlProps<D>, datum: D, index: number, onChangeByIndex: (datum: D, index: number) => void, remove: (index: number) => void
+) {
+	return props.childProducer(datum, {index, onChange: datum => onChangeByIndex(datum, index)});
+}
+
+function SortableItem(props: PropsWithChildren<{ index: number }>) {
+	return <div data-index={props.index}>
+		<div className="plaudit-sortable-items-drag-handler">
+			//TODO: Make this look pretty
+		</div>
+		<div>
+			{props.children}
+		</div>
+		<div>
+			//TODO: Add a removal button
+		</div>
+	</div>
+}

package/src/controls/index.ts

@@ -1,5 +1,6 @@
 export * from "./AsynchronousFormTokenField";
 export * from "./ExtendedPostPicker";
 export * from "./InspectorPanel";
+export * from "./LazySuggestionsComboboxControl";
 export * from "./SimpleToggle";
 export * from "./PickOne";

package/src/controls/shared.ts

@@ -0,0 +1,7 @@
+import apiFetch from "@wordpress/api-fetch";
+import {addQueryArgs} from "@wordpress/url";
+
+export async function requestPostsFromAPI(data: {search?: string, ids?: string, postTypes?: string|undefined}) {
+	return (await apiFetch<Array<{ id: number, title: string }>>({path: addQueryArgs("/plaudit/common/v1/post-table-search", data)}))
+		.map(item => ({id: item.id.toString(), title: item.title}));
+}