@plaudit/gutenberg-api-extensions 2.95.0 → 2.97.0

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

@@ -1,248 +0,0 @@
-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, DbSource} 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']
-};
-
-type CBBParams = {dbSources?: DbSource[]/*, supportsContext?: boolean*/};
-export function registerCustomBlockBindingsSource(args: Parameters<typeof registerBlockBindingsSource>[0]&CBBParams) {
-	installCustomBlockBindingsSupport();
-	dispatch(apiExtensionsStore).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 => function CustomBlockBindingsSupportBlockEdit(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"
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				onChange={source => updateBlockBindings({[binding]: {source, args: {}}})}
-				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'>) => {
-		type SuspenseResult = {selectableOptions: NonNullable<Parameters<typeof SelectControl>[0]['options']>, params: CBBParams};
-		const {selectableOptions, params: {dbSources/*, supportsContext*/}} = useSuspenseSelect((select): SuspenseResult => {
-			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 {
-					selectableOptions: sourceOptions.map(option => {
-						return typeof option.disabled === 'string'
-							? {...option, label: `${option.label} (${option.disabled})`, disabled: true}
-							: {...option, disabled: !!option.disabled};
-					}),
-					params: select(apiExtensionsStore).customBlockBindingsSource(value.source) ?? {}
-				};
-			} else {
-				return {selectableOptions: [], params: {}};
-			}
-		}, [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"
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				// 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"
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
-						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"
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
-						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"
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					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 key="no-options-found-text">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 === 'object' && error && 'message' in error && typeof error.message === 'string' ? <Tooltip text={error.message}>{baseDisplay}</Tooltip> : baseDisplay;
-}