@plaudit/gutenberg-api-extensions 2.79.0 → 2.80.0

package/src/controls/hooks/useTokenManager.ts

@@ -0,0 +1,177 @@
+import {useEffect, useState} from "@wordpress/element";
+
+import {ValidationState} from "../AsynchronousFormTokenField";
+import {isNumeric} from "../shared";
+import type {Dict} from "../types";
+import type {TokenItem} from "../../lib/useful-types";
+import {useNonRenderingCounter} from "./useNonRenderingCounter";
+
+import {useReducer} from "react";
+
+type TokenManagerReturnType = {
+	currentTokens: TokenItem[];
+	dispatchValueUpdate: (value: (((prevState: (string|TokenItem)[]) => (string|TokenItem)[])|(string|TokenItem)[])) => void;
+	hasValidationError: boolean;
+	isInitializing: boolean;
+	isValidating: boolean;
+	tokenTitleMappings: Dict<string>
+};
+
+export function useTokenManager(
+	initialValue: string[], setComponentValue: (value: TokenItem[]) => void, validationQuery: (tokens: string[]) => Promise<TokenItem[]>,
+	stringToTokenConverter: (value: string) => TokenItem
+): TokenManagerReturnType {
+	const [validationRequestId, nextValidationRequestId] = useNonRenderingCounter(initialValue.length ? 0 : 1);
+	const [isValidating, setIsValidating] = useState(false);
+	const [hasValidationError, setHasValidationError] = useState(false);
+
+	const [latestResolvedRequest, dispatchLatestResolvedRequestUpdate] = useReducer<(prev: number, next: number) => number>(Math.max, validationRequestId.current);
+	const [validatedTokens, dispatchValidatedTokensUpdate] = useReducer(performValidationStateDictReductionUpdate, {});
+
+	const [currentValue, setCurrentValue] = useState<(string|TokenItem)[]>(initialValue);
+	const [currentTokens, updateCurrentTokens] = useReducer(currentTokensStateReducer, [],
+		(): TokenItem[] => initialValue.map(value => ({value, status: ValidationState.Validating})));
+	const [tokenTitleMappings, updateTokenTitleMappings] = useReducer(tokenTitleMappingsUpdater, {});
+
+	useEffect(() => {
+		const tokensInNeedOfValidation = currentTokens
+			.filter(token => token.status === ValidationState.Validating)
+			.filter(token => !(token.value in validatedTokens))
+			.map(token => token.value);
+
+		if (tokensInNeedOfValidation.length > 0) {
+			dispatchValidatedTokensUpdate({data: Object.fromEntries(tokensInNeedOfValidation.map(token => [token, ValidationState.Waiting]))});
+		}
+	}, [currentTokens]);
+
+	// I'm splitting out the useEffect call here in order to have one-to-one correspondence between effects and types of state updates
+	useEffect(() => {
+		const tokensInNeedOfValidation = Object.entries(validatedTokens)
+			.filter(([_,v]) => v === ValidationState.Waiting)
+			.map(([token]) => token);
+		if (tokensInNeedOfValidation.length === 0) {
+			return;
+		}
+
+		const myValidationRequestId = nextValidationRequestId();
+		setIsValidating(true);
+		setHasValidationError(false);
+		dispatchValidatedTokensUpdate({data: Object.fromEntries(tokensInNeedOfValidation.map(token => [token, ValidationState.Validating]))});
+
+		let timeoutId: ReturnType<typeof setTimeout>|undefined = setTimeout(() => {
+			timeoutId = undefined;
+			dispatchValidatedTokensUpdate({type: 'rollback', data: Object.fromEntries(tokensInNeedOfValidation.map(token => [token, ValidationState.Waiting]))});
+		}, 60_000);
+		validationQuery(tokensInNeedOfValidation)
+			.then(tokens => {
+				if (timeoutId === undefined) {
+					throw "Timeout";
+				}
+				dispatchValidatedTokensUpdate({
+					data: Object.fromEntries(tokens.map(token => [token.value, token.status === ValidationState.Valid ? ValidationState.Valid : ValidationState.Invalid]))
+				});
+				updateTokenTitleMappings(tokens);
+			})
+			.catch(err => {
+				console.error("Validation Error:", err);
+				setHasValidationError(true);
+				// We retry the validation after 30 seconds
+				setTimeout(() => dispatchValidatedTokensUpdate({
+					type: 'rollback',
+					data: Object.fromEntries(tokensInNeedOfValidation.map(token => [token, ValidationState.Waiting]))
+				}), 30_000);
+			})
+			.finally(() => {
+				clearTimeout(timeoutId);
+				dispatchLatestResolvedRequestUpdate(myValidationRequestId);
+			});
+	}, [validatedTokens]);
+
+	useEffect(() => {
+		updateCurrentTokens(currentValue.map<TokenItem>(token => {
+			if (typeof token === 'string') {
+				token = stringToTokenConverter(token);
+				if (token.status === undefined || token.status === ValidationState.Validating) {
+					const status = validatedTokens[token.value];
+					if (status !== undefined && status !== ValidationState.Waiting) {
+						token.status = status;
+					}
+				}
+			}
+			return token.title === undefined && token.value in tokenTitleMappings ? {...token, title: tokenTitleMappings[token.value]} : token;
+		}));
+	}, [currentValue]);
+
+	// This is split out into a useEffect call in order to take advantage of the Reducer's excess-update-reduction logic.
+	useEffect(() => {
+		updateTokenTitleMappings(currentTokens);
+		if (latestResolvedRequest > (initialValue.length ? 0 : 1)) {
+			setComponentValue(currentTokens);
+		}
+	}, [currentTokens]);
+	useEffect(() => {
+		if (currentTokens.some(token => token.value in tokenTitleMappings && tokenTitleMappings[token.value] !== token.title)) {
+			updateCurrentTokens(currentTokens.map(token => token.title === undefined && token.value in tokenTitleMappings
+				? {...token, title: tokenTitleMappings[token.value]} : token));
+		}
+	}, [tokenTitleMappings]);
+
+	useEffect(() => {
+		const potentiallyUpdatableTokens = currentTokens.map((token): [TokenItem, ValidationState|undefined] => [token, validatedTokens[token.value]]);
+		// A token is worth updating if its status is undefined or validating and its new status is defined and neither waiting nor validating
+		const hasTokenWorthUpdating = potentiallyUpdatableTokens.some(([token, nvs]) => {
+			return (token.status === undefined || token.status === ValidationState.Validating)
+				&& nvs !== undefined && nvs !== ValidationState.Validating && nvs !== ValidationState.Waiting;
+		});
+		if (hasTokenWorthUpdating) {
+			updateCurrentTokens(potentiallyUpdatableTokens.map(([token, status]) => {
+				return !status || status === ValidationState.Waiting ? token : ({...token, status});
+			}));
+		}
+		setIsValidating(latestResolvedRequest < validationRequestId.current);
+	}, [latestResolvedRequest]);
+
+	return {currentTokens, dispatchValueUpdate: setCurrentValue, hasValidationError, isInitializing: latestResolvedRequest === 0, isValidating, tokenTitleMappings};
+}
+
+type ValidationStateDictReductionUpdateAction = {type?: 'update'|'rollback', data: Dict<ValidationState>};
+function performValidationStateDictReductionUpdate(prevState: Dict<ValidationState>, action: ValidationStateDictReductionUpdateAction): Dict<ValidationState> {
+	switch (action.type) {
+		case 'rollback':
+			return {...prevState, ...action.data};
+		default:
+			return {
+				...prevState, ...Object.fromEntries(Object.entries(action.data)
+					.filter(([token, validationState]) => validationState !== ValidationState.Waiting || !(token in prevState)))
+			};
+	}
+}
+function currentTokensStateReducer(currentTokens: TokenItem[], newTokens: TokenItem[]): TokenItem[] {
+	if (newTokens.length !== currentTokens.length) {
+		return newTokens;
+	}
+	for (let i = 0; i < newTokens.length; i++) {
+		if (currentTokens[i]!.value !== newTokens[i]!.value || currentTokens[i]!.status !== newTokens[i]!.status || currentTokens[i]!.title !== newTokens[i]!.title) {
+			return newTokens;
+		}
+	}
+	return currentTokens;
+}
+function tokenTitleMappingsUpdater(state: Dict<string>, tokens: TokenItem[]): Dict<string> {
+	const titleWithIdRegex = /(.*)\(#([^)]+)\)$/;
+	const novelTokens = tokens
+		.map<[string, string|undefined]>(token => [token.value, token.title])
+		.filter((token): token is [string, string] => token[1] !== undefined && !isNumeric(token[1]))
+		.map<[string, string]>(token => {
+			const res = titleWithIdRegex.exec(token[1]);
+			return res && res[1] && res[1].trim().length < 30 ? token : [token[0], labelToDisplayableTitle(res?.[1] ?? token[1], res?.[2] ?? token[0])];
+		})
+		.filter(token => state[token[0]] !== token[1]);
+	if (novelTokens.length === 0) {
+		return state;
+	}
+	return {...state, ...Object.fromEntries(novelTokens)};
+}
+function labelToDisplayableTitle(label: string, id: string): string {
+	return `${label.length > 30 ? `${label.substring(0, 30).trim()}…` : label.trim()} (#${id})`;
+}

package/{build/controls/index.js → src/controls/index.ts}

@@ -1,4 +1,4 @@
-export { AsynchronousFormTokenField } from "./AsynchronousFormTokenField";
+export {AsynchronousFormTokenField} from "./AsynchronousFormTokenField";
 export * from "./BaseSortableItemsControl";
 export * from "./ExtendedFormTokenField";
 export * from "./ExtendedPostPicker";
@@ -18,5 +18,6 @@ export * from "./ProperLinkControl";
 export * from "./SimpleToggle";
 export * from "./SortableFlexibleItemsControl";
 export * from "./SortableItemsControl";
+
 export { requestPostsFromAPI } from "./shared";
-//# sourceMappingURL=index.js.map
+export type * from "./types";

package/src/controls/shared.ts

@@ -0,0 +1,50 @@
+import apiFetch from "@wordpress/api-fetch";
+import {addQueryArgs} from "@wordpress/url";
+
+import type {ObjectNormalizedPickableOptions, PairNormalizedPickableOptions, PickableOptions} from "./types";
+
+export async function requestPostsFromAPI(data: {search?: string, ids?: string, postTypes?: string|undefined}) {
+	return (await apiFetch<Array<{ id: number, title: string, type: string }>>({path: addQueryArgs("/plaudit/common/v1/post-table-search", data)}))
+		.map(item => ({id: item.id.toString(), title: item.title, type: item.type}));
+}
+
+export function normalizePickableOptionsToObjects<V extends string|number, T extends Omit<object, 'text'|'value'> = {}>(
+	options: PickableOptions<V, T>
+): ObjectNormalizedPickableOptions<V, T> {
+	return options.map(option => {
+		if (Array.isArray(option)) {
+			if (typeof option[1] === 'string') {
+				return {value: option[0], label: option[1]} as ObjectNormalizedPickableOptions<V, T>[number];
+			}
+			const {text, ...rest} = option[1];
+			return {value: option[0], label: text, ...rest} as unknown as ObjectNormalizedPickableOptions<V, T>[number];
+		}
+		return option;
+	});
+}
+export function normalizePickableOptionsToPairs<V extends string|number, T extends Omit<object, 'text'|'value'|'tooltip'> = {}>(
+	options: PickableOptions<V, T>
+): PairNormalizedPickableOptions<V, T> {
+	return options.map(option => {
+		if (isPairPickableOption<V, T>(option)) {
+			return option;
+		}
+		const {value, label, ...rest} = option;
+		return [value, {text: label, ...rest}] as unknown as PairNormalizedPickableOptions<V, T>[number];
+	});
+}
+export function getLabel(option: PickableOptions<any>[number]): string {
+	return Array.isArray(option) ? (typeof option[1] === 'string' ? option[1] : option[1].text) : (option.label ?? option.value.toString());
+}
+
+function isPairPickableOption<V extends string|number, T extends Omit<object, 'text'|'value'|'tooltip'> = {}>(
+	option: PickableOptions<V, T>[number]
+): option is PairNormalizedPickableOptions<V, T>[number] {
+	return Array.isArray(option) && option.length === 2;
+}
+
+export function isNumeric(str: string|number) {
+	if (typeof str !== "string") return true; // we only process strings!
+	return !isNaN(str as any) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+		!isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
+}

package/src/controls/types.ts

@@ -0,0 +1,18 @@
+import type {BlockEditProps} from "@wordpress/blocks";
+
+export type SpecificValueBlockProps<T extends string, V> = {
+	attribute: T, attributes: BlockEditProps<Record<T, V>&Record<string, unknown>>['attributes'],
+	setAttributes: BlockEditProps<any>['setAttributes']
+}
+export type SimpleBlockControlProps<T extends string, V> = SpecificValueBlockProps<T, V>&{
+	label: string,
+	help?: string
+};
+
+export type PairNormalizedPickableOptions<V extends string|number, T extends Omit<object, 'text'|'value'|'tooltip'> = {}> = Array<[V, string|({text: string, tooltip?: string|undefined}&T)]>;
+export type ObjectNormalizedPickableOptions<V extends string|number, T extends Omit<object, 'text'|'value'|'tooltip'> = {}> = Array<{value: V, label?: string|undefined, tooltip?: string|undefined}&T>;
+export type PickableOptions<V extends string|number, T extends Omit<object, 'text'|'value'|'tooltip'> = {}> = Array<PairNormalizedPickableOptions<V, T>[number]|ObjectNormalizedPickableOptions<V, T>[number]>;
+
+export type Dict<V> = {[key: string]: V};
+
+export type FlexibleItem<T extends string = string> = {type: T}&{[key: Exclude<string, 'type'>]: unknown};

package/src/editor/post-featured-image.tsx

@@ -0,0 +1,161 @@
+import {Button, FocalPointPicker, Spinner} from "@wordpress/components";
+import type {Attachment} from "@wordpress/core-data";
+import {dispatch, select, useSelect} from "@wordpress/data";
+import {PostFeaturedImageCheck, store as editorStore} from "@wordpress/editor";
+import {memo, useCallback, useEffect, useMemo, useState} from "@wordpress/element";
+import {addFilter, applyFilters} from "@wordpress/hooks";
+import {__} from "@wordpress/i18n";
+
+import type {ComponentType} from "react";
+
+type MediaDetailsArgs = Omit<Attachment, 'media_details'>&{media_details: Record<string, any>};
+function getMediaDetails(media: MediaDetailsArgs, postId: any) {
+	if (!media) {
+		return {};
+	}
+
+	const sizes = (media?.media_details?.['sizes'] ?? {}) as Record<string, {width: any, height: any, source_url: string}>;
+
+	const activeSize = sizes[getImageSize('large', media, postId)];
+	if (activeSize !== undefined) {
+		return {
+			mediaWidth: activeSize.width,
+			mediaHeight: activeSize.height,
+			mediaSourceUrl: activeSize.source_url,
+		};
+	}
+
+	// Use fallbackSize when defaultSize is not available.
+	const fallbackSize = sizes[getImageSize('thumbnail', media, postId)];
+	if (fallbackSize !== undefined) {
+		return {
+			mediaWidth: fallbackSize.width,
+			mediaHeight: fallbackSize.height,
+			mediaSourceUrl: fallbackSize.source_url,
+		};
+	}
+
+	// Use full image size when fallbackSize and defaultSize are not available.
+	return {
+		mediaWidth: media.media_details['width'],
+		mediaHeight: media.media_details['height'],
+		mediaSourceUrl: media.source_url,
+	};
+}
+
+type Position = {x: number, y: number};
+function getLivePosition(selectFunction = select): Position {
+	const {x = 50, y = 50} = (selectFunction(editorStore).getEditedPostAttribute('meta')?.["plaudit_card-image_pos"] ?? {}) as Record<string, any>;
+	return {x: x / 100, y: y / 100};
+}
+function setLivePosition({x, y}: Position) {
+	dispatch(editorStore)
+		.editPost({
+			meta: {"plaudit_card-image_pos": {x: Math.round(x * 100), y: Math.round(y * 100)}}
+		})
+		.catch(e => {
+			console.error(e);
+		});
+}
+
+function getRawLivePosition() {
+	return {x: 50, y: 50, ...((select(editorStore).getEditedPostAttribute('meta')?.["plaudit_card-image_pos"] ?? {}) as Partial<Position>)};
+}
+
+function getImageSize(defaultSize: string, media: MediaDetailsArgs, postId: any): string {
+	let filteredSize = applyFilters('editor.PostFeaturedImage.imageSize', defaultSize, media.id, postId);
+	if (typeof filteredSize !== 'string') {
+		console.error(`The 'editor.PostFeaturedImage.imageSize' filter returned a non-string size (${filteredSize}).`, `Using '${defaultSize}' as a fallback.`);
+		return defaultSize;
+	}
+	return filteredSize;
+}
+
+function wrapPostFeaturedImage(OriginalComponent: ComponentType) {
+	return (props: Record<string, any>) => {
+		const [inFocusMode, setInFocusMode] = useState(false);
+		// This useMemo call makes it so that we only update restorablePosition when the state changes.
+		const restorablePosition = useMemo(getLivePosition, [inFocusMode]);
+
+		const {mediaSourceUrl} = getMediaDetails(props.media, props.currentPostId);
+
+		if (!mediaSourceUrl) {
+			if (select(editorStore).getEditedPostAttribute('featured_media')) {
+				return <Spinner/>;
+			}
+			return <OriginalComponent {...props} />;
+		} else if (!inFocusMode) {
+			return <NotInFocusMode OriginalComponent={OriginalComponent} props={props} setInFocusMode={setInFocusMode} />;
+		}
+		return <InFocusMode mediaSourceUrl={mediaSourceUrl} props={props} restorablePosition={restorablePosition} setInFocusMode={setInFocusMode} />;
+	};
+}
+
+type NotInFocusModeProps = {OriginalComponent: ComponentType, props: Record<string, any>, setInFocusMode(value: boolean): void};
+const NotInFocusMode = memo(({OriginalComponent, props, setInFocusMode}: NotInFocusModeProps) => {
+	const {x, y} = getRawLivePosition();
+	useEffect(() => {
+		let sheet = document.adoptedStyleSheets.find(s => (s as any).identifier === '__POST_FEATURED_IMAGE__');
+		if (!sheet) {
+			sheet = new CSSStyleSheet();
+			(sheet as any).identifier = '__POST_FEATURED_IMAGE__';
+		}
+		sheet.replace(`.plauditPostFeaturedImageWithFocalPoint__wrapper .editor-post-featured-image__preview-image {object-fit: ${x}% ${y}% !important;}`)
+			.catch(e => {
+				console.error(e);
+			});
+		return () => {
+			const sheet = document.adoptedStyleSheets.findIndex(s => (s as any).identifier === '__POST_FEATURED_IMAGE__');
+			if (sheet) {
+				document.adoptedStyleSheets.splice(sheet, 1);
+			}
+		};
+	}, [x, y]);
+	return <PostFeaturedImageCheck>
+		<div className="plauditPostFeaturedImageWithFocalPoint__wrapper">
+			<div className="plauditPostFeaturedImageWithFocalPoint__toggle">
+				<Button onClick={useCallback(() => setInFocusMode(true), [setInFocusMode])} className="editor-post-featured-image__action" text={__("Change Focal Point", 'plaudit')} />
+			</div>
+			<OriginalComponent {...props} />
+		</div>
+	</PostFeaturedImageCheck>;
+});
+
+type InFocusModeProps = {mediaSourceUrl: string, props: Record<string, any>, restorablePosition: Position, setInFocusMode(value: boolean): void};
+const InFocusMode = memo(({mediaSourceUrl, props, restorablePosition, setInFocusMode}: InFocusModeProps) => {
+	// This assembly makes it so that we both get updates if something else triggers a position change while making the focus picker doesn't reset itself
+	const {x, y} = useSelect(selectFunction => getLivePosition(selectFunction as typeof select), []);
+	const [position, setPosition] = useState({x, y});
+	useEffect(() => setPosition(getLivePosition()), [x, y]);
+
+	return <PostFeaturedImageCheck>
+		{props.noticeUI}
+		<div className="editor-post-featured-image">
+			<FocalPointPicker
+				onChange={useCallback(pos => {
+					setPosition(pos);
+					setLivePosition(pos);
+				}, [setPosition])}
+				url={mediaSourceUrl}
+				value={position}
+			/>
+			<div>
+				<Button text={__("Done", 'plaudit')} onClick={useCallback(() => setInFocusMode(false), [setInFocusMode])} variant="primary" />
+				<Button text={__('Cancel', 'plaudit')} onClick={useCallback(() => {
+					setLivePosition(restorablePosition);
+					setInFocusMode(false);
+				}, [setInFocusMode])} isDestructive />
+			</div>
+		</div>
+	</PostFeaturedImageCheck>;
+})
+
+export function installPostFeaturedImageCardFocusTargeting() {
+	if (!installPostFeaturedImageCardFocusTargeting.called) {
+		installPostFeaturedImageCardFocusTargeting.called = true;
+		addFilter('editor.PostFeaturedImage', 'plaudit-gutenberg-api-extensions/inject-post-featured-image-card-focus-targeting', wrapPostFeaturedImage);
+	}
+}
+export namespace installPostFeaturedImageCardFocusTargeting {
+	export let called: boolean = false;
+}

package/src/editor/simple-gutenberg-endpoints-api.ts

@@ -0,0 +1,31 @@
+import apiFetch from "@wordpress/api-fetch";
+import {dispatch, useSuspenseSelect} from "@wordpress/data";
+
+import {installSimpleGutenbergApisSupport, store as endpointsStore} from "../editor/simple-gutenberg-endpoints-impl";
+
+export type ApiCallArgs = [string, any][]|Record<string, any>|URLSearchParams|string|undefined;
+export function registerSimpleGutenbergApiEndpoint<T>(
+	name: string, endpoint: ((args: ApiCallArgs, key: string) => Promise<T>)|Parameters<typeof apiFetch<T>>[0],
+	options?: {transformer?: (response: Awaited<T>, args: ApiCallArgs, key: string) => unknown, maxCachedResults?: number}
+): void {
+	installSimpleGutenbergApisSupport();
+	dispatch(endpointsStore).registerEndpoint(name, endpoint, options);
+}
+
+/**
+ * @param name the name of the endpoint
+ * @param args MUST be a value derived from useDeferredValue()
+ * @param config shared configuration logic
+ */
+export function useEndpointResolver<R>(
+	name: string, args: ApiCallArgs, config: {immediateReturnOnEmpty?: boolean, dependencies?: readonly unknown[]} = {}
+) {
+	const {immediateReturnOnEmpty = true, dependencies = []} = config;
+	return useSuspenseSelect(select => {
+		if (!args && immediateReturnOnEmpty) {
+			return undefined;
+		}
+		const selector = select(endpointsStore);
+		return selector.get(name, args) as R|undefined;
+	}, [args, immediateReturnOnEmpty, ...dependencies]);
+}

package/src/editor/simple-gutenberg-endpoints-impl.ts

@@ -0,0 +1,119 @@
+import apiFetch from "@wordpress/api-fetch";
+import {type createReduxStore, register} from "@wordpress/data";
+import {applyFilters} from "@wordpress/hooks";
+
+import {clone, TemporalLRUCache} from "../lib/helpers";
+import {use, useImmediately, useToPromise, type WrappedPromise, wrapPromise} from "../lib/suspense/promise-handlers";
+import type {ApiCallArgs} from "./simple-gutenberg-endpoints-api";
+
+type ResponseCacheEntry = {args: ApiCallArgs, promise: WrappedPromise<unknown>};
+
+type EndpointOptions<P, R> = {transformer?: (response: P, args: ApiCallArgs, name: string) => R, maxCachedResults?: number};
+type ApiEndpointConfig<T> = {
+	endpoint: ((args: ApiCallArgs, name: string) => Promise<T>)|Parameters<typeof apiFetch<T, boolean>>[0],
+	responseCache: TemporalLRUCache<string, ResponseCacheEntry>
+}&ApiEndpointOptions<T>;
+export type ApiEndpointOptions<T> = {transformer?: (response: Awaited<T>, args: ApiCallArgs, name: string) => unknown, maxCachedResults?: number};
+
+function argsToKey(args: ApiCallArgs) {
+	return args instanceof URLSearchParams || typeof args !== 'object' ? args?.toString() ?? "" : JSON.stringify(args);
+}
+
+export function installSimpleGutenbergApisSupport() {
+	if (!installSimpleGutenbergApisSupport.called) {
+		installSimpleGutenbergApisSupport.called = true;
+		register(store);
+	}
+}
+export namespace installSimpleGutenbergApisSupport {
+	export let called: boolean = false;
+}
+
+type Selectors = {
+	get(name: string, args?: ApiCallArgs): unknown,
+	resolve(name: string, args?: ApiCallArgs): Promise<unknown>
+};
+type Actions = {
+	registerEndpoint(
+		name: string, endpoint: ((args: ApiCallArgs, name: string) => Promise<unknown>)|Parameters<typeof apiFetch>[0],
+		options?: EndpointOptions<any, unknown>
+	): void
+};
+type AddBSStateArg<S extends {[name in string]: (...args: any[]) => any}> = {[name in keyof S]: (state: any, ...args: Parameters<S[name]>) => ReturnType<S[name]>};
+export const store: ReturnType<typeof createReduxStore<{}, Actions, AddBSStateArg<Selectors>>> = {
+	name: 'plaudit/simple-gutenberg-apis',
+	instantiate: () => {
+		const listeners = new Set<() => void>();
+		const endpoints: {[name in string]: ApiEndpointConfig<any>} = {};
+
+		function storeChanged() {
+			for (const listener of listeners) {
+				listener();
+			}
+		}
+
+		function handleCacheMiss(name: string, args?: ApiCallArgs) {
+			const endpoint = endpoints[name];
+			if (!endpoint) {
+				throw new Error(`Attempted to fetch data from an unmapped endpoint: ${name}`);
+			}
+			const key = argsToKey(args);
+			const existingPromise = endpoint.responseCache.get(key)?.promise;
+			if (existingPromise) {
+				return existingPromise;
+			}
+			const res = wrapPromise(
+				(typeof endpoint.endpoint === 'function' ? endpoint.endpoint(args, name) : apiFetch(endpoint.endpoint))
+					.then(rawResponse => {
+						return applyFilters(`plaudit-common.simple-gutenberg-apis.endpoint.${name}.response`,
+							endpoint.transformer?.(rawResponse, args, name) ?? rawResponse, args, name);
+					})
+			);
+			res.finally(() => storeChanged());
+			endpoint.responseCache.set(key, {args, promise: res});
+			return res;
+		}
+
+		const actions: Actions = {
+			registerEndpoint(name, endpoint, options?) {
+				if (endpoints[name]?.responseCache instanceof TemporalLRUCache) {
+					endpoints[name].responseCache.cancelTimeout();
+				}
+				endpoints[name] = {
+					endpoint: clone(endpoint),
+					...options,
+					responseCache: new TemporalLRUCache(options?.maxCachedResults ?? Number.MAX_SAFE_INTEGER)
+				};
+				storeChanged();
+			}
+		};
+
+		const selectors: Selectors = {
+			get(name, args?) {
+				return useImmediately(handleCacheMiss(name, args));
+			},
+			resolve(name, args?) {
+				return handleCacheMiss(name, args);
+			}
+		};
+		const suspendSelectors: Selectors = {
+			get(name, args?) {
+				return use(handleCacheMiss(name, args));
+			},
+			resolve(name, args?) {
+				return useToPromise(handleCacheMiss(name, args));
+			}
+		};
+
+		// noinspection JSUnusedGlobalSymbols
+		return {
+			getSelectors: () => selectors,
+			getSuspendSelectors: () => suspendSelectors, // This adds support for useSuspenseSelect. WordPress' typedefs are incomplete.
+			getActions: (): any => actions, // This is correctly typed, but WordPress' typedefs are broken.
+			subscribe: (listener: () => void) => {
+				listeners.add(listener);
+				return () => listeners.delete(listener);
+			}
+		};
+	}
+};

package/src/index.ts

@@ -0,0 +1,32 @@
+import {installSimpleNativePropertiesSupport} from "./blocks/simple-native-property-impl";
+import {installPostFeaturedImageCardFocusTargeting} from "./editor/post-featured-image";
+import {installSimpleGutenbergApisSupport, type store as endpointStore} from "./editor/simple-gutenberg-endpoints-impl";
+import {registerStore, type store as apiStore} from "./lib/gutenberg-api-extensions-state";
+
+export * from "./blocks";
+export * from "./controls";
+export * from "./editor/simple-gutenberg-endpoints-api";
+export * from "./lib/plaudit-icons";
+export * from "./lib/suspense";
+export type * from "./lib/useful-types";
+
+export function installGutenbergExtensions() {
+	if (!installGutenbergExtensions.called) {
+		installGutenbergExtensions.called = true;
+		registerStore();
+		installSimpleNativePropertiesSupport();
+		installPostFeaturedImageCardFocusTargeting();
+		installSimpleGutenbergApisSupport();
+	}
+}
+export namespace installGutenbergExtensions {
+	export let called: boolean = false;
+}
+
+declare module "@wordpress/data" {
+	function select(key: 'plaudit/gutenberg-api-extensions'): ReturnType<typeof select<typeof apiStore>>;
+	function dispatch(key: 'plaudit/gutenberg-api-extensions'): ReturnType<typeof dispatch<typeof apiStore>>;
+
+	function select(key: 'plaudit/simple-gutenberg-apis'): ReturnType<typeof select<typeof endpointStore>>;
+	function dispatch(key: 'plaudit/simple-gutenberg-apis'): ReturnType<typeof dispatch<typeof endpointStore>>;
+}

package/src/lib/gutenberg-api-extensions-state/custom-block-bindings-support-logic.ts

@@ -0,0 +1,34 @@
+import {registerBlockBindingsSource} from "@wordpress/blocks";
+
+import type {DbSource} from "../../blocks";
+import type {WordPressMetaActions} from "../useful-types";
+import {produce} from "immer";
+
+export type CustomBlockBindingsSupportLogicActions = {type: 'ADD_CUSTOM_BLOCK_BINDINGS_SOURCE', name: string, value: {dbSources?: DbSource[]}};
+export type CustomBlockBindingsSupportLogicState = {
+	customBlockBindingsSupport: {[name in string]?: {dbSources?: DbSource[]}}
+};
+
+export const customBlockBindingsSupportLogicActions = {
+	registerCustomBlockBindingsSource(args: Parameters<typeof registerBlockBindingsSource>[0]&{dbSources?: DbSource[]}) {
+		const {dbSources, ...actualArgs} = args;
+		registerBlockBindingsSource('getValue' in actualArgs ? actualArgs : {...actualArgs, getValue: () => ({})});
+		return {type: 'ADD_CUSTOM_BLOCK_BINDINGS_SOURCE', name: actualArgs.name, value: {dbSources}};
+	}
+};
+export const customBlockBindingsSupportLogicSelectors = {
+	customBlockBindingsSource(state: CustomBlockBindingsSupportLogicState, name: string) {
+		return state.customBlockBindingsSupport[name];
+	}
+};
+
+export function customBlockBindingsSupportLogic(
+	state: CustomBlockBindingsSupportLogicState, action: CustomBlockBindingsSupportLogicActions|WordPressMetaActions
+): typeof state {
+	if (action.type === "ADD_CUSTOM_BLOCK_BINDINGS_SOURCE") {
+		return produce(state, (draft: typeof state) => {
+			draft.customBlockBindingsSupport[action.name] = action.value;
+		});
+	}
+	return state;
+}