@plaudit/gutenberg-api-extensions 2.88.0 → 2.90.0

package/src/blocks/SNPFlexibleItemsListComponent.tsx

@@ -2,24 +2,24 @@ import {useCallback} from "@wordpress/element";
 
 import type {FlexibleItemsListPropertyConfig} from "./csnp-api";
 import {type FlexibleItem, SortableFlexibleItemsControl} from "../controls";
-import {LaidOutPropertyRow} from "./layout/LaidOutPropertyRow";
+import {makeLaidOutPropertyRow} 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>[], {
+export type SNPFlexibleItemsListComponentProps<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>
+	{config, availableTypes, emptyValues, hydratedProperties, value, Label, Messages}: SNPFlexibleItemsListComponentProps<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} />)} />
+		return <NodeContextWrapper nodeName={index} children={(hydratedProperties[datum.type] ?? []).map(property => makeLaidOutPropertyRow({property}))} />;
 	}, [hydratedProperties]);
 
 	return <SortableFlexibleItemsControl

package/src/blocks/SNPGroupComponent.tsx

@@ -3,7 +3,7 @@ import {useCallback} from "@wordpress/element";
 
 import type {GroupPropertyCSNPConfig} from "./csnp-api";
 import type {Dict} from "../controls";
-import {LaidOutPropertyRow} from "./layout/LaidOutPropertyRow";
+import {LaidOutPropertyRow, makeLaidOutPropertyRow} from "./layout/LaidOutPropertyRow";
 import {useNodeContext} from "./layout/NodeContext";
 import type {CSNPControlComponentProps} from "./shared-internal-types";
 import type {SNPControlSlots} from "./simple-native-property-api";
@@ -22,7 +22,7 @@ export function SNPGroupComponent({config, hydratedProperties, Label, Messages}:
 					setValue((resetAllFilters ?? []).reduce((q: any, filter) => filter(q), value))
 				}, [value, setValue])}
 			>
-				{...hydratedProperties.map(property => <LaidOutPropertyRow property={property} inToolsPanel={true} />)}
+				{...hydratedProperties.map(property => makeLaidOutPropertyRow({property, inToolsPanel: true}))}
 			</ToolsPanel>
 			<Messages/>
 		</>;
@@ -30,7 +30,7 @@ export function SNPGroupComponent({config, hydratedProperties, Label, Messages}:
 		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}/>)}
+				{...hydratedProperties.map(property => makeLaidOutPropertyRow({property}))}
 			</div>
 			<Messages/>
 		</fieldset>;

package/src/blocks/SNPListComponent.tsx

@@ -2,7 +2,7 @@ import {useCallback, useMemo} from "@wordpress/element";
 
 import type {ObjectListPropertyConfig} from "./csnp-api";
 import {type Dict, SortableItemsControl} from "../controls";
-import {LaidOutPropertyRow} from "./layout/LaidOutPropertyRow";
+import {LaidOutPropertyRow, makeLaidOutPropertyRow} 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";
@@ -15,7 +15,7 @@ export function SNPListComponent({config, hydratedProperties, value, Label, Mess
 	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} />)} />
+		return <NodeContextWrapper nodeName={index} children={hydratedProperties.map(property => makeLaidOutPropertyRow({property}))} />
 	}, [hydratedProperties]);
 
 	return <SortableItemsControl

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

@@ -15,7 +15,7 @@ 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 {ActualBlockEditProps, BlockName, DbSource} from "../lib/useful-types";
 
 import {type ReactElement, Suspense} from "react";
 import {ErrorBoundary, FallbackProps} from "react-error-boundary";
@@ -27,7 +27,6 @@ const BLOCK_BINDINGS_ALLOWED_BLOCKS: {[key: BlockName]: string[]} = {
 	'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();
@@ -47,7 +46,7 @@ export function installCustomBlockBindingsSupport() {
 	);
 
 	addFilter('editor.BlockEdit', 'plaudit/gutenberg-api-extensions/basic-custom-block-bindings-support',
-		createHigherOrderComponent(BlockEdit => (blockEditProps: ActualBlockEditProps) => {
+		createHigherOrderComponent(BlockEdit => function CustomBlockBindingsSupportBlockEdit(blockEditProps: ActualBlockEditProps) {
 			const availableBindingsList = BLOCK_BINDINGS_ALLOWED_BLOCKS[blockEditProps.name];
 			if (!availableBindingsList?.length) {
 				return <BlockEdit {...blockEditProps} />;
@@ -118,7 +117,8 @@ export function installCustomBlockBindingsSupport() {
 			<SelectControl
 				key="source"
 				label="Source"
-				__nextHasNoMarginBottom={true}
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				onChange={source => updateBlockBindings({[binding]: {source, args: {}}})}
 				options={[
 					{
@@ -170,7 +170,8 @@ export function installCustomBlockBindingsSupport() {
 			controls.push(<SelectControl
 				key="field"
 				label="Field"
-				__nextHasNoMarginBottom={true}
+				__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={[
@@ -189,7 +190,8 @@ export function installCustomBlockBindingsSupport() {
 					controls.push(<TextControl
 						key="subfield"
 						label="Subfield"
-						__nextHasNoMarginBottom={true}
+						__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."
@@ -198,7 +200,8 @@ export function installCustomBlockBindingsSupport() {
 					controls.push(<SelectControl
 						key="subfield"
 						label="Subfield"
-						__nextHasNoMarginBottom={true}
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						onChange={subfield => updateBlockBindings({[binding]: (value ? {...value, args: {...value.args, subfield}} : undefined)})}
 						options={[
 							{
@@ -217,7 +220,8 @@ export function installCustomBlockBindingsSupport() {
 				controls.push(<SelectControl
 					key="db-source"
 					label="DB Source"
-					__nextHasNoMarginBottom={true}
+					__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}

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

@@ -131,7 +131,7 @@ function hydrateDesiccatedSimpleNativeProperty(
 					const safeOnChange = useCallback((v: string|undefined) => onChange(v ? colorToValue[v] : undefined), [colorToValue, onChange]);
 
 					const {baseControlProps, controlProps} = useBaseControlProps({label: <Label />, help: config.help});
-					return <BaseControl {...baseControlProps}>
+					return <BaseControl __nextHasNoMarginBottom {...baseControlProps}>
 						<ColorPalette
 							{...config.component}
 							{...controlProps}
@@ -157,7 +157,7 @@ function hydrateDesiccatedSimpleNativeProperty(
 				control({value, slots: {Label, Messages}}: SNPControlProps<any>) {
 					const {current: voidChangeHandler} = useRef(() => {});
 					return <Disabled>
-						<TextControl {...config.component} value={value} onChange={voidChangeHandler} label={<Label />} help={config.help} disabled={true} />
+						<TextControl __nextHasNoMarginBottom __next40pxDefaultSize {...config.component} value={value} onChange={voidChangeHandler} label={<Label />} help={config.help} disabled={true} />
 						<Messages />
 					</Disabled>;
 				}
@@ -172,7 +172,7 @@ function hydrateDesiccatedSimpleNativeProperty(
 				transformer: config.transformer,
 				control({value, onChange, slots: {Label, Messages}}) {
 					const safeOnChange = useCallback((v: string|null) => onChange(v === null ? undefined : new Date(v).getTime()), [onChange]);
-					return <BaseControl id="" label={<Label />} help={config.help}>
+					return <BaseControl __nextHasNoMarginBottom id="" label={<Label />} help={config.help}>
 						{config.time
 							? <DateTimePicker {...config.component} currentDate={value ?? null} onChange={safeOnChange} />
 							: <DatePicker {...config.component} currentDate={value ?? null} onChange={safeOnChange} />
@@ -193,7 +193,7 @@ function hydrateDesiccatedSimpleNativeProperty(
 					return <FileControl label={<Label />} help={config.help} onChange={onChange} value={value} allowedTypes={config.allowedTypes} />;
 				}
 			};
-		case "group":
+		case "group": {
 			registerPlainTextLabelRequiredMarker("post", " > .components-tools-panel > .components-tools-panel-header > *");
 			const currentTypes = parentTypes.toSpliced(parentTypes.length - 1, 0, 'object');
 			const hydratedProperties = (config.fields ?? [])
@@ -228,6 +228,7 @@ function hydrateDesiccatedSimpleNativeProperty(
 					</ToolsPanelContext.Provider>;
 				}
 			};
+		}
 		case "image":
 			return {
 				type: 'object',
@@ -264,24 +265,24 @@ function hydrateDesiccatedSimpleNativeProperty(
 					</>;
 				}
 			};
-		case "list":
+		case "list": {
 			const sharedProps: ShareableSNPElements<'array'> = {...passthroughProps, type: 'array', alwaysStore: config.alwaysStore};
 			switch (config.itemType) {
 				case undefined:
 				case "string":
 					return {
 						...sharedProps,
-						default: config.default,
-						type: 'array',
-						validator: config.validator,
+						default:     config.default,
+						type:        'array',
+						validator:   config.validator,
 						transformer: config.transformer,
 						control({value, onChange, slots}) {
 							const children = useCallback((datum: any, onDatumChange: (datum: any) => void) => {
-								return <TextControl {...config.listComponent} value={datum} onChange={onDatumChange}/>;
+								return <TextControl {...config.listComponent} __nextHasNoMarginBottom __next40pxDefaultSize value={datum} onChange={onDatumChange} />;
 							}, [config.listComponent]);
 							return <SortableItemsControl {...config.component} {...slots}
-								value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
-								help={config.help} emptyValue={config.emptyValue ?? ''} children={children}
+							                             value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
+							                             help={config.help} emptyValue={config.emptyValue ?? ''} children={children}
 							/>;
 						}
 					};
@@ -290,21 +291,22 @@ function hydrateDesiccatedSimpleNativeProperty(
 				case "integer":
 					return {
 						...sharedProps,
-						default: config.default,
-						type: 'array',
-						validator: config.validator,
+						default:     config.default,
+						type:        'array',
+						validator:   config.validator,
 						transformer: config.transformer,
 						control({value, onChange, slots}) {
 							const children = useCallback((datum: any, onDatumChange: (datum: any) => void) => {
-								return <NumberLikeListTextControl listComponent={config.listComponent} datum={datum} itemType={config.itemType} onDatumChange={onDatumChange} />;
+								return <NumberLikeListTextControl listComponent={config.listComponent} datum={datum} itemType={config.itemType}
+								                                  onDatumChange={onDatumChange} />;
 							}, [config.listComponent, config.itemType]);
 							return <SortableItemsControl {...config.component} {...slots}
-								value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
-								help={config.help} emptyValue={config.emptyValue ?? 0} children={children}
+							                             value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
+							                             help={config.help} emptyValue={config.emptyValue ?? 0} children={children}
 							/>;
 						}
 					};
-				default:
+				default: {
 					const currentTypes = parentTypes.toSpliced(parentTypes.length - 1, 0, 'array');
 					if (isObjectListPropertyConfig(config)) {
 						const hydratedProperties = config.itemType
@@ -312,9 +314,9 @@ function hydrateDesiccatedSimpleNativeProperty(
 						const def = config.default ?? [];
 						return {
 							...sharedProps,
-							children: hydratedProperties,
-							default: def, // This type-checks, but directly inlining the value doesn't
-							validator: config.validator,
+							children:    hydratedProperties,
+							default:     def, // This type-checks, but directly inlining the value doesn't
+							validator:   config.validator,
 							transformer: config.transformer,
 							control({value, onChange, slots}) {
 								return <SNPListComponent config={config as ObjectListPropertyConfig} onChange={onChange} value={value}
@@ -340,10 +342,10 @@ function hydrateDesiccatedSimpleNativeProperty(
 						}
 						const hydratedProperties = Object.fromEntries(
 							Object.entries(completedItemTypes)
-							.map(([itemType, {properties}]) => {
-								return [itemType, properties
-									.map(property => hydrateSimpleNativeProperty(property, propPath, outsideHydrationInfo, currentTypes))]
-							})
+								.map(([itemType, {properties}]) => {
+									return [itemType, properties
+										.map(property => hydrateSimpleNativeProperty(property, propPath, outsideHydrationInfo, currentTypes))]
+								})
 						);
 						const emptyValues = Object.fromEntries(
 							Object.entries(completedItemTypes).map(([itemType, {emptyValue}]) => {
@@ -352,9 +354,9 @@ function hydrateDesiccatedSimpleNativeProperty(
 						const def = config.default ?? [];
 						return {
 							...sharedProps,
-							children: hydratedProperties,
-							default: def, // This type-checks, but directly inlining the value doesn't
-							validator: config.validator,
+							children:    hydratedProperties,
+							default:     def, // This type-checks, but directly inlining the value doesn't
+							validator:   config.validator,
 							transformer: config.transformer,
 							control({value, onChange, slots}) {
 								return <SNPFlexibleItemsListComponent
@@ -364,7 +366,9 @@ function hydrateDesiccatedSimpleNativeProperty(
 							}
 						}
 					}
+				}
 			}
+		}
 		case "message":
 			return {
 				type: 'string',
@@ -375,7 +379,11 @@ function hydrateDesiccatedSimpleNativeProperty(
 				transformer: config.transformer as any,
 				control({value}: SNPControlProps<string>) {
 					const lines = useMemo(() => {
-						return !value || !/\r?\n/.exec(value) ? value : value?.split(/\r?\n/g).flatMap(line => [<br />, line]).slice(1);
+						if (value && /\r?\n/.exec(value)) {
+							// eslint-disable-next-line react/jsx-key -- random <br /> elements don't need a key
+							return value.split(/\r?\n/g).flatMap(line => [<br />, line]).slice(1);
+						}
+						return value;
 					}, [value]);
 					return <Disabled children={lines} />;
 				}
@@ -396,6 +404,7 @@ function hydrateDesiccatedSimpleNativeProperty(
 						|| (config.step !== undefined && !Number.isInteger(config.step));
 					return <>
 						<TextControl {...config.component}
+						    __nextHasNoMarginBottom __next40pxDefaultSize
 							type="number" value={value ?? ''} min={config.min} max={config.max} step={config.step ?? (float ? "any" : undefined)}
 							onChange={safeOnChange} label={<Label />} help={config.help} placeholder={config.placeholder}
 						/>
@@ -433,7 +442,7 @@ function hydrateDesiccatedSimpleNativeProperty(
 					return <>
 						<RangeControl
 							{...config.component} value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
-							step={config.step} help={config.help}
+							step={config.step} help={config.help} __nextHasNoMarginBottom __next40pxDefaultSize
 						/>
 						<Messages />
 					</>;
@@ -470,7 +479,8 @@ function hydrateDesiccatedSimpleNativeProperty(
 				transformer: config.transformer,
 				control({value, onChange, slots: {Label, Messages}}) {
 					return <>
-						<TextControl {...config.component} value={value ?? ''} onChange={onChange} label={<Label />} help={config.help} placeholder={config.placeholder} />
+						<TextControl {...config.component} __nextHasNoMarginBottom __next40pxDefaultSize value={value ?? ''}
+						             onChange={onChange} label={<Label />} help={config.help} placeholder={config.placeholder} />
 						<Messages />
 					</>;
 				}
@@ -488,7 +498,8 @@ function hydrateDesiccatedSimpleNativeProperty(
 					const switchCfg = useMemo(() => config.switch ?? {}, [config.switch]);
 					if (switchCfg.small === true) {
 						return <>
-							<ToggleControl {...config.component as Partial<ComponentPropsWithoutRef<typeof ToggleControl>>} checked={value} onChange={onChange} label={<Label />} help={config.help} />
+							<ToggleControl {...config.component as Partial<ComponentPropsWithoutRef<typeof ToggleControl>>}
+							               __nextHasNoMarginBottom checked={value} onChange={onChange} label={<Label />} help={config.help} />
 							<Messages />
 						</>;
 					} else {
@@ -574,7 +585,7 @@ const ToggleGroupControlLabelSelector: string = " > .components-base-control > .
 type NumberLikeListTextControlProps = {listComponent?: ComponentPropsWithoutRef<typeof TextControl>, datum: string, itemType: string, onDatumChange(value: any): void};
 function NumberLikeListTextControl({listComponent, datum, itemType, onDatumChange}: NumberLikeListTextControlProps) {
 	const onChange = useCallback((v: string) => onDatumChange(itemType !== 'float' ? parseInt(v) : parseFloat(v)), [itemType, onDatumChange])
-	return <TextControl {...listComponent} type="number" value={datum} onChange={onChange} />
+	return <TextControl {...listComponent} __nextHasNoMarginBottom __next40pxDefaultSize type="number" value={datum} onChange={onChange} />
 }
 
 type PotentiallyExtendedRadioControlProps = CSNPControlComponentProps<RadioPropertyCSNPConfig, string>&SNPControlSlots;
@@ -839,7 +850,10 @@ function hydrateSelectProperty(config: SelectPropertyCSNPConfig): HydratedSimple
 			control({value, onChange, slots: {Label, Messages}}) {
 				const normalizedOptions = useAsOptions(useSuspendableOptions(config), value, config.clearable ? '' : undefined);
 				return <>
-					<SelectControl value={value ?? config.default ?? ''} onChange={onChange} options={normalizedOptions} label={<Label />} help={config.help}/>
+					<SelectControl
+						__nextHasNoMarginBottom __next40pxDefaultSize
+						value={value ?? config.default ?? ''} onChange={onChange} options={normalizedOptions} label={<Label />} help={config.help}
+					/>
 					<Messages />
 				</>;
 			}

package/src/blocks/conditions.ts

@@ -172,7 +172,7 @@ export function resolveValueForCondition(propertyPath: RawPath, contextPath: Raw
 		return undefined;
 	}
 	const dataStore = getDataStore(actualPath[0]);
-	return walkToNodeWithLogging(dataStore ? dataStore.getValue(actualPath[0]) : select("core/block-editor").getBlockAttributes(blockClientId)?.[actualPath[0]], actualPath);
+	return walkToNodeWithLogging(dataStore ? dataStore.getValue(actualPath[0]) : select(blockEditorStore).getBlockAttributes(blockClientId)?.[actualPath[0]], actualPath);
 }
 
 function resolveActualPathToValueForCondition(propertyPath: RawPath, contextPath: RawPath): NodePath|undefined {

package/src/blocks/index.ts

@@ -7,8 +7,8 @@ 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
+export {installCustomBlockBindingsSupport, registerCustomBlockBindingsSource} from "./basic-custom-block-bindings-support";
+export type {DbSource, BlockName} from "../lib/useful-types"; // This is for backwards compatibility
 
 import {installGutenbergExtensions} from "../index";
 

package/src/blocks/layout/LaidOutPropertyRow.tsx

@@ -5,8 +5,9 @@ import type {HydratedLaidOutProperties} from "../simple-native-property-internal
 
 import React from "react";
 
+type LaidOutPropertyRowProps = {property: HydratedLaidOutProperties[number], dataController?: DataController, inToolsPanel?: boolean};
 export function LaidOutPropertyRow(
-	{property, dataController, inToolsPanel}: {property: HydratedLaidOutProperties[number], dataController?: DataController, inToolsPanel?: boolean}
+	{property, dataController, inToolsPanel}: LaidOutPropertyRowProps
 ) {
 	if (Array.isArray(property)) {
 		return <div style={{display: "flex", flexWrap: "wrap", columnGap: "8px"}}>
@@ -20,3 +21,8 @@ export function LaidOutPropertyRow(
 		</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/PanelRoot.tsx

@@ -3,7 +3,7 @@ import {PanelBody} from "@wordpress/components";
 import {cautionFilled} from "@wordpress/icons";
 
 import {testCondition} from "../conditions";
-import {LaidOutPropertyRow} from "./LaidOutPropertyRow";
+import {makeLaidOutPropertyRow} from "./LaidOutPropertyRow";
 import {HydratedSimpleNativePanel, isRootLevelPanelGroup} from "../simple-native-property-internal-shared";
 import {useSNPTreeContext} from "../SNPTreeContext";
 
@@ -25,9 +25,6 @@ export function PanelRoot({panel}: PanelRootProps) {
 		: {};
 
 	const panelGroup = panel.group === 'layered-styles' ? 'styles' : panel.group;
-	const children = properties.map(property => {
-		const key = Array.isArray(property) ? property.map(prop => prop.name).join('-') : property.name;
-		return <LaidOutPropertyRow key={key} property={property} dataController={dataController}/>;
-	});
+	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

@@ -2,7 +2,7 @@ import {InspectorControls} from "@wordpress/block-editor";
 import {PanelBody, TabPanel} from "@wordpress/components";
 
 import {testCondition} from "../conditions";
-import {LaidOutPropertyRow} from "./LaidOutPropertyRow";
+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";
@@ -51,6 +51,6 @@ type RenderedTabPanelProps = {dataController: DataController, panel: HydratedSim
 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 => <LaidOutPropertyRow property={property} dataController={dataController} />);
+	const children = properties.map(property => makeLaidOutPropertyRow({property, dataController}));
 	return raw ? children : <PanelBody {...panelBodyProps} opened={panelBodyProps.title ? undefined : true} children={children} />;
 }

package/src/blocks/simple-block.tsx

@@ -4,13 +4,13 @@ import type {UseBlockProps} from "@wordpress/block-editor/components/use-block-p
 
 import {plauditIcon} from "../lib/plaudit-icons";
 
-import type {ComponentType, ReactNode} from "react";
+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: () => React.ReactElement, mode: "edit"|"save") => ReactNode,
+	renderer: (attributes: BlockSaveProps<TAttributes>, wrapperProps: UseBlockProps|UseBlockProps['save'], InnerBlocks: () => ReactElement, mode: "edit"|"save") => ReactNode,
 	innerBlocksProps?: InnerBlocks.Props,
 	settings?: Partial<BlockConfiguration<TAttributes>>,
 };

package/src/blocks/simple-native-property-impl.tsx

@@ -1,3 +1,4 @@
+import {store as blockEditorStore} from "@wordpress/block-editor";
 import {createHigherOrderComponent} from "@wordpress/compose";
 import {dispatch, select} from "@wordpress/data";
 import {useEffect, useMemo} from "@wordpress/element";
@@ -86,14 +87,13 @@ export function installSimpleNativePropertiesSupport() {
 	});
 
 	addFilter('editor.BlockEdit', 'plaudit/gutenberg-api-extensions/simple-native-properties',
-		createHigherOrderComponent(BlockEdit => (blockEditProps: ActualBlockEditProps) => {
+		createHigherOrderComponent(BlockEdit => function SNPBlockEdit(blockEditProps: ActualBlockEditProps) {
 			const blockSimpleNativePanelsAndTabs = select(gutenbergApiExtensionsStore).preppedProperties(blockEditProps.name);
 			if (!blockSimpleNativePanelsAndTabs) {
 				return <BlockEdit {...blockEditProps} />;
 			}
-			const selectedEditor = select("core/block-editor");
-			if (selectedEditor.getBlockParentsByBlockName(blockEditProps.clientId, "core/block")?.length) {
-				// If we have a core/block ancestor, then we can't be edited and attempting to self-edit will cause a crash
+			if (select(blockEditorStore).getBlockParentsByBlockName(blockEditProps.clientId, "core/block")?.length) {
+				// If we have a core/block ancestor, then we can't be edited, and attempting to self-edit will cause a crash
 				return <BlockEdit {...blockEditProps} />;
 			}
 			return <DataControllerInitializationIsolator bep={blockEditProps} dcm={dataControllerManager} BlockEdit={BlockEdit} snpPanelsAndTabs={blockSimpleNativePanelsAndTabs} />;
@@ -120,7 +120,7 @@ export function installSimpleNativePropertiesSupport() {
 		});
 
 	addFilter('editor.BlockListBlock', 'plaudit/gutenberg-api-extensions/simple-native-properties',
-		createHigherOrderComponent(BlockListBlock => (props: ActualBlockListBlockProps) => {
+		createHigherOrderComponent(BlockListBlock => function SNPBlockListBlock(props: ActualBlockListBlockProps) {
 			const wrapperProps: {className?: string, style?: Record<string, unknown>} = {...props.wrapperProps};
 			const extraPropTransforms = select(gutenbergApiExtensionsStore).computedExtraPropTransforms(props.name);
 			if (!extraPropTransforms || !extraPropTransforms.appliesInEditor) {

package/src/controls/AsynchronousFormTokenField.tsx

@@ -63,6 +63,7 @@ export function AsynchronousFormTokenField(props: AsynchronousFormTokenFieldProp
 	//TODO: If focus is in field but user hasn't started typing, show a message telling them to start typing
 	return <>
 		<FormTokenField
+			__next40pxDefaultSize
 			value={currentTokens}
 			label={props.label}
 			placeholder="Start typing to see suggestions"

package/src/controls/BaseSortableItemsControl.tsx

@@ -2,10 +2,10 @@ import {BaseControl, Button, useBaseControlProps} from "@wordpress/components";
 import {useCallback} from "@wordpress/element";
 import {dragHandle, Icon} from "@wordpress/icons";
 
-import {ProvidedSlot} from "../blocks";
-
 import {Reorder, useDragControls} from "framer-motion";
-import type {ReactNode} from "react";
+import type {PointerEvent, ReactNode} from "react";
+
+import {ProvidedSlot} from "../blocks";
 import {IndexedItemActionsMaker, KeyedValue, useSortableItemsModel} from "./hooks/useSortableItemsModel";
 
 export type BaseSortableItemsControlProps<D> = Omit<Parameters<typeof useBaseControlProps>[0], 'children'|'id'>&{
@@ -33,7 +33,7 @@ export function BaseSortableItemsControl<D>({
 	const removeDisabled = min !== undefined && listLength <= min;
 	const {baseControlProps, controlProps} = useBaseControlProps({...wrapperProps, label: Label ? <Label /> : label});
 
-	return <BaseControl {...baseControlProps}>
+	return <BaseControl {...baseControlProps} __nextHasNoMarginBottom>
 		<div {...controlProps} className="plaudit-sortable-items-container">
 			<Reorder.Group
 				axis="y" onReorder={commit} values={keyedValues}
@@ -58,7 +58,7 @@ function SortableItemsListNode<D>({datum, index, listLength, makeChild, makeInde
 	//TODO: If used, implement addBefore and addAfter the same way as moveUp and moveDown
 
 	const dragControls = useDragControls();
-	const dragStartHandler = useCallback((event: React.PointerEvent) => dragControls.start(event), [dragControls]);
+	const dragStartHandler = useCallback((event: PointerEvent) => dragControls.start(event), [dragControls]);
 
 	return <Reorder.Item className="plaudit-sortable-items-row" data-index={index} dragListener={false} dragControls={dragControls} layout="position" value={datum}>
 		<div className="plaudit-sortable-items-ordering-controls">
@@ -66,8 +66,8 @@ function SortableItemsListNode<D>({datum, index, listLength, makeChild, makeInde
 				<Icon icon={dragHandle} onPointerDown={dragStartHandler} />
 			</div>
 			<div className="plaudit-sortable-items-ordering-control">
-				<Button icon="arrow-up" aria-label="Move Up" disabled={index < 1} onClick={moveUp} />
-				<Button icon="arrow-down" aria-label="Move Down" disabled={index >= listLength - 1} onClick={moveDown} />
+				<Button icon="arrow-up" aria-label="Move Up" disabled={index < 1} onClick={moveUp} __next40pxDefaultSize accessibleWhenDisabled />
+				<Button icon="arrow-down" aria-label="Move Down" disabled={index >= listLength - 1} onClick={moveDown} __next40pxDefaultSize accessibleWhenDisabled />
 			</div>
 		</div>
 		<div className="plaudit-sortable-items-inputs plaudit-sortable-items-padded">
@@ -76,7 +76,7 @@ function SortableItemsListNode<D>({datum, index, listLength, makeChild, makeInde
 		<div className="plaudit-sortable-items-presence-controls plaudit-sortable-items-padded">
 			{/*addEmptyHandlers && index === 0 &&
 				<Button icon="insert" className="insert-before" disabled={addDisabled} onClick={addEmptyHandlers[0]} aria-label="Insert Before"/>*/}
-			<Button icon="remove" disabled={removeDisabled} onClick={remove} aria-label="Remove"/>
+			<Button icon="remove" disabled={removeDisabled} onClick={remove} aria-label="Remove" __next40pxDefaultSize accessibleWhenDisabled />
 			{/*addEmptyHandlers && <Button icon="insert" className="insert-after" disabled={addDisabled} onClick={addEmptyHandlers[1]}
 			                             aria-label={index < listLength - 1 ? "Insert Between" : "Insert After"}/>*/}
 		</div>

package/src/controls/ExtendedFormTokenField.tsx

@@ -97,6 +97,8 @@ export function ExtendedFormTokenField(props: ExtendedFormTokenFieldProps) {
 			__experimentalShowHowTo={props.multiple !== false}
 			onInputChange={setDebouncedInput}
 			onFocus={useCallback(() => setImmediateInput(input), [input])}
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 		/>
 		{help && <div><span className="components-form-token-field__help">{help}</span></div>}
 		{hasLoadingError && <div><Spinner /><span className="components-form-token-field__help">{__("An Error Occurred While Loading Suggestions")}</span></div>}

package/src/controls/ExtendedRadioControl.tsx

@@ -71,7 +71,7 @@ export function ExtendedRadioControl(props: ExtendedRadioControlProps) {
 							value={option.value}
 							onChange={onChangeValue}
 							checked={option.value === selected}
-							aria-describedby={!!help ? `${id}__help` : undefined}
+							aria-describedby={help ? `${id}__help` : undefined}
 							{...additionalProps}
 						/>
 						<label
@@ -94,7 +94,7 @@ export function ExtendedRadioControl(props: ExtendedRadioControlProps) {
                         value={customValue ?? ''}
                         onChange={onChangeValue}
                         checked={valueIsCustom}
-                        aria-describedby={!!help ? `${id}__help` : undefined}
+                        aria-describedby={help ? `${id}__help` : undefined}
 						{...additionalProps}
                     />
 					<label id={`${id}-custom-label`} className="components-radio-control__label" htmlFor={`${id}-${options.length}`}>Custom:</label>

package/src/controls/ExtendedTextareaControl.tsx

@@ -58,7 +58,7 @@ export const ExtendedTextareaControl = (() => {
 		}, [rich, debouncedUpdate, textareaRef.current]);
 
 		return <>
-			<TextareaControl ref={textareaRef} {...forwardedProps} value={v} onChange={safeOnChange} />
+			<TextareaControl {...forwardedProps} ref={textareaRef} value={v} onChange={safeOnChange} __nextHasNoMarginBottom />
 			{Messages && <Messages/>}
 		</>;
 	})

package/src/controls/FileControl.tsx

@@ -24,7 +24,7 @@ export function FileControl(props: FileControlProps) {
 
 	const attachment = useSuspenseSelect(select => value !== undefined ? select(coreStore).getMedia(value) : undefined, [value]);
 	const {baseControlProps, controlProps} = useBaseControlProps({label, help});
-	return <BaseControl {...baseControlProps}>
+	return <BaseControl {...baseControlProps} __nextHasNoMarginBottom>
 		<MediaUploadCheck>
 			<MediaUpload
 				onSelect={onSelect}
@@ -32,13 +32,13 @@ export function FileControl(props: FileControlProps) {
 				allowedTypes={allowedTypes}
 				render={useCallback(({open}) => {
 					if (!attachment?.id) {
-						return <div {...controlProps}><Button onClick={open} children={__('Select a File', 'plaudit')}/></div>
+						return <div {...controlProps}><Button onClick={open} children={__('Select a File', 'plaudit')} __next40pxDefaultSize /></div>
 					}
 					return <div {...controlProps}>
 						<p>{__('Selected File', 'plaudit')}: <a href={attachment.source_url} target="_blank" rel="noopener noreferrer">{attachment.title.rendered}</a></p>
 						<div className="selected-file-control-buttons">
-							<Button onClick={open} variant="secondary" children="Replace File" />
-							<Button onClick={() => onChange(undefined)} isDestructive children={__('Remove File', 'plaudit')} />
+							<Button onClick={open} variant="secondary" children="Replace File" __next40pxDefaultSize />
+							<Button onClick={() => onChange(undefined)} isDestructive children={__('Remove File', 'plaudit')} __next40pxDefaultSize />
 						</div>
 					</div>;
 				}, [attachment, onChange, controlProps])}