@plaudit/gutenberg-api-extensions 2.8.0 → 2.10.0

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

@@ -1,271 +0,0 @@
-import {MediaUpload, MediaUploadCheck} from "@wordpress/block-editor";
-import {
-	Button,
-	Card,
-	CardBody,
-	CardHeader,
-	FocalPointPicker,
-	RadioControl,
-	RangeControl,
-	SelectControl,
-	ResponsiveWrapper,
-	TextareaControl,
-	TextControl,
-	ToggleControl,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalHeading as Heading,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon
-} from "@wordpress/components";
-import type {RadioControlProps} from "@wordpress/components/build-types/radio-control/types";
-import type {RangeControlProps} from "@wordpress/components/build-types/range-control/types";
-import type {TextControlProps} from "@wordpress/components/build-types/text-control/types";
-import type {TextareaControlProps} from "@wordpress/components/build-types/textarea-control/types";
-import type {ToggleControlProps} from "@wordpress/components/build-types/toggle-control/types";
-import type {ToggleGroupControlProps} from "@wordpress/components/build-types/toggle-group-control/types";
-import {useSelect} from "@wordpress/data";
-import {__} from "@wordpress/i18n";
-
-import type {PickableOptions} from "../controls/types";
-import type {SimpleNativeProperty} from "./simple-native-property";
-
-import React, {type ReactElement} from "react";
-
-export type ActualBlockEditProps = { attributes: Record<string, any>, setAttributes: (attributes: Record<string, any>) => void, name: string };
-type CommonPropertyConfig<T, V> = {
-	name: string,
-	label: string,
-	default: T,
-	enum?: T[],
-	component?: Partial<V>,
-	help?: string,
-	alwaysStore?: boolean,
-	condition?(blockEditProps: ActualBlockEditProps): boolean
-}
-
-export function rangeProperty(config: CommonPropertyConfig<number, RangeControlProps> & {
-	min: number,
-	max: number,
-	step?: number,
-	enum?: number[]
-}): SimpleNativeProperty {
-	return {
-		name: config.name,
-		type: 'number',
-		enum: config.enum,
-		default: config.default,
-		condition: config.condition,
-		alwaysStore: config.alwaysStore,
-		renderer(value, onChange) {
-			return <RangeControl value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
-			                     step={config.step} help={config.help} {...config.component} />;
-		}
-	};
-}
-
-export function radioProperty(config: CommonPropertyConfig<string, RadioControlProps> & {
-	options: PickableOptions<string>
-}): SimpleNativeProperty {
-	return {
-		name: config.name,
-		type: 'string',
-		enum: config.enum,
-		default: config.default,
-		condition: config.condition,
-		alwaysStore: config.alwaysStore,
-		renderer(value, onChange) {
-			return <RadioControl selected={value} onChange={onChange} options={asOptions(config.options)} label={config.label}
-			                     help={config.help} {...config.component} />;
-		}
-	};
-}
-
-export function selectProperty(config: CommonPropertyConfig<string, never> & {
-	options: PickableOptions<string>
-}): SimpleNativeProperty {
-	return {
-		name: config.name,
-		type: 'string',
-		enum: config.enum,
-		default: config.default,
-		condition: config.condition,
-		alwaysStore: config.alwaysStore,
-		renderer(value, onChange) {
-			return <SelectControl value={value ?? ''} onChange={onChange} options={asOptions(config.options, '')} label={config.label} help={config.help} />;
-		}
-	};
-}
-
-export function toggleProperty(config: CommonPropertyConfig<boolean, ToggleControlProps>): SimpleNativeProperty {
-	return {
-		name: config.name,
-		type: 'boolean',
-		default: config.default,
-		condition: config.condition,
-		alwaysStore: config.alwaysStore,
-		renderer(value, onChange) {
-			return <ToggleControl checked={value} onChange={onChange} label={config.label} help={config.help} {...config.component} />;
-		}
-	};
-}
-
-type ToggleGroupPropertyConfigBase<T extends string|number> = CommonPropertyConfig<T, ToggleGroupControlProps>&{options: PickableOptions<T, {icon: ReactElement}>};
-export type ToggleGroupPropertyConfig = ToggleGroupPropertyConfigBase<string>|ToggleGroupPropertyConfigBase<number>;
-
-export function toggleGroupProperty(config: ToggleGroupPropertyConfig): SimpleNativeProperty {
-	const children = config.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}/>);
-
-	if (typeof config.default === 'string') {
-		return {
-			name: config.name,
-			type: 'string',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			renderer(value, onChange) {
-				return <ToggleGroupControl
-					value={value} onChange={v => onChange(v?.toString())}
-					label={config.label} help={config.help} isBlock {...config.component}
-					children={children} />;
-			}
-		};
-	} else {
-		return {
-			name: config.name,
-			type: 'number',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			renderer(value, onChange) {
-				return <ToggleGroupControl
-					value={value} label={config.label} help={config.help} isBlock {...config.component}
-					onChange={v => onChange(v === undefined || typeof v === 'number' ? v : (v.includes('.') ? parseFloat(v) : parseInt(v)))}
-					children={children} />;
-			}
-		};
-	}
-}
-
-export function textProperty(config: CommonPropertyConfig<string, TextControlProps>): SimpleNativeProperty {
-	return {
-		name: config.name,
-		type: 'string',
-		default: config.default,
-		condition: config.condition,
-		alwaysStore: config.alwaysStore,
-		renderer(value, onChange) {
-			return <TextControl value={value} onChange={onChange} label={config.label} help={config.help} {...config.component} />;
-		}
-	};
-}
-
-export function textareaProperty(config: CommonPropertyConfig<string, TextareaControlProps>): SimpleNativeProperty {
-	return {
-		name: config.name,
-		type: 'string',
-		default: config.default,
-		condition: config.condition,
-		alwaysStore: config.alwaysStore,
-		renderer(value, onChange) {
-			return <TextareaControl value={value} onChange={onChange} label={config.label} help={config.help} {...config.component} />;
-		}
-	};
-}
-
-export type ImagePropertyData = {media?: {id?: number, url?: string}, pos?: {x?: number, y?: number}};
-export function imageProperty(config: Omit<CommonPropertyConfig<ImagePropertyData, {}>, 'default'> & Partial<Pick<CommonPropertyConfig<ImagePropertyData, {}>, 'default'>> & {
-	enableFocalPointPicker?: boolean
-}): SimpleNativeProperty {
-	return {
-		name: config.name,
-		type: "object",
-		condition: config.condition,
-		alwaysStore: config.alwaysStore,
-		default: {media: {id: config.default?.media?.id ?? 0, url: config.default?.media?.url ?? ''}, pos: {x: config.default?.pos?.x ?? 50, y: config.default?.pos?.y ?? 50}},
-		renderer(value: ImagePropertyData, onChange) {
-			const {media} = useSelect(select => {
-				return { media: value.media?.id ? (select('core') as any).getMedia(value.media.id) : undefined };
-			}, [value]);
-
-			const noImageUploadedVersion = <MediaUploadCheck>
-				<MediaUpload
-					onSelect={media => onChange({...value, media: {id: media.id, url: media['url']}})}
-					value={value.media?.id ?? 0}
-					allowedTypes={['image']}
-					render={({open}) => (
-						<Button
-							className={!value.media?.id ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview'}
-							onClick={open}
-						>
-							{!value.media?.id && __('Choose an image', 'plaudit')}
-							{media &&
-                                <ResponsiveWrapper
-                                    naturalWidth={media.media_details.width}
-                                    naturalHeight={media.media_details.height}
-                                >
-                                    <img src={media.source_url} alt="The currently-selected image." />
-                                </ResponsiveWrapper>
-							}
-						</Button>
-					)}
-				/>
-			</MediaUploadCheck>;
-			let fppOrMedia;
-			if (config.enableFocalPointPicker !== false) {
-				fppOrMedia = <FocalPointPicker
-					onChange={pos => onChange({...value, pos: {x: pos.x * 100, y: pos.y * 100}})}
-					url={value.media?.url ?? ''}
-					value={{
-						x: (value.pos?.x ?? 50) / 100,
-						y: (value.pos?.y ?? 50) / 100
-					}}
-				/>;
-			} else {
-				fppOrMedia = <ResponsiveWrapper
-					naturalWidth={media?.media_details.width}
-					naturalHeight={media?.media_details.height}
-				>
-					<img src={value.media?.url ?? ''} alt="The currently-selected image." />
-				</ResponsiveWrapper>
-			}
-
-			const imageUploadedVersion = <>
-				{value.media?.url && fppOrMedia}
-				<MediaUploadCheck>
-					<MediaUpload
-						title={__('Replace image', 'plaudit')}
-						value={value.media?.id ?? 0}
-						onSelect={media => onChange({...value, media: {id: media.id, url: media['url']}})}
-						allowedTypes={['image']}
-						render={({open}) => (
-							<Button onClick={open} variant="secondary">{__('Replace image', 'plaudit')}</Button>
-						)}
-					/>
-				</MediaUploadCheck>
-				<MediaUploadCheck>
-					<Button onClick={() => onChange({...value, media: {id: 0, url: ''}})} isDestructive>{__('Remove image', 'plaudit')}</Button>
-				</MediaUploadCheck>
-			</>;
-			return <Card>
-				<CardHeader>
-					<Heading>{config.label}</Heading>
-				</CardHeader>
-				<CardBody>
-					<div className="editor-post-featured-image">
-						{value.media?.id ? imageUploadedVersion : noImageUploadedVersion}
-					</div>
-				</CardBody>
-			</Card>;
-		}
-	};
-}
-
-function asOptions<T extends string|number>(options: PickableOptions<T>, noSelectionValue?: T): Array<{ value: T, label: string }> {
-	const res = options.map(opt => ({value: opt[0], label: typeof opt[1] === 'string' ? opt[1] : opt[1].text}));
-	if (noSelectionValue !== undefined && !res.some(opt => !opt.value)) {
-		res.splice(0, 0, {value: noSelectionValue, label: "-- No Selection --"});
-	}
-	return res;
-}

package/src/blocks/index.ts

@@ -1,12 +0,0 @@
-import {installLayeredBlockStylesSupport} from "./layered-styles";
-import {installSimpleNativePropertiesSupport} from "./simple-native-property";
-
-export * from "./simple-block";
-export * from "./layered-styles";
-export * from "./simple-native-property";
-export * from './common-native-property-implementations';
-
-export function installGutenbergBlockExtensions() {
-	installLayeredBlockStylesSupport();
-	installSimpleNativePropertiesSupport();
-}

package/src/blocks/layered-styles.tsx

@@ -1,108 +0,0 @@
-import {createHigherOrderComponent} from "@wordpress/compose";
-import {addFilter} from "@wordpress/hooks";
-
-import React, {type ReactElement} from "react";
-
-import {InspectorPanel, PickOneFromColors, PickOneFromRadios, PickOneFromSelect, PickOneFromToggleGroup} from "../controls";
-import type {SimpleBlockControlProps, PickableOptions, SpecificValueBlockProps} from "../controls/types";
-
-type BaseLayeredBlockStyleLayer = {
-	name: string;
-	title: string;
-	default?: string|undefined;
-}
-
-type LayeredBlockStyleColorLayer = BaseLayeredBlockStyleLayer&{
-	picker: 'color';
-	options: PickableOptions<string, {color?: string}>;
-}
-
-type LayeredBlockStyleToggleLayer = BaseLayeredBlockStyleLayer&{
-	picker?: 'toggle-control';
-	options: PickableOptions<string, {icon: ReactElement}>;
-}
-type LayeredBlockStyleSelectOrRadioLayer = BaseLayeredBlockStyleLayer&{
-	picker: 'select'|'radio';
-	options: PickableOptions<string>;
-}
-
-export type LayeredBlockStyleLayer = LayeredBlockStyleColorLayer|LayeredBlockStyleToggleLayer|LayeredBlockStyleSelectOrRadioLayer;
-
-export interface LayeredBlockStylesConfig {
-	block: `${string}/${string}`;
-	layers: LayeredBlockStyleLayer[];
-}
-
-export function registerLayeredBlockStyles(config: LayeredBlockStylesConfig) {
-	const layeredBlockStyles: Map<string, LayeredBlockStylesConfig> = (window as any).plauditLayeredBlockStyles ?? ((window as any).plauditLayeredBlockStyles = new Map());
-	layeredBlockStyles.set(config.block, config);
-}
-
-export function installLayeredBlockStylesSupport() {
-	if ((window as any).plauditLayeredBlockStylesInstalled) {
-		return;
-	}
-	(window as any).plauditLayeredBlockStylesInstalled = true;
-	const layeredBlockStyles: Map<string, LayeredBlockStylesConfig> = (window as any).plauditLayeredBlockStyles ?? ((window as any).plauditLayeredBlockStyles = new Map());
-
-	function layeredStyleValueGetter(layer: LayeredBlockStyleLayer, block: SpecificValueBlockProps<'className', string|undefined>) {
-		const currentLayerClassPrefix = `style-${layer.name}-`;
-		return block.attributes['className']?.split(/\s+/).filter(cn => cn.startsWith(currentLayerClassPrefix))[0]?.substring(currentLayerClassPrefix.length) ?? layer.default ?? '';
-	}
-	function layeredStyleValueSetter(
-		attrs: Record<string, string>, layers: LayeredBlockStylesConfig['layers'], block: SpecificValueBlockProps<'className', string|undefined>
-	) {
-		const [key, value] = Object.entries(attrs)[0];
-		if (!key.startsWith("layeredStyles__")) {
-			return;
-		}
-
-		const layerName = key.substring(15);
-		const currentLayerClassPrefix = `style-${layerName}-`;
-		const classNames = block.attributes['className'] ? block.attributes['className'].split(/\s+/).filter(cn => !cn.startsWith(currentLayerClassPrefix)) : [];
-
-		const layerClassPrefixes = layers.map(layer => `style-${layer.name}-`);
-		const layerClasses = classNames.filter(cn => layerClassPrefixes.some(lcp => cn.startsWith(lcp)));
-		const nonLayerClasses = classNames.filter(cn => !layerClasses.includes(cn));
-
-		layerClasses.push(`${currentLayerClassPrefix}${value}`);
-		layerClasses.sort();
-
-		block.setAttributes({className: [...nonLayerClasses, ...layerClasses].join(' ')});
-	}
-
-	function convertLayersToRadios(
-		layer: LayeredBlockStyleLayer, layers: LayeredBlockStylesConfig['layers'], props: SimpleBlockControlProps<'className', string|undefined>
-	): React.JSX.Element {
-		const value = layeredStyleValueGetter(layer, props);
-		const sharedProps: SimpleBlockControlProps<string, string> = {
-			label: layer.title,
-			attribute: `layeredStyles__${layer.name}`,
-			attributes: {[`layeredStyles__${layer.name}`]: value},
-			setAttributes: attrs => layeredStyleValueSetter(attrs, layers, props)
-		}
-		switch (layer.picker) {
-			case undefined:
-			case 'toggle-control':
-				return <PickOneFromToggleGroup {...layer} {...sharedProps} />;
-			case 'color':
-				return <PickOneFromColors {...layer} {...sharedProps} />;
-			case 'radio':
-				return <PickOneFromRadios {...layer} {...sharedProps} />;
-			case 'select':
-				return <PickOneFromSelect {...layer} {...sharedProps} />;
-		}
-	}
-
-	addFilter('editor.BlockEdit', 'plaudit/gutenberg-api-extensions/layered-styles', createHigherOrderComponent(BlockEdit => (props: any) => {
-		if (!layeredBlockStyles.has(props['name'])) {
-			return <BlockEdit {...props} />;
-		}
-		return <>
-			<BlockEdit {...props} />
-			<InspectorPanel title="Layered Styles" initialOpen={true} group="styles">
-				{...layeredBlockStyles.get(props['name'])!.layers.map(layer => convertLayersToRadios(layer, layeredBlockStyles.get(props['name'])!.layers, props))}
-			</InspectorPanel>
-		</>;
-	}, 'plauditGutenbergApiExtensionsLayeredStyles'));
-}

package/src/blocks/simple-block.tsx

@@ -1,72 +0,0 @@
-import {type Block, type BlockConfiguration, type BlockSaveProps, registerBlockType} from "@wordpress/blocks";
-import {InnerBlocks, useBlockProps, useInnerBlocksProps} from "@wordpress/block-editor";
-import type {UseBlockProps} from "@wordpress/block-editor/components/use-block-props";
-
-import {plauditIcon} from "../lib/plaudit-icons";
-
-import React, {type ComponentType, type ReactNode} from "react";
-
-export type SimpleBlockTypeConfig<TAttributes extends Record<string, any>> = {
-	icon?: BlockConfiguration<TAttributes>['icon']|undefined,
-	defaults?: Required<TAttributes>,
-	controls?: NonNullable<Block<TAttributes>['edit']>,
-	renderer: (attributes: BlockSaveProps<TAttributes>, wrapperProps: UseBlockProps|UseBlockProps['save'], InnerBlocks: () => React.ReactElement, mode: "edit"|"save") => ReactNode,
-	innerBlocksProps?: InnerBlocks.Props
-	settings?: Partial<BlockConfiguration<TAttributes>>,
-};
-function applyDefaults<TAttributes extends Record<string, any>, K extends BlockSaveProps<TAttributes>>(config: Omit<SimpleBlockTypeConfig<TAttributes>, 'renderer'>, props: K) {
-	type attrs = { [P in keyof K['attributes']]: K['attributes'][P] };
-	const mutableProps = {...props, attributes: {...props.attributes}} as Omit<typeof props, 'attributes'>&{attributes: attrs};
-	for (const [k, v] of Object.entries(config.defaults ?? {}) as Array<[keyof typeof mutableProps.attributes, any]>) {
-		if (mutableProps.attributes[k] === undefined) {
-			mutableProps.attributes[k] = v;
-		}
-	}
-	return mutableProps;
-}
-
-export function registerSimpleBlockType<TAttributes extends Record<string, any> = {}>(
-	metadata: BlockConfiguration<TAttributes>, config: SimpleBlockTypeConfig<TAttributes>
-): Block<TAttributes>|undefined {
-	return registerBlockType<TAttributes>(metadata, {
-		...config.settings,
-		icon: config.icon ?? plauditIcon,
-		edit(props) {
-			const populatedProps = applyDefaults(config, props);
-			return <>
-				{config.controls && <config.controls {...populatedProps} />}
-				{config.renderer(populatedProps, useBlockProps, () => <InnerBlocks {...config.innerBlocksProps} />, "edit")}
-			</>;
-		},
-		save(props) {
-			return config.renderer(applyDefaults(config, props), useBlockProps.save, () => <InnerBlocks.Content />, "save");
-		}
-	});
-}
-
-type SimpleContainerTypeConfig<TAttributes extends Record<string, any>> = Omit<SimpleBlockTypeConfig<TAttributes>, 'renderer'>&{
-	tag?: ComponentType,
-	attributesFromProps?: (arg: ReturnType<typeof applyDefaults<TAttributes, BlockSaveProps<TAttributes>>>, mode: "edit"|"save") => Parameters<UseBlockProps|UseBlockProps['save']>[0]
-}
-
-export function registerSimpleContainerBlock<TAttributes extends Record<string, any> = {}>(
-	metadata: BlockConfiguration<TAttributes>, config: SimpleContainerTypeConfig<TAttributes>
-): Block<TAttributes>|undefined {
-	const Tag = config.tag ?? ((props: any) => <div {...props} />);
-	return registerBlockType<TAttributes>(metadata, {
-		...config.settings,
-		icon: config.icon ?? plauditIcon,
-		edit(props) {
-			const populatedProps = applyDefaults(config, props);
-			return <>
-				{config.controls && <config.controls {...populatedProps} />}
-				<Tag {...useInnerBlocksProps(useBlockProps(
-					(config.attributesFromProps ?? (() => ({} as Parameters<UseBlockProps>[0])))(populatedProps, "edit")), config.innerBlocksProps)} />
-			</>;
-		},
-		save(props) {
-			return <Tag {...useInnerBlocksProps.save(useBlockProps.save(
-				(config.attributesFromProps ?? (() => ({} as Parameters<UseBlockProps['save']>[0])))(applyDefaults(config, props), "edit")))} />;
-		}
-	})
-}

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

@@ -1,200 +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, 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 (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;
-					}
-					let ele: React.JSX.Element;
-					if (prop.type === "array") {// If the value is not an array or is a sparse array, then it will cause unrecoverable errors upon conversion to PHP
-						if (!Array.isArray(existingValue) || existingValue.length > existingValue.filter(() => true).length) {
-							throw new Error(`Invalid value passed to an array-type property: ${existingValue}`);
-						}
-						ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
-					} else if (prop.type === "object") {
-						if (Array.isArray(existingValue) || typeof existingValue !== 'object') {
-							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'));
-}