@plaudit/gutenberg-api-extensions 2.94.2 → 2.96.0

package/src/blocks/data-controller.ts

@@ -1,165 +0,0 @@
-import {useMemo} from "@wordpress/element";
-
-import {configureStore, type Middleware, Tuple} from "@reduxjs/toolkit";
-
-import type {Dispatch} from "redux";
-
-import {type Condition, resolveValueForCondition} from "./conditions";
-import {PathError, PathErrorType} from "./PathError";
-import type {DataController, DataStore, HydratedSimpleNativeProperty, NodePath} from "./simple-native-property-api";
-
-import {actions, type DataControllerActions} from "./data-controller/actions";
-import {buildReducer} from "./data-controller/reducer";
-import {getDataStore, getOptionalValue, type UUID, walkToNode} from "./data-controller/utils";
-
-type DescendantsWrapper = {[key: string]: DCNode}|DCNode[];
-export type DCNode = {
-	backup?: UUID,
-	rendered?: boolean,
-	condition?: Condition,
-	children?: DescendantsWrapper,
-	definition?: HydratedSimpleNativeProperty<{uuid: UUID}>,
-	validationError?: string
-};
-export type DCStoreState = {
-	treeRoot: Omit<DCNode, 'children'>&{children: {[key: string]: DCNode}},
-	dataStores: {byProperty: {[key: string]: DataStore}, list: DataStore[]},
-	blockClientId: string,
-	changedByManagedControl: boolean,
-	rerenderTrigger: number,
-	batchAddedPropertiesThatNeedWriteThrough: HydratedSimpleNativeProperty<{uuid: UUID}>[]
-};
-
-export function useDataController(blockClientId: string): DataController {
-	return useMemo(() => {
-		const reducer = buildReducer(blockClientId);
-		const store = configureStore<DCStoreState, DataControllerActions, Tuple<ReadonlyArray<Middleware<{}, DCStoreState, Dispatch<DataControllerActions>>>>>({reducer});
-		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 getDataStore(property, store.getState(), required);
-		}
-		const dataController: DataController = {
-			getDataStore: getDataStoreImpl,
-			getAllDataStores() {
-				return store.getState().dataStores.list;
-			},
-			makePropertyValueResolver(contextPath) {
-				return propertyPath => resolveValueForCondition(propertyPath, contextPath, blockClientId, getDataStoreImpl)
-			},
-			getValue(path) {
-				return getOptionalValue(path, store.getState());
-			},
-			setValue(path, value) {
-				store.dispatch(actions.node.write({path, value}));
-			},
-			addProperties(properties, dataStore, inBatch) {
-				store.dispatch(actions.addProperties({properties, dataStore}, inBatch));
-			},
-			addNode(path, value) {
-				try {
-					store.dispatch(actions.node.add({path, value}));
-				} catch (e) {
-					if (e instanceof PathError && e.errorType === PathErrorType.UNEXPECTED_LEAF) {
-						for (let i = e.errorIndex; i < path.length - 1; i++) {
-							store.dispatch(actions.node.add({path: path.slice(0, i) as NodePath, value}, true));
-						}
-						store.dispatch(actions.node.add({path, value}));
-					}
-					throw e;
-				}
-			},
-			removeNode(path) {
-				store.dispatch(actions.node.remove({path}));
-			},
-			moveNode(path, indices) {
-				store.dispatch(actions.node.move({path, ...indices}));
-			},
-			validateNode(path) {
-				store.dispatch(actions.node.validate({path}));
-			},
-			hasRenderedNode(properties) {
-				const rootNodes = store.getState().treeRoot.children;
-				for (const property of properties) {
-					if (Array.isArray(property)) {
-						for (const prop of property) {
-							if (rootNodes[prop.name]?.rendered) {
-								return true;
-							}
-						}
-					} else if (rootNodes[property.name]?.rendered) {
-						return true;
-					}
-				}
-				return false;
-			},
-			hasValidationErrors(properties) {
-				if (properties === undefined) {
-					return testForValidationErrors(store.getState().treeRoot);
-				}
-				const rootNodes = store.getState().treeRoot.children;
-				for (const property of properties) {
-					if (Array.isArray(property)) {
-						for (const prop of property) {
-							if (testForValidationErrors(rootNodes[prop.name])) {
-								return true;
-							}
-						}
-					} else if (testForValidationErrors(rootNodes[property.name])) {
-						return true;
-					}
-				}
-				return false;
-			},
-			getIsRendered(path) {
-				return walkToNode(store.getState().treeRoot, path).rendered ?? true;
-			},
-			getNode(path) {
-				return walkToNode(store.getState().treeRoot, path);
-			},
-			getValidationError(path) {
-				return walkToNode(store.getState().treeRoot, path).validationError;
-			},
-			getWasChangedByManagedControl() {
-				return store.getState().changedByManagedControl;
-			},
-			markManagedControlChangeHandled() {
-				store.dispatch(actions.markManagedControlChangeHandled({}));
-			},
-			checkConditions() {
-				store.dispatch(actions.checkConditions({}));
-			},
-			validateNodes() {
-				store.dispatch(actions.validateNodes({}));
-			},
-			commitBatchAddedProperties() {
-				store.dispatch(actions.commitBatchAddedProperties({}));
-			},
-			blockClientId
-		};
-		return dataController;
-	}, [blockClientId]);
-}
-
-function testForValidationErrors(node: DCNode|undefined) {
-	if (!node || !node.rendered) {
-		return false;
-	} else if (node.validationError) {
-		return true;
-	} else if (Array.isArray(node.children)) {
-		for (const child of node.children) {
-			if (testForValidationErrors(child)) {
-				return true;
-			}
-		}
-	} else if (node.children !== undefined) {
-		for (const child of Object.values(node.children)) {
-			if (testForValidationErrors(child)) {
-				return true;
-			}
-		}
-	}
-	return false;
-}
-
-export {walkToNodeInValue} from "./data-controller/utils";

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

@@ -1,51 +0,0 @@
-import {useSuspenseSelect} from "@wordpress/data";
-import {useMemo} from "@wordpress/element";
-import {addFilter} from "@wordpress/hooks";
-
-import {produce} from "immer";
-
-import {useNodeContext} from "../../layout/NodeContext";
-
-export default function() {
-	addFilter(
-		'plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.resolve',
-		'plaudit/gutenberg-api-extensions/simple-native-properties/suspendable-options',
-		(options: unknown | undefined, selectorInfo: URL, {attributes}: { attributes: Record<string, any> | null }) => {
-			if (options !== undefined || selectorInfo.protocol !== "select:") {
-				return options;
-			}
-			const nodeContext = useNodeContext("get contextual options");
-			const trimmedAttributes = useMemo(() => {
-				if (selectorInfo.searchParams.has("attributes")) {
-					if (attributes === null) {
-						return null;
-					}
-					return produce(attributes, draft => {
-						let current = draft;
-						for (const p of nodeContext.path.slice(0, nodeContext.path.length - 1)) {
-							if (typeof p === 'string') {
-								current = current.p;
-							} else {
-								current = current[p];
-							}
-							if (current === undefined) {
-								return;
-							}
-						}
-						const lastItem = nodeContext.path[nodeContext.path.length - 1]!;
-						if (typeof lastItem === 'string') {
-							delete current[lastItem];
-						} else {
-							current.splice(lastItem, 1);
-						}
-					});
-				} else {
-					return undefined;
-				}
-			}, [attributes, nodeContext]);
-			return useSuspenseSelect(select => {
-				return (select(selectorInfo.hostname + selectorInfo.pathname) as any).get(selectorInfo.username, trimmedAttributes);
-			}, [selectorInfo, trimmedAttributes]);
-		}, 100_000
-	);
-}

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

@@ -1,70 +0,0 @@
-import {useSettings} from "@wordpress/block-editor";
-import {addFilter} from "@wordpress/hooks";
-
-export default function() {
-	addFilter(
-		'plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.resolve',
-		'plaudit/gutenberg-api-extensions/simple-native-properties/suspendable-options',
-		(options: unknown | undefined, selectorInfo: URL) => {
-			return options === undefined && selectorInfo.protocol === "settings:" ? useSettings(selectorInfo.hostname)[0] : options;
-		}, 100_000
-	);
-
-	addFilter(
-		'plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.postProcess',
-		'plaudit/gutenberg-api-extensions/simple-native-properties/suspendable-options',
-		(options: unknown, selectorInfo: URL) => {
-			if (selectorInfo.protocol !== "settings:") {
-				return options;
-			}
-
-			if (!Array.isArray(options)) {
-				console.error(`The "settings" protocol for CSNPs only supports array-formatted values. ${selectorInfo} did not resolve to an array`);
-				return [];
-			}
-			const valueTransformer = getValueTransformer(selectorInfo);
-			return options
-				.filter((s): s is { name: string, slug: string } & ({ value: string | number, icon?: string } | { color: string }) => {
-					if (typeof s === 'object' && s && typeof s["name"] === 'string' && typeof s["slug"] === 'string') {
-						if (typeof s["value"] === 'string' || typeof s["value"] === 'number') {
-							if ("color" in s) {
-								console.error("Encountered an invalid setting value:", s);
-								return false;
-							}
-						} else if (typeof s["color"] !== 'string' || "value" in s) {
-							console.error("Encountered an invalid setting value:", s);
-							return false;
-						}
-						return true;
-					}
-					return false;
-				})
-				.map(s => {
-					const {slug, name: label, ...rest} = s;
-					return {...rest, value: valueTransformer(slug), label};
-				});
-		});
-
-	function getValueTransformer(selectorInfo: URL): (value: string) => string {
-		const valuePattern = getValuePatternAccountingForLegacyCode(selectorInfo);
-		if (!valuePattern) {
-			return value => value;
-		}
-		if (!valuePattern.includes("$slug")) {
-			throw new Error("Value patterns provided to the \"settings\" protocol MUST include '$slug'");
-		}
-		return value => valuePattern.replaceAll("$slug", value);
-	}
-
-	function getValuePatternAccountingForLegacyCode(selectorInfo: URL) {
-		const res = selectorInfo.searchParams.get("value-pattern") || selectorInfo.searchParams.get("valuePattern");
-		if (!res) {
-			for (const key of selectorInfo.searchParams.keys()) {
-				if (key.includes("$slug")) {
-					return key;
-				}
-			}
-		}
-		return res;
-	}
-}

package/src/blocks/hooks/useSuspendableOptions.ts

@@ -1,122 +0,0 @@
-import {store as blockEditorStore} from "@wordpress/block-editor";
-import {MapSelect, useSelect} from "@wordpress/data";
-import {useMemo} from "@wordpress/element";
-import {applyFilters} from "@wordpress/hooks";
-
-import type {CSNPConfig, PromisablePickableOptions, SuspendablePromisablePickableOptions} from "../csnp-api";
-import type {PickableOptions} from "../../controls";
-import {useNodeContext} from "../layout/NodeContext";
-import {isPromise, use} from "../../lib/suspense/promise-handlers";
-
-type RefablePromisablePickableOptions<T> = T extends {options: PromisablePickableOptions<infer V, infer T>} ? PickableOptions<V, T> : never;
-export function isSuspendableOptions<V extends string|number, T extends object = {}>(thing: PromisablePickableOptions<V, T>|string): thing is SuspendablePromisablePickableOptions {
-	return typeof thing === 'string' || thing instanceof URL;
-}
-
-export function useSuspendableOptions<T extends CSNPConfig&{options: PromisablePickableOptions<any>}>(config: T): RefablePromisablePickableOptions<T> {
-	const rawOptions = isPromise(config.options) ? use(config.options) : config.options;
-	if (isSuspendableOptions(rawOptions)) {
-		const selectorInfo = toSuspendableOptionsURI(rawOptions);
-		const nodeContext = useNodeContext("get contextual options");
-		const blockClientId = nodeContext.dataController.blockClientId;
-
-		const usesBlockAttributes = applyFilters('plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.usesBlockAttributes',
-			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 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 => {
-				const selected = wrappedSelect(blockEditorStore);
-				return [selected.getBlockAttributes(blockClientId), selected.getBlockName(blockClientId)];
-			};
-		} else {
-			mapSelect = wrappedSelect => [null, wrappedSelect(blockEditorStore).getBlockName(blockClientId)];
-		}
-		const [attributes, blockName] = useSelect(mapSelect, [blockClientId]);
-
-		const potentiallyPromisedOptions = applyFilters('plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.resolve',
-			undefined, selectorInfo, {attributes, blockName});
-		if (potentiallyPromisedOptions === undefined) {
-			throw new Error(`Encountered an unsupported suspendable option request: ${rawOptions}`);
-		}
-
-		// selectorInfo is guaranteed to be valid by virtue of the checks performed while getting the handler
-		const options = potentiallyPromisedOptions && typeof potentiallyPromisedOptions === 'object' && 'then' in potentiallyPromisedOptions
-			? use(potentiallyPromisedOptions as Promise<unknown>) : potentiallyPromisedOptions;
-
-		return useMemo(() => {
-			return applyFilters('plaudit.gutenbergApiExtensions.simpleNativeProperties.suspendableOptions.postProcess', options, selectorInfo, {attributes, blockName});
-		}, [options, selectorInfo, attributes, blockName]) as RefablePromisablePickableOptions<T>;
-	} else {
-		return rawOptions as RefablePromisablePickableOptions<T>;
-	}
-}
-
-export type SuspendableOptionsHandler = (selectorInfo: URL, params: {attributes: Record<string, any>|null, blockName: string|null}) => any;
-
-function toSuspendableOptionsURI(rawOptions: string|URL) {
-	if (rawOptions instanceof URL) {
-		return rawOptions;
-	}
-
-	return useMemo(() => {
-		try {
-			const res = new URL(rawOptions);
-			if (res.protocol === "select:") {
-				if (res.username && res.hostname) {
-					return res;
-				}
-			} else if (res.protocol === "setting:" || res.protocol === "settings:") {
-				if (res.protocol === "setting:") {
-					console.warn(`Encountered a Suspendable Option parameter using deprecated protocol:`, res.toString(), "\nThe \"setting\" protocol has been renamed to \"settings\"");
-					res.protocol = "settings:";
-				}
-				if (res.hostname) {
-					return res;
-				}
-			} else {
-				return res;
-			}
-		} catch {
-			// We're not throwing on an invalid URI here because we want a chance to run the deprecated-syntax handling logic
-		}
-
-		const selectorInfo = rawOptions.split(":") as [string, ...string[]];
-		let correctedRawOptions: string;
-		if (selectorInfo[0] === 'select') {
-			if (selectorInfo.length < 3 || !selectorInfo[1] || !selectorInfo[2]) {
-				throw new Error(`The "select" protocol for Suspendable Options must have at least 3 colon-delimited parts. Got: ${rawOptions}`);
-			}
-			// Deprecated: select:plaudit/simple-gutenberg-apis:plaudit-base.conditional-display.show-when-options:attributes
-			// Corrected:  select://plaudit-base.conditional-display.show-when-options@plaudit/simple-gutenberg-apis?attributes
-			correctedRawOptions = `select://${selectorInfo[2]}@${selectorInfo[1]}`;
-			if (selectorInfo[3]) {
-				correctedRawOptions += "?" + selectorInfo[3];
-			}
-		} else if (selectorInfo[0] === 'setting' || selectorInfo[0] === 'settings') {
-			if (!selectorInfo[1]) {
-				throw new Error(`The "settings" protocol for Suspendable Options must have at least 2 colon-delimited parts. Got: ${rawOptions}`);
-			}
-			// Deprecated: setting:plaudit.markerDisplay:with-inherit
-			// Corrected:  settings://plaudit.markerDisplay?with-inherit
-			correctedRawOptions = `settings://${selectorInfo[1]}`;
-			if (selectorInfo.length > 2) {
-				const query = selectorInfo.slice(2).join("&");
-				if (query.replaceAll("&", "").length > 0) {
-					correctedRawOptions += "?" + query;
-				}
-			}
-		} else {
-			throw new Error(`Encountered an invalid suspendable options value: ${rawOptions}. Suspendable option values MUST be URIs.`);
-		}
-		console.warn(`Encountered a Suspendable Option parameter using deprecated syntax:`, rawOptions, "\nIt should be replaced with:", correctedRawOptions);
-		return new URL(correctedRawOptions);
-	}, [rawOptions]);
-}
-
-import initSelectProtocol from "./built-in-suspendable-option-protocols/select";
-import initSettingsProtocol from "./built-in-suspendable-option-protocols/settings";
-initSelectProtocol();
-initSettingsProtocol();

package/src/blocks/index.ts

@@ -1,23 +0,0 @@
-export * from "./layered-styles-api";
-export * from "./simple-block";
-export * from "./shared-exportable-types";
-export * from "./simple-native-property-api";
-export * from "./snp-data-store";
-export * from "./utilities";
-
-export * from "./problematic-blocks-blocker";
-export * from "./problematic-variations-blocker";
-
-export type {SuspendableOptionsHandler} from "./hooks/useSuspendableOptions";
-
-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";
-
-/**
- * @deprecated use installGutenbergExtensions() instead
- */
-export function installGutenbergBlockExtensions() {
-	installGutenbergExtensions();
-}

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

@@ -1,142 +0,0 @@
-import type {
-	ColorPaletteCSNPConfig,
-	CommonPropertyConfig,
-	RadioPropertyCSNPConfig,
-	SelectPropertyCSNPConfig,
-	ToggleGroupPropertyCSNPConfig,
-	TogglePropertyCSNPConfig
-} from "./csnp-api";
-import type {PickableOptions} from "../controls";
-import {installGutenbergExtensions} from "../index";
-import type {BlockName} from "../lib/useful-types";
-import {registerSimpleNativeProperties, SimpleNativeProperty} from "./simple-native-property-api";
-
-type BaseLayeredBlockStyleLayer = {
-	name: string;
-	title: string;
-	default?: string|undefined;
-	condition?: SimpleNativeProperty['condition']
-	alwaysStore?: boolean|undefined;
-	styleProperty?: string;
-}&Pick<CommonPropertyConfig<any, any, any, any>, 'help'>
-
-type LayeredBlockStyleColorLayer = BaseLayeredBlockStyleLayer&{
-	picker: 'color'|'colorPalette';
-	clearable?: boolean|undefined;
-	options: PickableOptions<string, {color?: string}>|ColorPaletteCSNPConfig['options'];
-}
-
-type LayeredBlockStyleToggleLayer = BaseLayeredBlockStyleLayer&{picker: 'toggle'}&Pick<TogglePropertyCSNPConfig, 'switch'>
-
-type LayeredBlockStyleToggleGroupLayer = BaseLayeredBlockStyleLayer&{
-	picker?: 'toggle-control'|'toggleGroup';
-	clearable?: boolean|undefined;
-	options: ToggleGroupPropertyCSNPConfig['options'];
-}
-type LayeredBlockStyleSelectOrRadioLayer = BaseLayeredBlockStyleLayer&{options: PickableOptions<string>}&({picker: 'select', clearable?: boolean|undefined}|{picker: 'radio'})
-
-export type LayeredBlockStyleLayer = LayeredBlockStyleColorLayer|LayeredBlockStyleToggleLayer|LayeredBlockStyleToggleGroupLayer|LayeredBlockStyleSelectOrRadioLayer;
-
-export interface LayeredBlockStylesConfig {
-	block: BlockName[]|BlockName;
-	layers: LayeredBlockStyleLayer[];
-}
-
-export function registerLayeredBlockStyles(config: LayeredBlockStylesConfig) {
-	registerSimpleNativeProperties({
-		block: config.block,
-		properties: {
-			group: 'layered-styles',
-			title: "Layered Styles",
-			properties: config.layers.map(layer => {
-				const sharedProps = {
-					name: layer.name,
-					label: layer.title,
-					condition: layer.condition,
-					alwaysStore: layer.alwaysStore ?? ((layer.default ?? '') !== ''),
-					styleProperty: layer.styleProperty
-				};
-
-				const clearable = "clearable" in layer && (layer.clearable ?? false);
-				let defaultValue: string|undefined;
-				if (clearable) {
-					if (layer.default) {
-						console.error(`Layered Style, "${layer.title}" on ${Array.isArray(config.block) ? config.block.join(', ') : config.block}`,
-							"is improperly configured with both clearable and a non-empty default.");
-						defaultValue = "";
-					} else {
-						defaultValue = layer.default;
-					}
-				} else {
-					defaultValue = layer.default;
-				}
-
-				switch (layer.picker) {
-					case undefined:
-					case 'toggle-control':
-					case 'toggleGroup':
-						return {
-							...sharedProps,
-							clearable,
-							control: 'toggleGroup',
-							default: defaultValue,
-							options: layer.options,
-							help: layer.help
-						} as ToggleGroupPropertyCSNPConfig;
-					case 'color':
-					case 'colorPalette':
-						return {
-							...sharedProps,
-							allowCustom: false,
-							clearable,
-							control: 'colorPalette',
-							default: defaultValue,
-							options: layer.options,
-							help: layer.help
-						} as ColorPaletteCSNPConfig;
-					case 'radio':
-						return {
-							...sharedProps,
-							control: 'radio',
-							options: layer.options,
-							default: layer.default,
-							allowCustom: false,
-							help: layer.help
-						} as RadioPropertyCSNPConfig;
-					case 'select':
-						return {
-							...sharedProps,
-							clearable,
-							control: 'select',
-							default: defaultValue,
-							options: layer.options,
-							help: layer.help
-						} as SelectPropertyCSNPConfig;
-					case 'toggle':
-						return {
-							...sharedProps,
-							control: 'toggle',
-							default: defaultValue,
-							switch: layer.switch ?? {small: true},
-							help: layer.help,
-							transformer: {
-								to(input: unknown) {
-									return input !== undefined && input !== null ? (typeof input === 'boolean' ? input : input?.toString().toLowerCase() === 'true') : undefined;
-								},
-								from(value: boolean|undefined) {
-									return value?.toString();
-								}
-							}
-						} as TogglePropertyCSNPConfig
-				}
-			})
-		}
-	});
-}
-
-/**
- * @deprecated use installGutenbergExtensions() instead.
- */
-export function installLayeredBlockStylesSupport() {
-	installGutenbergExtensions();
-}

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

@@ -1,95 +0,0 @@
-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";
-import {SNPDataStore} from "./snp-data-store";
-
-export class LayeredStylesDataStore extends SNPDataStore {
-	getAttribute(name: string): any {
-		if (name.startsWith("__plaudit/")) {
-			return this.getRawBlockAttributes()[name];
-		}
-		const layer = select(gutenbergApiExtensionsStore).blockStylesLayer(this.blockName, name);
-		if (layer === undefined) {
-			return undefined;
-		}
-
-		return extractStyleLayerValueFromAttributes(this.getRawBlockAttributes(), layer.name) ?? layer.default;
-	}
-	setAttribute(name: string, rawValue: any) {
-		if (name.startsWith("__plaudit/")) {
-			this.setRawBlockAttributes({[name]: rawValue});
-			return;
-		}
-		const layers = select(gutenbergApiExtensionsStore).blockStylesLayers(this.blockName);
-		if (layers === undefined) {
-			return;
-		}
-		const layer = layers[name];
-		if (layer === undefined) {
-			return;
-		}
-		const className = this.getRawBlockAttributes()['className'];
-
-		const value = rawValue?.toString() || (layer.default ?? '');
-		const currentLayerClassPrefix = `style-${name}-`;
-		if (typeof className !== 'string' || !className) {
-			if (value.length) {
-				this.setRawBlockAttributes({
-					className: "styleProperty" in layer && layer.styleProperty
-						? `${currentLayerClassPrefix}${value} ${makeHasPropClassName(layer.name)}`
-						: `${currentLayerClassPrefix}${value}`
-				});
-			}
-			return;
-		}
-		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 {
-		const classNames = className.split(/\s+/);
-		const layeredStyleClassPrefixes = layers.map(layer => `style-${layer.name}-`);
-		const nonLayerClasses = classNames
-			.filter(cn => !layeredStyleClassPrefixes.some(lc => cn.startsWith(lc)));
-
-		const layerPrefixPairs = layers
-			.filter(layer => layer.name !== name)
-			.map<[PDSimpleNativeProperty, string]>(layer => [layer, `style-${layer.name}-`]);
-		const layerClasses: string[] = [];
-		for (const [layer, prefix] of layerPrefixPairs) {
-			if (this.hasCachedValue(layer.name)) {
-				const layerValue = this.getCachedValue(layer.name);
-				if (layerValue) {
-					layerClasses.push(`${prefix}${layerValue}`);
-				}
-			} else {
-				const layerValueClass = classNames.find(cn => cn.startsWith(prefix));
-				if (layerValueClass) {
-					layerClasses.push(layerValueClass);
-				}
-			}
-		}
-		if (value) {
-			layerClasses.push(`style-${name}-${value}`);
-			if ('styleProperty' in currentLayer && currentLayer.styleProperty) {
-				const hasPropClassName = makeHasPropClassName(currentLayer.name);
-				if (!nonLayerClasses.includes(hasPropClassName)) {
-					nonLayerClasses.push(hasPropClassName);
-				}
-			}
-		}
-		return [...nonLayerClasses, ...layerClasses.sort()].join(' ');
-	}
-}
-
-export function extractStyleLayerValueFromAttributes(attributes: ActualBlockEditProps['attributes'], layerName: string) {
-	const className = attributes['className'];
-	if (typeof className !== 'string') {
-		return undefined;
-	}
-
-	const currentLayerClassPrefix = `style-${layerName}-`;
-	return attributes['className']?.split(/\s+/).find(className => className.startsWith(currentLayerClassPrefix))?.substring(currentLayerClassPrefix.length);
-}