@plaudit/gutenberg-api-extensions 2.9.0 → 2.10.0

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

@@ -1,204 +0,0 @@
-import {createHigherOrderComponent} from "@wordpress/compose";
-import {addFilter} from "@wordpress/hooks";
-
-import type {ActualBlockEditProps} from "./common-native-property-implementations";
-import {InspectorPanel} from "../controls";
-
-import React from "react";
-
-export type InspectorPanelGroup = 'default'|'advanced'|'background'|'border'|'color'|'dimensions'|'effects'|'filter'|'list'|'position'|'settings'|'styles'|'typography';
-
-type GenericSimpleNativeProperty<T, V extends 'string'|'number'|'boolean'|'array'|'object'> = {
-	name: string,
-	type: V,
-	enum?: T[],
-	default?: T,
-	alwaysStore?: boolean,
-	renderer(value: T|undefined, onChange: (v: T|undefined) => void): React.JSX.Element,
-	condition?(blockEditProps: ActualBlockEditProps): boolean
-};
-export type SimpleNativeProperty = GenericSimpleNativeProperty<string, 'string'>&{enum?: string[]}
-	|GenericSimpleNativeProperty<number, 'number'>&{enum?: number[]}
-	|GenericSimpleNativeProperty<boolean, 'boolean'>
-	|GenericSimpleNativeProperty<any[], 'array'>
-	|GenericSimpleNativeProperty<Record<string|number, unknown>, 'object'>;
-
-export type SimpleNativePanel = {
-	title: string,
-	group?: InspectorPanelGroup,
-	initialOpen?: boolean,
-	properties: SimpleNativeProperty[],
-	condition?(blockEditProps: ActualBlockEditProps): boolean
-};
-
-export function registerSimpleNativeProperties(config: {
-	block: `${string}/${string}`|Array<`${string}/${string}`>,
-	panel: SimpleNativePanel|Array<SimpleNativePanel>
-}) {
-	const simpleNativePanels: Record<string, Array<SimpleNativePanel>|undefined>
-		= (window as any).plauditSimpleNativePanels ?? ((window as any).plauditSimpleNativePanels = {});
-
-	if (Array.isArray(config.block)) {
-		for (const b of config.block) {
-			addPanels(b, config.panel, simpleNativePanels);
-		}
-	} else {
-		addPanels(config.block, config.panel, simpleNativePanels);
-	}
-}
-function addPanels(block: string, panel: SimpleNativePanel|Array<SimpleNativePanel>, simpleNativePanels: Record<string, Array<SimpleNativePanel>|undefined>) {
-	const panels = (simpleNativePanels[block] ?? (simpleNativePanels[block] = []));
-	if (Array.isArray(panel)) {
-		panels.push(...panel);
-	} else {
-		panels.push(panel);
-	}
-}
-
-export function installSimpleNativePropertiesSupport() {
-	if ((window as any).plauditSimpleNativePropertiesSupportInstalled) {
-		return;
-	}
-	(window as any).plauditSimpleNativePropertiesSupportInstalled = true;
-
-	const simpleNativePanels: Record<string, Array<SimpleNativePanel>|undefined>
-		= (window as any).plauditSimpleNativePanels ?? ((window as any).plauditSimpleNativePanels = {});
-
-	type RegisterBlockAtts = { name: string, attributes: Record<string, any>, usesContext?: string[] };
-	addFilter('blocks.registerBlockType', 'plaudit/gutenberg-api-extensions/attach-simple-native-properties', (atts: RegisterBlockAtts) => {
-		const blockSimpleNativePanels = simpleNativePanels[atts.name];
-		if (blockSimpleNativePanels) {
-			const injectableProperties: Record<string, any> = {};
-			for (const blockSimpleNativePanel of blockSimpleNativePanels) {
-				for (const property of blockSimpleNativePanel.properties) {
-					const attrPath = property.name.split('.');
-					if (attrPath.length === 1) {
-						injectableProperties[property.name] = {type: property.type, default: property.alwaysStore ? undefined : property.default};
-						if ('enum' in property) {
-							injectableProperties[property.name].enum = property.enum;
-						}
-					} else {
-						let actualProp = injectableProperties[attrPath[0]];
-						if (actualProp === undefined) {
-							injectableProperties[attrPath[0]] = actualProp = {type: "object"};
-						} else if (actualProp.type !== "object") {
-							throw new Error(`Property type collision on ${property.name}. Attempted treat the property as an object when it was already a ${actualProp.type}`);
-						}
-						if (property.default !== undefined) {
-							if (actualProp.default === undefined) {
-								actualProp.default = {};
-							}
-							let target = actualProp.default;
-							for (let i = 1; i < attrPath.length - 1; i++) {
-								target = target[attrPath[i]] = {};
-							}
-							target[attrPath[attrPath.length - 1]] = property.default;
-						}
-					}
-				}
-			}
-			for (const [name, config] of Object.entries(injectableProperties)) {
-				atts.attributes[name] = config;
-			}
-		}
-		return atts;
-	});
-
-	function setDottedAttribute(blockEditProps: ActualBlockEditProps, attr: string, value: any) {
-		const attrPath = attr.split('.');
-		if (attrPath.length === 1) {
-			return blockEditProps.setAttributes({[attr]: value});
-		}
-		const payload = {...blockEditProps.attributes[attrPath[0]]};
-		let currentLayer: Record<string, any> = payload;
-		for (let i = 1; i < attrPath.length - 1; i++){
-			const attrPathNode = attrPath[i];
-			currentLayer = currentLayer[attrPathNode] = {};
-		}
-		currentLayer[attrPath[attrPath.length - 1]] = value;
-		blockEditProps.setAttributes({[attrPath[0]]: payload});
-	}
-
-	addFilter('editor.BlockEdit', 'plaudit/gutenberg-api-extensions/simple-native-properties',
-		createHigherOrderComponent(BlockEdit => (blockEditProps: ActualBlockEditProps) => {
-		const blockSimpleNativePanels = simpleNativePanels[blockEditProps.name];
-		if (!blockSimpleNativePanels) {
-			return <BlockEdit {...blockEditProps} />;
-		}
-
-		let keyIndex = 0;
-		return <>
-			<BlockEdit {...blockEditProps} />
-			{...blockSimpleNativePanels.map(p => {
-				const items = p.properties.map(prop => {
-					const propPath = prop.name.split('.');
-
-					let existingValue;
-					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]];
-								}
-							}
-							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 (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 (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));
-					} else if (prop.type === "boolean") {
-						if (typeof existingValue !== 'boolean' && existingValue !== undefined) {
-							existingValue = !!existingValue;
-						}
-						ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
-					} else if (prop.type === "string") {
-						if (typeof existingValue !== 'string' && existingValue !== undefined) {
-							existingValue = existingValue.toString();
-						}
-						ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
-					} else {
-						if (typeof existingValue !== 'number' && existingValue !== undefined) {
-							existingValue = parseFloat(existingValue);
-						}
-						ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
-					}
-					return prop.condition === undefined || prop.condition(blockEditProps) ? ele : undefined;
-				}).filter((ele): ele is React.JSX.Element => ele !== undefined);
-				return <InspectorPanel
-					{...p} condition={() => items.length > 0 && (p.condition === undefined || p.condition(blockEditProps))}
-					key={`plaudit-simple-native-property-${keyIndex++}`}
-				>
-					{...items}
-				</InspectorPanel>;
-			})}
-		</>;
-	}, 'plauditGutenbergApiExtensionsSimpleNativeProperties'));
-}

package/src/controls/AsynchronousFormTokenField.tsx

@@ -1,158 +0,0 @@
-import {Spinner, FormTokenField} from '@wordpress/components';
-import type {TokenItem} from "@wordpress/components/build-types/form-token-field/types";
-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 {
-	Valid = 'success',
-	Invalid = 'error',
-	Validating = 'validating'
-}
-
-export interface AsynchronousFormTokenFieldProps {
-	label: string;
-	help?: string;
-	value?: string[];
-	onChange: (value: string[]) => void;
-
-	validationQuery(tokens: string[]): Promise<Array<TokenItem>>;
-	suggestionQuery(input: string): Promise<Array<string>>;
-	makeTokenFromSuggestion(suggestion: string): TokenItem;
-	validValues: Map<string, ValidationState>;
-	validator?: (value: string) => boolean;
-
-	multiple?: boolean;
-}
-
-export function AsynchronousFormTokenField(props: AsynchronousFormTokenFieldProps) {
-	const [isInitializing, setIsInitializing] = useState(true);
-	const [isLoading, setIsLoading] = useState(false);
-	const [isValidating, setIsValidating] = useState(false);
-
-	const [currentTokens, setCurrentTokens] = useState<Array<TokenItem>>([]);
-	const [suggestions, setSuggestions] = useState<Array<string>>([]);
-
-	const [myValidationRequestQueue] = useState<{queue: Promise<boolean>, currentRequest: number, trigger: (currentTokens: TokenItem[]) => void}>(() => ({
-		queue: Promise.resolve(true), currentRequest: 0,
-		trigger(currentTokens) {
-			const tokensInNeedOfValidation = currentTokens.filter(token => token.status === ValidationState.Validating);
-			if (tokensInNeedOfValidation.length > 0) {
-				setIsValidating(true);
-				const myNumber = ++myValidationRequestQueue.currentRequest;
-				myValidationRequestQueue.queue = myValidationRequestQueue.queue.then(async () => {
-					const tokensBeingValidatedList = tokensInNeedOfValidation.map(token => token.value).filter(value => !props.validValues.has(value));
-					if (tokensBeingValidatedList.length > 0) {
-						const tokensBeingValidated = new Set(tokensBeingValidatedList);
-						for (const value of tokensBeingValidatedList) {
-							props.validValues.set(value, ValidationState.Validating);
-						}
-						const validatedTokens = await props.validationQuery(tokensBeingValidatedList);
-
-						for (const validToken of validatedTokens) {
-							tokensBeingValidated.delete(validToken.value);
-							props.validValues.set(validToken.value, ValidationState.Valid);
-						}
-						for (const value of tokensBeingValidated) {
-							if (props.validValues.get(value) === ValidationState.Validating) {
-								props.validValues.set(value, ValidationState.Invalid);
-							}
-						}
-					}
-
-					if (myNumber === myValidationRequestQueue.currentRequest) {
-						let changed = false;
-						for (const token of currentTokens) {
-							if (token.status === ValidationState.Validating) {
-								const status = props.validValues.get(token.value);
-								if (status !== undefined && token.status !== status) {
-									changed = true;
-									token.status = status;
-								}
-							}
-						}
-						if (changed) {
-							setCurrentTokens(currentTokens);
-						}
-						setIsValidating(false);
-					}
-					return true;
-				});
-			}
-		}
-	}));
-
-	const [mySuggestionRequestQueue] = useState<{
-		queue: Promise<boolean>, currentRequest: number, debouncer: (input: string) => void
-	}>(() => ({
-		queue: Promise.resolve(true),
-		currentRequest: 0,
-		debouncer: debounce(input => {
-			if (input.length < 2) {
-				setSuggestions([]);
-			} else {
-				setIsLoading(true);
-				const myNumber = ++mySuggestionRequestQueue.currentRequest;
-				mySuggestionRequestQueue.queue = mySuggestionRequestQueue.queue.then(async () => {
-					if (myNumber === mySuggestionRequestQueue.currentRequest) {
-						setSuggestions(await props.suggestionQuery(input));
-						setIsLoading(false);
-					}
-					return true;
-				});
-			}
-		}, 500)
-	}));
-
-	useEffect(() => {
-		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);
-			}
-
-			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)})) ?? []);
-			setIsInitializing(false);
-		});
-	}, []);
-
-	useEffect(() => myValidationRequestQueue.trigger(currentTokens), [currentTokens]);
-
-	if (isInitializing) {
-		return <Spinner />;
-	}
-
-	const tokenTitleMappings = new Map(currentTokens.map(currentToken => [currentToken.value, currentToken.title]));
-
-	return <>
-		<FormTokenField
-			value={currentTokens}
-			label={props.label}
-			placeholder="Start typing to see suggestions"
-			suggestions={suggestions}
-			onChange={tokens => {
-				const tokenItems = tokens.map(token => typeof token === 'string' ? props.makeTokenFromSuggestion(token) : token);
-
-				props.onChange(tokenItems.map(token => token.value));
-				setCurrentTokens(tokenItems);
-			}}
-			__experimentalValidateInput={props.validator}
-			__experimentalAutoSelectFirstMatch={true}
-			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,50 +0,0 @@
-import {AsynchronousFormTokenField, ValidationState} from "./AsynchronousFormTokenField";
-import {useState} from "@wordpress/element";
-
-import {requestPostsFromAPI} from "./shared";
-
-import React from "react";
-
-type ExtendedPostPickerProps = {
-	onChange: (value: string[]) => void;
-	label: string;
-	help?: string;
-	postTypes: string[];
-	placeholder: string;
-	value?: string[];
-	multiple?: boolean;
-};
-
-export type ExtendedPostPickerConstructorProps = Partial<Omit<ExtendedPostPickerProps, 'onChange'|'value'|'label'>> & Pick<ExtendedPostPickerProps, 'onChange'|'value'|'label'>;
-
-export function ExtendedPostPicker(props: ExtendedPostPickerConstructorProps) {
-	const [validPostIds, _] = useState(new Map<string, ValidationState>());
-	const value = props.value ?? [];
-	return <AsynchronousFormTokenField
-		{...props}
-		value={value}
-		makeTokenFromSuggestion={token => {
-			if (isNumeric(token)) {
-				return {value: token, status: validPostIds.get(token) ?? ValidationState.Validating, title: token};
-			} else {
-				const tokenId = /\(#([0-9]+)\)$/.exec(token)?.[1];
-				if (tokenId) {
-					return {value: tokenId, status: validPostIds.get(tokenId) ?? ValidationState.Validating, title: token};
-				}
-				return {value: token, status: ValidationState.Invalid, title: token};
-			}
-		}}
-		suggestionQuery={input => requestPostsFromAPI({search: input, postTypes: props.postTypes?.join(',')})
-			.then(posts => posts.map(post => `${post.title} (#${post.id})`))}
-		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}
-	/>;
-}
-
-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/InspectorPanel.tsx

@@ -1,16 +0,0 @@
-import type {PanelBodyProps} from "@wordpress/components/build-types/panel/types";
-import {InspectorControls} from "@wordpress/block-editor";
-import {PanelBody} from "@wordpress/components";
-
-import React from "react";
-
-type InspectorControlsType = {
-	// WordPress' types don't declare the group parameter, which is what we use to put the InspectorPanel in the correct spot
-	(props: InspectorControls.Props & { group?: string }): ReturnType<typeof InspectorControls>;
-} & (typeof InspectorControls);
-export function InspectorPanel(props: PanelBodyProps&{group?: string, condition?(): boolean}) {
-	const FullyTypedInspectorControls = InspectorControls as InspectorControlsType;
-	return <FullyTypedInspectorControls group={props.group}>
-		<PanelBody {...props} children={props.condition === undefined || props.condition() ? props.children : []} />
-	</FullyTypedInspectorControls>;
-}

package/src/controls/LazySuggestionsComboboxControl.tsx

@@ -1,84 +0,0 @@
-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/PickOne.tsx

@@ -1,80 +0,0 @@
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, BaseControl,
-	ColorPalette, RadioControl, SelectControl, useBaseControlProps
-} from "@wordpress/components";
-import type {ColorObject} from "@wordpress/components/build-types/color-palette/types";
-
-import type {PickableOptions, SimpleBlockControlProps} from "./types";
-
-import React, {type ReactElement} from "react";
-
-function makeSharedRadioAndSelectProps<T extends string>(props: SimpleBlockControlProps<T, string>&{options: PickableOptions<string>}) {
-	return {
-		label: props.label,
-		onChange(value: string) {
-			props.setAttributes({[props.attribute]: value});
-		},
-		options: props.options.map(([value, label]) => ({
-			value, label: typeof label === 'string' ? label : label.text
-		}))
-	} as Pick<Parameters<(typeof SelectControl)|(typeof RadioControl)>[0], 'label'|'options'>&{onChange(value: string): void};
-}
-
-export type PickOneFromToggleGroupProps<T extends string> = SimpleBlockControlProps<T, string|number>&{options: PickableOptions<string, {icon: ReactElement}>};
-export function PickOneFromToggleGroup<T extends string>(props: PickOneFromToggleGroupProps<T>) {
-	return <ToggleGroupControl
-		label={props.label}
-		value={props.attributes[props.attribute]}
-		onChange={value => props.setAttributes({[props.attribute]: value})}
-		children={
-			props.options.map(([value, label]) => typeof label === 'string'
-				? <ToggleGroupControlOption key={value} value={value} label={label} />
-				: <ToggleGroupControlOptionIcon key={value} value={value} label={label.text} icon={label.icon} />)
-		}
-	/>;
-}
-
-export function PickOneFromSelect<T extends string>(props: SimpleBlockControlProps<T, string>& { options: PickableOptions<string> }) {
-	return <SelectControl
-		{...makeSharedRadioAndSelectProps(props)}
-		value={props.attributes[props.attribute]}
-	/>;
-}
-export function PickOneFromRadios<T extends string>(props: SimpleBlockControlProps<T, string>& { options: PickableOptions<string> }) {
-	return <RadioControl
-		{...makeSharedRadioAndSelectProps(props)}
-		selected={props.attributes[props.attribute]}
-	/>;
-}
-
-export function PickOneFromColors<T extends string>(props: SimpleBlockControlProps<T, string>&{options: PickableOptions<string, {color?: string|undefined}>}) {
-	const valueToColorMap = new Map<string, string>();
-	const colorToValueMap = new Map<string, string>();
-	const colors: ColorObject[] = [];
-	for (const [value, display] of props.options) {
-		if (typeof display === 'string') {
-			colors.push({color: value, name: display});
-		} else if (display.color) {
-			valueToColorMap.set(value, display.color);
-			colorToValueMap.set(display.color, value);
-			colors.push({color: display.color, name: display.text});
-		} else {
-			colors.push({color: value, name: display.text});
-		}
-	}
-
-	const currentColor = valueToColorMap.get(props.attributes[props.attribute]) ?? props.attributes[props.attribute];
-	const {baseControlProps, controlProps} = useBaseControlProps({label: props.label});
-	return <BaseControl {...baseControlProps}>
-		<ColorPalette
-			{...controlProps}
-			disableCustomColors={true}
-			onChange={color => props.setAttributes({[props.attribute]: colorToValueMap.get(color ?? currentColor) ?? color ?? currentColor})}
-			colors={colors}
-			value={currentColor}
-			clearable={false}
-		/>
-	</BaseControl>;
-}

package/src/controls/SimpleToggle.tsx

@@ -1,9 +0,0 @@
-import {ToggleControl} from "@wordpress/components";
-
-import type {SimpleBlockControlProps} from "./types";
-
-import React from "react";
-
-export function SimpleToggle<T extends string>(props: SimpleBlockControlProps<T, boolean>) {
-	return <ToggleControl checked={props.attributes[props.attribute]} label={props.label} onChange={checked => props.setAttributes({[props.attribute]: checked})} />;
-}

package/src/controls/SortableItemsControl.tsx

@@ -1,70 +0,0 @@
-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/shared.ts

@@ -1,7 +0,0 @@
-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}));
-}