@plaudit/gutenberg-api-extensions 2.85.0 → 2.86.0

package/simple-native-properties.md

@@ -1,49 +1,63 @@
-# Simple Native Properties (SNP)
+<!-- TOC -->
+* [What are Simple Native Properties (SNPs)?](#what-are-simple-native-properties-snps)
+* [⚡ Quick Start Example](#-quick-start-example)
+* [📋 Control Reference](#-control-reference)
+  * [Common Properties (Available on All Controls)](#common-properties-available-on-all-controls)
+* [🎛️ Control Types](#-control-types)
+  * [Basic Input Controls](#basic-input-controls)
+    * [`text`](#text)
+      * [Additional Properties](#additional-properties)
+    * [`textarea`](#textarea)
+      * [Additional Properties](#additional-properties-1)
+    * [`number`](#number)
+      * [Additional Properties](#additional-properties-2)
+    * [`range`](#range)
+      * [Additional Properties](#additional-properties-3)
+  * [Toggle & Choice Controls](#toggle--choice-controls)
+    * [`toggle`](#toggle)
+      * [Additional Properties](#additional-properties-4)
+    * [`toggleGroup`](#togglegroup)
+      * [Additional Properties](#additional-properties-5)
+    * [`select`](#select)
+      * [Additional Properties](#additional-properties-6)
+    * [`radio`](#radio)
+      * [Additional Properties](#additional-properties-7)
+    * [`colorPalette`](#colorpalette)
+      * [Additional Properties](#additional-properties-8)
+  * [Media & Relational Controls](#media--relational-controls)
+    * [`file`](#file)
+    * [`image`](#image)
+    * [`link`](#link)
+    * [`post`](#post)
+    * [`taxonomy`](#taxonomy)
+    * [`term`](#term)
+    * [`user`](#user)
+  * [Structure & Collection Controls](#structure--collection-controls)
+    * [`group`](#group)
+    * [`list`](#list)
+    * [`date`](#date)
+    * [`constant`](#constant)
+* [🏗️ Organization & Logic](#-organization--logic)
+  * [1. Structure (Panels & Tabs)](#1-structure-panels--tabs)
+  * [2. Layout (Rows)](#2-layout-rows)
+  * [3. Conditions (Show/Hide Logic)](#3-conditions-showhide-logic)
+  * [4. Option Sources (Dynamic Options)](#4-option-sources-dynamic-options)
+    * [Source Syntax](#source-syntax)
+      * [The `select` Protocol](#the-select-protocol)
+      * [The `settings` Protocol](#the-settings-protocol)
+* [🔧 Advanced Features](#-advanced-features)
+  * [Style Properties](#style-properties)
+  * [Validators & Transformers](#validators--transformers)
+* [Tips & Best Practices](#tips--best-practices)
+<!-- TOC -->
 
-SNP allows you to define Inspector (sidebar) controls in `block.json` purely with data, avoiding custom React code for standard use cases.
+---
 
-## 📑 Table of Contents
-
-- [Quick Start Example](#-quick-start-example)
-- [Control Reference](#-control-reference)
-  - [Common Properties](#common-properties-available-on-all-controls)
-- [Control Types](#️-control-types)
-  - [Basic Input Controls](#basic-input-controls)
-    - [`text`](#text)
-    - [`textarea`](#textarea)
-    - [`number`](#number)
-    - [`range`](#range)
-  - [Toggle & Choice Controls](#toggle--choice-controls)
-    - [`toggle`](#toggle)
-    - [`toggleGroup`](#togglegroup)
-    - [`select`](#select)
-    - [`radio`](#radio)
-    - [`colorPalette`](#colorpalette)
-  - [Media & Relational Controls](#media--relational-controls)
-    - [`image`](#image)
-    - [`link`](#link)
-    - [`post`](#post)
-    - [`taxonomy`](#taxonomy)
-    - [`term`](#term)
-    - [`user`](#user)
-  - [Structure & Collection Controls](#structure--collection-controls)
-    - [`group`](#group)
-    - [`list`](#list)
-    - [`date`](#date)
-    - [`constant`](#constant)
-- [Organization & Logic](#️-organization--logic)
-  - [1. Structure (Panels & Tabs)](#1-structure-panels--tabs)
-  - [2. Layout (Rows)](#2-layout-rows)
-  - [3. Conditions (Show/Hide Logic)](#3-conditions-showhide-logic)
-  - [4. Option Sources (Dynamic Options)](#4-option-sources-dynamic-options)
-- [Advanced Features](#-advanced-features)
-  - [Style Properties](#style-properties)
-  - [Validators & Transformers](#validators--transformers)
-- [Tips & Best Practices](#tips--best-practices)
+# What are Simple Native Properties (SNPs)?
 
----
+SNP allows you to define Inspector (sidebar) controls in `block.json` purely with data, avoiding custom React code for standard use cases.
 
-## ⚡ Quick Start Example
+# ⚡ Quick Start Example
 
 Copy and adapt this block to cover 90% of your use cases. It demonstrates **Panels**, **Layouts**, **Conditions**, and **Common Controls**.
 
@@ -81,7 +95,7 @@ Copy and adapt this block to cover 90% of your use cases. It demonstrates **Pane
       "title": "Design Settings",
       "group": "styles", 
       "properties": [
-        { "name": "bgColor", "label": "Background", "control": "colorPalette", "options": "select:theme:colors" },
+        { "name": "bgColor", "label": "Background", "control": "colorPalette", "options": "settings://color.palette" },
         { "name": "opacity", "label": "Opacity", "control": "range", "min": 0, "max": 100, "step": 10 },
         { 
           "name": "align", "label": "Alignment", "control": "select",
@@ -99,11 +113,11 @@ Copy and adapt this block to cover 90% of your use cases. It demonstrates **Pane
 
 ---
 
-## 📋 Control Reference
+# 📋 Control Reference
 
 All controls require three properties: `"control"`, `"name"`, and `"label"`.
 
-### Common Properties (Available on All Controls)
+## Common Properties (Available on All Controls)
 
 | Property        | Type     | Description                                                                                    |
 |:----------------|:---------|:-----------------------------------------------------------------------------------------------|
@@ -122,16 +136,16 @@ All controls require three properties: `"control"`, `"name"`, and `"label"`.
 
 ---
 
-## 🎛️ Control Types
+# 🎛️ Control Types
 
-### Basic Input Controls
+## Basic Input Controls
 
-#### `text`
+### `text`
 Single-line text input.
 
 **Value Type:** `string`
 
-##### Additional Properties
+#### Additional Properties
 | Property      | Type     | Description                        | Default |
 |:--------------|:---------|:-----------------------------------|:--------|
 | `placeholder` | `string` | Placeholder text shown when empty. | `''`    |
@@ -150,12 +164,12 @@ Single-line text input.
 
 ---
 
-#### `textarea`
+### `textarea`
 Multi-line text input.
 
 **Value Type:** `string`
 
-##### Additional Properties
+#### Additional Properties
 | Property         | Type     | Description                 | Default |
 |:-----------------|:---------|:----------------------------|:--------|
 | `component.rows` | `number` | Number of visible text rows | `4`     |
@@ -174,12 +188,12 @@ Multi-line text input.
 
 ---
 
-#### `number`
+### `number`
 Numeric input with optional constraints.
 
 **Value Type:** `number`
 
-##### Additional Properties
+#### Additional Properties
 | Property      | Type              | Description                                           | Default |
 |:--------------|:------------------|:------------------------------------------------------|:--------|
 | `min`         | `number`          | Minimum allowed value                                 | `unset` |
@@ -204,12 +218,12 @@ Numeric input with optional constraints.
 
 ---
 
-#### `range`
+### `range`
 Slider control for selecting numeric values.
 
 **Value Type:** `number`
 
-##### Additional Properties
+#### Additional Properties
 | Property | Type     | Description                         | Default |
 |:---------|:---------|:------------------------------------|:--------|
 | `min`    | `number` | **Required.** Minimum allowed value | `unset` |
@@ -232,14 +246,14 @@ Slider control for selecting numeric values.
 
 ---
 
-### Toggle & Choice Controls
+## Toggle & Choice Controls
 
-#### `toggle`
+### `toggle`
 Boolean on/off switch.
 
 **Value Type:** `boolean`
 
-##### Additional Properties
+#### Additional Properties
 - `switch` (`string | object`): Switch style configuration.
   - String values: `"yesNo"`, `"showHide"`
   - Object with properties:
@@ -291,12 +305,12 @@ Boolean on/off switch.
 
 ---
 
-#### `toggleGroup`
+### `toggleGroup`
 Button group for selecting one value from multiple options.
 
 **Value Type:** `string` or `number`
 
-##### Additional Properties
+#### Additional Properties
 | Property    | Type                   | Description                                                                                                                      | Default    |
 |:------------|:-----------------------|:---------------------------------------------------------------------------------------------------------------------------------|:-----------|
 | `options`   | `array \| string`      | **Required.** Array of `[value, label]` tuples or option objects or a [dynamic source string](#4-option-sources-dynamic-options) | `unset`    |
@@ -335,12 +349,12 @@ Button group for selecting one value from multiple options.
 
 ---
 
-#### `select`
+### `select`
 Dropdown selection control.
 
 **Value Type:** `string` (single) or `string[]` (multiple)
 
-##### Additional Properties
+#### Additional Properties
 | Property        | Type              | Description                                                                                                                      | Default |
 |:----------------|:------------------|:---------------------------------------------------------------------------------------------------------------------------------|:--------|
 | `options`       | `array \| string` | **Required.** Array of `[value, label]` tuples or option objects or a [dynamic source string](#4-option-sources-dynamic-options) | `unset` |
@@ -384,12 +398,12 @@ Dropdown selection control.
 
 ---
 
-#### `radio`
+### `radio`
 Radio button group for selecting one option.
 
 **Value Type:** `string`
 
-##### Additional Properties
+#### Additional Properties
 | Property      | Type              | Description                                                                                                                      | Default |
 |:--------------|:------------------|:---------------------------------------------------------------------------------------------------------------------------------|:--------|
 | `options`     | `array \| string` | **Required.** Array of `[value, label]` tuples or option objects or a [dynamic source string](#4-option-sources-dynamic-options) | `unset` |
@@ -414,12 +428,12 @@ Radio button group for selecting one option.
 
 ---
 
-#### `colorPalette`
+### `colorPalette`
 Color picker with theme palette integration.
 
 **Value Type:** `string`
 
-##### Additional Properties
+#### Additional Properties
 | Property      | Type              | Description                                                                                                                             | Default |
 |:--------------|:------------------|:----------------------------------------------------------------------------------------------------------------------------------------|:--------|
 | `options`     | `array \| string` | **Required.** Array of `[color string, label]` tuples or option objects or a [dynamic source string](#4-option-sources-dynamic-options) | `unset` |
@@ -433,16 +447,16 @@ Color picker with theme palette integration.
   "name": "backgroundColor", 
   "label": "Background Color", 
   "control": "colorPalette",
-  "options": "select:theme:colors",
+  "options": "settings://color.palette",
   "clearable": true
 }
 ```
 
 ---
 
-### Media & Relational Controls
+## Media & Relational Controls
 
-#### `file`
+### `file`
 File selector with media library integration.
 
 **Value Type:** `number` (attachment id)
@@ -461,7 +475,7 @@ File selector with media library integration.
 }
 ```
 
-#### `image`
+### `image`
 Image selector with media library integration.
 
 **Value Type:** `object` (ImageData)
@@ -483,7 +497,7 @@ Image selector with media library integration.
 
 ---
 
-#### `link`
+### `link`
 Link picker for URLs, pages, posts, etc.
 
 **Value Type:** `object`
@@ -504,7 +518,7 @@ Link picker for URLs, pages, posts, etc.
 
 ---
 
-#### `post`
+### `post`
 Post/page selector with search functionality.
 
 **Value Type:** `number` (single) or `number[]` (multiple)
@@ -542,7 +556,7 @@ Post/page selector with search functionality.
 
 ---
 
-#### `taxonomy`
+### `taxonomy`
 Taxonomy selector (categories, tags, custom taxonomies).
 
 **Value Type:** `string` (single) or `string[]` (multiple)
@@ -569,7 +583,7 @@ Taxonomy selector (categories, tags, custom taxonomies).
 
 ---
 
-#### `term`
+### `term`
 Taxonomy term selector (specific category/tag picker).
 
 **Value Type:** `string` (single) or `string[]` (multiple)
@@ -593,7 +607,7 @@ Taxonomy term selector (specific category/tag picker).
 
 ---
 
-#### `user`
+### `user`
 User selector with role filtering.
 
 **Value Type:** `number` (single) or `number[]` (multiple)
@@ -629,9 +643,9 @@ User selector with role filtering.
 
 ---
 
-### Structure & Collection Controls
+## Structure & Collection Controls
 
-#### `group`
+### `group`
 Groups related controls together visually.
 
 **Value Type:** `object`
@@ -671,7 +685,7 @@ Groups related controls together visually.
 
 ---
 
-#### `list`
+### `list`
 Repeatable list of items (simple strings/numbers or complex objects).
 
 **Value Type:** `array`
@@ -760,7 +774,7 @@ Repeatable list of items (simple strings/numbers or complex objects).
 
 ---
 
-#### `date`
+### `date`
 Date and optional time picker.
 
 **Value Type:** `number` (Unix timestamp in milliseconds)
@@ -781,7 +795,7 @@ Date and optional time picker.
 
 ---
 
-#### `constant`
+### `constant`
 Hidden field with a constant value (not editable by users).
 
 **Value Type:** Depends on `type` property
@@ -804,9 +818,9 @@ Hidden field with a constant value (not editable by users).
 
 ---
 
-## 🏗️ Organization & Logic
+# 🏗️ Organization & Logic
 
-### 1. Structure (Panels & Tabs)
+## 1. Structure (Panels & Tabs)
 
 Wrap your controls in **Panels** to create collapsible sections in the sidebar.
 
@@ -868,7 +882,7 @@ You can also organize panels into tabs:
 
 ---
 
-### 2. Layout (Rows)
+## 2. Layout (Rows)
 
 - **Single Control:** One control object per row.
 - **Multiple Controls:** Wrap controls in an array to display them side-by-side.
@@ -884,7 +898,7 @@ You can also organize panels into tabs:
 
 ---
 
-### 3. Conditions (Show/Hide Logic)
+## 3. Conditions (Show/Hide Logic)
 
 Add a `condition` array to any control or panel to show/hide it based on other property values.
 
@@ -965,14 +979,14 @@ Add a `condition` array to any control or panel to show/hide it based on other p
 
 ---
 
-### 4. Option Sources (Dynamic Options)
+## 4. Option Sources (Dynamic Options)
 
 For `select`, `radio`, `colorPalette`, and `toggleGroup` controls, you can use shorthand strings to load dynamic options:
 
-#### Source Syntax
+### Source Syntax
 - The source syntax is based off of the URI syntax and uses custom protocols. The two built-in protocols are `select` and `settings`; however, new ones can be registered via filters.
 
-##### The `select` Protocol
+#### The `select` Protocol
 **Notes:**
 - This protocol is used to extract values from a Redux data store that has a `get` or `resolve` function that takes a `string` and `Record<string, any>` as its parameters.
 - At present, that means using the `plaudit/simple-gutenberg-apis` store.
@@ -983,7 +997,7 @@ For `select`, `radio`, `colorPalette`, and `toggleGroup` controls, you can use s
   - To test one of the registered endpoints, run `(await wp.data.select('plaudit/simple-gutenberg-apis').resolve('endpoint.name.here'))` in the same context
 
 
-##### The `settings` Protocol
+#### The `settings` Protocol
 **Notes:**
 - This protocol is used to get values from the theme.json file
 - The returned values are effected by the current block (this is to allow for block-specific values, most-commonly font sizes and colors)
@@ -1016,9 +1030,9 @@ For `select`, `radio`, `colorPalette`, and `toggleGroup` controls, you can use s
 
 ---
 
-## 🔧 Advanced Features
+# 🔧 Advanced Features
 
-### Style Properties
+## Style Properties
 
 This feature is intended for setting CSS custom variables based on a block's properties.
 
@@ -1047,7 +1061,7 @@ When the user enters `"20px 40px"`, the block wrapper will receive:
 
 ---
 
-### Validators & Transformers
+## Validators & Transformers
 
 **Note:** These features are only available when using TypeScript/React to define properties programmatically.
 
@@ -1089,7 +1103,7 @@ When the user enters `"20px 40px"`, the block wrapper will receive:
 
 ---
 
-## Tips & Best Practices
+# Tips & Best Practices
 
 1. **Add Help Text:** Use the `help` property to guide users, especially for complex controls.
 

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

@@ -7,7 +7,7 @@ import {
 	SelectControl, Spinner, TextControl, Tooltip
 } from '@wordpress/components';
 import {createHigherOrderComponent} from "@wordpress/compose";
-import {dispatch, select} from "@wordpress/data";
+import {dispatch, select, useSuspenseSelect} from "@wordpress/data";
 import {store as editorStore} from "@wordpress/editor";
 import {memo, useMemo} from "@wordpress/element";
 import {addFilter} from "@wordpress/hooks";
@@ -16,7 +16,6 @@ import {registerSimpleGutenbergApiEndpoint} from "../editor/simple-gutenberg-end
 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 {useSuspenseSelectTyped} from "../lib/use-select-typed";
 
 import {type ReactElement, Suspense} from "react";
 import {ErrorBoundary, FallbackProps} from "react-error-boundary";
@@ -140,7 +139,7 @@ export function installCustomBlockBindingsSupport() {
 	});
 	const SourceSubconfig = memo(({currentPost, value, binding}: Omit<BlockBindingToolProps, 'label'>) => {
 		type SuspenseResult = {selectableOptions: NonNullable<Parameters<typeof SelectControl>[0]['options']>, params: CBBParams};
-		const {selectableOptions, params: {dbSources/*, supportsContext*/}} = useSuspenseSelectTyped((select): SuspenseResult => {
+		const {selectableOptions, params: {dbSources/*, supportsContext*/}} = useSuspenseSelect((select): SuspenseResult => {
 			if (value?.source) {
 				const sourceQueryArgs = {current_post: currentPost, source: value.source};
 				const sourceOptions = select(endpointsStore).get("plaudit-base.custom-bindings.source.options", sourceQueryArgs) as GetSelectableOptionsResponse;

package/src/blocks/conditions.ts

@@ -1,4 +1,5 @@
-import type {BlockInstance} from "@wordpress/blocks";
+import {store as blocksStore, type BlockInstance} from "@wordpress/blocks";
+import {store as blockEditorStore} from "@wordpress/block-editor";
 import {select} from "@wordpress/data";
 
 import type {DataStore, NodePath, RawPath} from "./simple-native-property-api";
@@ -116,7 +117,7 @@ function testConditionStruct(conditions: ConditionStruct, propertyValueResolver:
 export function resolveValueForCondition(propertyPath: RawPath, contextPath: RawPath, blockClientId: string, getDataStore: (property: string) => DataStore|undefined) {
 	if (propertyPath[0] === "@block") {
 		if (propertyPath.length >= 2) {
-			const blockEditorSelect = select("core/block-editor");
+			const blockEditorSelect = select(blockEditorStore);
 			if (typeof propertyPath[1] === 'string') {
 				if (propertyPath[1] === 'parentClientId') {
 					console.warn("Using parentClientId is deprecated. Please use clientId(1) instead.");
@@ -158,7 +159,7 @@ export function resolveValueForCondition(propertyPath: RawPath, contextPath: Raw
 						case "name":
 							return targetBlockInstance.name;
 						case "variation":
-							return (select("core/blocks") as any).getActiveBlockVariation(targetBlockInstance.name, targetBlockInstance.attributes)?.name;
+							return (select(blocksStore) as any).getActiveBlockVariation(targetBlockInstance.name, targetBlockInstance.attributes)?.name;
 					}
 				}
 			}

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

@@ -10,7 +10,7 @@ import {
 	applyToTree, buildDefaultValueFromDefinition,
 	buildNodeFromDataAndDefinition, getDataStore,
 	moveNodeWithinParent,
-	populateValueBasedOnDefinition, recordCloneableDefaultValueForNode,
+	populateValueBasedOnDefinition, recordCloneableDefaultValueForNode, removeBackupForNode,
 	removeFromParentNode, removeValueFromBackingDataStore,
 	resolveParentNodeDefinition, TreeMutatorResult,
 	walkToNode, writeValueToBackingDataStoreWithCorrections
@@ -123,7 +123,8 @@ export function buildReducer(blockClientId: string) {
 			.addCase(actions.node.remove, (state, {payload: {path}}) => {
 				const parentNode = walkToNode(state.treeRoot, path.slice(0, path.length - 1));
 				removeFromParentNode(parentNode.children, path);
-				removeValueFromBackingDataStore(getDataStore(path[0], state), path);
+				removeValueFromBackingDataStore(getDataStore(path[0], state, true), path);
+				removeBackupForNode(walkToNode(state.treeRoot, path));
 			})
 			.addCase(actions.node.move, (state, {payload: {path, ...action}}) => {
 				// If from and to are the same, then this is a no-op, so we can just skip it
@@ -132,7 +133,7 @@ export function buildReducer(blockClientId: string) {
 				}
 				state.changedByManagedControl = true;
 				moveNodeWithinParent(walkToNode(state.treeRoot, path).children, path, action);
-				const dataStore = getDataStore(path[0], state);
+				const dataStore = getDataStore(path[0], state, true);
 				dataStore.setValue(path[0], produce(dataStore.getValue(path[0]), (dsDraft: any) => {
 					moveNodeWithinParent(walkToNodeInValue(dsDraft, path), path, action);
 				}));

package/src/blocks/data-controller/trigger-handlers.ts

@@ -7,10 +7,11 @@ import type {DCNode, DCStoreState} from "../data-controller";
 import {resolveValueForCondition, testCondition} from "../conditions";
 import {
 	applyToTree,
-	buildDefaultValueFromDefinition,
 	getDataStore,
 	getOptionalValue,
+	recordBackupForNode,
 	removeValueFromBackingDataStore,
+	restoreValueFromPotentialBackup,
 	TreeMutatorResult,
 	walkToNode,
 	walkToNodeInValue,
@@ -111,7 +112,7 @@ function performConditionChecks(state: Draft<DCStoreState>) {
 		} else {
 			const newRendered = testCondition(condition, propertyValueResolverBuilder(path));
 			if (newRendered !== node.rendered) {
-				const dataStore = getDataStore(path[0], state);
+				const dataStore = getDataStore(path[0], state, true);
 				let currentValue: any;
 				try {
 					currentValue = walkToNodeInValue(dataStore.getValue(path[0]), path);
@@ -123,12 +124,12 @@ function performConditionChecks(state: Draft<DCStoreState>) {
 				}
 				if (!newRendered) {
 					// Create a backup if we are transitioning from rendered -> unrendered
-					node.backup = currentValue;
+					recordBackupForNode(node, currentValue);
 					removeValueFromBackingDataStore(dataStore, path);
 				} else if (currentValue === undefined) {
 					// Restore from backup if we are transitioning from unrendered -> rendered
 					const stateNode = walkToNode(state.treeRoot, path);
-					writeValueToBackingDataStore(dataStore, path, stateNode.backup ?? buildDefaultValueFromDefinition(stateNode.definition));
+					writeValueToBackingDataStore(dataStore, path, restoreValueFromPotentialBackup(stateNode));
 				}
 				node.rendered = newRendered;
 			}

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

@@ -109,8 +109,8 @@ export function descendIntoDCNodeChild(current: DCNode|undefined, path: RawPath,
 	return current;
 }
 
-export function getDataStore(property: string, state: Draft<DCStoreState>, throwOnError: false): DataStore|undefined;
-export function getDataStore(property: string, state: Draft<DCStoreState>, throwOnError?: undefined|true): DataStore;
+export function getDataStore(property: string, state: Draft<DCStoreState>, throwOnError: true): DataStore;
+export function getDataStore(property: string, state: Draft<DCStoreState>, throwOnError?: undefined|boolean|false): DataStore|undefined;
 export function getDataStore(property: string, state: Draft<DCStoreState>, throwOnError = true): DataStore|undefined {
 	let dataStore = state.dataStores.byProperty[property];
 	if (dataStore) {
@@ -127,7 +127,7 @@ export function getDataStore(property: string, state: Draft<DCStoreState>, throw
 
 export function getOptionalValue(path: NodePath, state: Draft<DCStoreState>) {
 	try {
-		return walkToNodeInValue(getDataStore(path[0], state).getValue(path[0]), path);
+		return walkToNodeInValue(getDataStore(path[0], state, true).getValue(path[0]), path);
 	} catch (e) {
 		if (e instanceof PathError) {
 			return undefined;
@@ -162,7 +162,7 @@ export function writeValueToBackingDataStoreWithCorrections(path: NodePath, stat
 	if (rootDCNode === undefined) {
 		throw new PathError("Encountered a path pointing to a non-existent root node.", path, 0);
 	}
-	const dataStore = getDataStore(path[0], state);
+	const dataStore = getDataStore(path[0], state, true);
 
 	// This path both handles scalar values and ensures that the root "value" of Groups and Lists are initialized before writing the actual attribute
 	// To avoid accidentally overwriting group data when lazily adding items (i.e., via a ToolsPanel instance), we skip this code path if the group's root value has already been initialized
@@ -306,6 +306,29 @@ export function recordCloneableDefaultValueForNode<T extends HydratedSimpleNativ
 	return definition as HydratedSimpleNativeProperty<{uuid: UUID}>;
 }
 
+const recordedBackupValues: Record<UUID, any> = {};
+export function recordBackupForNode(node: DCNode, value: any) {
+	if (!node.backup) {
+		node.backup = crypto.randomUUID();
+	}
+	recordedBackupValues[node.backup] = value;
+}
+
+export function restoreValueFromPotentialBackup(node: DCNode) {
+	if (node.backup && node.backup in recordedBackupValues) {
+		const res = recordedBackupValues[node.backup];
+		delete recordedBackupValues[node.backup];
+		return res ?? buildDefaultValueFromDefinition(node.definition);
+	}
+	return buildDefaultValueFromDefinition(node.definition)
+}
+
+export function removeBackupForNode(node: DCNode) {
+	if (node.backup && node.backup in recordedBackupValues) {
+		delete recordedBackupValues[node.backup];
+	}
+}
+
 export function buildDefaultValueFromDefinition(definition: (HydratedSimpleNativeProperty<{uuid: UUID}>)|undefined, requireNonNullValueOnObject = true): any {
 	if (definition === undefined) {
 		return undefined;

package/src/blocks/data-controller.ts

@@ -15,7 +15,7 @@ import {getDataStore, getOptionalValue, UUID, walkToNode} from "./data-controlle
 
 type DescendantsWrapper = {[key: string]: DCNode}|DCNode[];
 export type DCNode = {
-	backup?: any,
+	backup?: UUID,
 	rendered?: boolean,
 	condition?: Condition,
 	children?: DescendantsWrapper,
@@ -39,7 +39,7 @@ export function useDataController(blockClientId: string): DataController {
 		function getDataStoreImpl(property: string, required: true): DataStore;
 		function getDataStoreImpl(property: string, required?: undefined|false): DataStore|undefined;
 		function getDataStoreImpl(property: string, required?: boolean): DataStore|undefined {
-			return required ? getDataStore(property, store.getState(), true) : getDataStore(property, store.getState(), false);
+			return getDataStore(property, store.getState(), required);
 		}
 		const dataController: DataController = {
 			getDataStore: getDataStoreImpl,

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

@@ -1,10 +1,10 @@
+import {useSuspenseSelect} from "@wordpress/data";
 import {useMemo} from "@wordpress/element";
 import {addFilter} from "@wordpress/hooks";
 
 import {produce} from "immer";
 
 import {useNodeContext} from "../../layout/NodeContext";
-import {useSuspenseSelectTyped} from "../../../lib/use-select-typed";
 
 export default function() {
 	addFilter(
@@ -43,7 +43,7 @@ export default function() {
 					return undefined;
 				}
 			}, [attributes, nodeContext]);
-			return useSuspenseSelectTyped(select => {
+			return useSuspenseSelect(select => {
 				return (select(selectorInfo.hostname + selectorInfo.pathname) as any).get(selectorInfo.username, trimmedAttributes);
 			}, [selectorInfo, trimmedAttributes]);
 		}, 100_000