Merge pull request #193 from KevinBatdorf/allow-id-editable

Author: KevinBatdorf

pattern-css.php

@@ -42,6 +42,7 @@
 				constant('PATTERN_CSS_SELECTOR_OVERRIDE') : null,
 			'globalCss' => get_option('pcss_global_css', ''),
 			'globalCssCompiled' => get_option('pcss_global_css_compiled', ''),
+			'allowManualOverride' => defined('PATTERN_CSS_ALLOW_MANUAL_OVERRIDE'),
 		]) . ';',
 		'before'
 	);

readme.txt

@@ -132,6 +132,14 @@ Add this to functions.php:
 
 `define('PATTERN_CSS_SELECTOR_OVERRIDE', ['name' => 'foo', 'type' => 'type']);`
 
+= Can I manually set the class ID? =
+
+By default, class IDs are auto-generated. If you need to manually set or change a block's class ID (e.g. to match an existing class), you can enable this by adding the following constant to wp-config.php or functions.php:
+
+`define('PATTERN_CSS_ALLOW_MANUAL_OVERRIDE', true);`
+
+Once enabled, the ID field in the Advanced panel becomes editable. Type your desired class name and press "Apply" to save it. The value will be slugified automatically.
+
 == Screenshots ==
 
 1. Add styles not available in the editor (supoprts nesting)
@@ -142,6 +150,7 @@ Add this to functions.php:
 == Changelog ==
 
 = 1.5.5 - 2026-03-24 =
+- Added manual class ID override (opt-in via constant)
 - Warns when duplicate class IDs are detected in the editor
 - Prevents duplicate inline styles on the frontend
 - Switched to Biome for linting and formatting

src/components/BlockControl.tsx

@@ -16,6 +16,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/editor';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { cleanForSlug } from '@wordpress/url';
 import type { Warning as CssWarning } from 'lightningcss-wasm';
 import { addToClassList } from '../lib/classes';
 import { focusAtEndOfLine2 } from '../lib/dom';
@@ -73,14 +74,16 @@ export const BlockControl = (
 		const className = [
 			...new Set(
 				[
-					...existing.filter((c: string) => !c.startsWith('pcss-')),
+					...existing.filter((c: string) => c !== pcssClassId && !c.startsWith('pcss-')),
 					newId,
 				].filter(Boolean),
 			),
 		].join(' ');
 		setAttributes({ pcssClassId: newId, className });
+		setManualClassId(newId);
 	}, [existingClasses, setAttributes]);
 
+	const [manualClassId, setManualClassId] = useState(pcssClassId ?? '');
 	const [css, setCss] = useState(initialCss);
 	const [transformed, setTransformed] = useState<Uint8Array>();
 	const [compiled, setCompiled] = useState(compiledCss || '');
@@ -312,17 +315,43 @@ export const BlockControl = (
 							__('%s ID', 'pattern-css'),
 							'Pattern CSS',
 						)}
-						disabled
-						onChange={() => undefined}
-						value={pcssClassId ?? ''}
+						disabled={!window.patternCss?.allowManualOverride}
+						onChange={(value: string) => {
+							setManualClassId(value);
+						}}
+						value={manualClassId}
 					/>
-					<Button
-						variant="secondary"
-						className="-mt-2"
-						onClick={generateNewId}
-					>
-						{__('Generate New ID', 'pattern-css')}
-					</Button>
+					<div className="-mt-2 flex gap-2">
+						{window.patternCss?.allowManualOverride && manualClassId !== pcssClassId && (
+							<Button
+								variant="primary"
+								size="small"
+								onClick={() => {
+									const slug = cleanForSlug(manualClassId);
+									setManualClassId(slug);
+									const existing = existingClasses?.split(' ') || [];
+									const className = [
+										...new Set(
+											[
+												...existing.filter((c: string) => c !== pcssClassId),
+												slug,
+											].filter(Boolean),
+										),
+									].join(' ');
+									setAttributes({ pcssClassId: slug, className });
+								}}
+							>
+								{__('Apply', 'pattern-css')}
+							</Button>
+						)}
+						<Button
+							variant="secondary"
+							size="small"
+							onClick={generateNewId}
+						>
+							{__('Generate New ID', 'pattern-css')}
+						</Button>
+					</div>
 					<p className="text-md mt-2 text-gray-600">
 						{__(
 							"If there's a styling conflict with another block you can generate a new ID.",

src/types.ts

@@ -9,6 +9,7 @@ declare global {
 				type: string;
 				name: string;
 			};
+			allowManualOverride?: boolean;
 			globalCss: string;
 			globalCssCompiled: string;
 		};