@plaudit/gutenberg-api-extensions 2.79.0 → 2.80.0

package/src/blocks/hooks/built-in-suspendable-option-protocols/select.ts

@@ -0,0 +1,51 @@
+import {useSuspenseSelect} from "@wordpress/data";
+import {useMemo} from "@wordpress/element";
+import {addFilter} from "@wordpress/hooks";
+
+import {produce} from "immer";
+
+import {useNodeContext} from "../../layout/NodeContext";
+
+export default function() {
+	addFilter(
+		'plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.resolve',
+		'plaudit/gutenberg-api-extensions/simple-native-properties/suspendable-options',
+		(options: unknown | undefined, selectorInfo: URL, {attributes}: { attributes: Record<string, any> | null }) => {
+			if (options !== undefined || selectorInfo.protocol !== "select:") {
+				return options;
+			}
+			const nodeContext = useNodeContext("get contextual options");
+			const trimmedAttributes = useMemo(() => {
+				if (selectorInfo.searchParams.has("attributes")) {
+					if (attributes === null) {
+						return null;
+					}
+					return produce(attributes, draft => {
+						let current = draft;
+						for (const p of nodeContext.path.slice(0, nodeContext.path.length - 1)) {
+							if (typeof p === 'string') {
+								current = current.p;
+							} else {
+								current = current[p];
+							}
+							if (current === undefined) {
+								return;
+							}
+						}
+						const lastItem = nodeContext.path[nodeContext.path.length - 1]!;
+						if (typeof lastItem === 'string') {
+							delete current[lastItem];
+						} else {
+							current.splice(lastItem, 1);
+						}
+					});
+				} else {
+					return undefined;
+				}
+			}, [attributes, nodeContext]);
+			return useSuspenseSelect(select => {
+				return (select(selectorInfo.hostname + selectorInfo.pathname) as any).get(selectorInfo.username, trimmedAttributes);
+			}, [selectorInfo, trimmedAttributes]);
+		}, 100_000
+	);
+}

package/src/blocks/hooks/built-in-suspendable-option-protocols/settings.ts

@@ -0,0 +1,70 @@
+import {useSettings} from "@wordpress/block-editor";
+import {addFilter} from "@wordpress/hooks";
+
+export default function() {
+	addFilter(
+		'plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.resolve',
+		'plaudit/gutenberg-api-extensions/simple-native-properties/suspendable-options',
+		(options: unknown | undefined, selectorInfo: URL) => {
+			return options === undefined && selectorInfo.protocol === "settings:" ? useSettings(selectorInfo.hostname)[0] : options;
+		}, 100_000
+	);
+
+	addFilter(
+		'plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.postProcess',
+		'plaudit/gutenberg-api-extensions/simple-native-properties/suspendable-options',
+		(options: unknown, selectorInfo: URL) => {
+			if (selectorInfo.protocol !== "settings:") {
+				return options;
+			}
+
+			if (!Array.isArray(options)) {
+				console.error(`The "settings" protocol for CSNPs only supports array-formatted values. ${selectorInfo} did not resolve to an array`);
+				return [];
+			}
+			const valueTransformer = getValueTransformer(selectorInfo);
+			return options
+				.filter((s): s is { name: string, slug: string } & ({ value: string | number, icon?: string } | { color: string }) => {
+					if (typeof s === 'object' && s && typeof s["name"] === 'string' && typeof s["slug"] === 'string') {
+						if (typeof s["value"] === 'string' || typeof s["value"] === 'number') {
+							if ("color" in s) {
+								console.error("Encountered an invalid setting value:", s);
+								return false;
+							}
+						} else if (typeof s["color"] !== 'string' || "value" in s) {
+							console.error("Encountered an invalid setting value:", s);
+							return false;
+						}
+						return true;
+					}
+					return false;
+				})
+				.map(s => {
+					const {slug, name: label, ...rest} = s;
+					return {...rest, value: valueTransformer(slug), label};
+				});
+		});
+
+	function getValueTransformer(selectorInfo: URL): (value: string) => string {
+		const valuePattern = getValuePatternAccountingForLegacyCode(selectorInfo);
+		if (!valuePattern) {
+			return value => value;
+		}
+		if (!valuePattern.includes("$slug")) {
+			throw new Error("Value patterns provided to the \"settings\" protocol MUST include '$slug'");
+		}
+		return value => valuePattern.replaceAll("$slug", value);
+	}
+
+	function getValuePatternAccountingForLegacyCode(selectorInfo: URL) {
+		const res = selectorInfo.searchParams.get("value-pattern") || selectorInfo.searchParams.get("valuePattern");
+		if (!res) {
+			for (const key of selectorInfo.searchParams.keys()) {
+				if (key.includes("$slug")) {
+					return key;
+				}
+			}
+		}
+		return res;
+	}
+}

package/src/blocks/hooks/useSuspendableOptions.ts

@@ -0,0 +1,123 @@
+import {useSelect} from "@wordpress/data";
+import {useMemo} from "@wordpress/element";
+import {applyFilters} from "@wordpress/hooks";
+
+import type {CSNPConfig, PromisablePickableOptions, SuspendablePromisablePickableOptions} from "../csnp-api";
+import type {PickableOptions} from "../../controls";
+import {useNodeContext} from "../layout/NodeContext";
+import {isPromise, use} from "../../lib/suspense/promise-handlers";
+import {blockEditorStore} from "../utilities";
+
+type RefablePromisablePickableOptions<T> = T extends {options: PromisablePickableOptions<infer V, infer T>} ? PickableOptions<V, T> : never;
+export function isSuspendableOptions<V extends string|number, T extends object = {}>(thing: PromisablePickableOptions<V, T>|string): thing is SuspendablePromisablePickableOptions {
+	return typeof thing === 'string' || thing instanceof URL;
+}
+
+type ExcavateMapSelect<T> = T extends (...args: any[]) => any ? T : never;
+export function useSuspendableOptions<T extends CSNPConfig&{options: PromisablePickableOptions<any>}>(config: T): RefablePromisablePickableOptions<T> {
+	const rawOptions = isPromise(config.options) ? use(config.options) : config.options;
+	if (isSuspendableOptions(rawOptions)) {
+		const selectorInfo = toSuspendableOptionsURI(rawOptions);
+		const nodeContext = useNodeContext("get contextual options");
+		const blockClientId = nodeContext.dataController.blockClientId;
+
+		const usesBlockAttributes = applyFilters('plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.usesBlockAttributes',
+			selectorInfo.searchParams.has("attributes"), selectorInfo, blockClientId);
+
+		// This if/else statement is present because actually passing attributes through to the selectors represents a SEVERE relative performance hit.
+		// At a minimum, it causes at leat one additional full execution pass, and, due to how data can be cached, that pass is almost guaranteed to turn into at least one full render.
+		let mapSelect: (...args: Parameters<ExcavateMapSelect<Parameters<typeof useSelect>[0]>>) => [Record<string, any>|null, string|null];
+		if (usesBlockAttributes) {
+			mapSelect = wrappedSelect => {
+				const selected = wrappedSelect(blockEditorStore);
+				return [selected.getBlockAttributes(blockClientId), selected.getBlockName(blockClientId)];
+			};
+		} else {
+			mapSelect = wrappedSelect => [null, wrappedSelect(blockEditorStore).getBlockName(blockClientId)];
+		}
+		const [attributes, blockName] = useSelect(mapSelect, [blockClientId]);
+
+		const potentiallyPromisedOptions = applyFilters('plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.resolve',
+			undefined, selectorInfo, {attributes, blockName});
+		if (potentiallyPromisedOptions === undefined) {
+			throw new Error(`Encountered an unsupported suspendable option request: ${rawOptions}`);
+		}
+
+		// selectorInfo is guaranteed to be valid by virtue of the checks performed while getting the handler
+		const options = potentiallyPromisedOptions && typeof potentiallyPromisedOptions === 'object' && 'then' in potentiallyPromisedOptions
+			? use(potentiallyPromisedOptions as Promise<unknown>) : potentiallyPromisedOptions;
+
+		return useMemo(() => {
+			return applyFilters('plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.postProcess', options, selectorInfo, {attributes, blockName});
+		}, [options, selectorInfo, attributes, blockName]) as RefablePromisablePickableOptions<T>;
+	} else {
+		return rawOptions as RefablePromisablePickableOptions<T>;
+	}
+}
+
+export type SuspendableOptionsHandler = (selectorInfo: URL, params: {attributes: Record<string, any>|null, blockName: string|null}) => any;
+
+function toSuspendableOptionsURI(rawOptions: string|URL) {
+	if (rawOptions instanceof URL) {
+		return rawOptions;
+	}
+
+	return useMemo(() => {
+		try {
+			const res = new URL(rawOptions);
+			if (res.protocol === "select:") {
+				if (res.username && res.hostname) {
+					return res;
+				}
+			} else if (res.protocol === "setting:" || res.protocol === "settings:") {
+				if (res.protocol === "setting:") {
+					console.warn(`Encountered a Suspendable Option parameter using deprecated protocol:`, res.toString(), "\nThe \"setting\" protocol has been renamed to \"settings\"");
+					res.protocol = "settings:";
+				}
+				if (res.hostname) {
+					return res;
+				}
+			} else {
+				return res;
+			}
+		} catch {
+			// We're not throwing on an invalid URI here because we want a chance to run the deprecated-syntax handling logic
+		}
+
+		const selectorInfo = rawOptions.split(":") as [string, ...string[]];
+		let correctedRawOptions: string;
+		if (selectorInfo[0] === 'select') {
+			if (selectorInfo.length < 3 || !selectorInfo[1] || !selectorInfo[2]) {
+				throw new Error(`The "select" protocol for Suspendable Options must have at least 3 colon-delimited parts. Got: ${rawOptions}`);
+			}
+			// Deprecated: select:plaudit/simple-gutenberg-apis:plaudit-base.conditional-display.show-when-options:attributes
+			// Corrected:  select://plaudit-base.conditional-display.show-when-options@plaudit/simple-gutenberg-apis?attributes
+			correctedRawOptions = `select://${selectorInfo[2]}@${selectorInfo[1]}`;
+			if (selectorInfo[3]) {
+				correctedRawOptions += "?" + selectorInfo[3];
+			}
+		} else if (selectorInfo[0] === 'setting' || selectorInfo[0] === 'settings') {
+			if (!selectorInfo[1]) {
+				throw new Error(`The "settings" protocol for Suspendable Options must have at least 2 colon-delimited parts. Got: ${rawOptions}`);
+			}
+			// Deprecated: setting:plaudit.markerDisplay:with-inherit
+			// Corrected:  settings://plaudit.markerDisplay?with-inherit
+			correctedRawOptions = `settings://${selectorInfo[1]}`;
+			if (selectorInfo.length > 2) {
+				const query = selectorInfo.slice(2).join("&");
+				if (query.replaceAll("&", "").length > 0) {
+					correctedRawOptions += "?" + query;
+				}
+			}
+		} else {
+			throw new Error(`Encountered an invalid suspendable options value: ${rawOptions}. Suspendable option values MUST be URIs.`);
+		}
+		console.warn(`Encountered a Suspendable Option parameter using deprecated syntax:`, rawOptions, "\nIt should be replaced with:", correctedRawOptions);
+		return new URL(correctedRawOptions);
+	}, [rawOptions]);
+}
+
+import initSelectProtocol from "./built-in-suspendable-option-protocols/select";
+import initSettingsProtocol from "./built-in-suspendable-option-protocols/settings";
+initSelectProtocol();
+initSettingsProtocol();

package/src/blocks/index.ts

@@ -0,0 +1,20 @@
+export * from "./layered-styles-api";
+export * from "./simple-block";
+export * from "./shared-exportable-types";
+export * from "./simple-native-property-api";
+export * from "./snp-data-store";
+export * from "./utilities";
+
+export type {SuspendableOptionsHandler} from "./hooks/useSuspendableOptions";
+
+export {type DbSource, installCustomBlockBindingsSupport, registerCustomBlockBindingsSource} from "./basic-custom-block-bindings-support";
+export type {BlockName} from "../lib/useful-types"; // This is for backwards compatibility
+
+import {installGutenbergExtensions} from "../index";
+
+/**
+ * @deprecated use installGutenbergExtensions() instead
+ */
+export function installGutenbergBlockExtensions() {
+	installGutenbergExtensions();
+}

package/src/blocks/layered-styles-api.ts

@@ -0,0 +1,142 @@
+import type {
+	ColorPaletteCSNPConfig,
+	CommonPropertyConfig,
+	RadioPropertyCSNPConfig,
+	SelectPropertyCSNPConfig,
+	ToggleGroupPropertyCSNPConfig,
+	TogglePropertyCSNPConfig
+} from "./csnp-api";
+import type {PickableOptions} from "../controls";
+import {installGutenbergExtensions} from "../index";
+import type {BlockName} from "../lib/useful-types";
+import {registerSimpleNativeProperties, SimpleNativeProperty} from "./simple-native-property-api";
+
+type BaseLayeredBlockStyleLayer = {
+	name: string;
+	title: string;
+	default?: string|undefined;
+	condition?: SimpleNativeProperty['condition']
+	alwaysStore?: boolean|undefined;
+	styleProperty?: string;
+}&Pick<CommonPropertyConfig<any, any, any, any>, 'help'>
+
+type LayeredBlockStyleColorLayer = BaseLayeredBlockStyleLayer&{
+	picker: 'color'|'colorPalette';
+	clearable?: boolean|undefined;
+	options: PickableOptions<string, {color?: string}>|ColorPaletteCSNPConfig['options'];
+}
+
+type LayeredBlockStyleToggleLayer = BaseLayeredBlockStyleLayer&{picker: 'toggle'}&Pick<TogglePropertyCSNPConfig, 'switch'>
+
+type LayeredBlockStyleToggleGroupLayer = BaseLayeredBlockStyleLayer&{
+	picker?: 'toggle-control'|'toggleGroup';
+	clearable?: boolean|undefined;
+	options: ToggleGroupPropertyCSNPConfig['options'];
+}
+type LayeredBlockStyleSelectOrRadioLayer = BaseLayeredBlockStyleLayer&{options: PickableOptions<string>}&({picker: 'select', clearable?: boolean|undefined}|{picker: 'radio'})
+
+export type LayeredBlockStyleLayer = LayeredBlockStyleColorLayer|LayeredBlockStyleToggleLayer|LayeredBlockStyleToggleGroupLayer|LayeredBlockStyleSelectOrRadioLayer;
+
+export interface LayeredBlockStylesConfig {
+	block: BlockName[]|BlockName;
+	layers: LayeredBlockStyleLayer[];
+}
+
+export function registerLayeredBlockStyles(config: LayeredBlockStylesConfig) {
+	registerSimpleNativeProperties({
+		block: config.block,
+		properties: {
+			group: 'layered-styles',
+			title: "Layered Styles",
+			properties: config.layers.map(layer => {
+				const sharedProps = {
+					name: layer.name,
+					label: layer.title,
+					condition: layer.condition,
+					alwaysStore: layer.alwaysStore ?? ((layer.default ?? '') !== ''),
+					styleProperty: layer.styleProperty
+				};
+
+				const clearable = "clearable" in layer && (layer.clearable ?? false);
+				let defaultValue: string|undefined;
+				if (clearable) {
+					if (layer.default) {
+						console.error(`Layered Style, "${layer.title}" on ${Array.isArray(config.block) ? config.block.join(', ') : config.block}`,
+							"is improperly configured with both clearable and a non-empty default.");
+						defaultValue = "";
+					} else {
+						defaultValue = layer.default;
+					}
+				} else {
+					defaultValue = layer.default;
+				}
+
+				switch (layer.picker) {
+					case undefined:
+					case 'toggle-control':
+					case 'toggleGroup':
+						return {
+							...sharedProps,
+							clearable,
+							control: 'toggleGroup',
+							default: defaultValue,
+							options: layer.options,
+							help: layer.help
+						} as ToggleGroupPropertyCSNPConfig;
+					case 'color':
+					case 'colorPalette':
+						return {
+							...sharedProps,
+							allowCustom: false,
+							clearable,
+							control: 'colorPalette',
+							default: defaultValue,
+							options: layer.options,
+							help: layer.help
+						} as ColorPaletteCSNPConfig;
+					case 'radio':
+						return {
+							...sharedProps,
+							control: 'radio',
+							options: layer.options,
+							default: layer.default,
+							allowCustom: false,
+							help: layer.help
+						} as RadioPropertyCSNPConfig;
+					case 'select':
+						return {
+							...sharedProps,
+							clearable,
+							control: 'select',
+							default: defaultValue,
+							options: layer.options,
+							help: layer.help
+						} as SelectPropertyCSNPConfig;
+					case 'toggle':
+						return {
+							...sharedProps,
+							control: 'toggle',
+							default: defaultValue,
+							switch: layer.switch ?? {small: true},
+							help: layer.help,
+							transformer: {
+								to(input: unknown) {
+									return input !== undefined && input !== null ? (typeof input === 'boolean' ? input : input?.toString().toLowerCase() === 'true') : undefined;
+								},
+								from(value: boolean|undefined) {
+									return value?.toString();
+								}
+							}
+						} as TogglePropertyCSNPConfig
+				}
+			})
+		}
+	});
+}
+
+/**
+ * @deprecated use installGutenbergExtensions() instead.
+ */
+export function installLayeredBlockStylesSupport() {
+	installGutenbergExtensions();
+}

package/src/blocks/layered-styles-impl.ts

@@ -0,0 +1,94 @@
+import {select} from "@wordpress/data";
+
+import type {ActualBlockEditProps} from "../lib/useful-types";
+import type {PDSimpleNativeProperty} from "./simple-native-property-api";
+import {makeHasPropClassName} from "./simple-native-property-impl";
+import {SNPDataStore} from "./snp-data-store";
+
+export class LayeredStylesDataStore extends SNPDataStore {
+	getAttribute(name: string): any {
+		if (name.startsWith("__plaudit/")) {
+			return this.blockEditProps.attributes[name];
+		}
+		const layer = select('plaudit/gutenberg-api-extensions').blockStylesLayer(this.blockEditProps.name, name);
+		if (layer === undefined) {
+			return undefined;
+		}
+		return extractStyleLayerValueFromAttributes(this.blockEditProps.attributes, layer.name) ?? layer.default;
+	}
+	setAttribute(name: string, rawValue: any) {
+		if (name.startsWith("__plaudit/")) {
+			this.blockEditProps.setAttributes({[name]: rawValue});
+			return;
+		}
+		const layers = select('plaudit/gutenberg-api-extensions').blockStylesLayers(this.blockEditProps.name);
+		if (layers === undefined) {
+			return;
+		}
+		const layer = layers[name];
+		if (layer === undefined) {
+			return;
+		}
+
+		const className = this.blockEditProps.attributes['className'];
+
+		const value = rawValue?.toString() || (layer.default ?? '');
+		const currentLayerClassPrefix = `style-${name}-`;
+		if (typeof className !== 'string' || !className) {
+			if (value.length) {
+				this.blockEditProps.setAttributes({
+					className: "styleProperty" in layer && layer.styleProperty
+						? `${currentLayerClassPrefix}${value} ${makeHasPropClassName(layer.name)}`
+						: `${currentLayerClassPrefix}${value}`
+				});
+			}
+			return;
+		}
+		this.blockEditProps.setAttributes({className: this.incorporateLayerValue(Object.values(layers), layer, name, value, className)});
+	}
+
+	private incorporateLayerValue(layers: PDSimpleNativeProperty[], currentLayer: PDSimpleNativeProperty, name: string, value: string, className: string): string {
+		const classNames = className.split(/\s+/);
+		const layeredStyleClassPrefixes = layers.map(layer => `style-${layer.name}-`);
+		const nonLayerClasses = classNames
+			.filter(cn => !layeredStyleClassPrefixes.some(lc => cn.startsWith(lc)));
+
+		const layerPrefixPairs = layers
+			.filter(layer => layer.name !== name)
+			.map<[PDSimpleNativeProperty, string]>(layer => [layer, `style-${layer.name}-`]);
+		const layerClasses: string[] = [];
+		for (const [layer, prefix] of layerPrefixPairs) {
+			if (this.hasCachedValue(layer.name)) {
+				const layerValue = this.getCachedValue(layer.name);
+				if (layerValue) {
+					layerClasses.push(`${prefix}${layerValue}`);
+				}
+			} else {
+				const layerValueClass = classNames.find(cn => cn.startsWith(prefix));
+				if (layerValueClass) {
+					layerClasses.push(layerValueClass);
+				}
+			}
+		}
+		if (value) {
+			layerClasses.push(`style-${name}-${value}`);
+			if ('styleProperty' in currentLayer && currentLayer.styleProperty) {
+				const hasPropClassName = makeHasPropClassName(currentLayer.name);
+				if (!nonLayerClasses.includes(hasPropClassName)) {
+					nonLayerClasses.push(hasPropClassName);
+				}
+			}
+		}
+		return [...nonLayerClasses, ...layerClasses.sort()].join(' ');
+	}
+}
+
+export function extractStyleLayerValueFromAttributes(attributes: ActualBlockEditProps['attributes'], layerName: string) {
+	const className = attributes['className'];
+	if (typeof className !== 'string') {
+		return undefined;
+	}
+
+	const currentLayerClassPrefix = `style-${layerName}-`;
+	return attributes['className']?.split(/\s+/).find(className => className.startsWith(currentLayerClassPrefix))?.substring(currentLayerClassPrefix.length);
+}

package/src/blocks/layout/LaidOutProperty.tsx

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,22 @@
+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";
+
+export function LaidOutPropertyRow(
+	{property, dataController, inToolsPanel}: {property: HydratedLaidOutProperties[number], dataController?: DataController, inToolsPanel?: boolean}
+) {
+	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>;
+	}
+}

package/src/blocks/layout/NodeContext.tsx

@@ -0,0 +1,54 @@
+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 actions = 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.dispatch({type: "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, ...actions}), [actions, 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);
+}