@plaudit/gutenberg-api-extensions 2.9.0 → 2.10.0

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

@@ -1,361 +0,0 @@
-import {MediaUpload, MediaUploadCheck, __experimentalLinkControl as LinkControl, type LinkControlProps} from "@wordpress/block-editor";
-import {
-	Button,
-	Card,
-	CardBody,
-	CardFooter,
-	CardHeader,
-	FocalPointPicker,
-	RadioControl,
-	RangeControl,
-	SelectControl,
-	ResponsiveWrapper,
-	TextareaControl,
-	TextControl,
-	ToggleControl,
-	__experimentalHeading as Heading,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon
-} from "@wordpress/components";
-import type {ComboboxControlOption} from "@wordpress/components/build-types/combobox-control/types";
-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 {ExtendedPostPicker, type ExtendedPostPickerConstructorProps, LazySuggestionsComboboxControl, type LazySuggestionsComboboxControlProps} from "../controls";
-import {requestPostsFromAPI} from "../controls/shared";
-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 linkProperty(config: CommonPropertyConfig<Record<string, unknown>, LinkControlProps>): SimpleNativeProperty {
-	return {
-		name: config.name,
-		type: 'object',
-		default: config.default,
-		condition: config.condition,
-		alwaysStore: config.alwaysStore,
-		renderer(value, onChange) {
-			return wrapInCard(() => <LinkControl value={value} onChange={onChange} {...config.component} />, config.label, config.help);
-		}
-	};
-}
-
-function comboboxControlOptionFromAPIResponse(response: Array<{id: string, title: string}>): ComboboxControlOption[] {
-	return response.map(({id, title}) => ({value: id, label: `${title} (#${id})`}));
-}
-
-type SharedPostPropertyType = {
-	postTypes?: string[];
-};
-type PostPropertyType =
-	(CommonPropertyConfig<number, LazySuggestionsComboboxControlProps>&SharedPostPropertyType&{multiple?: false})|
-	(CommonPropertyConfig<number[], ExtendedPostPickerConstructorProps>&SharedPostPropertyType&{multiple: true});
-export function postProperty(config: PostPropertyType): SimpleNativeProperty {
-	if (config.multiple) {
-		return {
-			name: config.name,
-			type: 'array',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			renderer(value: number[]|undefined, onChange) {
-				return <ExtendedPostPicker
-					label={config.label}
-					help={config.help}
-					value={value?.map(v => v.toString())}
-					onChange={(v) => onChange(v.map(v => parseInt(v)))}
-					postTypes={config.postTypes}
-					{...config.component}
-				/>;
-			}
-		};
-	} else {
-		const makeRequest = (v: string|undefined) => requestPostsFromAPI({search: v, postTypes: config.postTypes?.join(',')});
-		return {
-			name: config.name,
-			type: 'number',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			renderer(value: number|undefined, onChange) {
-				return <LazySuggestionsComboboxControl
-					value={value?.toString()}
-					onChange={v => onChange(v ? parseInt(v) : undefined)}
-					getOption={v => makeRequest(v).then(comboboxControlOptionFromAPIResponse).then(res => res[0])}
-					getSuggestions={v => makeRequest(v).then(comboboxControlOptionFromAPIResponse)}
-					{...config.component}
-				/>
-			}
-		};
-	}
-}
-
-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>&{placeholder?: string|undefined}): 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} placeholder={config.placeholder} {...config.component} />;
-		}
-	};
-}
-
-export function textareaProperty(config: CommonPropertyConfig<string, TextareaControlProps>&{placeholder?: string|undefined, newline?: undefined|"\n"|"br"|"p"}): SimpleNativeProperty {
-	return {
-		name: config.name,
-		type: 'string',
-		default: config.default,
-		condition: config.condition,
-		alwaysStore: config.alwaysStore,
-		renderer(value, onChange) {
-			let v = value ?? '';
-			if (config.newline === "br") {
-				v = v.replaceAll("<br/>", "\n");
-			} else if (config.newline === "p") {
-				v = v.replaceAll(/<p>(.*?)<\/p>/gi, "$1\n");
-			}
-			return <TextareaControl value={v} onChange={v => {
-				if (config.newline === "br") {
-					onChange(v.replaceAll(/\r?\n/g, "<br/>"));
-				} else if (config.newline === "p") {
-					onChange(v.split(/\r?\n/g).map(v => "<p>" + v + "</p>").join(""));
-				} else {
-					onChange(v);
-				}
-			}} label={config.label} help={config.help} placeholder={config.placeholder} {...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 wrapInCard(() =>
-					<div className="editor-post-featured-image">
-						{value.media?.id ? imageUploadedVersion : noImageUploadedVersion}
-					</div>,
-				config.label, config.help);
-		}
-	};
-}
-
-function wrapInCard(wrapped: () => ReactElement, label: string, help?: string): ReactElement {
-	return <Card>
-		<CardHeader>
-			<Heading>{label}</Heading>
-		</CardHeader>
-		<CardBody>
-			{wrapped()}
-		</CardBody>
-		{help && <CardFooter>
-			{help}
-        </CardFooter>}
-	</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")))} />;
-		}
-	})
-}