@plaudit/gutenberg-api-extensions 2.82.0 → 2.84.0

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

@@ -1,5 +1,6 @@
 import {select} from "@wordpress/data";
 
+import {store as gutenbergApiExtensionsStore} from "../lib/gutenberg-api-extensions-state";
 import type {ActualBlockEditProps} from "../lib/useful-types";
 import type {PDSimpleNativeProperty} from "./simple-native-property-api";
 import {makeHasPropClassName} from "./simple-native-property-impl";
@@ -8,20 +9,21 @@ import {SNPDataStore} from "./snp-data-store";
 export class LayeredStylesDataStore extends SNPDataStore {
 	getAttribute(name: string): any {
 		if (name.startsWith("__plaudit/")) {
-			return this.blockEditProps.attributes[name];
+			return this.getRawBlockAttributes()[name];
 		}
-		const layer = select('plaudit/gutenberg-api-extensions').blockStylesLayer(this.blockEditProps.name, name);
+		const layer = select(gutenbergApiExtensionsStore).blockStylesLayer(this.blockName, name);
 		if (layer === undefined) {
 			return undefined;
 		}
-		return extractStyleLayerValueFromAttributes(this.blockEditProps.attributes, layer.name) ?? layer.default;
+
+		return extractStyleLayerValueFromAttributes(this.getRawBlockAttributes(), layer.name) ?? layer.default;
 	}
 	setAttribute(name: string, rawValue: any) {
 		if (name.startsWith("__plaudit/")) {
-			this.blockEditProps.setAttributes({[name]: rawValue});
+			this.setRawBlockAttributes({[name]: rawValue});
 			return;
 		}
-		const layers = select('plaudit/gutenberg-api-extensions').blockStylesLayers(this.blockEditProps.name);
+		const layers = select(gutenbergApiExtensionsStore).blockStylesLayers(this.blockName);
 		if (layers === undefined) {
 			return;
 		}
@@ -29,14 +31,13 @@ export class LayeredStylesDataStore extends SNPDataStore {
 		if (layer === undefined) {
 			return;
 		}
-
-		const className = this.blockEditProps.attributes['className'];
+		const className = this.getRawBlockAttributes()['className'];
 
 		const value = rawValue?.toString() || (layer.default ?? '');
 		const currentLayerClassPrefix = `style-${name}-`;
 		if (typeof className !== 'string' || !className) {
 			if (value.length) {
-				this.blockEditProps.setAttributes({
+				this.setRawBlockAttributes({
 					className: "styleProperty" in layer && layer.styleProperty
 						? `${currentLayerClassPrefix}${value} ${makeHasPropClassName(layer.name)}`
 						: `${currentLayerClassPrefix}${value}`
@@ -44,7 +45,7 @@ export class LayeredStylesDataStore extends SNPDataStore {
 			}
 			return;
 		}
-		this.blockEditProps.setAttributes({className: this.incorporateLayerValue(Object.values(layers), layer, name, value, className)});
+		this.setRawBlockAttributes({className: this.incorporateLayerValue(Object.values(layers), layer, name, value, className)});
 	}
 
 	private incorporateLayerValue(layers: PDSimpleNativeProperty[], currentLayer: PDSimpleNativeProperty, name: string, value: string, className: string): string {

package/src/blocks/layout/NodeContext.tsx

@@ -19,15 +19,15 @@ function makeNodeContextValue(path: NodePath, dataController: DataController): N
 	const value = dataController.getValue(path);
 	const node = dataController.getNode(path);
 	// We memoize actions separately to reduce later re-render calls
-	const actions = useMemo<NodeContextValueActions>(() => ({
+	const memoizedActions = 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})
+		validateNode: () => dataController.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]);
+	return useMemo(() => ({path, dataController, rendered: node.rendered ?? true, validationError: node.validationError, value, ...memoizedActions}), [memoizedActions, node, value]);
 }
 
 export function useNodeContext(action: string): NodeContextValue {

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

@@ -1,13 +1,11 @@
-import type {configureStore} from "@reduxjs/toolkit/src/configureStore";
-
 import type {createSlotFill} from "@wordpress/components";
 import {dispatch, select} from "@wordpress/data";
 
 import type {CSNPConfig} from "./csnp-api";
 import type {Condition} from "./conditions";
-import type {DataControllerActions, DCNode, DCStoreState} from "./data-controller";
+import type {DCNode} from "./data-controller";
 import {installGutenbergExtensions} from "../index";
-import type {ActualBlockEditProps, BlockName} from "../lib/useful-types";
+import type {BlockName} from "../lib/useful-types";
 import type {HydratedLaidOutProperties} from "./simple-native-property-internal-shared";
 
 import type {ReactElement, ReactNode} from "react";
@@ -15,28 +13,30 @@ import type {ReactElement, ReactNode} from "react";
 export type InspectorPanelGroup = 'layered-styles'|'post'|'default'|'advanced'|'background'|'border'|'color'|'dimensions'|'effects'|'filter'|'list'|'position'|'settings'|'styles'|'typography';
 export type {Condition, ConditionFunction, ConditionStruct} from './conditions';
 
-export interface DataStore<B = unknown> {
+export interface DataStore {
+	readonly id: string;
 	getValue(name: string): any;
 	setValue(name: string, value: any): void;
 
-	reattach(blockEditProps: B, attributeCache: Record<string, any>): DataStore<B>;
+	reattach(attributeCache: Record<string, any>): void;
 
 	handlesProperty(name: string): boolean;
 
 	addProperty(property: HydratedSimpleNativeProperty, writeThroughOnUndefined?: boolean): void;
-
-	blockEditProps: ActualBlockEditProps;
 }
 export type RawPath = (string|number)[];
 export type NodePath = [string, ...(string|number)[]];
 export type DataController = {
-	dispatch: ReturnType<typeof configureStore<DCStoreState, DataControllerActions, []>>['dispatch'],
 	getDataStore(property: string, required: true): DataStore,
 	getDataStore(property: string, required?: undefined|false): DataStore|undefined,
 	getDataStore(property: string, required?: boolean): DataStore|undefined,
 	getAllDataStores(): DataStore[],
 	makePropertyValueResolver(contextPath: RawPath): (propertyPath: RawPath) => any,
 
+	checkConditions(): void,
+	validateNodes(): void,
+	commitBatchAddedProperties(): void,
+
 	getValue(path: NodePath): any|undefined,
 	setValue(path: NodePath, value: any): void,
 
@@ -44,6 +44,7 @@ export type DataController = {
 	addNode(path: NodePath, value?: any): void,
 	removeNode(path: NodePath): void,
 	moveNode(path: NodePath, indices: {from: number, to: number}|{from: string, to: string}): void,
+	validateNode(path: NodePath): void,
 
 	hasRenderedNode(properties: HydratedLaidOutProperties): boolean,
 	hasValidationErrors(properties?: HydratedLaidOutProperties): boolean,
@@ -106,7 +107,8 @@ export type SimpleNativePanel = {
 	condition?: Condition,
 	position?: number,
 	raw?: boolean,
-	identifier?: any
+	identifier?: any,
+	dataStoreTypeOverride?: 'layered-styles'|'attribute'
 };
 
 export type SimpleNativeTab = {

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

@@ -10,6 +10,7 @@ import {DataControllerManager, createDataControllerManager} from "./data-control
 import {extractStyleLayerValueFromAttributes, LayeredStylesDataStore} from "./layered-styles-impl";
 import {TabsRoot} from "./layout/TabsRoot";
 import {PanelRoot} from "./layout/PanelRoot";
+import {store as gutenbergApiExtensionsStore} from "../lib/gutenberg-api-extensions-state";
 import {ActualBEPAttrs, ActualBlockEditProps, ActualBlockListBlockProps, isBlockJsonNativePropsConfig, RegisterBlockAttrs} from "../lib/useful-types";
 import {PathError} from "./PathError";
 import type {DataController, DataStore, HydratedSimpleNativeProperty, InspectorPanelGroup} from "./simple-native-property-api";
@@ -19,11 +20,11 @@ import {SNPTreeContext} from "./SNPTreeContext";
 
 class AttributeDataStore extends SNPDataStore {
 	public getAttribute(name: string): any {
-		return this.blockEditProps.attributes[name];
+		return this.getRawBlockAttributes()[name];
 	}
 
 	public setAttribute(name: string, value: any) {
-		this.blockEditProps.setAttributes(name === 'className' ? {className: value?.toString()} : {[name]: value});
+		this.setRawBlockAttributes(name === 'className' ? {className: value?.toString()} : {[name]: value});
 	}
 }
 
@@ -43,18 +44,18 @@ export function installSimpleNativePropertiesSupport() {
 		if (registeredBlocks.has(atts.name)) {
 			isPlauditNative = registeredBlocks.get(atts.name)!;
 		} else {
-			dispatch('plaudit/gutenberg-api-extensions').recordBaselineBlockAttrs(atts);
+			dispatch(gutenbergApiExtensionsStore).recordBaselineBlockAttrs(atts);
 			if ((isPlauditNative = isBlockJsonNativePropsConfig(atts.plaudit)) && atts.plaudit.properties !== undefined
 				&& (Array.isArray(atts.plaudit.properties) ? atts.plaudit.properties.length : atts.plaudit.properties)
 			) {
-				dispatch('plaudit/gutenberg-api-extensions').addProperties(atts.name, atts.plaudit.properties);
+				dispatch(gutenbergApiExtensionsStore).addProperties(atts.name, atts.plaudit.properties);
 			}
 			registeredBlocks.set(atts.name, isPlauditNative);
 		}
 		//TODO: Figure out some way to re-register a block when its attributes are changed
-		const blockSimpleNativePanelsAndTabs = select('plaudit/gutenberg-api-extensions').preppedProperties(atts.name);
+		const blockSimpleNativePanelsAndTabs = select(gutenbergApiExtensionsStore).preppedProperties(atts.name);
 		if (blockSimpleNativePanelsAndTabs) {
-			const extraPropTransforms = select('plaudit/gutenberg-api-extensions').extraPropTransforms(atts.name) ?? {};
+			const extraPropTransforms = select(gutenbergApiExtensionsStore).extraPropTransforms(atts.name) ?? {};
 			const attsAttributes = {...atts.attributes};
 			if (isPlauditNative && Object.values(extraPropTransforms).some(cfg => cfg.styleProperty)) {
 				attsAttributes['__plaudit/computed-style-attr'] = {type: "object"};
@@ -86,7 +87,7 @@ export function installSimpleNativePropertiesSupport() {
 
 	addFilter('editor.BlockEdit', 'plaudit/gutenberg-api-extensions/simple-native-properties',
 		createHigherOrderComponent(BlockEdit => (blockEditProps: ActualBlockEditProps) => {
-			const blockSimpleNativePanelsAndTabs = select('plaudit/gutenberg-api-extensions').preppedProperties(blockEditProps.name);
+			const blockSimpleNativePanelsAndTabs = select(gutenbergApiExtensionsStore).preppedProperties(blockEditProps.name);
 			if (!blockSimpleNativePanelsAndTabs) {
 				return <BlockEdit {...blockEditProps} />;
 			}
@@ -121,7 +122,7 @@ export function installSimpleNativePropertiesSupport() {
 	addFilter('editor.BlockListBlock', 'plaudit/gutenberg-api-extensions/simple-native-properties',
 		createHigherOrderComponent(BlockListBlock => (props: ActualBlockListBlockProps) => {
 			const wrapperProps: {className?: string, style?: Record<string, unknown>} = {...props.wrapperProps};
-			const extraPropTransforms = select('plaudit/gutenberg-api-extensions').computedExtraPropTransforms(props.name);
+			const extraPropTransforms = select(gutenbergApiExtensionsStore).computedExtraPropTransforms(props.name);
 			if (!extraPropTransforms || !extraPropTransforms.appliesInEditor) {
 				const dataController = dataControllerManager.getDataController(props.clientId);
 				if (!dataController) {
@@ -130,7 +131,7 @@ export function installSimpleNativePropertiesSupport() {
 
 				const hasValidationError = dataController.hasValidationErrors();
 				dataControllerManager.notifyOfValidationErrorStatusChange(props.clientId, hasValidationError);
-				dataController.dispatch({type: "checkConditions"}); // We don't want to wrap this in a useEffect because this function is already only called when necessary.
+				dataController.checkConditions(); // We don't want to wrap this in a useEffect because this function is already only called when necessary.
 
 				if (hasValidationError) {
 					//TODO: Should I set isValid?
@@ -150,7 +151,7 @@ export function installSimpleNativePropertiesSupport() {
 
 			const hasValidationError = dataController.hasValidationErrors();
 			dataControllerManager.notifyOfValidationErrorStatusChange(props.clientId, hasValidationError);
-			dataController.dispatch({type: "checkConditions"}); // We don't want to wrap this in a useEffect because this function is already only called when necessary.
+			dataController.checkConditions(); // We don't want to wrap this in a useEffect because this function is already only called when necessary.
 
 			if (hasValidationError) {
 				//TODO: Should I set isValid?
@@ -169,7 +170,7 @@ export function installSimpleNativePropertiesSupport() {
 			if (isBlockJsonNativePropsConfig(blockType.plaudit)) {
 				return props;
 			}
-			const extraPropTransforms = select('plaudit/gutenberg-api-extensions').computedExtraPropTransforms(blockType.name);
+			const extraPropTransforms = select(gutenbergApiExtensionsStore).computedExtraPropTransforms(blockType.name);
 
 			return extraPropTransforms && extraPropTransforms.appliesInEditor ? produce(props, draft => {
 				applyExtraPropTransforms(extraPropTransforms.transforms, attributes, draft);
@@ -248,35 +249,41 @@ function applyExtraPropTransforms(
 	return draft;
 }
 
-function makeDataStoreForPanelOrTab(blockEditProps: ActualBlockEditProps, group: string|undefined, attributeCache: Record<string, any>) {
-	return group === 'layered-styles' ? new LayeredStylesDataStore(blockEditProps, attributeCache) : new AttributeDataStore(blockEditProps, attributeCache);
+function makeDataStoreForPanelOrTab(
+	blockEditProps: ActualBlockEditProps, group: string|undefined, attributeCache: Record<string, any>, identifier: string, dataStoreTypeOverride?: 'layered-styles'|'attribute'
+) {
+	const args = [blockEditProps, attributeCache, `${blockEditProps.clientId}-${identifier}`] as const;
+	if (dataStoreTypeOverride) {
+		return dataStoreTypeOverride === 'layered-styles' ? new LayeredStylesDataStore(...args) : new AttributeDataStore(...args);
+	}
+	return group === 'layered-styles' ? new LayeredStylesDataStore(...args) : new AttributeDataStore(...args);
 }
 type SNPPropsWrapperProps = {blockSimpleNativePanelsAndTabs: PreppedSimpleNativePanelsAndTabs, blockEditProps: ActualBlockEditProps, dataController: DataController};
 function SNPPropsWrapper({blockSimpleNativePanelsAndTabs, blockEditProps, dataController}: SNPPropsWrapperProps) {
 	useMemo(() => {
 		const attributeCache = Object.create(null);
-		for (const panel of blockSimpleNativePanelsAndTabs.panels) {
-			const dataStore = makeDataStoreForPanelOrTab(blockEditProps, panel[1].group, attributeCache);
-			dataController.addProperties(panel[1].properties, dataStore, true);
+		for (const [identifier, panel] of blockSimpleNativePanelsAndTabs.panels) {
+			const dataStore = makeDataStoreForPanelOrTab(blockEditProps, panel.group, attributeCache, identifier, panel.dataStoreTypeOverride);
+			dataController.addProperties(panel.properties, dataStore, true);
 		}
-		for (const [group, [_, tabs]] of Object.entries(blockSimpleNativePanelsAndTabs.tabs)) {
-			const dataStore = makeDataStoreForPanelOrTab(blockEditProps, group, attributeCache);
+		for (const [group, [identifier, tabs]] of Object.entries(blockSimpleNativePanelsAndTabs.tabs)) {
+			const dataStore = makeDataStoreForPanelOrTab(blockEditProps, group, attributeCache, identifier);
 			for (const tab of Object.values(tabs)) {
 				for (const panel of tab.items) {
 					dataController.addProperties(panel.properties, dataStore, true);
 				}
 			}
 		}
-		dataController.dispatch({type: "checkConditions"});
-		dataController.dispatch({type: "validateNodes"});
-		dataController.dispatch({type: "commitBatchAddedProperties"});
+		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
 	useMemo(() => {
 		const attributeCache = Object.create(null);
 		for (const dataStore of dataController.getAllDataStores()) {
-			dataStore.reattach(blockEditProps, attributeCache);
+			dataStore.reattach(attributeCache);
 		}
 	}, [dataController.getAllDataStores(), blockEditProps]);
 
@@ -285,8 +292,8 @@ function SNPPropsWrapper({blockSimpleNativePanelsAndTabs, blockEditProps, dataCo
 		if (dataController.getWasChangedByManagedControl()) {
 			dataController.markManagedControlChangeHandled();
 		} else{
-			dataController.dispatch({type: "checkConditions"});
-			dataController.dispatch({type: "validateNodes"});
+			dataController.checkConditions();
+			dataController.validateNodes();
 		}
 	}, [dataController.getAllDataStores(), blockEditProps]);
 

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

@@ -1,19 +1,25 @@
-import type {ActualBlockEditProps} from "../lib/useful-types";
+import {store as blockEditorStore} from "@wordpress/block-editor";
+import {dispatch, select} from "@wordpress/data";
+
+import type {ActualBlockEditProps, BlockName} from "../lib/useful-types";
 import type {DataStore, HydratedSimpleNativeProperty} from "./simple-native-property-api";
 import {buildDefaultValueFromDefinition} from "./simple-native-property-internal-shared";
 
-export abstract class SNPDataStore implements DataStore<ActualBlockEditProps> {
+export abstract class SNPDataStore implements DataStore {
 	private readonly managedPropertyNames: {[propertyName in string]: true};
 
+	protected readonly blockClientId: string;
+	protected readonly blockName: BlockName;
+
 	public constructor(
-		protected explicitBlockEditProps: ActualBlockEditProps,
-		private attributeCache: Record<string, any>
+		explicitBlockEditProps: ActualBlockEditProps,
+		private attributeCache: Record<string, any>,
+		public readonly id: string
 	) {
 		this.managedPropertyNames = Object.create(null);
-	}
 
-	get blockEditProps() {
-		return this.explicitBlockEditProps;
+		this.blockClientId = explicitBlockEditProps.clientId;
+		this.blockName = explicitBlockEditProps.name;
 	}
 
 	getValue(attr: string): any {
@@ -31,17 +37,20 @@ export abstract class SNPDataStore implements DataStore<ActualBlockEditProps> {
 		return name in this.managedPropertyNames;
 	}
 
-	reattach(explicitBlockEditProps: ActualBlockEditProps, attributeCache: Record<string, any>) {
-		if (this.explicitBlockEditProps !== explicitBlockEditProps) { // If the block's properties haven't changed, there's no reason to clear the attribute cache
-			this.explicitBlockEditProps = explicitBlockEditProps;
-			this.attributeCache = attributeCache;
-		}
-		return this;
+	reattach(attributeCache: Record<string, any>) {
+		this.attributeCache = attributeCache;
 	}
 
 	protected abstract getAttribute(name: string): any;
 	protected abstract setAttribute(name: string, value: any): void;
 
+	protected getRawBlockAttributes() {
+		return select(blockEditorStore).getBlockAttributes(this.blockClientId) ?? {};
+	}
+	protected setRawBlockAttributes(attributes: Record<string, any>) {
+		dispatch(blockEditorStore).updateBlockAttributes!(this.blockClientId, attributes);
+	}
+
 	protected getCachedValue(attr: string) {
 		return this.attributeCache[attr];
 	}

package/src/controls/FullSizeToggleControl.tsx

@@ -1,15 +1,15 @@
 import {
 	__experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, PanelBody, TabPanel
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon
 } from "@wordpress/components";
 import {memo, useCallback, useMemo} from "@wordpress/element";
 import {__} from "@wordpress/i18n";
 import * as icons from "@wordpress/icons";
 
-import type {TogglePropertyCSNPConfig} from "../blocks/csnp-api";
-import * as plauditIcons from "../lib/plaudit-icons";
 import type {IconName, OptionalLabel} from "../blocks";
+import type {TogglePropertyCSNPConfig} from "../blocks/csnp-api";
 import type {CSNPControlComponentProps, NormalSwitch, PlauditIconName, WordPressIconName} from "../blocks/shared-internal-types";
+import * as plauditIcons from "../lib/plaudit-icons";
 
 import parse from "html-react-parser";
 

package/src/lib/gutenberg-api-extensions-state/layered-block-styles-logic.ts

@@ -26,17 +26,18 @@ export const layeredBlockStylesLogicSelectors = {
 };
 
 export function layeredBlockStylesLogic(state: LayeredBlockStylesLogicState, action: LayeredBlockStylesLogicActions|WordPressMetaActions): typeof state {
-	if (action.type === "ADD_LAYERED_BLOCK_STYLES") {
-		return produce(state, (draft: typeof state) => {
-			const blockLayeredStyles = draft.layeredBlockStyles[action.blockName] ?? (draft.layeredBlockStyles[action.blockName] = {});
-			for (const layer of action.properties) {
-				blockLayeredStyles[layer.name] = layer;
-			}
-		});
-	} else if (action.type === "SET_LAYERED_BLOCK_STYLES") {
-		return produce(state, (draft: typeof state) => {
-			draft.layeredBlockStyles[action.blockName] = action.properties;
-		});
+	switch (action.type) {
+		case "ADD_LAYERED_BLOCK_STYLES":
+			return produce(state, (draft: typeof state) => {
+				const blockLayeredStyles = draft.layeredBlockStyles[action.blockName] ?? (draft.layeredBlockStyles[action.blockName] = {});
+				for (const layer of action.properties) {
+					blockLayeredStyles[layer.name] = layer;
+				}
+			});
+		case "SET_LAYERED_BLOCK_STYLES":
+			return produce(state, (draft: typeof state) => {
+				draft.layeredBlockStyles[action.blockName] = action.properties;
+			});
 	}
 	return state;
 }

package/src/lib/gutenberg-api-extensions-state/snp-logic.ts

@@ -80,7 +80,7 @@ export function snpLogic(state: SNPLogicState, action: SNPLogicActions|WordPress
 			});
 		case "ADD_OR_UPDATE_EXTRA_PROP_TRANSFORM":
 			return produce(state, (draft: typeof state) => {
-				const blockTransforms = draft.extraPropTransforms[action.blockName] ?? (draft.extraPropTransforms[action.blockName] = {});
+				const blockTransforms = (draft.extraPropTransforms[action.blockName] ??= {});
 				if (blockTransforms[action.propPath]) {
 					blockTransforms[action.propPath]!.styleProperty = action.extraPropTransform.styleProperty;
 				} else {
@@ -106,7 +106,7 @@ export function snpLogic(state: SNPLogicState, action: SNPLogicActions|WordPress
 }
 
 export function addProperties(block: BlockName, properties: PropertiesParameter, simpleNativePanelsAndTabs: SNPLogicState['desiccatedProperties']) {
-	const panels = (simpleNativePanelsAndTabs[block] ?? (simpleNativePanelsAndTabs[block] = []));
+	const panels = (simpleNativePanelsAndTabs[block] ??= []);
 	if ('title' in properties) {
 		panels.push(properties);
 		return;