@plaudit/gutenberg-api-extensions 2.90.0 → 2.91.0

package/src/blocks/data-controller-manager.ts

@@ -2,7 +2,7 @@ import type {DataController} from "./simple-native-property-api";
 
 export type DataControllerManager = {
 	addDataController(blockClientId: string, dataController: DataController): void,
-	getDataController(blockClientId: string): DataController,
+	getDataController(blockClientId: string): DataController|undefined,
 	removeDataController(blockClientId: string): void,
 	notifyOfValidationErrorStatusChange(blockClientId: string, hasValidationError: boolean): void
 }
@@ -46,5 +46,5 @@ export function createDataControllerManager(): DataControllerManager {
 				return styleSheet.replace(`.block-editor-list-view-tree tbody tr:is(${blockMarkers}) {background: var(--plaudit-gae-validation-error-bg) !important;}`);
 			});
 		}
-	} as DataControllerManagerInternals;
+	} satisfies DataControllerManagerInternals as DataControllerManagerInternals;
 }

package/src/blocks/data-controller.ts

@@ -1,9 +1,8 @@
 import {useMemo} from "@wordpress/element";
 
-import {configureStore, Middleware, Tuple} from "@reduxjs/toolkit";
+import {configureStore, type Middleware, Tuple} from "@reduxjs/toolkit";
 
 import type {Dispatch} from "redux";
-import type {ThunkDispatch} from "redux-thunk";
 
 import {type Condition, resolveValueForCondition} from "./conditions";
 import {PathError, PathErrorType} from "./PathError";
@@ -11,7 +10,7 @@ import type {DataController, DataStore, HydratedSimpleNativeProperty, NodePath}
 
 import {actions, type DataControllerActions} from "./data-controller/actions";
 import {buildReducer} from "./data-controller/reducer";
-import {getDataStore, getOptionalValue, UUID, walkToNode} from "./data-controller/utils";
+import {getDataStore, getOptionalValue, type UUID, walkToNode} from "./data-controller/utils";
 
 type DescendantsWrapper = {[key: string]: DCNode}|DCNode[];
 export type DCNode = {
@@ -30,7 +29,6 @@ export type DCStoreState = {
 	rerenderTrigger: number,
 	batchAddedPropertiesThatNeedWriteThrough: HydratedSimpleNativeProperty<{uuid: UUID}>[]
 };
-type DCThunkDispatch = ThunkDispatch<DCStoreState, unknown, DataControllerActions>;
 
 export function useDataController(blockClientId: string): DataController {
 	return useMemo(() => {

package/src/blocks/hooks/useSuspendableOptions.ts

@@ -24,7 +24,7 @@ export function useSuspendableOptions<T extends CSNPConfig&{options: PromisableP
 			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.
+		// At a minimum, it causes at least 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<MapSelect>) => [Record<string, any>|null, string|null];
 		if (usesBlockAttributes) {
 			mapSelect = wrappedSelect => {

package/src/blocks/simple-native-property-api.ts

@@ -22,7 +22,7 @@ export interface DataStore {
 
 	handlesProperty(name: string): boolean;
 
-	addProperty(property: HydratedSimpleNativeProperty, writeThroughOnUndefined?: boolean): void;
+	addProperty(property: HydratedSimpleNativeProperty): void;
 }
 export type RawPath = (string|number)[];
 export type NodePath = [string, ...(string|number)[]];

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

@@ -276,7 +276,6 @@ function SNPPropsWrapper({blockSimpleNativePanelsAndTabs, blockEditProps, dataCo
 		}
 		dataController.checkConditions();
 		dataController.validateNodes();
-		dataController.commitBatchAddedProperties();
 	}, [blockSimpleNativePanelsAndTabs, dataController]); // We don't depend on blockEditProps here - that is handled by the following useEffect
 
 	// We have to reattach dataStores in the useMemo segment in order for Panel- and Tab-level conditions to work

package/src/blocks/snp-data-store.ts

@@ -1,7 +1,9 @@
 import {store as blockEditorStore} from "@wordpress/block-editor";
 import {dispatch, select} from "@wordpress/data";
 
-import {buildDefaultValueFromDefinition, UUID} from "./data-controller/utils";
+import {fastDeepEquals} from "../lib/modified-fast-deep-equals";
+
+import type {UUID} from "./data-controller/utils";
 import type {ActualBlockEditProps, BlockName} from "../lib/useful-types";
 import type {DataStore, HydratedSimpleNativeProperty} from "./simple-native-property-api";
 
@@ -30,8 +32,14 @@ export abstract class SNPDataStore implements DataStore {
 		return this.attributeCache[attr] = existingValue;
 	}
 	setValue(attr: string, value: any) {
-		this.attributeCache[attr] = value;
-		return this.setAttribute(attr, value);
+		const existingValue = this.getValue(attr);
+		if (!fastDeepEquals(existingValue, value)) {
+			this.attributeCache[attr] = value;
+			// WordPress doesn't handle saving and loading of empty objects consistently. As a result, we cannot safely write empty objects if the existing value is undefined
+			if (existingValue !== undefined || typeof value !== 'object' || !value || Object.entries(value).some(([, v]) => v !== undefined)) {
+				this.setAttribute(attr, value);
+			}
+		}
 	}
 	handlesProperty(name: string): boolean {
 		return name in this.managedPropertyNames;
@@ -58,18 +66,7 @@ export abstract class SNPDataStore implements DataStore {
 		return attr in this.attributeCache;
 	}
 
-	addProperty(property: HydratedSimpleNativeProperty<{uuid: UUID}>, writeThroughOnUndefined = true) {
-		if (this.managedPropertyNames[property.name]) {
-			return;
-		}
-		if (this.getAttribute(property.name) === undefined) {
-			if (writeThroughOnUndefined) {
-				this.setValue(property.name, buildDefaultValueFromDefinition(property));
-			} else {
-				this.attributeCache[property.name] = buildDefaultValueFromDefinition(property);
-			}
-		}
-
+	addProperty(property: HydratedSimpleNativeProperty<{uuid: UUID}>) {
 		this.managedPropertyNames[property.name] = true;
 	}
 }

package/src/controls/PickOne.tsx

@@ -35,6 +35,7 @@ export function PickOneFromToggleGroup<T extends string>(props: PickOneFromToggl
 				? <ToggleGroupControlOption key={value} value={value} label={label} />
 				: <ToggleGroupControlOptionIcon key={value} value={value} label={label.text} icon={label.icon} />)
 		}
+		__nextHasNoMarginBottom
 	/>;
 }
 

package/src/index.ts

@@ -1,16 +1,19 @@
 import {installSimpleNativePropertiesSupport} from "./blocks/simple-native-property-impl";
-import {installSimpleGutenbergApisSupport, type store as endpointStore} from "./editor/simple-gutenberg-endpoints-impl";
-import {registerStore, type store as apiStore} from "./lib/gutenberg-api-extensions-state";
+import {installSimpleGutenbergApisSupport, store as endpointStore} from "./editor/simple-gutenberg-endpoints-impl";
+import {registerStore, store as apiStore} from "./lib/gutenberg-api-extensions-state";
 
 export * from "./blocks";
 export * from "./controls";
 export * from "./editor/simple-gutenberg-endpoints-api";
 export {TemporalLRUCache, useAdoptedStyleSheet} from "./lib/helpers";
+export * from "./lib/modified-fast-deep-equals";
 export * from "./lib/plaudit-icons";
 export * as SectionedCacheStore from "./lib/sectioned-cache-store";
 export * from "./lib/suspense";
 export type * from "./lib/useful-types";
 
+export {apiStore, endpointStore};
+
 export function installGutenbergExtensions() {
 	if (!installGutenbergExtensions.called) {
 		installGutenbergExtensions.called = true;

package/src/lib/modified-fast-deep-equals.ts

@@ -0,0 +1,91 @@
+/**
+ * This is a modified copy of https://github.com/epoberezkin/fast-deep-equal that treats "not present" and "present but undefined" as equivalent
+ */
+export function fastDeepEquals(a: unknown, b: unknown) {
+	if (a === b) return true;
+
+	if (a && b && typeof a === 'object' && typeof b === 'object') {
+		if (a.constructor !== b.constructor) return false;
+
+		if (Array.isArray(a)) {
+			if (!Array.isArray(b)) {
+				return false;
+			}
+
+			const length = a.length;
+			if (length !== b.length) return false;
+			for (let i = length - 1; i >= 0; i--) {
+				if (!fastDeepEquals(a[i], b[i])) return false;
+			}
+			return true;
+		}
+
+
+		if (a instanceof Map) {
+			if (!(b instanceof Map)) {
+				return false;
+			}
+
+			for (const [key, value] of b.entries()) {
+				if (value !== undefined && !a.has(key)) {
+					return false;
+				}
+			}
+			for (const [key, value] of a.entries()) {
+				if (value !== undefined && !b.has(key)) {
+					return false;
+				}
+				if (!fastDeepEquals(value, b.get(key))) {
+					return false;
+				}
+			}
+			return true;
+		}
+
+		if (a instanceof Set) {
+			if (!(b instanceof Set)) {
+				return false;
+			}
+			if (a.size !== b.size) {
+				return false;
+			}
+			for (const key of a.keys()) {
+				if (!b.has(key)) return false;
+			}
+			return true;
+		}
+
+		if (a instanceof RegExp) {
+			return b instanceof RegExp && a.source === b.source && a.flags === b.flags;
+		}
+
+		if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+		if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+
+		for (const [key, value] of Object.entries(b)) {
+			if (value !== undefined && !(key in a)) {
+				return false;
+			}
+		}
+		for (const [key, value] of Object.entries(a)) {
+			if (key === '_owner' && "$$typeof" in a) {
+				// React-specific: avoid traversing React elements' _owner.
+				//  _owner contains circular references
+				// and is not needed when comparing the actual elements (and not their owners)
+				continue;
+			}
+			if (value !== undefined) {
+				if (!fastDeepEquals(value, b[key as keyof typeof b])) {
+					return false;
+				}
+			} else if (key in b && b[key as keyof typeof b] !== undefined) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	// true if both NaN, false otherwise
+	return a!==a && b!==b;
+}

package/styles/sortable-items-control.pcss

@@ -1,71 +1,77 @@
-.plaudit-sortable-items-container .drop-zone {
-	background-color: #ccc;
-	transition-property: height, padding;
-	transition-duration: 250ms;
-	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
-	overflow: hidden;
-	height: 20px;
-}
+.plaudit-sortable-items-container {
+	.drop-zone {
+		background-color: #ccc;
+		transition-property: height, padding;
+		transition-duration: 250ms;
+		transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+		overflow: hidden;
+		height: 20px;
 
-.plaudit-sortable-items-container .drop-zone.plaudit-sortable-items-hidden {
-	height: 0;
-	padding: 0;
-}
+		&.plaudit-sortable-items-hidden {
+			height: 0;
+			padding: 0;
+		}
+	}
 
-.plaudit-sortable-items-container .dragging {
-	display: none !important;
-}
-.plaudit-sortable-items-container .floating {
-	position: fixed;
-	box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
-}
+	.dragging {
+		display: none !important;
+	}
 
-.plaudit-sortable-items-container .plaudit-sortable-items-row {
-	display: grid;
-	grid-template-areas: "HANDLE FIELD CONTROL";
-	grid-template-columns: auto 1fr auto;
-	border: 1px solid #ccc;
-	background: #fff;
-}
-.plaudit-sortable-items-container .plaudit-sortable-items-ordering-controls {
-	display: flex;
-	flex-direction: row;
-	gap: 0;
-	padding-right: 6px;
+	.floating {
+		position: fixed;
+		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+	}
 
-	.plaudit-sortable-items-ordering-control {
+	.plaudit-sortable-items-row {
 		display: grid;
-		place-content: center;
-		line-height: 1;
+		grid-template-areas: "HANDLE FIELD CONTROL";
+		grid-template-columns: auto 1fr auto;
+		border: 1px solid #ccc;
+		background: #fff;
+	}
 
-		.components-button {
-			height: 16px;
-			min-width: 16px;
-			padding: 0;
+	.plaudit-sortable-items-ordering-controls {
+		display: flex;
+		flex-direction: row;
+		gap: 0;
+		padding-right: 6px;
+
+		.plaudit-sortable-items-ordering-control {
+			display: grid;
+			place-content: center;
+			line-height: 1;
 
-			span.dashIcon {
+			.components-button {
+				height: 16px;
+				min-width: 16px;
 				padding: 0;
-				width: 16px;
+
+				span.dashIcon {
+					padding: 0;
+					width: 16px;
+				}
 			}
 		}
 	}
-}
-.plaudit-sortable-items-container .plaudit-sortable-items-presence-controls {
-	display: flex;
-	flex-direction: column;
-	margin-top: -4px;
 
-	button[aria-label="Insert After"] {
-		position: absolute;
-		top: 100%;
-		left: 50%;
-		width: 30px;
-		height: 30px;
-		transform: translate(-50%, -50%);
+	.plaudit-sortable-items-presence-controls {
+		display: flex;
+		flex-direction: column;
+		margin-top: -4px;
+
+		button[aria-label="Insert After"] {
+			position: absolute;
+			top: 100%;
+			left: 50%;
+			width: 30px;
+			height: 30px;
+			transform: translate(-50%, -50%);
+		}
+	}
+
+	.plaudit-sortable-items-padded {
+		padding-block: 8px;
 	}
-}
-.plaudit-sortable-items-container .plaudit-sortable-items-padded {
-	padding-block-start: 8px;
 }
 
 .plaudit-sortable-items-buttons.flexible-items {