@plaudit/gutenberg-api-extensions 2.88.0 → 2.90.0

package/src/controls/FullSizeToggleControl.tsx

@@ -77,6 +77,7 @@ export const ToggleGroupControlOptionWithOptionalIcon
 });
 
 function i18nSwitchLabel(label: NonNullable<OptionalLabel>): typeof label {
+	// eslint-disable-next-line @wordpress/i18n-no-variables -- There's nothing we can do about this - it's a requirement for being able to pass arbitrary labels
 	return typeof label === 'string' ? __(label) : {...label, text: __(label.text)};
 }
 

package/src/controls/ImageControl.tsx

@@ -27,7 +27,7 @@ export function ImageControl(props: ImageControlProps) {
 
 	const media = useSelect(select => value?.media?.id ? select(coreStore).getMedia(value.media.id) : undefined, [value]);
 	const {baseControlProps, controlProps} = useBaseControlProps({label: Label ? <Label /> : label, help});
-	return <BaseControl {...baseControlProps}>
+	return <BaseControl {...baseControlProps} __nextHasNoMarginBottom>
 		<div {...controlProps} className="editor-post-featured-image">
 			{media
 				? <ImageControlWithUploadedImage {...props} media={media} />
@@ -52,7 +52,7 @@ function ImageControlWithUploadedImage(props: ImageControlProps&{media: Attachme
 	const {includeFocalPointPicker, media, storage, onChange, value} = props;
 	const onFPPChange = useCallback((pos: FocalPoint) => onChange(mergeInUpdatedValuePart(value, 'pos', {x: pos.x * 100, y: pos.y * 100}, storage)), [onChange, value]);
 	const onSelect = useCallback((media: {id: number}&{[k: string]: any}) => onChange(mergeInUpdatedValuePart(value, 'media', media, storage)), [onChange, value]);
-	const renderOpenButton = useCallback(({open}: {open(): void}) => <Button onClick={open} variant="secondary">{__('Replace image', 'plaudit')}</Button>, []);
+	const renderOpenButton = useCallback(({open}: {open(): void}) => <Button onClick={open} variant="secondary" __next40pxDefaultSize>{__('Replace image', 'plaudit')}</Button>, []);
 	const clear = useCallback(() => onChange(undefined), [onChange]);
 
 	const fppValue = useMemo(() => ({
@@ -66,6 +66,7 @@ function ImageControlWithUploadedImage(props: ImageControlProps&{media: Attachme
 			onChange={onFPPChange}
 			url={value?.media?.url ?? ''}
 			value={fppValue}
+			__nextHasNoMarginBottom
 		/>;
 	} else {
 		fppOrMedia = <ResponsiveWrapper
@@ -85,7 +86,7 @@ function ImageControlWithUploadedImage(props: ImageControlProps&{media: Attachme
 				allowedTypes={ALLOWED_TYPES}
 				render={renderOpenButton}
 			/>
-			<Button onClick={clear} isDestructive>{__('Remove image', 'plaudit')}</Button>
+			<Button onClick={clear} isDestructive  __next40pxDefaultSize>{__('Remove image', 'plaudit')}</Button>
 		</MediaUploadCheck>
 	</>;
 }
@@ -94,8 +95,7 @@ function ImageControlWithoutUploadedImage(props: ImageControlProps&{media: Attac
 	const onSelect = useCallback((media: {id: number}&{[k: string]: any}) => onChange(mergeInUpdatedValuePart(value, 'media', media, storage)), [onChange, value]);
 	const renderOpenButton = useCallback(({open}: {open(): void}) => (
 		<Button
-			className={!value?.media?.id ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview'}
-			onClick={open}
+			className={value?.media?.id ? 'editor-post-featured-image__preview' : 'editor-post-featured-image__toggle'} onClick={open} __next40pxDefaultSize
 		>
 			{!value?.media?.id && __('Choose an image', 'plaudit')}
 			{media &&

package/src/controls/LazySuggestionsComboboxControl.tsx

@@ -1,10 +1,10 @@
 import {BaseControl, ComboboxControl, Spinner} from "@wordpress/components";
 import {useCallback, useMemo, useState} from "@wordpress/element";
-import {__} from "@wordpress/i18n";
+import {__, sprintf} from "@wordpress/i18n";
 
 import {useSuggestions} from "./hooks/useSuggestions";
 
-import type {ComponentProps} from "react";
+import type {ComponentProps, FocusEvent} from "react";
 
 type ComboboxControlProps = ComponentProps<typeof ComboboxControl>;
 type ComboboxControlOption = ComboboxControlProps['options'][number];
@@ -24,8 +24,8 @@ export function LazySuggestionsComboboxControl(props: LazySuggestionsComboboxCon
 		() => hasFocus && input.length < 2 || (isLoading && !suggestions.length) ? [{label: input, value: "", disabled: true}] : suggestions,
 		[hasFocus, input, isLoading, suggestions]);
 
-	const onFocus = useCallback((e: React.FocusEvent<HTMLElement>) => setHasFocus(e.currentTarget.contains(e.target)), [setHasFocus]);
-	const onBlur = useCallback((e: React.FocusEvent<HTMLElement>) => setHasFocus(e.currentTarget.contains(e.relatedTarget)), [setHasFocus]);
+	const onFocus = useCallback((e: FocusEvent<HTMLElement>) => setHasFocus(e.currentTarget.contains(e.target)), [setHasFocus]);
+	const onBlur = useCallback((e: FocusEvent<HTMLElement>) => setHasFocus(e.currentTarget.contains(e.relatedTarget)), [setHasFocus]);
 
 	const onFilterValueChange = useCallback((value: string) => {
 		if (props.onFilterValueChange) {
@@ -35,13 +35,13 @@ export function LazySuggestionsComboboxControl(props: LazySuggestionsComboboxCon
 	}, [props.onFilterValueChange, setInput]);
 
 	const __experimentalRenderItem = useMemo(() => {
-		return hasFocus && input.length < 2 ? () => __("Start typing to see suggestions")
-			: (isLoading && !suggestions.length ? () => __("Loading suggestions") : undefined);
+		return hasFocus && input.length < 2 ? () => __("Start typing to see suggestions", 'plaudit')
+			: (isLoading && !suggestions.length ? () => __("Loading suggestions", 'plaudit') : undefined);
 	}, [hasFocus, input, isLoading, suggestions])
 
 	if (isInitializing) {
-		return <BaseControl {...props}>
-			<Spinner /><span>{__(`Initializing ${props.label}`)}</span>
+		return <BaseControl {...props} __nextHasNoMarginBottom>
+			<Spinner /><span>{/* translators: %s is replaced with the label of the property */ sprintf(__("Initializing %s", 'plaudit'), props.label)}</span>
 		</BaseControl>
 	}
 
@@ -56,7 +56,9 @@ export function LazySuggestionsComboboxControl(props: LazySuggestionsComboboxCon
 			onFilterValueChange={onFilterValueChange}
 			__experimentalRenderItem={__experimentalRenderItem}
 			allowReset={allowReset !== false}
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 		/>
-		{hasLoadingError && <div><span className="components-base-control__help">{__("An error occurred while updating suggestions")}</span></div>}
+		{hasLoadingError && <div><span className="components-base-control__help">{__("An error occurred while updating suggestions", 'plaudit')}</span></div>}
 	</div>;
 }

package/src/controls/PickOne.tsx

@@ -42,6 +42,7 @@ export function PickOneFromSelect<T extends string>(props: SimpleBlockControlPro
 	return <SelectControl
 		{...makeSharedRadioAndSelectProps(props)}
 		value={props.attributes[props.attribute]}
+		__next40pxDefaultSize __nextHasNoMarginBottom
 	/>;
 }
 export function PickOneFromRadios<T extends string>(props: SimpleBlockControlProps<T, string>& { options: PickableOptions<string> }) {
@@ -71,7 +72,7 @@ export function PickOneFromColors<T extends string>(props: SimpleBlockControlPro
 
 	const currentColor = valueToColorMap.get(props.attributes[props.attribute]) ?? props.attributes[props.attribute];
 	const {baseControlProps, controlProps} = useBaseControlProps({label: props.label, help: props.help});
-	return <BaseControl {...baseControlProps}>
+	return <BaseControl {...baseControlProps} __nextHasNoMarginBottom>
 		<ColorPalette
 			{...controlProps}
 			disableCustomColors={true}

package/src/controls/ProperLinkControl.tsx

@@ -52,15 +52,17 @@ export function ProperLinkControl(props: ProperLinkControlProps) {
 
 	const renderableSettings = settings === false ? [] : settings;
 	const renderControlBottom = useCallback(() => (value?.url && renderableSettings?.length && <>
-		<Button variant="tertiary" onClick={() => setAreAdvancedSettingsVisible(!areAdvancedSettingsVisible)}
-		        icon={areAdvancedSettingsVisible ? chevronUp : chevronDown} iconPosition="right" text="Advanced"
+		<Button
+			variant="tertiary" onClick={() => setAreAdvancedSettingsVisible(!areAdvancedSettingsVisible)}
+			icon={areAdvancedSettingsVisible ? chevronUp : chevronDown} iconPosition="right" text="Advanced"
+			__next40pxDefaultSize accessibleWhenDisabled
 		/>
 		<div ref={advancedSettingsRef} style={{display: "none", transition: "max-height 200ms ease-in-out", overflow: "hidden"}}>
-			{...renderableSettings.map(setting => <ProperLinkControlSetting setting={setting} onChange={onChange} value={value} />)}
+			{...renderableSettings.map(setting => <ProperLinkControlSetting key={setting.id} setting={setting} onChange={onChange} value={value} />)}
 		</div>
 	</>) || "", [value, settings, areAdvancedSettingsVisible, onChange]);
 
-	return <BaseControl id="" label={props.label} help={props.help}>
+	return <BaseControl __nextHasNoMarginBottom id="" label={props.label} help={props.help}>
 		<LinkControl
 			{...linkControlProps}
 			value={value}
@@ -84,8 +86,11 @@ type ProperLinkControlSettingProps = {value?: LinkControl.Value, onChange?: (nex
 function ProperLinkControlSetting({value, onChange, setting}: ProperLinkControlSettingProps) {
 	return <div style={{marginTop: "8px"}}>
 		{setting.type === 'text'
-			? <TextControl style={{marginTop: "8px"}} value={value?.[setting.id] ?? setting.default ?? ''} label={setting.title}
-			               onChange={v => onChange?.({...value, [setting.id]: v})} />
+			? <TextControl
+				style={{marginTop: "8px"}} value={value?.[setting.id] ?? setting.default ?? ''} label={setting.title}
+			    onChange={v => onChange?.({...value, [setting.id]: v})}
+				__next40pxDefaultSize __nextHasNoMarginBottom
+			/>
 			: <ToggleControl style={{marginTop: "8px"}} checked={value?.[setting.id] ?? setting.default ?? false} label={setting.title}
 			                 onChange={v => onChange?.({...value, [setting.id]: v})} />
 		}

package/src/controls/SimpleToggle.tsx

@@ -5,5 +5,5 @@ import type {SimpleBlockControlProps} from "./types";
 
 export function SimpleToggle<T extends string>(props: SimpleBlockControlProps<T, boolean>) {
 	const onChange = useCallback((checked: boolean) => props.setAttributes({[props.attribute]: checked}), [props.setAttributes, props.attribute]);
-	return <ToggleControl checked={props.attributes[props.attribute]} label={props.label} onChange={onChange} />;
+	return <ToggleControl __nextHasNoMarginBottom checked={props.attributes[props.attribute]} label={props.label} onChange={onChange} />;
 }

package/src/controls/SortableFlexibleItemsControl.tsx

@@ -11,8 +11,8 @@ type SortableFlexibleItemsControlSpecificProps<T extends string> = {
 	availableTypes: NonEmptyArray<{label: string, value: T}>,
 	emptyValueBuilder: (type: T) => FlexibleItem<T>
 };
-export type SortableFlexibleItemsControl<T extends string> = Omit<BaseSortableItemsControlProps<FlexibleItem<T>>, 'buttonsArea'>&SortableFlexibleItemsControlSpecificProps<T>;
-export function SortableFlexibleItemsControl<T extends string>({availableTypes, emptyValueBuilder, ...baseProps}: SortableFlexibleItemsControl<T>) {
+export type SortableFlexibleItemsControlProps<T extends string> = Omit<BaseSortableItemsControlProps<FlexibleItem<T>>, 'buttonsArea'>&SortableFlexibleItemsControlSpecificProps<T>;
+export function SortableFlexibleItemsControl<T extends string>({availableTypes, emptyValueBuilder, ...baseProps}: SortableFlexibleItemsControlProps<T>) {
 	const buttonsArea = useCallback<BaseSortableItemsControlProps<FlexibleItem<T>>['buttonsArea']>(
 		// Unfortunately, the typedefs for React memo components don't allow us to properly check the emptyValueBuilder function
 		args => <ButtonsArea {...args} availableTypes={availableTypes} emptyValueBuilder={emptyValueBuilder} />, [availableTypes, emptyValueBuilder]);
@@ -23,8 +23,10 @@ type ButtonsAreaProps<T extends string> = Parameters<BaseSortableItemsControlPro
 function ButtonsArea<T extends string>({addHandler, disabled, availableTypes, emptyValueBuilder}: ButtonsAreaProps<T>): ReactNode {
 	const [selectedType, setSelectedType] = useState(availableTypes[0].value);
 	return <div className="plaudit-sortable-items-buttons flexible-items">
-		<Button icon="insert" disabled={disabled} onClick={() => addHandler(emptyValueBuilder(selectedType))}>Add</Button>
+		<Button icon="insert" disabled={disabled} onClick={() => addHandler(emptyValueBuilder(selectedType))} __next40pxDefaultSize accessibleWhenDisabled>Add</Button>
 		<SelectControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			label="Type"
 			hideLabelFromVision={true}
 			value={selectedType}

package/src/controls/SortableItemsControl.tsx

@@ -13,6 +13,10 @@ export function SortableItemsControl<D>({emptyValue, addRowText, ...baseProps}:
 type ButtonsAreaProps<D = any> = Parameters<BaseSortableItemsControlProps<D>['buttonsArea']>[0]&{emptyValue: D, addRowText?: string};
 function ButtonsArea<D>({addHandler, disabled, emptyValue, addRowText}: ButtonsAreaProps<D>) {
 	return <div className="plaudit-sortable-items-buttons">
-		<Button icon="insert" disabled={disabled} onClick={() => addHandler(typeof emptyValue === 'object' ? {...emptyValue} : emptyValue)}>{addRowText ?? "Add Row"}</Button>
+		<Button
+			icon="insert" disabled={disabled}
+	        onClick={() => addHandler(typeof emptyValue === 'object' ? {...emptyValue} : emptyValue)}
+			__next40pxDefaultSize accessibleWhenDisabled
+		>{addRowText ?? "Add Row"}</Button>
 	</div>
 }

package/src/controls/hooks/useSuggestions.ts

@@ -15,7 +15,7 @@ type SuggestionState<T> = {
 	requestId: number
 };
 function useSimpleDebouncer(delay: number) {
-	const timerId = useRef<ReturnType<typeof window['setTimeout']>|undefined>(undefined);
+	const timerId = useRef<ReturnType<typeof setTimeout>>(undefined);
 	return useCallback((action: () => void) => {
 		if (timerId.current !== undefined) {
 			clearTimeout(timerId.current);

package/src/index.ts

@@ -1,13 +1,13 @@
 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 {TemporalLRUCache} from "./lib/helpers";
+export {TemporalLRUCache, useAdoptedStyleSheet} from "./lib/helpers";
 export * from "./lib/plaudit-icons";
+export * as SectionedCacheStore from "./lib/sectioned-cache-store";
 export * from "./lib/suspense";
 export type * from "./lib/useful-types";
 
@@ -16,7 +16,6 @@ export function installGutenbergExtensions() {
 		installGutenbergExtensions.called = true;
 		registerStore();
 		installSimpleNativePropertiesSupport();
-		installPostFeaturedImageCardFocusTargeting();
 		installSimpleGutenbergApisSupport();
 	}
 }

package/src/lib/compat-types.ts

@@ -0,0 +1,21 @@
+import {DbSource} from "./useful-types";
+
+declare module '@wordpress/blocks' {
+	type BaseRegisterBlockBindingsSourceFunctionArgs = {
+		bindings?: {[key: string]: string|{[key in string]: unknown}}, clientId?: string,
+		context: {[key in string]: any}, select: unknown
+	};
+	type ExtendedRegisterBlockBindingsSourceFunctionArgs = BaseRegisterBlockBindingsSourceFunctionArgs&{dispatch: {[key in string]: (...args: unknown[]) => unknown}};
+
+	type RegisterBlockBindingsSourceArgs = {
+		name: string, label: string, usesContext?: string[],
+		getValues?(args: BaseRegisterBlockBindingsSourceFunctionArgs): unknown,
+		setValues?: unknown,
+		getFieldsList?(args: BaseRegisterBlockBindingsSourceFunctionArgs): unknown,
+		canUserEditValue(args: BaseRegisterBlockBindingsSourceFunctionArgs): boolean,
+		dbSources?: DbSource[]
+	};
+	function registerBlockBindingsSource(args: RegisterBlockBindingsSourceArgs): void;
+
+	function getBlockBindingsSources(): {[key: string]: RegisterBlockBindingsSourceArgs};
+}

package/src/lib/helpers.ts

@@ -1,3 +1,5 @@
+import {useEffect, useRef} from "@wordpress/element";
+
 import type {SubsequentArgsOfFunc} from "./useful-types";
 
 export function clone<T>(value: T): T {
@@ -37,9 +39,27 @@ export function combineSelectors<S extends SelectorsArg<any>>(selectors: S) {
 	})) as CombinedSelectors<typeof selectors>;
 }
 
+export function useAdoptedStyleSheet() {
+	const sheet = useRef<CSSStyleSheet>();
+	if (sheet.current === undefined) {
+		sheet.current = new CSSStyleSheet();
+	}
+	useEffect(() => {
+		if (sheet.current !== undefined && !document.adoptedStyleSheets.includes(sheet.current)) {
+			document.adoptedStyleSheets.push(sheet.current);
+		}
+		return () => {
+			if (sheet.current !== undefined) {
+				document.adoptedStyleSheets.splice(document.adoptedStyleSheets.indexOf(sheet.current), 1);
+			}
+		}
+	});
+	return sheet.current;
+}
+
 export class TemporalLRUCache<K, V extends NonNullable<any>|undefined> {
 	private readonly cache: Map<K, [V, number]> = new Map();
-	private timeout?: ReturnType<Window['setTimeout']>;
+	private timeout?: ReturnType<typeof setTimeout>;
 
 	public constructor(
 		private readonly capacity: number,
@@ -68,12 +88,12 @@ export class TemporalLRUCache<K, V extends NonNullable<any>|undefined> {
 
 	cancelTimeout() {
 		if (this.timeout !== undefined) {
-			window.clearTimeout(this.timeout);
+			clearTimeout(this.timeout);
 			this.timeout = undefined;
 		}
 	}
 	private beginTimeout() {
-		this.timeout = window.setTimeout(() => {
+		this.timeout = setTimeout(() => {
 			const now = Date.now();
 			const droppableItems = [...this.cache.entries()]
 				.filter(([_, v]) => now - v[1] >= this.minDroppableAccessTime)

package/src/lib/sectioned-cache-store.ts

@@ -0,0 +1,120 @@
+import {createReduxStore} from "@wordpress/data";
+
+import {TemporalLRUCache} from "./helpers";
+import {use, type WrappedPromise, wrapPromise} from "./suspense/promise-handlers";
+
+type SelectorsBuilder<
+	PROPS,
+	DATA,
+	SELECTORS extends { [name in string]: (...args: any[]) => any }
+> = (handleCacheMiss: (props: PROPS) => Promise<SectionedCacheFetchResult<DATA>>) => SELECTORS;
+type SectionedCacheFetchResult<DATA> = {error?: false, data: DATA}|{error: true, data: string};
+type GetCacheForPropsFunction<PROPS, DATA, KEY> = (props: PROPS) => TemporalLRUCache<KEY, WrappedPromise<SectionedCacheFetchResult<DATA>>>;
+type WarmingPromiseGetter<PROPS, DATA, KEY> = (
+	storeChanged: () => void, props: FetchWarmingDataArgs<PROPS, DATA, KEY>[0], ...args: DropFirst<FetchWarmingDataArgs<PROPS, DATA, KEY>>
+) => WrappedPromise<void>|undefined;
+
+type SectionedCacheStoreArgs<
+	PROPS,
+	DATA,
+	KEY,
+	SELECTORS extends { [name in string]: (...args: any[]) => any }
+> = {
+	keyify: (props: PROPS) => KEY
+	name: string
+	selectorsBuilder: SelectorsBuilder<PROPS, DATA, SELECTORS>
+	getCacheForProps?: GetCacheForPropsFunction<PROPS, DATA, KEY>
+	getIndividualItemFetchPromise: (props: PROPS) => Promise<SectionedCacheFetchResult<DATA>>
+	getWarmingPromise: WarmingPromiseGetter<PROPS, DATA, KEY>
+}
+type AddBSStateArg<S extends {[name in string]: (...args: any[]) => any}> = {[name in keyof S]: (state: any, ...args: Parameters<S[name]>) => ReturnType<S[name]>};
+export function create<PROPS, DATA, KEY, SELECTORS extends { [name in string]: (...args: any[]) => any }>(
+	args: SectionedCacheStoreArgs<PROPS, DATA, KEY, SELECTORS>
+) {
+	type ReduxSelectors = AddBSStateArg<SELECTORS>;
+	const {getCacheForProps = makeDefaultCacheForPropsGetter(), getIndividualItemFetchPromise, getWarmingPromise, keyify, name, selectorsBuilder} = args;
+	return {
+		name,
+		instantiate: () => {
+			const listeners = new Set<() => void>();
+
+			const storeChanged = () => {
+				for (const listener of listeners) {
+					listener();
+				}
+			}
+
+			const warmCache = (props: PROPS) => {
+				const warmingPromise = getWarmingPromise(storeChanged, props, getCacheForProps, keyify);
+				if (warmingPromise !== undefined) {
+					return use(warmingPromise);
+				}
+			}
+
+			const fetchItemContents = async (props: PROPS) => {
+				try {
+					return await getIndividualItemFetchPromise(props);
+				} catch (err) {
+					return ({error: true, data: (err?.toString() as string|undefined) ?? "EMPTY_RESPONSE"} as const) satisfies SectionedCacheFetchResult<DATA>;
+				}
+			}
+
+			const handleCacheMiss = (props: PROPS): Promise<SectionedCacheFetchResult<DATA>> => {
+				const key = keyify(props);
+				warmCache(props);
+				const cache = getCacheForProps(props);
+				const existingPromise = cache.get(key);
+				if (existingPromise !== null) {
+					return existingPromise;
+				}
+				const res = wrapPromise(fetchItemContents(props));
+				res.finally(storeChanged);
+				cache.set(key, res);
+				return res;
+			}
+
+			const selectors = selectorsBuilder(handleCacheMiss);
+
+			return {
+				getSelectors: () => selectors,
+				getSuspendSelectors: () => selectors,
+				getActions: () => ({}),
+				subscribe: (listener: () => void) => {
+					listeners.add(listener);
+					return () => listeners.delete(listener);
+				}
+			};
+		}
+	} satisfies ReturnType<typeof createReduxStore<{}, {}, ReduxSelectors>> as ReturnType<typeof createReduxStore<{}, {}, ReduxSelectors>>;
+}
+
+function makeDefaultCacheForPropsGetter<PROPS, DATA, KEY>() {
+	const cache: ReturnType<GetCacheForPropsFunction<PROPS, DATA, KEY>> = new TemporalLRUCache(10);
+	return () => cache;
+}
+
+type DropFirst<A extends any[]> = A extends [any, ...infer R] ? R : never;
+type FetchWarmingDataArgs<PROPS, DATA, KEY> = [props: PROPS, getCacheForProps: GetCacheForPropsFunction<PROPS, DATA, KEY>, keyify: (props: PROPS) => KEY];
+type MakeSimpleWarmingPromisesGetterArgs<PROPS, DATA, KEY> = {
+	warmingPromisesKeyify: (props: PROPS) => string|number|undefined, // Returning undefined short-circuits the rest of the function, skipping any waiting at all
+	fetchWarmingData: (...args: FetchWarmingDataArgs<PROPS, DATA, KEY>) => Promise<void>,
+	shouldWarm?: ((props: PROPS) => boolean)
+};
+export function makeSimpleWarmingPromisesGetter<PROPS, DATA, KEY>(
+	{warmingPromisesKeyify, fetchWarmingData, shouldWarm = () => true}: MakeSimpleWarmingPromisesGetterArgs<PROPS, DATA, KEY>
+): WarmingPromiseGetter<PROPS, DATA, KEY> {
+	const warmingPromises: Record<string|number, WrappedPromise<void>> = {};
+	return (storeChanged, props, ...args) => {
+		const key = warmingPromisesKeyify(props);
+		if (key === undefined) {
+			return;
+		}
+		if (!warmingPromises[key]) {
+			if (!shouldWarm(props)) {
+				return; // We don't want to go back to the server for the entire dataset unless we're going to be working with most of it
+			}
+			warmingPromises[key] = wrapPromise(fetchWarmingData(props, ...args).finally(storeChanged));
+		}
+		return warmingPromises[key];
+	};
+}

package/src/lib/useful-types.ts

@@ -47,3 +47,5 @@ export type WPTaxonomyQuery = {
 }|WPTaxonomyQueryFirstOrderClause;
 type WPTaxonomyQueryFirstOrderClause = {include_children?: boolean, operator?: 'AND'|'IN'|'NOT IN'|'EXISTS'|'NOT EXISTS'}&
 	(({taxonomy: string}&({terms: number|number[], field?: 'term_id'}|{terms: string|string[], field: 'slug'|'name'}))|{taxonomy?: string, terms: number|number[], field: 'term_taxonomy_id'});
+
+export type DbSource = {label: string, value: string, help?: string};

package/styles/editor.pcss

@@ -1,19 +1,3 @@
-.plauditPostFeaturedImageWithFocalPoint__wrapper {
-	position: relative;
-
-	&:hover .plauditPostFeaturedImageWithFocalPoint__toggle, &:hover .editor-post-featured-image__actions {
-		opacity: 1;
-	}
-}
-.plauditPostFeaturedImageWithFocalPoint__toggle {
-	position: absolute;
-	z-index: 10000;
-	top: 0;
-	right: 0;
-	opacity: 0;
-	padding: 8px;
-}
-
 .plaudit-snp-laid-out-properties-wrapper {
 	min-width: 240px;
 }

package/dist/editor/post-featured-image.d.ts

@@ -1,4 +0,0 @@
-export declare function installPostFeaturedImageCardFocusTargeting(): void;
-export declare namespace installPostFeaturedImageCardFocusTargeting {
-    let called: boolean;
-}

package/dist/editor/post-featured-image.js

@@ -1,125 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.installPostFeaturedImageCardFocusTargeting = installPostFeaturedImageCardFocusTargeting;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const components_1 = require("@wordpress/components");
-const data_1 = require("@wordpress/data");
-const editor_1 = require("@wordpress/editor");
-const element_1 = require("@wordpress/element");
-const hooks_1 = require("@wordpress/hooks");
-const i18n_1 = require("@wordpress/i18n");
-function getMediaDetails(media, postId) {
-    if (!media) {
-        return {};
-    }
-    const sizes = (media?.media_details?.['sizes'] ?? {});
-    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,
-    };
-}
-function getLivePosition(selectFunction = data_1.select) {
-    const { x = 50, y = 50 } = (selectFunction(editor_1.store).getEditedPostAttribute('meta')?.["plaudit_card-image_pos"] ?? {});
-    return { x: x / 100, y: y / 100 };
-}
-function setLivePosition({ x, y }) {
-    (0, data_1.dispatch)(editor_1.store)
-        .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, ...((0, data_1.select)(editor_1.store).getEditedPostAttribute('meta')?.["plaudit_card-image_pos"] ?? {}) };
-}
-function getImageSize(defaultSize, media, postId) {
-    let filteredSize = (0, hooks_1.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) {
-    return (props) => {
-        const [inFocusMode, setInFocusMode] = (0, element_1.useState)(false);
-        // This useMemo call makes it so that we only update restorablePosition when the state changes.
-        const restorablePosition = (0, element_1.useMemo)(getLivePosition, [inFocusMode]);
-        const { mediaSourceUrl } = getMediaDetails(props.media, props.currentPostId);
-        if (!mediaSourceUrl) {
-            if ((0, data_1.select)(editor_1.store).getEditedPostAttribute('featured_media')) {
-                return (0, jsx_runtime_1.jsx)(components_1.Spinner, {});
-            }
-            return (0, jsx_runtime_1.jsx)(OriginalComponent, { ...props });
-        }
-        else if (!inFocusMode) {
-            return (0, jsx_runtime_1.jsx)(NotInFocusMode, { OriginalComponent: OriginalComponent, props: props, setInFocusMode: setInFocusMode });
-        }
-        return (0, jsx_runtime_1.jsx)(InFocusMode, { mediaSourceUrl: mediaSourceUrl, props: props, restorablePosition: restorablePosition, setInFocusMode: setInFocusMode });
-    };
-}
-const NotInFocusMode = (0, element_1.memo)(({ OriginalComponent, props, setInFocusMode }) => {
-    const { x, y } = getRawLivePosition();
-    (0, element_1.useEffect)(() => {
-        let sheet = document.adoptedStyleSheets.find(s => s.identifier === '__POST_FEATURED_IMAGE__');
-        if (!sheet) {
-            sheet = new CSSStyleSheet();
-            sheet.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.identifier === '__POST_FEATURED_IMAGE__');
-            if (sheet) {
-                document.adoptedStyleSheets.splice(sheet, 1);
-            }
-        };
-    }, [x, y]);
-    return (0, jsx_runtime_1.jsx)(editor_1.PostFeaturedImageCheck, { children: (0, jsx_runtime_1.jsxs)("div", { className: "plauditPostFeaturedImageWithFocalPoint__wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "plauditPostFeaturedImageWithFocalPoint__toggle", children: (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: (0, element_1.useCallback)(() => setInFocusMode(true), [setInFocusMode]), className: "editor-post-featured-image__action", text: (0, i18n_1.__)("Change Focal Point", 'plaudit') }) }), (0, jsx_runtime_1.jsx)(OriginalComponent, { ...props })] }) });
-});
-const InFocusMode = (0, element_1.memo)(({ mediaSourceUrl, props, restorablePosition, setInFocusMode }) => {
-    // 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 } = (0, data_1.useSelect)(getLivePosition, []);
-    const [position, setPosition] = (0, element_1.useState)({ x, y });
-    (0, element_1.useEffect)(() => setPosition(getLivePosition()), [x, y]);
-    return (0, jsx_runtime_1.jsxs)(editor_1.PostFeaturedImageCheck, { children: [props.noticeUI, (0, jsx_runtime_1.jsxs)("div", { className: "editor-post-featured-image", children: [(0, jsx_runtime_1.jsx)(components_1.FocalPointPicker, { onChange: (0, element_1.useCallback)(pos => {
-                            setPosition(pos);
-                            setLivePosition(pos);
-                        }, [setPosition]), url: mediaSourceUrl, value: position }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { text: (0, i18n_1.__)("Done", 'plaudit'), onClick: (0, element_1.useCallback)(() => setInFocusMode(false), [setInFocusMode]), variant: "primary" }), (0, jsx_runtime_1.jsx)(components_1.Button, { text: (0, i18n_1.__)('Cancel', 'plaudit'), onClick: (0, element_1.useCallback)(() => {
-                                    setLivePosition(restorablePosition);
-                                    setInFocusMode(false);
-                                }, [setInFocusMode]), isDestructive: true })] })] })] });
-});
-function installPostFeaturedImageCardFocusTargeting() {
-    if (!installPostFeaturedImageCardFocusTargeting.called) {
-        installPostFeaturedImageCardFocusTargeting.called = true;
-        (0, hooks_1.addFilter)('editor.PostFeaturedImage', 'plaudit-gutenberg-api-extensions/inject-post-featured-image-card-focus-targeting', wrapPostFeaturedImage);
-    }
-}
-(function (installPostFeaturedImageCardFocusTargeting) {
-    installPostFeaturedImageCardFocusTargeting.called = false;
-})(installPostFeaturedImageCardFocusTargeting || (exports.installPostFeaturedImageCardFocusTargeting = installPostFeaturedImageCardFocusTargeting = {}));
-//# sourceMappingURL=post-featured-image.js.map

package/dist/editor/post-featured-image.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"post-featured-image.js","sourceRoot":"","sources":["../../src/editor/post-featured-image.tsx"],"names":[],"mappings":"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"}