@plaudit/gutenberg-api-extensions 2.95.0 → 2.97.0

package/src/blocks/layout/LaidOutProperty.tsx

@@ -1,72 +0,0 @@
-import {createSlotFill, __experimentalToolsPanelItem as ToolsPanelItem, Spinner} from "@wordpress/components";
-import {memo, useCallback, useMemo} from "@wordpress/element";
-
-import {type NodeContextValue, useNodeContext} from "./NodeContext";
-import type {HydratedSimpleNativeProperty, SNPControlSlots} from "../simple-native-property-api";
-import {useToolsPanelContext} from "./ToolsPanelContext";
-
-import {Suspense} from "react";
-
-export type LaidOutPropertyProps = {property: HydratedSimpleNativeProperty, inToolsPanel?: boolean};
-export const LaidOutProperty = memo(function({property, inToolsPanel}: LaidOutPropertyProps) {
-	const nodeContext = useNodeContext("render a node");
-	if (nodeContext.rendered) {
-		return <ActualPropertyRenderer property={property} nodeContext={nodeContext} inToolsPanel={inToolsPanel} />;
-	}
-	return null;
-});
-const divStyle = {flex: "1"};
-function ActualPropertyRenderer({property, nodeContext, inToolsPanel}: {property: HydratedSimpleNativeProperty, nodeContext: NodeContextValue, inToolsPanel?: boolean}) {
-	const [
-		{Slot: Label, Fill: LabelFill},
-		{Slot: Messages, Fill: MessagesFill}
-	] = useMemo(() => [
-		createSlotFill(Symbol("laid-out-property-label")),
-		createSlotFill(Symbol("laid-out-property-messages"))
-	], []);
-	const onBlur = useCallback(() => nodeContext.validateNode(), [nodeContext]);
-
-	const classNames = ["plaudit-snp-laid-out-property"];
-	if (property.required) {
-		classNames.push("required");
-	}
-	if (nodeContext.validationError) {
-		classNames.push("has-validation-error");
-	}
-
-	const transformedValue = useMemo(() => property.transformer ? property.transformer.to(nodeContext.value) : nodeContext.value,
-		[nodeContext.value, property.transformer]);
-	const onChangeWithTransform = useCallback((value: any) => {
-		nodeContext.setValue(property.transformer ? property.transformer.from(value) : value);
-	}, [nodeContext.setValue, property.transformer]);
-
-	const commonParts = <>
-		<LabelFill>{property.label}{property.required && <span className="requiredMarker">*</span>}</LabelFill>
-		<MessagesFill>
-			{nodeContext.validationError && <div className="validation-error-message">{nodeContext.validationError.split(/\r?\n/gi).map(line => <>{line}<br/></>)}</div>}
-		</MessagesFill>
-	</>;
-	if (inToolsPanel) {
-		const toolsPanelContext = useToolsPanelContext("render a tools-panel property");
-		return <ToolsPanelItem
-			label={property.label ?? property.name}
-			hasValue={useCallback(() => transformedValue !== undefined, [transformedValue])}
-			onSelect={useCallback(() => nodeContext.setValue(toolsPanelContext.getDefaultValue(property.name)), [nodeContext.setValue, toolsPanelContext, property.name])}
-			onDeselect={useCallback(() => nodeContext.setValue(undefined), [nodeContext.setValue])}
-			resetAllFilter={useCallback((a: any) => a ? Object.fromEntries(Object.entries(a).filter(([name]) => name !== property.name)) : a, [property.name])}
-		>
-			{commonParts}{renderPropInner(property, onBlur, classNames, transformedValue, onChangeWithTransform, {Label, Messages})}
-		</ToolsPanelItem>;
-	} else {
-		return <>{commonParts}{renderPropInner(property, onBlur, classNames, transformedValue, onChangeWithTransform, {Label, Messages})}</>;
-	}
-}
-function renderPropInner(
-	property: HydratedSimpleNativeProperty, onBlur: () => void, classNames: string[], transformedValue: any, onChangeWithTransform: (value: any) => void, slots: SNPControlSlots
-) {
-	return <div style={divStyle} className={classNames.join(" ")} onBlur={onBlur} data-plaudit-snp-control-type={property.controlType}>
-		<Suspense fallback={typeof property.initializing === 'function' ? property.initializing() : <><Spinner /> {property.initializing}</>}>
-			<property.control value={transformedValue} onChange={onChangeWithTransform} slots={slots} />
-		</Suspense>
-	</div>;
-}

package/src/blocks/layout/LaidOutPropertyRow.tsx

@@ -1,28 +0,0 @@
-import {LaidOutProperty} from "./LaidOutProperty";
-import {NodeContextWrapper} from "./NodeContext";
-import type {DataController} from "../simple-native-property-api";
-import type {HydratedLaidOutProperties} from "../simple-native-property-internal-shared";
-
-import React from "react";
-
-type LaidOutPropertyRowProps = {property: HydratedLaidOutProperties[number], dataController?: DataController, inToolsPanel?: boolean};
-export function LaidOutPropertyRow(
-	{property, dataController, inToolsPanel}: LaidOutPropertyRowProps
-) {
-	if (Array.isArray(property)) {
-		return <div style={{display: "flex", flexWrap: "wrap", columnGap: "8px"}}>
-			{...property.map(prop => <NodeContextWrapper key={prop.name} nodeName={prop.name} dataController={dataController}>
-				<LaidOutProperty property={prop} inToolsPanel={inToolsPanel} />
-			</NodeContextWrapper>)}
-		</div>;
-	} else {
-		return <NodeContextWrapper nodeName={property.name} dataController={dataController}>
-			<LaidOutProperty property={property} inToolsPanel={inToolsPanel} />
-		</NodeContextWrapper>;
-	}
-}
-
-export function makeLaidOutPropertyRow({property, ...args}: LaidOutPropertyRowProps) {
-	const key = Array.isArray(property) ? property.map(prop => prop.name).join('-') : property.name;
-	return <LaidOutPropertyRow key={key} property={property} {...args} />;
-}

package/src/blocks/layout/NodeContext.tsx

@@ -1,54 +0,0 @@
-import {createContext, useContext, useMemo} from "@wordpress/element";
-
-import type {DataController, NodePath} from "../simple-native-property-api";
-
-import type {ReactNode} from "react";
-
-type NodeContextValueActions = {
-	setValue(value: any): void,
-	addNode(name: string|number, value?: any): void,
-	removeNode(name: string|number): void,
-	moveNode(indices: {from: number, to: number}|{from: string, to: string}): void,
-	validateNode(): void
-};
-export type NodeContextValue = {path: NodePath, dataController: DataController, rendered: boolean, validationError?: string, value: any}&NodeContextValueActions;
-
-export const NodeContext = createContext<NodeContextValue|undefined>(undefined);
-
-function makeNodeContextValue(path: NodePath, dataController: DataController): NodeContextValue {
-	const value = dataController.getValue(path);
-	const node = dataController.getNode(path);
-	// We memoize actions separately to reduce later re-render calls
-	const memoizedActions = useMemo<NodeContextValueActions>(() => ({
-		setValue: value => dataController.setValue(path, value),
-		addNode: (name, value) => dataController.addNode([...path, name], value),
-		removeNode: name => dataController.removeNode([...path, name]),
-		moveNode: indices => dataController.moveNode(path, indices),
-		validateNode: () => dataController.validateNode(path)
-	}), [path, dataController]);
-	// We can skip testing path and dataController because we're checking actions
-	return useMemo(() => ({path, dataController, rendered: node.rendered ?? true, validationError: node.validationError, value, ...memoizedActions}), [memoizedActions, node, value]);
-}
-
-export function useNodeContext(action: string): NodeContextValue {
-	const currentContext = useContext(NodeContext);
-	if (currentContext === undefined) {
-		throw new Error(`Cannot ${action} outside of an existing NodeContext`);
-	}
-	return currentContext;
-}
-
-export function DescendantNodeContext({nodeName, children}: {nodeName: string|number, children: ReactNode}) {
-	const currentContext = useNodeContext("create a descendant NodeContext");
-	const descendantPath = useMemo(
-		() => currentContext.path.toSpliced(currentContext.path.length, 0, nodeName) as NodePath, [nodeName, currentContext.path]);
-	return <NodeContext.Provider value={makeNodeContextValue(descendantPath, currentContext.dataController)} children={children} />;
-}
-export function RootNodeContext({nodeName, dataController, children}: {nodeName: string, dataController: DataController, children: ReactNode}) {
-	const path = useMemo<NodePath>(() => [nodeName], [nodeName]);
-	return <NodeContext.Provider value={makeNodeContextValue(path, dataController)} children={children} />;
-}
-type NodeContextWrapperProps = {nodeName: string|number, children: ReactNode, dataController?: undefined}|{nodeName: string, dataController: DataController, children: ReactNode};
-export function NodeContextWrapper(props: NodeContextWrapperProps) {
-	return props.dataController !== undefined ? RootNodeContext(props) : DescendantNodeContext(props);
-}

package/src/blocks/layout/PanelRoot.tsx

@@ -1,30 +0,0 @@
-import {InspectorControls} from "@wordpress/block-editor";
-import {PanelBody} from "@wordpress/components";
-import {cautionFilled} from "@wordpress/icons";
-
-import {testCondition} from "../conditions";
-import {makeLaidOutPropertyRow} from "./LaidOutPropertyRow";
-import {HydratedSimpleNativePanel, isRootLevelPanelGroup} from "../simple-native-property-internal-shared";
-import {useSNPTreeContext} from "../SNPTreeContext";
-
-import type {ComponentPropsWithoutRef} from "react";
-
-export type PanelRootProps = {panel: HydratedSimpleNativePanel};
-export function PanelRoot({panel}: PanelRootProps) {
-	const {condition, properties, raw, ...panelBodyProps} = panel;
-
-	const dataController = useSNPTreeContext("construct a PanelRoot");
-
-	if (!dataController.hasRenderedNode(properties)
-		|| !testCondition(condition, dataController.makePropertyValueResolver([]))) {
-		return null;
-	}
-
-	const bonusProps: Partial<ComponentPropsWithoutRef<typeof PanelBody>> = dataController.hasValidationErrors(properties)
-		? {icon: cautionFilled, buttonProps: {className: "has-validation-error components-panel__body-toggle"}} //We have to include the default button class for some insane reason
-		: {};
-
-	const panelGroup = panel.group === 'layered-styles' ? 'styles' : panel.group;
-	const children = properties.map(property => makeLaidOutPropertyRow({property, dataController}));
-	return <InspectorControls group={panelGroup} children={(raw ?? !isRootLevelPanelGroup(panelGroup)) ? children : <PanelBody {...panelBodyProps} {...bonusProps} children={children} />} />;
-}

package/src/blocks/layout/TabsRoot.tsx

@@ -1,56 +0,0 @@
-import {InspectorControls} from "@wordpress/block-editor";
-import {PanelBody, TabPanel} from "@wordpress/components";
-
-import {testCondition} from "../conditions";
-import {LaidOutPropertyRow, makeLaidOutPropertyRow} from "./LaidOutPropertyRow";
-import type {DataController, InspectorPanelGroup} from "../simple-native-property-api";
-import type {HydratedSimpleNativeTab, HydratedSimpleNativeTabItem, HydratedSimpleNativeTabGroup} from "../simple-native-property-internal-shared";
-import {useSNPTreeContext} from "../SNPTreeContext";
-
-import type {ComponentPropsWithoutRef, ReactNode} from "react";
-
-type Tab = ComponentPropsWithoutRef<typeof TabPanel>['tabs'][number]&{panels: [boolean, HydratedSimpleNativeTab['items'][number], string][]};
-
-export type TabsRootProps = {tabs: HydratedSimpleNativeTabGroup, tabGroupName: InspectorPanelGroup};
-export function TabsRoot({tabs, tabGroupName}: TabsRootProps) {
-	//TODO: It should be possible to use immer to make this entire thing memoized
-	const dataController = useSNPTreeContext("construct a TabsRoot component");
-	const instantiatedTabs = instantiateTabsForRenderCycle(tabs, dataController);
-	if (instantiatedTabs.every(tab => tab.disabled)) {
-		return null;
-	}
-	return <InspectorControls group={tabGroupName}>
-		<TabPanel tabs={instantiatedTabs} children={tab => (tab as Tab).panels
-			.filter(([rendered]) => rendered)
-			.map(([_, panel, key]) => <RenderedTabPanel dataController={dataController} panel={panel} key={key} />)} />
-	</InspectorControls>;
-}
-//TODO: Figure out how to memoize this (will probably need some sort of panel/tab-based cache in the dataController)
-function instantiateTabsForRenderCycle(hydratedTabs: {[name: string]: HydratedSimpleNativeTab}, dataController: DataController): Tab[] {
-	const propertyValueResolver = dataController.makePropertyValueResolver([]);
-	return Object.entries(hydratedTabs).map(([name, hydratedTab]) => {
-		const instantiatedPanels: Tab['panels'] = [];
-		let disabled = true;
-		let index = 0;
-		let hasValidationErrors = false;
-		for (const panel of hydratedTab.items) {
-			const rendered = dataController.hasRenderedNode(panel.properties) && (panel.condition === undefined || testCondition(panel.condition, propertyValueResolver));
-			if (rendered) {
-				if (!hasValidationErrors && dataController.hasValidationErrors(panel.properties)) {
-					hasValidationErrors = true;
-				}
-				disabled = false;
-			}
-			instantiatedPanels.push([rendered, panel, `rendered-tab-panel-${name}-${panel.title?.replaceAll(/\W+/gi, "-") ?? ""}-${index++}`]);
-		}
-		return {name, title: hydratedTab.title, panels: instantiatedPanels, disabled, className: hasValidationErrors ? "has-validation-error components-tab-panel__tabs-item" : undefined};
-	});
-}
-
-type RenderedTabPanelProps = {dataController: DataController, panel: HydratedSimpleNativeTabItem};
-function RenderedTabPanel({dataController, panel}: RenderedTabPanelProps): ReactNode {
-	// We have already tested the rendered-ness of the Panel earlier, so there's no need to redo it
-	const {condition, properties, raw, ...panelBodyProps} = panel;
-	const children = properties.map(property => makeLaidOutPropertyRow({property, dataController}));
-	return raw ? children : <PanelBody {...panelBodyProps} opened={panelBodyProps.title ? undefined : true} children={children} />;
-}

package/src/blocks/layout/ToolsPanelContext.tsx

@@ -1,22 +0,0 @@
-import {createContext, useContext, useMemo} from "@wordpress/element";
-
-export type ToolsPanelContextValue = {getDefaultValue(name: string): unknown, panelId: string};
-
-export const ToolsPanelContext = createContext<ToolsPanelContextValue|undefined>(undefined);
-
-let nextPanelId = 0;
-export function makeToolsPanelContextValue(actualDefaultValues: {[key in string]: unknown}): ToolsPanelContextValue {
-	const panelId = useMemo(() => (nextPanelId++).toString(), []);
-	return useMemo(() => ({
-		panelId,
-		getDefaultValue: (name: string) => actualDefaultValues[name]
-	}), [panelId, actualDefaultValues]);
-}
-
-export function useToolsPanelContext(action: string): ToolsPanelContextValue {
-	const currentContext = useContext(ToolsPanelContext);
-	if (currentContext === undefined) {
-		throw new Error(`Cannot ${action} outside of an existing ToolsPanelContext`);
-	}
-	return currentContext;
-}

package/src/blocks/problematic-blocks-blocker.ts

@@ -1,24 +0,0 @@
-import {addFilter} from "@wordpress/hooks";
-
-import {type BlockName, isBlockName, type RegisterBlockAttrs} from "../lib/useful-types";
-
-const blocksNamesToHide: Record<BlockName, boolean> = {};
-
-export function markBlocksAsProblematic(...blockNames: (string|BlockName)[]) {
-	for (const blockName of blockNames) {
-		blocksNamesToHide[isBlockName(blockName) ? blockName : `core/${blockName}` satisfies BlockName] = true;
-	}
-}
-
-addFilter('blocks.registerBlockType', 'plaudit-gutenberg-api-extensions/problematic-blocks-blocker', (atts: RegisterBlockAttrs) => {
-	if (blocksNamesToHide[atts.name]) {
-		return {
-			...atts,
-			supports: {
-				...(atts.supports ?? {}),
-				inserter: false
-			}
-		}
-	}
-	return atts;
-});

package/src/blocks/problematic-variations-blocker.ts

@@ -1,32 +0,0 @@
-import {addFilter} from "@wordpress/hooks";
-
-import type {BlockName, RegisterBlockAttrs} from "../lib/useful-types";
-
-const blockVariationsToHide: Record<BlockName, Record<string, boolean>> = {};
-
-export function markVariationsAsProblematic(blockName: BlockName, variations: string[]) {
-	const variationsToHide = blockVariationsToHide[blockName] ??= {};
-	for (const variation of variations) {
-		variationsToHide[variation] = true;
-	}
-}
-
-addFilter('blocks.registerBlockType', 'plaudit-gutenberg-api-extensions/problematic-blocks-blocker', (atts: RegisterBlockAttrs) => {
-	const problematicVariations = blockVariationsToHide[atts.name];
-	if (!atts.variations || !problematicVariations) {
-		return atts;
-	}
-	if (Array.isArray(atts.variations)) {
-		return {
-			...atts,
-			variations: atts.variations.map(variation => problematicVariations[variation.name] ? {...variation, scope: []} : variation)
-		};
-	}
-	if (problematicVariations[atts.variations.name]) {
-		return {
-			...atts,
-			variations: {...atts.variations, scope: []}
-		};
-	}
-	return atts;
-});

package/src/blocks/shared-exportable-types.ts

@@ -1,6 +0,0 @@
-import type {PlauditIconName, WordPressIconName} from "./shared-internal-types";
-
-import type {ReactElement} from "react";
-
-export type IconName = WordPressIconName|`plaudit:${PlauditIconName}`|`<svg${string}`;
-export type OptionalLabel = string|{text: string, icon?: ReactElement|IconName, tooltip?: string}|undefined;

package/src/blocks/shared-internal-types.ts

@@ -1,18 +0,0 @@
-import type * as icons from "@wordpress/icons";
-
-import type * as plauditIcons from "../lib/plaudit-icons";
-import type {OptionalLabel} from "./shared-exportable-types";
-
-export type PlauditIconName = keyof typeof plauditIcons;
-export type WordPressIconName = Exclude<keyof typeof icons, 'Icon'>;
-
-export type NamedSwitchTypes = "showHide"|"yesNo";
-export type BaseSwitch = {onLabel?: OptionalLabel, offLabel?: OptionalLabel, type?: NamedSwitchTypes};
-export type SmallSwitch = {small: true}&BaseSwitch;
-export type NormalSwitch = ({small?: false|undefined, narrow?: boolean}&BaseSwitch)|NamedSwitchTypes;
-
-export type CSNPControlComponentProps<C, V, P extends {[key: Exclude<string, 'config'|'onChange'|'value'>]: any} = {}> = {
-	config: C,
-	onChange: (v: V|undefined) => void,
-	value: V|undefined
-}&P;

package/src/blocks/simple-block.tsx

@@ -1,74 +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 type {ComponentType, ReactElement, 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: () => 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-api.ts

@@ -1,173 +0,0 @@
-import type {createSlotFill} from "@wordpress/components";
-import {dispatch, select} from "@wordpress/data";
-
-import type {CSNPConfig} from "./csnp-api";
-import type {Condition} from "./conditions";
-import type {DCNode} from "./data-controller";
-import {installGutenbergExtensions} from "../index";
-import {store as apiExtensionsStore} from "../lib/gutenberg-api-extensions-state";
-import type {HydratedLaidOutProperties} from "./simple-native-property-internal-shared";
-import type {BlockName} from "../lib/useful-types";
-
-import type {ReactElement, ReactNode} from "react";
-
-export type InspectorPanelGroup = 'layered-styles'|'post'|'default'|'advanced'|'background'|'border'|'color'|'dimensions'|'effects'|'filter'|'list'|'position'|'settings'|'styles'|'typography';
-export type {Condition, ConditionFunction, ConditionStruct} from './conditions';
-
-export interface DataStore {
-	readonly id: string;
-	getValue(name: string): any;
-	setValue(name: string, value: any): void;
-
-	reattach(attributeCache: Record<string, any>): void;
-
-	handlesProperty(name: string): boolean;
-
-	addProperty(property: HydratedSimpleNativeProperty): void;
-}
-export type RawPath = (string|number)[];
-export type NodePath = [string, ...(string|number)[]];
-export type DataController = {
-	getDataStore(property: string, required: true): DataStore,
-	getDataStore(property: string, required?: undefined|false): DataStore|undefined,
-	getDataStore(property: string, required?: boolean): DataStore|undefined,
-	getAllDataStores(): DataStore[],
-	makePropertyValueResolver(contextPath: RawPath): (propertyPath: RawPath) => any,
-
-	checkConditions(): void,
-	validateNodes(): void,
-	commitBatchAddedProperties(): void,
-
-	getValue(path: NodePath): any|undefined,
-	setValue(path: NodePath, value: any): void,
-
-	addProperties(properties: HydratedLaidOutProperties, dataStore: DataStore, inBatch?: boolean): void,
-	addNode(path: NodePath, value?: any): void,
-	removeNode(path: NodePath): void,
-	moveNode(path: NodePath, indices: {from: number, to: number}|{from: string, to: string}): void,
-	validateNode(path: NodePath): void,
-
-	hasRenderedNode(properties: HydratedLaidOutProperties): boolean,
-	hasValidationErrors(properties?: HydratedLaidOutProperties): boolean,
-	getIsRendered(path: NodePath): boolean,
-	getNode(path: NodePath): DCNode,
-	getValidationError(path: NodePath): string|undefined,
-
-	getWasChangedByManagedControl(): boolean,
-	markManagedControlChangeHandled(): void,
-	blockClientId: string
-};
-export enum NodeMessageSeverity {
-	info,
-	warning,
-	error
-}
-export type NodeMessage = {
-	message: string,
-	severity: NodeMessageSeverity
-};
-
-export type ProvidedSlot = ReturnType<typeof createSlotFill>['Slot'];
-export type SimpleNativePropertyType = 'string'|'number'|'boolean'|'array'|'object';
-export type SNPControlProps<T> = {value: T|undefined, onChange: (v: T|undefined) => void, slots: SNPControlSlots};
-export type GenericSimpleNativeProperty<T, V extends SimpleNativePropertyType> = {
-	name: string,
-	label?: string,
-	type: V,
-	enum?: T[],
-	default?: T,
-	alwaysStore?: boolean|undefined,
-	control(props: SNPControlProps<T>): ReactElement,
-	condition?: Condition,
-	required?: boolean,
-	validator?(value: T|undefined): string|null|undefined,
-	transformer?: {
-		to(input: unknown): T|undefined,
-		from(value: T|undefined): any
-	}
-};
-export type SimpleNativeProperty = GenericSimpleNativeProperty<string, 'string'>&{enum?: string[], styleProperty?: string}
-	|GenericSimpleNativeProperty<number, 'number'>&{enum?: number[], styleProperty?: string}
-	|GenericSimpleNativeProperty<boolean, 'boolean'>
-	|GenericSimpleNativeProperty<any[], 'array'>
-	|GenericSimpleNativeProperty<Record<string|number, unknown>, 'object'>;
-
-export type PDSimpleNativeProperty = SimpleNativeProperty|CSNPConfig;
-export type PotentiallyDesiccatedSimpleNativeProperty = PDSimpleNativeProperty;
-
-export type HydratedSimpleNativeProperty<ADDITIONAL_DATA extends Record<string, any> = {}> = SimpleNativeProperty&ADDITIONAL_DATA
-	&{children?: {[subtype: string]: HydratedSimpleNativeProperty<ADDITIONAL_DATA>[]}|HydratedSimpleNativeProperty<ADDITIONAL_DATA>[], controlType?: string, branching?: boolean, initializing?: ReactNode|(() => ReactNode)};
-export type SNPControlSlots = {Label: ProvidedSlot, Messages: ProvidedSlot};
-
-export type LaidOutProperties = Array<PDSimpleNativeProperty|Array<PDSimpleNativeProperty>>;
-export type SimpleNativePanel = {
-	title: string,
-	group?: InspectorPanelGroup,
-	initialOpen?: boolean,
-	properties: LaidOutProperties,
-	condition?: Condition,
-	position?: number,
-	raw?: boolean,
-	identifier?: any,
-	dataStoreTypeOverride?: 'layered-styles'|'attribute'
-};
-
-export type SimpleNativeTab = {
-	title: string,
-	group?: InspectorPanelGroup,
-	items: Array<Omit<SimpleNativePanel, 'group'>|LaidOutProperties[number]>,
-	identifier?: any
-}
-
-export type PropertiesParameter = SimpleNativePanel|SimpleNativeTab|Array<LaidOutProperties[number]|SimpleNativePanel|SimpleNativeTab>;
-
-export function registerSimpleNativeProperties(config: {block: BlockName|Array<BlockName>, properties: PropertiesParameter}) {
-	dispatch(apiExtensionsStore).addProperties(config.block, config.properties);
-}
-export function getSimpleNativeProperties(block: BlockName): Array<PDSimpleNativeProperty>|undefined {
-	const panelsAndTabs = select(apiExtensionsStore).desiccatedProperties(block);
-	if (panelsAndTabs === undefined) {
-		return undefined;
-	}
-	const res: PDSimpleNativeProperty[] = [];
-	for (const panelOrTab of panelsAndTabs) {
-		if ('items' in panelOrTab) {
-			for (const item of panelOrTab.items) {
-				if ('properties' in item) {
-					res.push(...flattenLaidOutProperties(item.properties));
-				} else if (Array.isArray(item)) {
-					res.push(...flattenLaidOutProperties(item));
-				} else {
-					res.push(item);
-				}
-			}
-		} else {
-			for (const property of panelOrTab.properties) {
-				if (Array.isArray(property)) {
-					res.push(...flattenLaidOutProperties(property));
-				} else {
-					res.push(property);
-				}
-			}
-		}
-	}
-	return res;
-}
-function flattenLaidOutProperties(properties: LaidOutProperties): PDSimpleNativeProperty[] {
-	const res: PDSimpleNativeProperty[] = [];
-	for (const property of properties) {
-		if (Array.isArray(property)) {
-			res.push(...flattenLaidOutProperties(property));
-		} else {
-			res.push(property);
-		}
-	}
-	return res;
-}
-
-/**
- * @deprecated use installGutenbergExtensions() instead.
- */
-export function installSimpleNativePropertiesSupport() {
-	installGutenbergExtensions();
-}