@plaudit/gutenberg-api-extensions 2.79.0 → 2.80.0

package/{build → dist}/lib/suspense/promise-handlers.js

@@ -1,8 +1,17 @@
-export function isWrappedPromise(promise) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isWrappedPromise = isWrappedPromise;
+exports.use = use;
+exports.useImmediately = useImmediately;
+exports.useToPromise = useToPromise;
+exports.wrapPromise = wrapPromise;
+exports.getPromiseState = getPromiseState;
+exports.isPromise = isPromise;
+function isWrappedPromise(promise) {
     return 'status' in promise
         && (promise.status === 'pending' || (promise.status === 'fulfilled' && 'value' in promise) || (promise.status === 'rejected' && 'reason' in promise));
 }
-export function use(promise) {
+function use(promise) {
     switch (promise.status) {
         case "pending":
             throw promise;
@@ -14,7 +23,7 @@ export function use(promise) {
             return use(actuallyWrapPromise(promise));
     }
 }
-export function useImmediately(promise) {
+function useImmediately(promise) {
     switch (promise.status) {
         case "pending":
             return undefined;
@@ -26,7 +35,7 @@ export function useImmediately(promise) {
             return useImmediately(actuallyWrapPromise(promise));
     }
 }
-export function useToPromise(promise) {
+function useToPromise(promise) {
     switch (promise.status) {
         case "pending":
             throw promise;
@@ -38,7 +47,7 @@ export function useToPromise(promise) {
             return useToPromise(actuallyWrapPromise(promise));
     }
 }
-export function wrapPromise(promise) {
+function wrapPromise(promise) {
     return isWrappedPromise(promise) ? promise : actuallyWrapPromise(promise);
 }
 function actuallyWrapPromise(promise) {
@@ -52,10 +61,10 @@ function actuallyWrapPromise(promise) {
     });
     return promise;
 }
-export function getPromiseState(promise) {
+function getPromiseState(promise) {
     return wrapPromise(promise).status;
 }
-export function isPromise(value) {
+function isPromise(value) {
     return typeof value === 'object' && !!value && ('then' in value) && typeof value['then'] === 'function';
 }
 //# sourceMappingURL=promise-handlers.js.map

package/dist/lib/suspense/promise-handlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"promise-handlers.js","sourceRoot":"","sources":["../../../src/lib/suspense/promise-handlers.ts"],"names":[],"mappings":";;AAGA,4CAGC;AAED,kBAWC;AAED,wCAWC;AAED,oCAWC;AAED,kCAEC;AAgBD,0CAEC;AAED,8BAEC;AApED,SAAgB,gBAAgB,CAAI,OAAmB;IACtD,OAAO,QAAQ,IAAI,OAAO;WACtB,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,WAAW,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,UAAU,IAAI,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC;AACxJ,CAAC;AAED,SAAgB,GAAG,CAAI,OAAmC;IACzD,QAAQ,OAAO,CAAC,MAAM,EAAE,CAAC;QACxB,KAAK,SAAS;YACb,MAAM,OAAO,CAAC;QACf,KAAK,WAAW;YACf,OAAO,OAAO,CAAC,KAAK,CAAC;QACtB,KAAK,UAAU;YACd,MAAM,OAAO,CAAC,MAAM,CAAC;QACtB;YACC,OAAO,GAAG,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,CAAC;AACF,CAAC;AAED,SAAgB,cAAc,CAAI,OAAmC;IACpE,QAAQ,OAAO,CAAC,MAAM,EAAE,CAAC;QACxB,KAAK,SAAS;YACb,OAAO,SAAS,CAAC;QAClB,KAAK,WAAW;YACf,OAAO,OAAO,CAAC,KAAK,CAAC;QACtB,KAAK,UAAU;YACd,MAAM,OAAO,CAAC,MAAM,CAAC;QACtB;YACC,OAAO,cAAc,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC;IACtD,CAAC;AACF,CAAC;AAED,SAAgB,YAAY,CAAI,OAAmC;IAClE,QAAQ,OAAO,CAAC,MAAM,EAAE,CAAC;QACxB,KAAK,SAAS;YACb,MAAM,OAAO,CAAC;QACf,KAAK,WAAW;YACf,OAAO,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACvC,KAAK,UAAU;YACd,MAAM,OAAO,CAAC,MAAM,CAAC;QACtB;YACC,OAAO,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC;AACF,CAAC;AAED,SAAgB,WAAW,CAAI,OAAmC;IACjE,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;AAC3E,CAAC;AACD,SAAS,mBAAmB,CAAI,OAAmC;IAClE,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,IAAI,CACX,KAAK,CAAC,EAAE;QACN,OAAsC,CAAC,MAAM,GAAG,WAAW,CAAC;QAC5D,OAAe,CAAC,KAAK,GAAG,KAAK,CAAC;IAChC,CAAC,EACD,MAAM,CAAC,EAAE;QACP,OAAsC,CAAC,MAAM,GAAG,UAAU,CAAC;QAC3D,OAAe,CAAC,MAAM,GAAG,MAAM,CAAC;IAClC,CAAC,CACD,CAAC;IACF,OAAO,OAA4B,CAAC;AACrC,CAAC;AAED,SAAgB,eAAe,CAAC,OAAqC;IACpE,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;AACpC,CAAC;AAED,SAAgB,SAAS,CAAI,KAAU;IACtC,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,UAAU,CAAC;AACzG,CAAC"}

package/{build → dist}/lib/suspense.d.ts

@@ -1,7 +1,7 @@
 export * from "./suspense/promise-handlers";
-import React, { type ReactNode, type SuspenseProps } from "react";
+import { type ReactNode, type SuspenseProps } from "react";
 type OptionallySuspensefulProps = Omit<SuspenseProps, 'children'> & {
     children: ReactNode | (() => ReactNode);
     hasSuspensefulOptions: (() => boolean) | boolean;
 };
-export declare function OptionallySuspenseful({ children: Children, hasSuspensefulOptions, ...props }: OptionallySuspensefulProps): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function OptionallySuspenseful({ children: Children, hasSuspensefulOptions, ...props }: OptionallySuspensefulProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/lib/suspense.js

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionallySuspenseful = OptionallySuspenseful;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@wordpress/components");
+const controls_1 = require("../controls");
+__exportStar(require("./suspense/promise-handlers"), exports);
+const react_1 = require("react");
+function OptionallySuspenseful({ children: Children, hasSuspensefulOptions, ...props }) {
+    if (typeof hasSuspensefulOptions === 'function' ? hasSuspensefulOptions() : hasSuspensefulOptions) {
+        return (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsxs)(controls_1.InspectorPanel, { opened: true, initialOpen: true, children: [(0, jsx_runtime_1.jsx)(components_1.Spinner, {}), " Loading options"] }), ...props, children: typeof Children === 'function' ? (0, jsx_runtime_1.jsx)(Children, {}) : Children });
+    }
+    else {
+        return typeof Children === 'function' ? (0, jsx_runtime_1.jsx)(Children, {}) : Children;
+    }
+}
+//# sourceMappingURL=suspense.js.map

package/dist/lib/suspense.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"suspense.js","sourceRoot":"","sources":["../../src/lib/suspense.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AASA,sDAQC;;AAjBD,sDAA8C;AAE9C,0CAA2C;AAE3C,8DAA4C;AAE5C,iCAAmE;AAGnE,SAAgB,qBAAqB,CAAC,EAAC,QAAQ,EAAE,QAAQ,EAAE,qBAAqB,EAAE,GAAG,KAAK,EAA6B;IACtH,IAAI,OAAO,qBAAqB,KAAK,UAAU,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;QACnG,OAAO,uBAAC,gBAAQ,IAAC,QAAQ,EAAE,wBAAC,yBAAc,IAAC,MAAM,QAAC,WAAW,mBAAC,uBAAC,oBAAO,KAAE,wBAAiC,KAAM,KAAK,YACnH,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,uBAAC,QAAQ,KAAE,CAAC,CAAC,CAAC,QAAQ,GAC5C,CAAC;IACd,CAAC;SAAM,CAAC;QACP,OAAO,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,uBAAC,QAAQ,KAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;IAChE,CAAC;AACF,CAAC"}

package/{build → dist}/lib/useful-types.d.ts

@@ -1,7 +1,10 @@
 import { Block, BlockSupports } from "@wordpress/blocks";
 import { dispatch, select, StoreDescriptor } from "@wordpress/data";
-import type * as MetaActions from "@wordpress/data/build-types/redux-store/metadata/actions";
+import { FormTokenField } from '@wordpress/components';
+import type * as MetaActions from "@wordpress/data/redux-store/metadata/actions";
+import type { ComponentProps } from "react";
 import type { PropertiesParameter } from "../blocks";
+export type TokenItem = Exclude<NonNullable<ComponentProps<typeof FormTokenField>['value']>[number], string>;
 export type NormalizedReduxActionExtractor<V> = V extends {
     [key in string]: (...args: any[]) => infer R;
 } ? NormalizedReduxActionExtractor<R> : V extends {

package/dist/lib/useful-types.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBlockJsonNativePropsConfig = isBlockJsonNativePropsConfig;
+exports.arrayIsNotEmpty = arrayIsNotEmpty;
+function isBlockJsonNativePropsConfig(thing) {
+    return typeof thing === 'object' && thing !== null && 'type' in thing && thing.type === "native";
+}
+function arrayIsNotEmpty(arr) {
+    return !!arr && arr.length > 0;
+}
+//# sourceMappingURL=useful-types.js.map

package/dist/lib/useful-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useful-types.js","sourceRoot":"","sources":["../../src/lib/useful-types.ts"],"names":[],"mappings":";;AAuCA,oEAEC;AAGD,0CAEC;AAPD,SAAgB,4BAA4B,CAAC,KAAc;IAC1D,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;AAClG,CAAC;AAGD,SAAgB,eAAe,CAAI,GAAuB;IACzD,OAAO,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC;AAChC,CAAC"}

package/package.json

@@ -1,47 +1,39 @@
 {
   "name": "@plaudit/gutenberg-api-extensions",
-  "version": "2.79.0",
+  "version": "2.80.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "files": [
-    "./build",
-    "./styles"
+    "./dist",
+    "./styles",
+    "./src"
   ],
   "sideEffects": false,
   "exports": {
-    ".": {
-      "default": "./build/index.js"
-    },
-    "./lib/plaudit-icons": {
-      "default": "./build/lib/plaudit-icons.js"
-    },
-    "./blocks": {
-      "default": "./build/blocks/index.js"
-    },
-    "./blocks/snp-api": {
-      "default": "./build/blocks/snp-api.js"
-    },
-    "./controls": {
-      "default": "./build/controls/index.js"
-    }
+    ".": "./dist/index.js",
+    "./lib/plaudit-icons": "./dist/lib/plaudit-icons.js",
+    "./blocks": "./dist/blocks/index.js",
+    "./blocks/csnp-api": "./dist/blocks/csnp-api.js",
+    "./blocks/snp-api": "./dist/blocks/snp-api.js",
+    "./controls": "./dist/controls/index.js"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.7",
     "@types/react": "^18.3.26",
     "@types/wordpress__block-editor": "^14.21.2",
     "@types/wordpress__blocks": "^12.5.18",
-    "@wordpress/block-editor": "^14.21.0",
-    "@wordpress/blocks": "^14.15.0",
-    "@wordpress/components": "^29.12.0",
-    "@wordpress/compose": "^7.34.0",
-    "@wordpress/core-data": "^7.34.0",
-    "@wordpress/data": "^10.34.0",
-    "@wordpress/editor": "^14.34.0",
-    "@wordpress/element": "^6.34.0",
-    "@wordpress/hooks": "^4.34.0",
-    "@wordpress/i18n": "^5.26.0",
-    "@wordpress/icons": "^10.32.0",
+    "@wordpress/block-editor": "^15.8.0",
+    "@wordpress/blocks": "^15.8.0",
+    "@wordpress/components": "^30.8.0",
+    "@wordpress/compose": "^7.35.0",
+    "@wordpress/core-data": "^7.35.0",
+    "@wordpress/data": "^10.35.0",
+    "@wordpress/editor": "^14.35.0",
+    "@wordpress/element": "^6.35.0",
+    "@wordpress/hooks": "^4.35.0",
+    "@wordpress/i18n": "^6.8.0",
+    "@wordpress/icons": "^11.2.0",
     "framer-motion": "^12.23.24",
-    "html-react-parser": "^5.2.8",
+    "html-react-parser": "^5.2.9",
     "immer": "^9.0.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/src/blocks/MoveError.ts

@@ -0,0 +1,7 @@
+import type {RawPath} from "./simple-native-property-api";
+
+export class MoveError extends Error {
+	constructor(message: string, path: RawPath, {from, to}: {from: number, to: number}|{from: string, to: string}) {
+		super(`${message}: ${path.join(".")}.{${from} => ${to}}`);
+	}
+}

package/src/blocks/PathError.ts

@@ -0,0 +1,18 @@
+import type {RawPath} from "./simple-native-property-api";
+
+export enum PathErrorType {
+	UNKNOWN,
+	UNEXPECTED_LEAF,
+	INSUFFICIENT_LENGTH
+}
+
+export class PathError extends Error {
+	constructor(
+		message: string,
+		public readonly path: RawPath,
+		public readonly errorIndex: number = path.length - 1,
+		public readonly errorType = PathErrorType.UNKNOWN
+	) {
+		super(`${message} Full Path: ${path.join('.')}; Error Path: ${path.slice(0, errorIndex + 1).join('.')}`);
+	}
+}

package/src/blocks/SNPFlexibleItemsListComponent.tsx

@@ -0,0 +1,30 @@
+import {useCallback} from "@wordpress/element";
+
+import type {FlexibleItemsListPropertyConfig} from "./csnp-api";
+import {type FlexibleItem, SortableFlexibleItemsControl} from "../controls";
+import {LaidOutPropertyRow} from "./layout/LaidOutPropertyRow";
+import {NodeContextWrapper, useNodeContext} from "./layout/NodeContext";
+import type {NonEmptyArray} from "../lib/useful-types";
+import type {CSNPControlComponentProps} from "./shared-internal-types";
+import type {HydratedSimpleNativeProperty, SNPControlSlots} from "./simple-native-property-api";
+
+export type SNPFlexibleItemsListComponent<T extends string> = CSNPControlComponentProps<FlexibleItemsListPropertyConfig<T>, FlexibleItem<T>[], {
+	availableTypes: NonEmptyArray<{value: T, label: string}>, emptyValues: {[key in T]?: FlexibleItem<T>}
+	hydratedProperties: {[key in T]: (HydratedSimpleNativeProperty|HydratedSimpleNativeProperty[])[]}
+}>&SNPControlSlots;
+export function SNPFlexibleItemsListComponent(
+	{config, availableTypes, emptyValues, hydratedProperties, value, Label, Messages}: SNPFlexibleItemsListComponent<string>
+) {
+	const context = useNodeContext("build a SNP List");
+	const onReorder = useCallback((oldIndex: number, newIndex: number) => context.moveNode({from: oldIndex, to: newIndex}), [context]);
+	const emptyValueBuilder = useCallback((type: string) => ({...emptyValues[type], type}), [emptyValues]);
+	const childRenderer = useCallback((datum: FlexibleItem, onDatumChange: (datum: FlexibleItem) => void, index: number) => {
+		return <NodeContextWrapper nodeName={index} children={hydratedProperties[datum.type]?.map(property => <LaidOutPropertyRow property={property} />)} />
+	}, [hydratedProperties]);
+
+	return <SortableFlexibleItemsControl
+		availableTypes={availableTypes} emptyValueBuilder={emptyValueBuilder}
+		value={value} min={config.min} max={config.max} Label={Label} Messages={Messages} help={config.help}
+		{...config.component} onAdd={context.addNode} onRemove={context.removeNode} onReorder={onReorder} children={childRenderer}
+	/>;
+}

package/src/blocks/SNPGroupComponent.tsx

@@ -0,0 +1,38 @@
+import {__experimentalToolsPanel as ToolsPanel} from "@wordpress/components";
+import {useCallback} from "@wordpress/element";
+
+import type {GroupPropertyCSNPConfig} from "./csnp-api";
+import type {Dict} from "../controls";
+import {LaidOutPropertyRow} from "./layout/LaidOutPropertyRow";
+import {useNodeContext} from "./layout/NodeContext";
+import type {CSNPControlComponentProps} from "./shared-internal-types";
+import type {SNPControlSlots} from "./simple-native-property-api";
+import type {HydratedLaidOutProperties} from "./simple-native-property-internal-shared";
+
+export type SNPGroupComponentProps = CSNPControlComponentProps<GroupPropertyCSNPConfig, Dict<any>, {hydratedProperties: HydratedLaidOutProperties}>&SNPControlSlots;
+export function SNPGroupComponent({config, hydratedProperties, Label, Messages}: SNPGroupComponentProps) {
+	if (config.interface === 'toolsPanel') {
+		const {value, setValue} = useNodeContext("render a toolsPanel");
+		return <>
+			<ToolsPanel
+				{...config.component}
+				className={config.component?.className ? `plaudit-snp-group-component ${config.component.className}` : "plaudit-snp-group-component"}
+				label={config.label}
+				resetAll={useCallback(resetAllFilters => {
+					setValue((resetAllFilters ?? []).reduce((q: any, filter: (t: any) => any) => filter(q), value))
+				}, [value, setValue])}
+			>
+				{...hydratedProperties.map(property => <LaidOutPropertyRow property={property} inToolsPanel={true} />)}
+			</ToolsPanel>
+			<Messages/>
+		</>;
+	} else {
+		return <fieldset {...config.component} className={config.component?.className ? `plaudit-snp-group-component ${config.component.className}` : "plaudit-snp-group-component"}>
+			<legend><Label/></legend>
+			<div className="plaudit-snp-laid-out-properties-wrapper">
+				{...hydratedProperties.map(property => <LaidOutPropertyRow property={property}/>)}
+			</div>
+			<Messages/>
+		</fieldset>;
+	}
+}

package/src/blocks/SNPListComponent.tsx

@@ -0,0 +1,25 @@
+import {useCallback, useMemo} from "@wordpress/element";
+
+import type {ObjectListPropertyConfig} from "./csnp-api";
+import {type Dict, SortableItemsControl} from "../controls";
+import {LaidOutPropertyRow} from "./layout/LaidOutPropertyRow";
+import {NodeContextWrapper, useNodeContext} from "./layout/NodeContext";
+import type {CSNPControlComponentProps} from "./shared-internal-types";
+import type {HydratedSimpleNativeProperty, SNPControlSlots} from "./simple-native-property-api";
+
+export type SNPListComponentProps = CSNPControlComponentProps<ObjectListPropertyConfig, Dict<any>[], {
+	hydratedProperties: (HydratedSimpleNativeProperty|HydratedSimpleNativeProperty[])[]
+}>&SNPControlSlots;
+export function SNPListComponent({config, hydratedProperties, value, Label, Messages}: SNPListComponentProps) {
+	const context = useNodeContext("build a SNP List");
+	const onReorder = useCallback((oldIndex: number, newIndex: number) => context.moveNode({from: oldIndex, to: newIndex}), [context]);
+	const emptyValue = useMemo(() => config.emptyValue ?? {}, [config.emptyValue]);
+	const childRenderer = useCallback((datum: Dict<any>, onDatumChange: (datum: Dict<any>) => void, index: number) => {
+		return <NodeContextWrapper nodeName={index} children={hydratedProperties.map(property => <LaidOutPropertyRow property={property} />)} />
+	}, [hydratedProperties]);
+
+	return <SortableItemsControl
+		value={value} min={config.min} max={config.max} Label={Label} Messages={Messages} help={config.help} emptyValue={emptyValue}
+		{...config.component} onAdd={context.addNode} onRemove={context.removeNode} onReorder={onReorder} onChange={context.setValue} children={childRenderer}
+	/>;
+}

package/src/blocks/SNPTreeContext.tsx

@@ -0,0 +1,13 @@
+import {createContext, useContext} from "@wordpress/element";
+
+import type {DataController} from "./simple-native-property-api";
+
+export const SNPTreeContext = createContext<DataController|undefined>(undefined);
+
+export function useSNPTreeContext(action: string) {
+	const SNPTreeContextValue = useContext(SNPTreeContext);
+	if (SNPTreeContextValue === undefined) {
+		throw new Error(`Cannot ${action} outside of a SNPTreeContext`);
+	}
+	return SNPTreeContextValue;
+}

package/src/blocks/basic-custom-block-bindings-support.tsx

@@ -0,0 +1,243 @@
+import apiFetch from "@wordpress/api-fetch"
+import {getBlockBindingsSources, type registerBlockBindingsSource} from "@wordpress/blocks";
+import {InspectorAdvancedControls, useBlockBindingsUtils} from "@wordpress/block-editor";
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	SelectControl, Spinner, TextControl, Tooltip
+} from '@wordpress/components';
+import {createHigherOrderComponent} from "@wordpress/compose";
+import {dispatch, select, useSuspenseSelect} from "@wordpress/data";
+import {store as editorStore} from "@wordpress/editor";
+import {memo, useMemo} from "@wordpress/element";
+import {addFilter} from "@wordpress/hooks";
+
+import {registerSimpleGutenbergApiEndpoint} from "../editor/simple-gutenberg-endpoints-api";
+import {store as endpointsStore} from "../editor/simple-gutenberg-endpoints-impl";
+import {store as apiExtensionsStore} from "../lib/gutenberg-api-extensions-state";
+import type {ActualBlockEditProps, BlockName} from "../lib/useful-types";
+
+import {type ReactElement, Suspense} from "react";
+import {ErrorBoundary, FallbackProps} from "react-error-boundary";
+
+const BLOCK_BINDINGS_ALLOWED_BLOCKS: {[key: BlockName]: string[]} = {
+	'core/paragraph': ['content'],
+	'core/heading': ['content'],
+	'core/image': ['id', 'url', 'title', 'alt'],
+	'core/button': ['url', 'text', 'linkTarget', 'rel']
+};
+
+export type DbSource = {label: string, value: string, help?: string};
+type CBBParams = {dbSources?: DbSource[]/*, supportsContext?: boolean*/};
+export function registerCustomBlockBindingsSource(args: Parameters<typeof registerBlockBindingsSource>[0]&CBBParams) {
+	installCustomBlockBindingsSupport();
+	dispatch('plaudit/gutenberg-api-extensions').registerCustomBlockBindingsSource(args);
+}
+
+export function installCustomBlockBindingsSupport() {
+	if (installCustomBlockBindingsSupport.called) {
+		return;
+	}
+	installCustomBlockBindingsSupport.called = true;
+
+	registerSimpleGutenbergApiEndpoint(
+		"plaudit-base.custom-bindings.source.options",
+		data => apiFetch<Array<{id: number, title: string, type: string}>>({data, method: 'POST', path: "/plaudit/base/v1/custom-bindings/source/options"}),
+		{maxCachedResults: 20}
+	);
+
+	addFilter('editor.BlockEdit', 'plaudit/gutenberg-api-extensions/basic-custom-block-bindings-support',
+		createHigherOrderComponent(BlockEdit => (blockEditProps: ActualBlockEditProps) => {
+			const availableBindingsList = BLOCK_BINDINGS_ALLOWED_BLOCKS[blockEditProps.name];
+			if (!availableBindingsList?.length) {
+				return <BlockEdit {...blockEditProps} />;
+			}
+			const {removeAllBlockBindings, updateBlockBindings} = useBlockBindingsUtils();
+			const currentPost = select(editorStore).getCurrentPost();
+			const bindingConfigs = useMemo(
+				() => {
+					return availableBindingsList.map((binding): [Parameters<typeof ToolsPanelItem>[0], BlockBindingToolProps] => {
+						return [
+							{
+								label: binding,
+								hasValue() {
+									return blockEditProps.attributes['metadata']?.['bindings']?.[binding] !== undefined;
+								},
+								onDeselect() {
+									updateBlockBindings({[binding]: undefined});
+								}
+							},
+							{
+								label: binding,
+								value: blockEditProps.attributes['metadata']?.['bindings']?.[binding],
+								currentPost,
+								binding
+							}
+						];
+					});
+				}, [blockEditProps.attributes, currentPost, availableBindingsList, updateBlockBindings]);
+			return <>
+				<BlockEdit {...blockEditProps} />
+				<InspectorAdvancedControls>
+					<ToolsPanel
+						label="Custom Block Bindings" resetAll={removeAllBlockBindings}
+						children={bindingConfigs.map(([bindingConfig, bbtConfig]) => (
+							<ToolsPanelItem key={bindingConfig.label} {...bindingConfig}>
+								<BlockBindingTool {...bbtConfig} />
+							</ToolsPanelItem>
+						))}
+					/>
+				</InspectorAdvancedControls>
+			</>;
+		}, 'plauditGutenbergApiExtensionsBasicBlockBindingsSupport')
+	);
+
+	type BlockBindingToolProps = {
+		value: { source: string, args?: { [key: string]: any } } | undefined,
+		currentPost: any,
+		label: string,
+		binding: string
+	};
+
+	type SelectableOptions = Array<{ label: string, value: string, subfields: 'custom' | { label: string, value: string }[] }>;
+	type GetSelectableOptionsResponse = Array<{
+		label: string,
+		value: string,
+		subfields: 'custom' | { label: string, value: string }[],
+		disabled?: string | boolean,
+		binding: string
+	}>;
+	const BlockBindingTool = memo(({label, value, binding, currentPost}: BlockBindingToolProps) => {
+		const bindingSources = Object.entries(getBlockBindingsSources())
+			.filter(([key]) => key !== 'core/pattern-overrides' && key !== 'core/post-meta')
+			.map(([key, {label}]) => ({label, value: key}));
+		const {updateBlockBindings} = useBlockBindingsUtils();
+
+		return <fieldset className="custom-bindings-configuration-chain" style={{border: "revert", padding: "revert", margin: "revert"}}>
+			<legend>{label}</legend>
+			<SelectControl
+				key="source"
+				label="Source"
+				__nextHasNoMarginBottom={true}
+				onChange={source => updateBlockBindings({[binding]: {source}})}
+				options={[
+					{
+						disabled: true,
+						label: "Select a Binding Source",
+						value: ''
+					},
+					...bindingSources
+				]}
+				value={value?.source ?? ''}
+			/>
+			<ErrorBoundary FallbackComponent={Fallback} onError={console.error}>
+				<Suspense fallback={<p><Spinner/> Loading Binding Options</p>}>
+					<SourceSubconfig value={value} currentPost={currentPost} binding={binding} />
+				</Suspense>
+			</ErrorBoundary>
+		</fieldset>
+	});
+	const SourceSubconfig = memo(({currentPost, value, binding}: Omit<BlockBindingToolProps, 'label'>) => {
+		const [selectableOptions, {dbSources/*, supportsContext*/}] = useSuspenseSelect((select): [NonNullable<Parameters<typeof SelectControl>[0]['options']>, CBBParams] => {
+			if (value?.source) {
+				const sourceQueryArgs = {current_post: currentPost, source: value.source};
+				const sourceOptions = select(endpointsStore).get("plaudit-base.custom-bindings.source.options", sourceQueryArgs) as GetSelectableOptionsResponse;
+				return [
+					sourceOptions.map(option => {
+						return typeof option.disabled === 'string'
+							? {...option, label: `${option.label} (${option.disabled})`, disabled: true}
+							: {...option, disabled: !!option.disabled};
+					}),
+					select(apiExtensionsStore).customBlockBindingsSource(value.source) ?? {}
+				];
+			} else {
+				return [[], {}];
+			}
+		}, [currentPost, value?.source]);
+		const {updateBlockBindings} = useBlockBindingsUtils();
+
+		const subfieldKeys = useMemo<SelectableOptions[number]['subfields']>(() => {
+			if (Array.isArray(selectableOptions)) {
+				const key = value?.args?.['key'];
+				return key ? selectableOptions.find(option => option.value === key)?.subfields ?? [] : [];
+			}
+			return [];
+		}, [selectableOptions, value?.args?.['key']]);
+
+		const controls: ReactElement[] = [];
+		if (selectableOptions.length) {
+			controls.push(<SelectControl
+				key="field"
+				label="Field"
+				__nextHasNoMarginBottom={true}
+				// We exclude subfield from this update because we need to reset it when the selected field changes
+				onChange={key => updateBlockBindings({[binding]: (value ? {...value, args: {key}} : undefined)})}
+				options={[
+					{
+						disabled: true,
+						label: "Select a Field",
+						value: ''
+					},
+					...selectableOptions
+				]}
+				value={value?.args?.['key'] ?? ''}
+			/>);
+
+			if (subfieldKeys.length) {
+				if (subfieldKeys === 'custom') {
+					controls.push(<TextControl
+						key="subfield"
+						label="Subfield"
+						__nextHasNoMarginBottom={true}
+						onChange={subfield => updateBlockBindings({[binding]: (value ? {...value, args: {...value.args, subfield}} : undefined)})}
+						value={value?.args?.['subfield'] ?? ''}
+						help="Please enter the name of a subfield. You may need to inspect the raw data from this binding to determine the subfield."
+					/>);
+				} else {
+					controls.push(<SelectControl
+						key="subfield"
+						label="Subfield"
+						__nextHasNoMarginBottom={true}
+						onChange={subfield => updateBlockBindings({[binding]: (value ? {...value, args: {...value.args, subfield}} : undefined)})}
+						options={[
+							{
+								disabled: true,
+								label: "Select a Subfield",
+								value: ''
+							},
+							...subfieldKeys
+						]}
+						value={value?.args?.['subfield'] ?? ''}
+					/>);
+				}
+			}
+
+			if (value?.args?.['key'] && dbSources?.length) {
+				controls.push(<SelectControl
+					key="db-source"
+					label="DB Source"
+					__nextHasNoMarginBottom={true}
+					onChange={db_source => updateBlockBindings({[binding]: (value ? {...value, args: {...value.args, db_source}} : undefined)})}
+					options={dbSources}
+					value={value?.args?.['db_source'] ?? dbSources[0]!.value}
+					help={dbSources.find(dbs => dbs.value === value?.args?.['db_source'])?.help}
+				/>);
+			} else if (value?.args?.['db_source']) {
+				const {db_source, ...updatedArgs} = value.args;
+				updateBlockBindings({[binding]: {...value, args: updatedArgs}});
+			}
+		}
+		if (controls.length === 0) {
+			controls.push(<p>No Options Found</p>);
+		}
+		return controls;
+	});
+}
+export namespace installCustomBlockBindingsSupport {
+	export let called: boolean = false;
+}
+
+function Fallback({error}: FallbackProps) {
+	const baseDisplay = <p style={{color: '#CC1818'}}>An error occurred while loading binding options</p>;
+	return typeof error.message === 'string' ? <Tooltip text={error.message}>{baseDisplay}</Tooltip> : baseDisplay;
+}