@plaudit/gutenberg-api-extensions 2.79.0 → 2.80.0

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

@@ -0,0 +1,877 @@
+import {
+	BaseControl,
+	ColorPalette,
+	DatePicker,
+	DateTimePicker,
+	Disabled,
+	RadioControl,
+	RangeControl,
+	SelectControl,
+	TextControl,
+	ToggleControl,
+	useBaseControlProps,
+	__experimentalToggleGroupControl as ToggleGroupControl
+} from "@wordpress/components";
+import {dispatch, select} from "@wordpress/data";
+import {useCallback, useMemo, useRef} from "@wordpress/element";
+import {applyFilters} from "@wordpress/hooks";
+
+import {
+	ExtendedPostPicker, ExtendedRadioControl, ImageControl, type ImageData,
+	ExtendedTextareaControl, MultiSelectControl, type Dict,
+	ProperLinkControl, SortableItemsControl, type PickableOptions,
+	FullSizeToggleControl, ToggleGroupControlOptionWithOptionalIcon, ExtendedTaxonomyPicker, ExtendedTermPicker, ExtendedUserPicker
+} from "../controls";
+import {normalizePickableOptionsToObjects, normalizePickableOptionsToPairs} from "../controls/shared";
+import {useSuspendableOptions} from "./hooks/useSuspendableOptions";
+import {makeToolsPanelContextValue, ToolsPanelContext} from "./layout/ToolsPanelContext";
+import {clone} from "../lib/helpers";
+import {arrayIsNotEmpty, BlockName} from "../lib/useful-types";
+import type {CSNPControlComponentProps} from "./shared-internal-types";
+import {
+	GenericSimpleNativeProperty,
+	HydratedSimpleNativeProperty, PDSimpleNativeProperty, SNPControlProps, SNPControlSlots
+} from "./simple-native-property-api";
+import {SNPFlexibleItemsListComponent} from "./SNPFlexibleItemsListComponent";
+import {SNPGroupComponent} from "./SNPGroupComponent";
+import {SNPListComponent} from "./SNPListComponent";
+
+import type {ComponentPropsWithoutRef, CSSProperties} from "react";
+import {
+	CSNPConfig, FlexibleItemsListPropertyConfig, getPropType, isObjectListPropertyConfig, isStringValuedToggleGroupCSNPConfig,
+	ObjectListPropertyConfig, PostPropertyCSNPConfig, RadioPropertyCSNPConfig, SelectPropertyCSNPConfig, ShareableSNPElements,
+	TaxonomyPropertyCSNPConfig, TermPropertyCSNPConfig, UserPropertyCSNPConfig
+} from "./csnp-api";
+
+export type OutsideHydrationInfo = {forLayeredStyles: boolean, blockName: BlockName};
+export function hydrateSimpleNativeProperty(
+	config: PDSimpleNativeProperty, parentPath: string, outsideHydrationInfo: OutsideHydrationInfo, parentTypes: string[]
+): HydratedSimpleNativeProperty {
+	const propPath = parentPath.length !== 0 ? parentPath + "." + config.name : config.name;
+	if (parentPath.length === 0) {
+		config = injectBlockSourcedDefault(config, outsideHydrationInfo.blockName);
+	}
+
+	config = applyFilters('plaudit.gutenbergApiExtensions.simpleNativeProperties.field', config, outsideHydrationInfo.blockName, propPath) as typeof config;
+	const res = typeof config.control === 'string'
+		? hydrateDesiccatedSimpleNativeProperty(config, propPath, outsideHydrationInfo, parentTypes) : config;
+	validateAndRecordPotentialStyleProperty(res, propPath, outsideHydrationInfo, parentTypes);
+	return res;
+}
+function validateAndRecordPotentialStyleProperty(
+	config: HydratedSimpleNativeProperty, propPath: string, {forLayeredStyles, blockName}: OutsideHydrationInfo, parentTypes: string[]
+) {
+	if ("styleProperty" in config && config.styleProperty !== undefined) {
+		if (parentTypes.includes('array')) {
+			console.error(`A SNP was configured with a styleProperty, but it is within an array-type SNP. This is unsupported`, "SNP in error:", config);
+		} else {
+			dispatch('plaudit/gutenberg-api-extensions')
+				.addOrUpdateExtraPropTransform(blockName, propPath, {propName: config.name, forLayeredStyles, styleProperty: config.styleProperty});
+		}
+	}
+}
+function injectBlockSourcedDefault(config: PDSimpleNativeProperty, blockName: BlockName): typeof config {
+	if (config.default === undefined) {
+		const existingAttr = select('plaudit/gutenberg-api-extensions').baselineBlockAttrs(blockName)?.attributes?.[config.name];
+		if (existingAttr && typeof existingAttr === 'object' && 'default' in existingAttr) {
+			if (existingAttr.default !== undefined) {
+				const expectedPropType = getPropType(config);
+				if (expectedPropType === 'array' ? Array.isArray(existingAttr.default) : (typeof existingAttr.default) === expectedPropType) {
+					return {...config, default: clone<any>(existingAttr.default)};
+				} else {
+					console.error('Encountered a preexisting default value on a block that does not overlap with the datatype for an SNP');
+				}
+			}
+		}
+	}
+	return config;
+}
+
+type PassthroughPropsType = Pick<PDSimpleNativeProperty, 'condition'|'name'|'label'|'required'>&{controlType: string, styleProperty?: string};
+function hydrateDesiccatedSimpleNativeProperty(
+	config: CSNPConfig, propPath: string, outsideHydrationInfo: OutsideHydrationInfo, parentTypes: string[]
+): HydratedSimpleNativeProperty {
+	const passthroughProps: PassthroughPropsType = {
+		condition: config.condition, label: config.label, name: config.name, required: config.required, controlType: config.control,
+		styleProperty: config.styleProperty
+	};
+	switch (config.control) {
+		case "colorPalette":
+			return {
+				type: 'string',
+				default: config.default,
+				alwaysStore: config.alwaysStore,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots: {Label, Messages}}) {
+					const resolvedOptions = useSuspendableOptions(config);
+					const {colors, valueToColor, colorToValue} = useMemo(() => {
+						const normalizedOptions = normalizePickableOptionsToObjects(resolvedOptions);
+						const options = normalizedOptions.map(opt => {
+							if (hasDefinedKey(opt, 'color') && CSS.supports('color', opt.color)) {
+								return opt;
+							} else if (CSS.supports('color', opt.value)) {
+								return {...opt, color: opt.value};
+							} else if (CSS.supports('color', '#' + opt.value)) {
+								return {...opt, color: '#' + opt.value};
+							} else {
+								console.error(`The color property was ${opt.color ? "invalid" : "not set"} and value could not be converted to a valid CSS color.`,
+									"The color will be displayed as transparent.", "Option in error:", opt);
+								return {...opt, color: 'transparent'};
+							}
+						});
+
+						return {
+							colors: options.map(({value, label = value, color}) => ({color, name: label})),
+							valueToColor: Object.fromEntries(options.map(opt => [opt.value, opt.color])) as Dict<CSSProperties['color']>,
+							colorToValue: Object.fromEntries(options.map(opt => [opt.color, opt.value])) as Record<NonNullable<CSSProperties['color']>, string>
+						};
+					}, [resolvedOptions]);
+
+					const safeOnChange = useCallback((v: string|undefined) => onChange(v ? colorToValue[v] : undefined), [colorToValue, onChange]);
+
+					const {baseControlProps, controlProps} = useBaseControlProps({label: <Label />, help: config.help});
+					return <BaseControl {...baseControlProps}>
+						<ColorPalette
+							{...config.component}
+							{...controlProps}
+							value={value ? valueToColor[value] : undefined}
+							onChange={safeOnChange}
+							colors={colors}
+							clearable={config.clearable ?? false}
+							disableCustomColors={config.allowCustom !== true}
+							__experimentalIsRenderedInSidebar={true}
+						/>
+						<Messages />
+					</BaseControl>;
+				}
+			};
+		case "constant":
+			return {
+				type: config.type as any,
+				default: config.default,
+				alwaysStore: true,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer as any,
+				control({value, slots: {Label, Messages}}: SNPControlProps<any>) {
+					const {current: voidChangeHandler} = useRef(() => {});
+					return <Disabled>
+						<TextControl {...config.component} value={value} onChange={voidChangeHandler} label={<Label />} help={config.help} disabled={true} />
+						<Messages />
+					</Disabled>;
+				}
+			};
+		case "date":
+			return {
+				type: 'number',
+				default: config.default,
+				alwaysStore: config.alwaysStore,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots: {Label, Messages}}) {
+					const safeOnChange = useCallback((v: string|null) => onChange(v === null ? undefined : new Date(v).getTime()), [onChange]);
+					return <BaseControl id="" label={<Label />} help={config.help}>
+						{config.time
+							? <DateTimePicker {...config.component} currentDate={value ?? null} onChange={safeOnChange} />
+							: <DatePicker {...config.component} currentDate={value ?? null} onChange={safeOnChange} />
+						}
+						<Messages />
+					</BaseControl>;
+				}
+			}
+		case "group":
+			registerPlainTextLabelRequiredMarker("post", " > .components-tools-panel > .components-tools-panel-header > *");
+			const currentTypes = parentTypes.toSpliced(parentTypes.length - 1, 0, 'object');
+			const hydratedProperties = (config.fields ?? [])
+				.map(property => hydrateSimpleNativeProperty(property, propPath, outsideHydrationInfo, currentTypes));
+			if (config.default !== undefined) {
+				if (parentTypes.length !== 0) {
+					console.error("Non-root groups should not have default values set.",
+						"The resulting behavior is undefined and almost guaranteed to break.");
+				} else if (hydratedProperties.some(prop => prop.name in config.default!)) {
+					console.error("Groups should not have default values that conflict with their contained fields set.",
+						"The resulting behavior is undefined and almost guaranteed to break.");
+				}
+			}
+			const actualDefaultValues: {[key in string]: unknown} = {};
+			if (config.interface === 'toolsPanel') {
+				for (const hydratedProperty of hydratedProperties) {
+					actualDefaultValues[hydratedProperty.name] = hydratedProperty.default;
+					hydratedProperty.default = undefined;
+				}
+			}
+			return {
+				type: 'object',
+				alwaysStore: config.alwaysStore,
+				default: config.default,
+				children: hydratedProperties,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots}: SNPControlProps<Dict<any>>) {
+					return <ToolsPanelContext.Provider value={makeToolsPanelContextValue(actualDefaultValues)}>
+						<SNPGroupComponent config={config} hydratedProperties={hydratedProperties} onChange={onChange} value={value} {...slots} />
+					</ToolsPanelContext.Provider>;
+				}
+			};
+		case "image":
+			return {
+				type: 'object',
+				alwaysStore: config.alwaysStore,
+				default: undefined,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots}: SNPControlProps<ImageData>) {
+					return <ImageControl includeFocalPointPicker={config.includeFocalPointPicker} storage={config.storage} label={config.label} help={config.help} onChange={onChange} value={value} {...slots} />;
+				}
+			} as GenericSimpleNativeProperty<ImageData, 'object'>;
+		case "link":
+			return {
+				type: 'object',
+				default: config.default,
+				alwaysStore: config.alwaysStore,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots: {Label, Messages}}) {
+					return <>
+						<ProperLinkControl
+							{...config.component}
+							hasRichPreviews
+							hasTextControl
+							help={config.help}
+							label={<Label />}
+							onChange={onChange}
+							settings={config.settings === false || config.settings === undefined ? false : (config.settings === true ? ProperLinkControl.DEFAULT_LINK_SETTINGS : config.settings)}
+							value={value}
+						/>
+						<Messages />
+					</>;
+				}
+			};
+		case "list":
+			const sharedProps: ShareableSNPElements<'array'> = {...passthroughProps, type: 'array', alwaysStore: config.alwaysStore};
+			switch (config.itemType) {
+				case undefined:
+				case "string":
+					return {
+						...sharedProps,
+						default: config.default,
+						type: 'array',
+						validator: config.validator,
+						transformer: config.transformer,
+						control({value, onChange, slots}) {
+							const children = useCallback((datum: any, onDatumChange: (datum: any) => void) => {
+								return <TextControl {...config.listComponent} value={datum} onChange={onDatumChange}/>;
+							}, [config.listComponent]);
+							return <SortableItemsControl {...config.component} {...slots}
+								value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
+								help={config.help} emptyValue={config.emptyValue ?? ''} children={children}
+							/>;
+						}
+					};
+				case "float":
+				case "int":
+				case "integer":
+					return {
+						...sharedProps,
+						default: config.default,
+						type: 'array',
+						validator: config.validator,
+						transformer: config.transformer,
+						control({value, onChange, slots}) {
+							const children = useCallback((datum: any, onDatumChange: (datum: any) => void) => {
+								return <NumberLikeListTextControl listComponent={config.listComponent} datum={datum} itemType={config.itemType} onDatumChange={onDatumChange} />;
+							}, [config.listComponent, config.itemType]);
+							return <SortableItemsControl {...config.component} {...slots}
+								value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
+								help={config.help} emptyValue={config.emptyValue ?? 0} children={children}
+							/>;
+						}
+					};
+				default:
+					const currentTypes = parentTypes.toSpliced(parentTypes.length - 1, 0, 'array');
+					if (isObjectListPropertyConfig(config)) {
+						const hydratedProperties = config.itemType
+							.map(property => hydrateSimpleNativeProperty(property, propPath, outsideHydrationInfo, currentTypes));
+						const def = config.default ?? [];
+						return {
+							...sharedProps,
+							children: hydratedProperties,
+							default: def, // This type-checks, but directly inlining the value doesn't
+							validator: config.validator,
+							transformer: config.transformer,
+							control({value, onChange, slots}) {
+								return <SNPListComponent config={config as ObjectListPropertyConfig} onChange={onChange} value={value}
+								                         hydratedProperties={hydratedProperties} {...slots} />;
+							}
+						}
+					} else {
+						const sharedProperties = config.sharedProperties;
+						const completedItemTypes = sharedProperties?.length
+							? Object.fromEntries(Object.entries(config.itemType)
+								.map(([key, v]) => [key, {...v, properties: [...sharedProperties, ...v.properties]}]))
+							: config.itemType;
+						const availableTypes = Object.entries(completedItemTypes)
+							.map(([value, {label}]) => ({value, label}));
+						if (!arrayIsNotEmpty(availableTypes)) {
+							return invalidConfigMessageControl(config, passthroughProps, "Flexible Items lists must defined at least one item type.");
+						}
+
+						const invalidFlexibleItemDefinition = Object.values(completedItemTypes)
+							.find(({properties}) => properties.some(property => property.name === 'type'));
+						if (invalidFlexibleItemDefinition) {
+							return invalidConfigMessageControl(config, passthroughProps, "Flexible item definitions CANNOT include a property named 'type'");
+						}
+						const hydratedProperties = Object.fromEntries(
+							Object.entries(completedItemTypes)
+							.map(([itemType, {properties}]) => {
+								return [itemType, properties
+									.map(property => hydrateSimpleNativeProperty(property, propPath, outsideHydrationInfo, currentTypes))]
+							})
+						);
+						const emptyValues = Object.fromEntries(
+							Object.entries(completedItemTypes).map(([itemType, {emptyValue}]) => {
+								return [itemType, {...emptyValue, type: itemType}];
+							}));
+						const def = config.default ?? [];
+						return {
+							...sharedProps,
+							children: hydratedProperties,
+							default: def, // This type-checks, but directly inlining the value doesn't
+							validator: config.validator,
+							transformer: config.transformer,
+							control({value, onChange, slots}) {
+								return <SNPFlexibleItemsListComponent
+									config={config as FlexibleItemsListPropertyConfig} onChange={onChange} value={value} emptyValues={emptyValues}
+									hydratedProperties={hydratedProperties} availableTypes={availableTypes} {...slots}
+								/>;
+							}
+						}
+					}
+			}
+		case "number":
+			return {
+				type: 'number',
+				default: config.default,
+				alwaysStore: config.alwaysStore,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots: {Label, Messages}}) {
+					const safeOnChange = useCallback((v: string) => onChange(float ? parseFloat(v) : parseInt(v)), [onChange]);
+					const float = config.float || config.step === 'any'
+						|| (config.min !== undefined && !Number.isInteger(config.min))
+						|| (config.max !== undefined && !Number.isInteger(config.max))
+						|| (config.step !== undefined && !Number.isInteger(config.step));
+					return <>
+						<TextControl {...config.component}
+							type="number" value={value ?? ''} min={config.min} max={config.max} step={config.step ?? (float ? "any" : undefined)}
+							onChange={safeOnChange} label={<Label />} help={config.help} placeholder={config.placeholder}
+						/>
+						<Messages />
+					</>;
+				}
+			};
+		case "post":
+			registerPlainTextLabelRequiredMarker("post", " > .components-form-token-field .components-form-token-field__label");
+			return hydratePostProperty(config);
+		case "radio":
+			return {
+				type: 'string',
+				enum: config.enum,
+				default: config.default,
+				alwaysStore: config.alwaysStore,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots}) {
+					return <PotentiallyExtendedRadioControl config={config} onChange={onChange} value={value} {...slots} />;
+				}
+			};
+		case "range":
+			registerPlainTextLabelRequiredMarker("range", " > .components-range-control > .components-base-control__field > .components-base-control__label");
+			return {
+				type: 'number',
+				enum: config.enum,
+				default: config.default,
+				alwaysStore: config.alwaysStore,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots: {Messages}}) {
+					return <>
+						<RangeControl
+							{...config.component} value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
+							step={config.step} help={config.help}
+						/>
+						<Messages />
+					</>;
+				}
+			};
+		case "select":
+			registerPlainTextLabelRequiredMarker("select", " > .components-form-token-field .components-form-token-field__label");
+			return hydrateSelectProperty(config);
+		case "taxonomy":
+			registerPlainTextLabelRequiredMarker("taxonomy", " > .components-form-token-field .components-form-token-field__label");
+			return hydrateTaxonomyProperty(config);
+		case "term":
+			registerPlainTextLabelRequiredMarker("term", " > .components-form-token-field .components-form-token-field__label");
+			return hydrateTermProperty(config);
+		case "textarea":
+			return {
+				type: 'string',
+				default: config.default,
+				alwaysStore: config.alwaysStore,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots}) {
+					return <ExtendedTextareaControl {...config} value={value} onChange={onChange} {...slots} />;
+				}
+			};
+		case "text":
+			return {
+				type: 'string',
+				default: config.default,
+				alwaysStore: config.alwaysStore,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots: {Label, Messages}}) {
+					return <>
+						<TextControl {...config.component} value={value ?? ''} onChange={onChange} label={<Label />} help={config.help} placeholder={config.placeholder} />
+						<Messages />
+					</>;
+				}
+			};
+		case "toggle":
+			registerPlainTextLabelRequiredMarker("toggle", ToggleGroupControlLabelSelector);
+			return {
+				type: 'boolean',
+				default: config.default,
+				alwaysStore: config.alwaysStore,
+				...passthroughProps,
+				validator: config.validator,
+				transformer: config.transformer,
+				control({value, onChange, slots: {Label, Messages}}) {
+					const switchCfg = useMemo(() => config.switch ?? {}, [config.switch]);
+					if (switchCfg.small === true) {
+						return <>
+							<ToggleControl {...config.component as Partial<ComponentPropsWithoutRef<typeof ToggleControl>>} checked={value} onChange={onChange} label={<Label />} help={config.help} />
+							<Messages />
+						</>;
+					} else {
+						return <>
+							<FullSizeToggleControl
+								componentConfig={config.component as Partial<ComponentPropsWithoutRef<typeof ToggleGroupControl>>} label={config.label} help={config.help}
+								onChange={onChange} switchCfg={switchCfg} value={value} />
+							<Messages />
+						</>;
+					}
+				}
+			};
+		case "toggleGroup":
+			registerPlainTextLabelRequiredMarker("toggleGroup", ToggleGroupControlLabelSelector);
+			if (isStringValuedToggleGroupCSNPConfig(config)) {
+				return {
+					type: 'string',
+					default: config.default,
+					alwaysStore: config.alwaysStore,
+					...passthroughProps,
+					validator: config.validator,
+					transformer: config.transformer,
+					control({value, onChange, slots: {Messages}}) {
+						const unsuspendedOptions = useSuspendableOptions(config);
+						const options = useMemo(() => {
+							return normalizePickableOptionsToPairs(unsuspendedOptions);
+						}, [unsuspendedOptions]);
+						const safeOnChange = useCallback((v: string|number|undefined) => onChange(v?.toString()), [onChange]);
+						return <>
+							<ToggleGroupControl
+								{...config.component} value={value} onChange={safeOnChange} label={config.label} help={config.help} isBlock isDeselectable={config.clearable ?? false}
+								children={options.map(([value, label]) => {
+									return <ToggleGroupControlOptionWithOptionalIcon key={value} value={value} label={label}/>;
+								})}
+							/>
+							<Messages />
+						</>;
+					}
+				};
+			} else {
+				return {
+					type: 'number',
+					default: config.default,
+					alwaysStore: config.alwaysStore,
+					...passthroughProps,
+					validator: config.validator,
+					transformer: config.transformer,
+					control({value, onChange, slots: {Messages}}) {
+						const unsuspendedOptions = useSuspendableOptions(config);
+						const options = useMemo(() => {
+							return normalizePickableOptionsToPairs(unsuspendedOptions);
+						}, [unsuspendedOptions]);
+						const safeOnChange = useCallback(
+							(v: string|number|undefined) => onChange(v === undefined || typeof v === 'number' ? v : (v.includes('.') ? parseFloat(v) : parseInt(v))),
+							[onChange]);
+						return <>
+							<ToggleGroupControl
+								{...config.component} value={value} label={config.label} help={config.help} isBlock isDeselectable={config.clearable ?? false}
+								onChange={safeOnChange}
+							>
+								{...options.map(([value, label]) =>
+									(<ToggleGroupControlOptionWithOptionalIcon key={value} value={value} label={label} />))}
+							</ToggleGroupControl>
+							<Messages />
+						</>;
+					}
+				};
+			}
+		case "user":
+			registerPlainTextLabelRequiredMarker("user", " > .components-form-token-field .components-form-token-field__label");
+			return hydrateUserProperty(config);
+		default:
+			console.error("Invalid control name:", (config as any).control, "\nFalling back to a minimally-configured text control.");
+			return hydrateDesiccatedSimpleNativeProperty({
+				control: "text",
+				name: (config as any).name,
+				label: (config as any).label
+			}, propPath, outsideHydrationInfo, parentTypes);
+	}
+}
+const ToggleGroupControlLabelSelector: string = " > .components-base-control > .components-base-control__field:has(> [data-wp-component='ToggleGroupControl']) .components-base-control__label";
+
+type NumberLikeListTextControlProps = {listComponent?: ComponentPropsWithoutRef<typeof TextControl>, datum: string, itemType: string, onDatumChange(value: any): void};
+function NumberLikeListTextControl({listComponent, datum, itemType, onDatumChange}: NumberLikeListTextControlProps) {
+	const onChange = useCallback((v: string) => onDatumChange(itemType !== 'float' ? parseInt(v) : parseFloat(v)), [itemType, onDatumChange])
+	return <TextControl {...listComponent} type="number" value={datum} onChange={onChange} />
+}
+
+type PotentiallyExtendedRadioControlProps = CSNPControlComponentProps<RadioPropertyCSNPConfig, string>&SNPControlSlots;
+function PotentiallyExtendedRadioControl({config, value, onChange, Label, Messages}: PotentiallyExtendedRadioControlProps) {
+	const unsuspendedOptions = useSuspendableOptions(config);
+	const options = useAsOptions(unsuspendedOptions, value);
+
+	if (config.allowCustom) {
+		return <ExtendedRadioControl {...config.component} selected={value} onChange={onChange} options={options} label={config.label} help={config.help}
+		                             allowCustom={true} Label={Label} Messages={Messages} />;
+	} else {
+		return <>
+			<RadioControl {...config.component} selected={value} onChange={onChange} options={options} label={Label ? <Label /> : config.label} help={config.help} />
+			<Messages />
+		</>;
+	}
+}
+
+export function hydratePostProperty(config: PostPropertyCSNPConfig): HydratedSimpleNativeProperty {
+	if (config.multiple) {
+		return {
+			name: config.name,
+			type: 'array',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			required: config.required,
+			validator: config.validator,
+			transformer: config.transformer,
+			controlType: 'post',
+			control({value, onChange, slots: {Messages}}: SNPControlProps<number[]>) {
+				const safeOnChange = useCallback((v: string[]) => onChange(v.map(v => parseInt(v))), [onChange]);
+				const safeValue = useMemo(() => value?.map(v => v.toString()), [value]);
+				return <ExtendedPostPicker
+					{...config.component}
+					multiple={true}
+					label={config.label}
+					help={config.help}
+					value={safeValue}
+					onChange={safeOnChange}
+					postTypes={config.postTypes}
+					Messages={Messages}
+				/>;
+			}
+		};
+	} else {
+		return {
+			name: config.name,
+			type: 'number',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			required: config.required,
+			validator: config.validator,
+			transformer: config.transformer,
+			controlType: 'post',
+			control({value, onChange, slots: {Messages}}: SNPControlProps<number>) {
+				return <ExtendedPostPicker
+					{...config.component}
+					multiple={false}
+					label={config.label}
+					help={config.help}
+					value={value?.toString()}
+					onChange={useCallback(v => onChange(parseInt(v)), [onChange])}
+					postTypes={config.postTypes}
+					Messages={Messages}
+				/>;
+			}
+		};
+	}
+}
+
+export function hydrateUserProperty(config: UserPropertyCSNPConfig): HydratedSimpleNativeProperty {
+	if (config.multiple) {
+		return {
+			name: config.name,
+			type: 'array',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			required: config.required,
+			validator: config.validator,
+			transformer: config.transformer,
+			controlType: 'user',
+			control({value, onChange, slots: {Messages}}: SNPControlProps<number[]>) {
+				const safeOnChange = useCallback((v: string[]) => onChange(v.map(v => parseInt(v))), [onChange]);
+				const safeValue = useMemo(() => value?.map(v => v.toString()), [value]);
+				return <ExtendedUserPicker
+					{...config.component}
+					multiple={true}
+					label={config.label}
+					help={config.help}
+					value={safeValue}
+					onChange={safeOnChange}
+					userRoles={config.userRoles}
+					Messages={Messages}
+				/>;
+			}
+		};
+	} else {
+		return {
+			name: config.name,
+			type: 'number',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			required: config.required,
+			validator: config.validator,
+			transformer: config.transformer,
+			controlType: 'user',
+			control({value, onChange, slots: {Messages}}: SNPControlProps<number>) {
+				return <ExtendedUserPicker
+					{...config.component}
+					multiple={false}
+					label={config.label}
+					help={config.help}
+					value={value?.toString()}
+					onChange={useCallback(v => onChange(parseInt(v)), [onChange])}
+					userRoles={config.userRoles}
+					Messages={Messages}
+				/>;
+			}
+		};
+	}
+}
+
+export function hydrateTaxonomyProperty(config: TaxonomyPropertyCSNPConfig): HydratedSimpleNativeProperty {
+	if (config.multiple === false) {
+		return {
+			name: config.name,
+			type: 'string',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			required: config.required,
+			validator: config.validator,
+			transformer: config.transformer,
+			controlType: 'taxonomy',
+			control({value, onChange, slots: {Messages}}) {
+				return <ExtendedTaxonomyPicker
+					{...config.component}
+					multiple={false}
+					label={config.label}
+					help={config.help}
+					value={value}
+					visibility={config.visibility}
+					onChange={onChange}
+					Messages={Messages}
+				/>;
+			}
+		};
+	} else {
+		return {
+			name: config.name,
+			type: 'array',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			required: config.required,
+			validator: config.validator,
+			transformer: config.transformer,
+			controlType: 'taxonomy',
+			control({value, onChange, slots: {Messages}}: SNPControlProps<string[]>) {
+				return <ExtendedTaxonomyPicker
+					{...config.component}
+					multiple={true}
+					label={config.label}
+					help={config.help}
+					value={value}
+					visibility={config.visibility}
+					onChange={onChange}
+					Messages={Messages}
+				/>;
+			}
+		};
+	}
+}
+
+export function hydrateTermProperty(config: TermPropertyCSNPConfig): HydratedSimpleNativeProperty {
+	if (config.multiple === false) {
+		return {
+			name: config.name,
+			type: 'string',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			required: config.required,
+			validator: config.validator,
+			transformer: config.transformer,
+			controlType: 'taxonomy',
+			control({value, onChange, slots: {Messages}}) {
+				return <ExtendedTermPicker
+					{...config.component}
+					multiple={false}
+					label={config.label}
+					help={config.help}
+					value={value}
+					taxonomy={config.taxonomy}
+					onChange={onChange}
+					Messages={Messages}
+				/>;
+			}
+		};
+	} else {
+		return {
+			name: config.name,
+			type: 'array',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			required: config.required,
+			validator: config.validator,
+			transformer: config.transformer,
+			controlType: 'taxonomy',
+			control({value, onChange, slots: {Messages}}: SNPControlProps<string[]>) {
+				return <ExtendedTermPicker
+					{...config.component}
+					multiple={true}
+					label={config.label}
+					help={config.help}
+					value={value}
+					taxonomy={config.taxonomy}
+					onChange={onChange}
+					Messages={Messages}
+				/>;
+			}
+		};
+	}
+}
+
+function hydrateSelectProperty(config: SelectPropertyCSNPConfig): HydratedSimpleNativeProperty {
+	if (config.multiple) {
+		return {
+			name: config.name,
+			label: config.label,
+			type: 'array',
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			required: config.required,
+			validator: config.validator,
+			transformer: config.transformer,
+			controlType: 'select',
+			control({value, onChange, slots: {Messages}}) {
+				return <MultiSelectControl value={value ?? config.default} onChange={onChange} options={useSuspendableOptions(config)} label={config.label}
+				                           help={config.help} expandOnFocus={config.expandOnFocus} Messages={Messages} maxLength={config.maxLength} />;
+			}
+		};
+	} else {
+		return {
+			name: config.name,
+			label: config.label,
+			type: 'string',
+			enum: config.enum,
+			default: config.default,
+			condition: config.condition,
+			alwaysStore: config.alwaysStore,
+			required: config.required,
+			validator: config.validator,
+			transformer: config.transformer,
+			controlType: 'select',
+			control({value, onChange, slots: {Label, Messages}}) {
+				const normalizedOptions = useAsOptions(useSuspendableOptions(config), value, config.clearable ? '' : undefined);
+				return <>
+					<SelectControl value={value ?? config.default ?? ''} onChange={onChange} options={normalizedOptions} label={<Label />} help={config.help}/>
+					<Messages />
+				</>;
+			}
+		};
+	}
+}
+
+function useAsOptions<T extends string|number>(options: PickableOptions<T>, currentValue: T|undefined|null, noSelectionValue?: T) {
+	const normalizedOptions = useMemo(() => asOptions(options, noSelectionValue), [options, noSelectionValue]);
+	return useMemo(() => {
+		if ((currentValue !== undefined && currentValue !== null) && !normalizedOptions.find(opt => opt.value === currentValue)) {
+			if (noSelectionValue !== undefined && !normalizedOptions.some(opt => !opt.value)) {
+				return [normalizedOptions[0]!, {value: currentValue, label: currentValue.toString(), disabled: true}, ...normalizedOptions.slice(1)];
+			} else {
+				return [{value: currentValue, label: currentValue.toString(), disabled: true}, ...normalizedOptions];
+			}
+		}
+		return normalizedOptions;
+	}, [normalizedOptions, currentValue]);
+}
+function asOptions<T extends string|number>(options: PickableOptions<T>, noSelectionValue?: T) {
+	const res: Array<{ value: T, label: string, disabled?: boolean }> = normalizePickableOptionsToPairs(options)
+		.map(opt => ({value: opt[0], label: (typeof opt[1] === 'string' ? opt[1] : opt[1].text) ?? opt[0].toString()}));
+	if (noSelectionValue !== undefined && !res.some(opt => !opt.value)) {
+		res.splice(0, 0, {value: noSelectionValue, label: "-- No Selection --"});
+	}
+	return res;
+}
+
+function hasDefinedKey<O extends object, K extends keyof O>(obj: O, key: K): obj is O&Required<Pick<O, K>> {
+	return obj[key] !== undefined;
+}
+
+function invalidConfigMessageControl(config: CSNPConfig, passthroughProps: PassthroughPropsType, message: string) {
+	return {
+		type: 'string',
+		default: config.default,
+		alwaysStore: true,
+		...passthroughProps,
+		validator: config.validator,
+		transformer: config.transformer,
+		control() {
+			return <Disabled>
+				<p>Invalid configuration for {config.label}: {message}</p>
+			</Disabled>;
+		}
+	} as any;
+}
+
+export function registerPlainTextLabelRequiredMarker(componentType: string, labelSelectorFragment: string) {
+	let loadedStyles: { componentTypes: Set<string>, sheet: CSSStyleSheet }|undefined = (window as any).plauditGutenbergExtensionsPlainTextLabelCSSLoaded;
+	if (loadedStyles === undefined) {
+		(window as any).plauditGutenbergExtensionsPlainTextLabelCSSLoaded = loadedStyles = {componentTypes: new Set(), sheet: new CSSStyleSheet()};
+		document.adoptedStyleSheets.push(loadedStyles.sheet);
+	}
+	if (loadedStyles.componentTypes.has(componentType)) {
+		return;
+	}
+	loadedStyles.componentTypes.add(componentType);
+	loadedStyles.sheet.insertRule(`.plaudit-snp-laid-out-property.required[data-plaudit-snp-control-type='${componentType}']${labelSelectorFragment}:after {content:" *";color: red;}`);
+}