@wordpress-gcb/fields 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress-gcb/fields",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "GCB typed-field controls, inspector renderer, and schema — decoupled from the WordPress plugin so any Gutenberg/headless editor can use them.",
   "license": "GPL-2.0-or-later",
   "homepage": "https://gutenbergcontrolblocks.com",
@@ -18,27 +18,29 @@
     "fields",
     "gcb"
   ],
-  "//type": "Intentionally NOT \"type\": \"module\" — the source is ESM syntax consumed by the host's bundler (wp-scripts/webpack), which handles extensionless relative imports. Marking it a strict ESM module would force fully-specified .js extensions on every import.",
-  "main": "./src/index.js",
+  "//build": "We PUBLISH compiled JS from dist/ (babel-transformed JSX), NOT raw src/. A published npm package shipping raw JSX breaks every consumer whose bundler excludes node_modules from babel (which is the default). src/ is the editable source; dist/ is what ships. Run `npm run build` before publishing — prepublishOnly enforces it.",
+  "main": "./dist/index.js",
   "exports": {
-    ".": "./src/index.js",
-    "./conditional-logic": "./src/conditional-logic.js"
+    ".": "./dist/index.js",
+    "./conditional-logic": "./dist/conditional-logic.js"
   },
   "files": [
-    "src"
+    "dist"
   ],
   "scripts": {
+    "build": "babel src --out-dir dist --copy-files",
+    "prepublishOnly": "npm run build",
     "test": "echo \"no tests yet\" && exit 0"
   },
   "//": "WordPress packages are provided by the host editor (externalised in wp-scripts builds) — peer deps, not bundled.",
   "peerDependencies": {
-    "@wordpress/components": ">=27",
-    "@wordpress/element": ">=5",
-    "@wordpress/i18n": ">=4",
-    "@wordpress/block-editor": ">=12",
     "@wordpress/api-fetch": ">=6",
+    "@wordpress/block-editor": ">=12",
     "@wordpress/blocks": ">=12",
+    "@wordpress/components": ">=27",
     "@wordpress/data": ">=9",
+    "@wordpress/element": ">=5",
+    "@wordpress/i18n": ">=4",
     "@wordpress/icons": ">=9"
   },
   "//deps": "Bundled because they are NOT part of the WordPress runtime: the rich-control libraries.",
@@ -46,9 +48,14 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@tiptap/react": "^3.23.6",
-    "@tiptap/starter-kit": "^3.23.6",
+    "@tiptap/extension-image": "^3.23.6",
     "@tiptap/extension-link": "^3.23.6",
-    "@tiptap/extension-image": "^3.23.6"
+    "@tiptap/react": "^3.23.6",
+    "@tiptap/starter-kit": "^3.23.6"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.29.7",
+    "@babel/core": "^7.29.7",
+    "@wordpress/babel-preset-default": "^8.48.0"
   }
 }

package/src/conditional-logic.js

@@ -1,77 +0,0 @@
-/**
- * Conditional logic — pure functions, no React, no @wordpress/* deps.
- *
- * Kept separate from inspector.js so unit tests can import without
- * pulling in the whole control library. Keep in sync with PHP mirror:
- *   includes/PostFields/Conditional.php
- *
- * Config shape on a control:
- *
- *   {
- *     conditionalLogic: {
- *       enabled:  true,
- *       operator: 'and' | 'or',           // default: 'and'
- *       rules: [
- *         { field: 'show_cta', operator: '==', value: true },
- *         { field: 'count',    operator: '>',  value: 0 },
- *       ],
- *     }
- *   }
- */
-
-// Structural control types (group, panel, tools-panel) render as panel
-// containers, not as fields. Exported so callers that walk the control
-// list can skip them consistently.
-export const STRUCTURAL_TYPES = new Set(['group', 'panel', 'tools-panel']);
-
-/**
- * Decide whether a control should render against the current attribute
- * values. A control with no `conditionalLogic` (or a disabled one) is
- * always rendered.
- */
-export function shouldRender(control, attributes) {
-	const cl = control.conditionalLogic;
-	if (!cl?.enabled || !Array.isArray(cl.rules) || cl.rules.length === 0) {
-		return true;
-	}
-	const op = cl.operator === 'or' ? 'or' : 'and';
-	const results = cl.rules.map((rule) => evalRule(rule, attributes));
-	return op === 'or' ? results.some(Boolean) : results.every(Boolean);
-}
-
-function evalRule(rule, attributes) {
-	const actual = attributes[rule.field];
-	switch (rule.operator) {
-		case '==': return actual == rule.value; // eslint-disable-line eqeqeq
-		case '!=': return actual != rule.value; // eslint-disable-line eqeqeq
-		case '>':  return Number.isFinite(Number(actual)) && Number.isFinite(Number(rule.value)) && Number(actual) >  Number(rule.value);
-		case '<':  return Number.isFinite(Number(actual)) && Number.isFinite(Number(rule.value)) && Number(actual) <  Number(rule.value);
-		case '>=': return Number.isFinite(Number(actual)) && Number.isFinite(Number(rule.value)) && Number(actual) >= Number(rule.value);
-		case '<=': return Number.isFinite(Number(actual)) && Number.isFinite(Number(rule.value)) && Number(actual) <= Number(rule.value);
-		case 'contains':
-			return typeof actual === 'string' && actual.includes(rule.value);
-		case 'in':
-			return Array.isArray(rule.value) && rule.value.includes(actual);
-		default:
-			return true;
-	}
-}
-
-/**
- * Walk controls and return the set of panel ids that contain at least one
- * control whose attributeKey appears in `errors`. Used by the meta-box to
- * auto-open panels that have validation errors.
- */
-export function panelsContainingErrors(controls, errors) {
-	const errorKeys = new Set(Object.keys(errors || {}));
-	if (errorKeys.size === 0) return new Set();
-
-	const ids = new Set();
-	for (const c of controls) {
-		if (STRUCTURAL_TYPES.has(c.type)) continue;
-		if (c.attributeKey && errorKeys.has(c.attributeKey) && c.parentPanelId) {
-			ids.add(c.parentPanelId);
-		}
-	}
-	return ids;
-}

package/src/controls/MediaPicker.js

@@ -1,139 +0,0 @@
-/**
- * MediaPicker — a `MediaUpload`-shaped component that works on any
- * admin screen.
- *
- * `@wordpress/block-editor`'s `MediaUpload` requires the `core/block-editor`
- * data store, which is only initialised on screens that bootstrap the
- * block editor itself (post.php, site-editor.php, widgets.php). On
- * profile.php, term.php, options.php — anywhere we mount our post-fields
- * bundle on a classic admin page — the store isn't there, so the
- * MediaUpload modal silently fails to open and the image / gallery /
- * file controls feel broken.
- *
- * This wrapper falls back to the lower-level `wp.media()` JS API on
- * non-editor screens. wp.media is what WP's own avatar uploader uses
- * and is loaded by wp_enqueue_media() — available on every admin page
- * we care about. It's not React; we wrap it in the same render-prop
- * shape MediaUpload exposes so callers don't need to know which path
- * they're on.
- *
- * Shape:
- *   <MediaPicker
- *     onSelect={(media) => …}           // single media object (or array)
- *     allowedTypes={['image']}
- *     value={123 | [123,124] | null}
- *     multiple={false}
- *     gallery={false}
- *     render={({ open }) => <button onClick={open}>Pick</button>}
- *   />
- */
-
-import { useContext } from '@wordpress/element';
-import { MediaUpload } from '@wordpress/block-editor';
-import { ControlContext } from '../control-context';
-
-/**
- * Translate a wp.media attachment model into the same plain object
- * @wordpress/block-editor's MediaUpload onSelect receives.
- */
-function toPlainAttachment(attachment) {
-	const a = attachment.toJSON ? attachment.toJSON() : attachment;
-	return {
-		id:               a.id,
-		url:              a.url,
-		alt:              a.alt || '',
-		title:            a.title || a.filename || '',
-		filename:         a.filename || '',
-		caption:          a.caption || '',
-		description:      a.description || '',
-		mime:             a.mime || a.type || '',
-		type:             a.type || '',
-		subtype:          a.subtype || '',
-		width:            a.width,
-		height:           a.height,
-		filesizeInBytes:  a.filesizeInBytes,
-		sizes:            a.sizes,
-	};
-}
-
-function openClassicMediaFrame({ allowedTypes, multiple, gallery, value, onSelect }) {
-	if (typeof window === 'undefined' || !window.wp || !window.wp.media) {
-		// eslint-disable-next-line no-console
-		console.warn('gcb-lite: wp.media not loaded — call wp_enqueue_media() on this screen.');
-		return;
-	}
-
-	// IMPORTANT: don't open directly into 'gallery-edit' — WP 7.0's
-	// media-views.js bootstraps menu/router state lazily, and asking for
-	// 'gallery-edit' before the menu state exists throws
-	// `Cannot read properties of undefined (reading 'get')` in
-	// setMenuTabPanelAriaAttributes. The supported gallery flow is to open
-	// the library with `multiple: true`, pre-select the existing images,
-	// and treat the result as a gallery on 'select'.
-	const isMulti = !!(gallery || multiple);
-
-	const frame = window.wp.media({
-		title:    gallery ? 'Edit gallery' : (isMulti ? 'Select media' : 'Select media'),
-		button:   { text: gallery ? 'Update gallery' : 'Use this media' },
-		library:  allowedTypes ? { type: allowedTypes } : undefined,
-		multiple: isMulti,
-	});
-
-	// Pre-select prior value so the user lands on the existing pick.
-	frame.on('open', () => {
-		const selection = frame.state().get('selection');
-		if (!selection) return;
-		const ids = Array.isArray(value) ? value : (value ? [value] : []);
-		ids.forEach((id) => {
-			if (!id) return;
-			const attachment = window.wp.media.attachment(id);
-			if (!attachment) return;
-			attachment.fetch();
-			selection.add([attachment]);
-		});
-	});
-
-	frame.on('select', () => {
-		const selection = frame.state().get('selection');
-		if (!selection) return;
-		const picks = selection.toArray().map(toPlainAttachment);
-		if (isMulti) {
-			onSelect(picks);
-		} else {
-			onSelect(picks[0] || null);
-		}
-	});
-
-	frame.open();
-}
-
-/**
- * Decide which backend to use based on render surface:
- *
- * - Block Inspector ('sidebar' variant): MediaUpload from
- *   @wordpress/block-editor. That's the right tool inside the block
- *   editor — it integrates with the editor's upload flow + capability
- *   store.
- *
- * - Post-fields meta-box / Options / Taxonomy / User pages
- *   ('metabox' variant): wp.media() directly. These screens often DON'T
- *   bootstrap the block editor (we strip 'editor' support from
- *   field-only CPTs), and MediaUpload silently renders nothing when the
- *   editor stores aren't fully initialised. wp.media() is the lower-
- *   level JS API loaded by wp_enqueue_media() — works on any admin page.
- *
- * Surface decision is made via ControlContext, which post-fields.js
- * sets to 'metabox' and the block Inspector leaves at 'sidebar'.
- */
-export default function MediaPicker(props) {
-	const ctx = useContext(ControlContext);
-
-	if (ctx.variant !== 'metabox') {
-		return <MediaUpload {...props} />;
-	}
-
-	// Metabox surface — synthesize the same render-prop shape with a
-	// wp.media() backend.
-	const open = () => openClassicMediaFrame(props);
-	return props.render ? props.render({ open }) : null;
-}

package/src/controls/MediaTriggerBadges.js

@@ -1,31 +0,0 @@
-/**
- * MediaTriggerBadges — places an inline clear (×) button to the right of
- * a media-control toggle. Used by ImageField and FileField on the metabox
- * surface. Edit affordance isn't needed — clicking the trigger itself
- * opens the picker/popover.
- */
-
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-
-// Default sizing is content-width (inline-flex). In sidebar / Inspector
-// contexts an external rule promotes it to full-width — see editor.scss
-// "Sidebar / Inspector surface: media trigger fills width".
-export default function MediaTriggerBadges({ children, onClear, hideClear }) {
-	return (
-		<span className="gcb-media-trigger-badges">
-			{children}
-			{!hideClear && (
-				<Button
-					variant="tertiary"
-					isDestructive
-					onClick={(e) => { e.stopPropagation(); e.preventDefault(); onClear?.(); }}
-					aria-label={__('Clear', 'gcblite')}
-					title={__('Clear', 'gcblite')}
-				>
-					✕
-				</Button>
-			)}
-		</span>
-	);
-}

package/src/controls/SortableItem.js

@@ -1,110 +0,0 @@
-/**
- * Sortable item — ported from the original GCB SortableItemComponent.
- *
- * Used by gallery, post-object (and any other future multi-select reorderable
- * field) to render a draggable row with handle, title, and remove button.
- */
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { __ } from '@wordpress/i18n';
-
-const ICONS = {
-	post: {
-		viewBox: '0 0 24 24',
-		path: (
-			<>
-				<path d="M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z" />
-				<path d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z" />
-			</>
-		),
-	},
-	tag: {
-		viewBox: '0 0 24 24',
-		path: <path d="M12.5 4.5h-2v7h7v-2l-5-5zm-2.5 8.5v5h2v-5h-2zm5 5h2v-5h-2v5z" />,
-	},
-	image: {
-		viewBox: '0 0 24 24',
-		path: <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" />,
-	},
-};
-
-export default function SortableItem({ item, onRemove, icon = 'post', getTitle, thumb }) {
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({ id: item.id });
-
-	const style = {
-		transform: CSS.Transform.toString(transform),
-		transition,
-		opacity: isDragging ? 0.5 : 1,
-	};
-
-	const selectedIcon = ICONS[icon] || ICONS.post;
-
-	return (
-		<div
-			ref={setNodeRef}
-			style={style}
-			className="gcb-sortable-item"
-			{...attributes}
-			{...listeners}
-		>
-			<div className="gcb-sortable-drag-handle" aria-hidden>
-				<svg viewBox="0 0 20 20" width="12">
-					<path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" />
-				</svg>
-			</div>
-
-			{thumb ? (
-				<img
-					src={thumb}
-					alt=""
-					style={{
-						width: 28, height: 28, borderRadius: 2, objectFit: 'cover',
-						marginRight: 8, flexShrink: 0, border: '1px solid #ddd',
-					}}
-				/>
-			) : (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox={selectedIcon.viewBox}
-					width="20"
-					height="20"
-					style={{ marginRight: 8, flexShrink: 0, opacity: 0.6 }}
-				>
-					{selectedIcon.path}
-				</svg>
-			)}
-
-			<span style={{
-				flex: 1,
-				overflow: 'hidden',
-				textOverflow: 'ellipsis',
-				whiteSpace: 'nowrap',
-				userSelect: 'none',
-			}}>
-				{getTitle ? getTitle(item) : (item.title?.rendered || item.name || __('(no title)', 'gcblite'))}
-			</span>
-
-			<button
-				type="button"
-				onClick={(e) => {
-					e.stopPropagation();
-					onRemove(item.id);
-				}}
-				onPointerDown={(e) => e.stopPropagation()}
-				className="gcb-sortable-remove"
-				aria-label={__('Remove', 'gcblite')}
-			>
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
-					<path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z" />
-				</svg>
-			</button>
-		</div>
-	);
-}

package/src/controls/button-group.js

@@ -1,49 +0,0 @@
-/**
- * ButtonGroup — multi-select shown as a row of toggle buttons. Each option
- * looks like a pressable button; clicking toggles it on/off.
- *
- * Stored shape: array of selected values, same as checkbox-group.
- *   ['apple', 'cherry']
- *
- * Why not alias checkbox-group? Checkbox-group is checkboxes-in-a-column
- * (vertical, ☑ ☐ ☐). ButtonGroup is buttons-in-a-row (horizontal, compact,
- * visually weightier). Same data shape, different affordance.
- *
- * For single-select segmented controls use `toggle-group` instead.
- */
-
-import { BaseControl, Button, __experimentalHStack as HStack } from '@wordpress/components';
-
-export default function ButtonGroupField({ control, value, onChange }) {
-	const current = Array.isArray(value) ? value : [];
-
-	return (
-		<BaseControl
-			label={control.label}
-			help={control.helpText}
-			className="gcb-button-group-control components-base-control"
-			__nextHasNoMarginBottom
-		>
-			<HStack spacing={1} justify="flex-start" wrap>
-				{(control.options || []).map((option) => {
-					const isOn = current.includes(option.value);
-					return (
-						<Button
-							key={option.value}
-							variant={isOn ? 'primary' : 'secondary'}
-							onClick={() => {
-								const next = isOn
-									? current.filter((v) => v !== option.value)
-									: [...current, option.value];
-								onChange(next);
-							}}
-							aria-pressed={isOn}
-						>
-							{option.label}
-						</Button>
-					);
-				})}
-			</HStack>
-		</BaseControl>
-	);
-}

package/src/controls/checkbox-group.js

@@ -1,55 +0,0 @@
-/**
- * CheckboxGroup — multi-select stored as an array of selected values.
- */
-export default function CheckboxGroupField({ control, value, onChange }) {
-	const current = Array.isArray(value) ? value : [];
-
-	return (
-		<div className="components-base-control gcb-checkbox-group-control">
-			<div className="components-base-control__field">
-				<label className="components-base-control__label">{control.label}</label>
-				<div style={{
-					display: 'flex',
-					alignItems: 'stretch',
-					flexDirection: 'column',
-					gap: 6,
-					justifyContent: 'center',
-				}}>
-					{(control.options || []).map((option, index) => {
-						const isChecked = current.includes(option.value);
-						const id = `gcb-checkbox-${control.id || control.attributeKey}-${option.value}-${index}`;
-
-						return (
-							<div key={`${control.id || control.attributeKey}-${option.value}`} className="gcb-checkbox-item">
-								<label htmlFor={id} style={{
-									display: 'flex',
-									alignItems: 'center',
-									gap: 8,
-									cursor: 'pointer',
-									fontSize: 13,
-								}}>
-									<input
-										type="checkbox"
-										id={id}
-										checked={isChecked}
-										onChange={(e) => {
-											const next = e.target.checked
-												? [...current, option.value]
-												: current.filter((v) => v !== option.value);
-											onChange(next);
-										}}
-										style={{ width: 16, height: 16, cursor: 'pointer' }}
-									/>
-									<span>{option.label}</span>
-								</label>
-							</div>
-						);
-					})}
-				</div>
-			</div>
-			{control.helpText && (
-				<p className="components-base-control__help">{control.helpText}</p>
-			)}
-		</div>
-	);
-}

package/src/controls/checkbox.js

@@ -1,13 +0,0 @@
-import { CheckboxControl } from '@wordpress/components';
-
-export default function CheckboxField({ control, value, onChange }) {
-	return (
-		<CheckboxControl
-			label={control.label}
-			help={control.helpText}
-			checked={!!value}
-			onChange={onChange}
-			__nextHasNoMarginBottom
-		/>
-	);
-}

package/src/controls/code.js

@@ -1,21 +0,0 @@
-import { TextareaControl } from '@wordpress/components';
-
-/**
- * Minimal code field — a monospace textarea. The original plugin used CodeMirror
- * here; we can swap in once basic shape is proven. For now, monospace + tab-friendly
- * is good enough for snippets.
- */
-export default function CodeField({ control, value, onChange }) {
-	return (
-		<TextareaControl
-			label={control.label}
-			help={control.helpText}
-			placeholder={control.placeholder}
-			value={value ?? ''}
-			onChange={onChange}
-			rows={control.rows ?? 8}
-			className="gcblite-code-field"
-			__nextHasNoMarginBottom
-		/>
-	);
-}