@plaudit/gutenberg-api-extensions 2.90.1 → 2.91.0

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/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 {