@wordpress-gcb/fields 0.2.1 → 0.2.3

package/src/controls/richtext.js

@@ -1,505 +0,0 @@
-/**
- * RichtextField — modern alternative to the `wysiwyg` (TinyMCE) control.
- *
- * Built on Tiptap (ProseMirror under the hood). Lighter, no jQuery, no
- * global state — fits the rest of the Inspector model where every
- * control is a self-contained React component.
- *
- * Stored shape: HTML string (e.g. `<p>Hello <strong>world</strong></p>`).
- * Compatible with WP's standard wp_kses() flow and any frontend that
- * renders HTML via dangerouslySetInnerHTML.
- *
- * Why TWO rich-text controls? The existing `wysiwyg` control wraps
- * wp_editor() / TinyMCE — it's what authors expect on every WordPress
- * install and we keep it for backwards compat. `richtext` is the new
- * default for themes that don't need TinyMCE-era plugin compatibility
- * and want a smaller, more modern editor.
- *
- * Toolbar uses @wordpress/components so it visually matches the rest
- * of our Inspector. Image button opens wp.media() and inserts an <img>
- * referencing the existing media library — same lower-level API as
- * MediaPicker, no @wordpress/block-editor dependency required (works
- * on any admin screen).
- */
-
-import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useContext } from '@wordpress/element';
-import {
-	Button,
-	Icon,
-	Modal,
-	Popover,
-	TextControl,
-} from '@wordpress/components';
-import { ControlContext } from '../control-context';
-import PopoverOrModal from './PopoverOrModal';
-import {
-	formatBold,
-	formatItalic,
-	formatStrikethrough,
-	formatListBullets,
-	formatListNumbered,
-	code as codeIcon,
-	quote as quoteIcon,
-	link as linkIcon,
-	image as imageIcon,
-	undo as undoIcon,
-	redo as redoIcon,
-	pencil as editIcon,
-} from '@wordpress/icons';
-import { useEditor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import Link from '@tiptap/extension-link';
-import Image from '@tiptap/extension-image';
-
-/**
- * Open wp.media() and resolve with the picked image. Same wp.media
- * API our MediaPicker shim uses — no @wordpress/block-editor required.
- */
-function pickImageFromMedia() {
-	return new Promise((resolve) => {
-		if (typeof window === 'undefined' || !window.wp?.media) {
-			// eslint-disable-next-line no-console
-			console.warn('gcb-lite: wp.media not loaded — call wp_enqueue_media() on this screen.');
-			resolve(null);
-			return;
-		}
-		const frame = window.wp.media({
-			title: __('Insert image', 'gcblite'),
-			button: { text: __('Insert image', 'gcblite') },
-			library: { type: ['image'] },
-			multiple: false,
-		});
-		frame.on('select', () => {
-			const a = frame.state().get('selection').first()?.toJSON();
-			resolve(a || null);
-		});
-		frame.on('close', () => resolve(null));
-		frame.open();
-	});
-}
-
-function ToolbarSeparator() {
-	return (
-		<span aria-hidden style={{
-			display: 'inline-block',
-			width: 1,
-			height: 24,
-			background: '#ddd',
-			margin: '0 4px',
-			alignSelf: 'center',
-		}} />
-	);
-}
-
-/**
- * Toolbar button. Uses @wordpress/icons so the toolbar visually
- * matches the rest of WP admin (block-editor toolbar, post-meta
- * controls, etc.). The icon prop on @wordpress/components Button
- * renders the SVG at WP's standard 24×24.
- */
-function TbButton({ icon, label, isPressed, disabled, onClick }) {
-	return (
-		<Button
-			icon={icon}
-			label={label}
-			showTooltip
-			onClick={onClick}
-			disabled={disabled}
-			aria-pressed={isPressed}
-			className="gcb-richtext-toolbar__btn"
-		/>
-	);
-}
-
-function LinkPopover({ editor, anchor, onClose }) {
-	const initial = editor.getAttributes('link').href || '';
-	const [url, setUrl] = useState(initial);
-
-	const apply = () => {
-		if (!url) {
-			editor.chain().focus().unsetLink().run();
-		} else {
-			editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
-		}
-		onClose();
-	};
-
-	return (
-		<Popover anchor={anchor} onClose={onClose} placement="bottom-start">
-			<div style={{ padding: 12, minWidth: 280 }}>
-				<TextControl
-					label={__('Link URL', 'gcblite')}
-					value={url}
-					onChange={setUrl}
-					placeholder="https://example.com"
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-				/>
-				<div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
-					<Button variant="primary" onClick={apply}>{__('Apply', 'gcblite')}</Button>
-					{initial && (
-						<Button
-							variant="tertiary"
-							onClick={() => {
-								editor.chain().focus().unsetLink().run();
-								onClose();
-							}}
-						>
-							{__('Remove', 'gcblite')}
-						</Button>
-					)}
-				</div>
-			</div>
-		</Popover>
-	);
-}
-
-function Toolbar({ editor, control }) {
-	const [linkPopoverAnchor, setLinkPopoverAnchor] = useState(null);
-
-	if (!editor) return null;
-
-	const headingLevels = control.headingLevels || [2, 3, 4];
-	// Build heading select options. 'p' is paragraph (no heading).
-	const headingValue = editor.isActive('heading', { level: headingLevels[0] })
-		? `h${headingLevels[0]}`
-		: editor.isActive('heading', { level: headingLevels[1] })
-		? `h${headingLevels[1]}`
-		: editor.isActive('heading', { level: headingLevels[2] })
-		? `h${headingLevels[2]}`
-		: 'p';
-
-	const setHeading = (val) => {
-		if (val === 'p') {
-			editor.chain().focus().setParagraph().run();
-		} else {
-			const level = parseInt(val.slice(1), 10);
-			editor.chain().focus().toggleHeading({ level }).run();
-		}
-	};
-
-	const insertImage = async () => {
-		const img = await pickImageFromMedia();
-		if (!img?.url) return;
-		editor.chain().focus().setImage({ src: img.url, alt: img.alt || '' }).run();
-	};
-
-	return (
-		<div className="gcb-richtext-toolbar" style={{
-			display: 'flex',
-			flexWrap: 'wrap',
-			alignItems: 'center',
-			gap: 2,
-			padding: 6,
-			// Light border — the surface should feel calm. Matches the
-			// editor body below; their shared edge (toolbar-bottom +
-			// body-top) collapses to one line.
-			border: '1px solid #ddd',
-			borderBottom: '1px solid #ddd',
-			background: '#fff',
-			borderRadius: '8px 8px 0 0',
-		}}>
-			{/* Block-type select */}
-			<select
-				value={headingValue}
-				onChange={(e) => setHeading(e.target.value)}
-				className="gcb-richtext-block-select"
-				aria-label={__('Text style', 'gcblite')}
-			>
-				<option value="p">{__('Paragraph', 'gcblite')}</option>
-				{headingLevels.map((l) => (
-					<option key={l} value={`h${l}`}>{`Heading ${l}`}</option>
-				))}
-			</select>
-
-			<ToolbarSeparator />
-
-			<TbButton
-				icon={formatBold}
-				label={__('Bold', 'gcblite')}
-				isPressed={editor.isActive('bold')}
-				onClick={() => editor.chain().focus().toggleBold().run()}
-			/>
-			<TbButton
-				icon={formatItalic}
-				label={__('Italic', 'gcblite')}
-				isPressed={editor.isActive('italic')}
-				onClick={() => editor.chain().focus().toggleItalic().run()}
-			/>
-			<TbButton
-				icon={formatStrikethrough}
-				label={__('Strikethrough', 'gcblite')}
-				isPressed={editor.isActive('strike')}
-				onClick={() => editor.chain().focus().toggleStrike().run()}
-			/>
-			<TbButton
-				icon={codeIcon}
-				label={__('Inline code', 'gcblite')}
-				isPressed={editor.isActive('code')}
-				onClick={() => editor.chain().focus().toggleCode().run()}
-			/>
-
-			<ToolbarSeparator />
-
-			<TbButton
-				icon={formatListBullets}
-				label={__('Bulleted list', 'gcblite')}
-				isPressed={editor.isActive('bulletList')}
-				onClick={() => editor.chain().focus().toggleBulletList().run()}
-			/>
-			<TbButton
-				icon={formatListNumbered}
-				label={__('Numbered list', 'gcblite')}
-				isPressed={editor.isActive('orderedList')}
-				onClick={() => editor.chain().focus().toggleOrderedList().run()}
-			/>
-			<TbButton
-				icon={quoteIcon}
-				label={__('Blockquote', 'gcblite')}
-				isPressed={editor.isActive('blockquote')}
-				onClick={() => editor.chain().focus().toggleBlockquote().run()}
-			/>
-
-			<ToolbarSeparator />
-
-			<TbButton
-				icon={linkIcon}
-				label={__('Link', 'gcblite')}
-				isPressed={editor.isActive('link')}
-				onClick={(e) => setLinkPopoverAnchor(e.currentTarget)}
-			/>
-			{control.allowImages !== false && (
-				<TbButton
-					icon={imageIcon}
-					label={__('Insert image', 'gcblite')}
-					onClick={insertImage}
-				/>
-			)}
-
-			<ToolbarSeparator />
-
-			<TbButton
-				icon={undoIcon}
-				label={__('Undo', 'gcblite')}
-				onClick={() => editor.chain().focus().undo().run()}
-				disabled={!editor.can().undo()}
-			/>
-			<TbButton
-				icon={redoIcon}
-				label={__('Redo', 'gcblite')}
-				onClick={() => editor.chain().focus().redo().run()}
-				disabled={!editor.can().redo()}
-			/>
-
-			{linkPopoverAnchor && (
-				<LinkPopover
-					editor={editor}
-					anchor={linkPopoverAnchor}
-					onClose={() => setLinkPopoverAnchor(null)}
-				/>
-			)}
-		</div>
-	);
-}
-
-/**
- * Strip a chunk of HTML down to a plain-text preview for the
- * collapsed button in sidebar variant. No DOMParser — we run inside
- * the block-editor JS bundle which has access to document, but a
- * regex-based strip is plenty for a short summary line.
- */
-function htmlToPreview(html, limit = 80) {
-	if (!html) return '';
-	const text = String(html)
-		.replace(/<[^>]+>/g, ' ')
-		.replace(/&nbsp;/g, ' ')
-		.replace(/\s+/g, ' ')
-		.trim();
-	if (text.length <= limit) return text;
-	return text.slice(0, limit - 1) + '…';
-}
-
-/**
- * The actual Tiptap editor surface — toolbar + EditorContent. Used
- * inline on wide surfaces (meta-box, options page) and inside a Modal
- * on the narrow block Inspector sidebar.
- */
-function RichtextEditorSurface({ editor, control }) {
-	if (!editor) return null;
-	return (
-		<>
-			<Toolbar editor={editor} control={control} />
-			<EditorContent editor={editor} className="gcb-richtext-editor" />
-		</>
-	);
-}
-
-/**
- * Resolve the display mode for the field. Authors can pin a specific
- * mode via control.display ('inline' | 'popover' | 'modal'); otherwise
- * we pick the best fit for the surface:
- *   - sidebar variant (narrow ~280px block Inspector) → 'popover' so
- *     the editor hangs off to the side, leaving the canvas visible
- *     for live preview of edits
- *   - metabox/wide variants → 'inline' (toolbar + editor fit fine)
- */
-function resolveDisplay(control, ctx) {
-	if (control.display && ['inline', 'popover', 'modal'].includes(control.display)) {
-		return control.display;
-	}
-	if (ctx?.variant === 'sidebar') return 'popover';
-	return 'inline';
-}
-
-export default function RichtextField({ control, value, onChange }) {
-	const ctx = useContext(ControlContext);
-	const display = resolveDisplay(control, ctx);
-	const headingLevels = control.headingLevels || [2, 3, 4];
-
-	const [modalOpen, setModalOpen] = useState(false);
-
-	const editor = useEditor({
-		extensions: [
-			StarterKit.configure({
-				// Disable headings here; we'll re-add only the levels the
-				// theme has allowed so the toolbar select stays in sync.
-				heading: { levels: headingLevels },
-			}),
-			Link.configure({
-				openOnClick: false,
-				HTMLAttributes: { rel: 'noopener noreferrer' },
-			}),
-			Image.configure({
-				HTMLAttributes: { class: 'gcb-richtext-image' },
-			}),
-		],
-		content: value || '',
-		onUpdate: ({ editor: ed }) => {
-			const html = ed.getHTML();
-			// Tiptap returns "<p></p>" for an empty document. Normalise
-			// to '' so validation's required-check still triggers on
-			// truly-empty input.
-			onChange(html === '<p></p>' ? '' : html);
-		},
-	});
-
-	// Sync external value changes (e.g. value reset, conditional logic
-	// swap) without re-triggering onUpdate.
-	useEffect(() => {
-		if (!editor) return;
-		const current = editor.getHTML();
-		const incoming = value || '';
-		if (current === incoming) return;
-		if (current === '<p></p>' && incoming === '') return;
-		editor.commands.setContent(incoming, false);
-	}, [value, editor]);
-
-	// Popover or Modal: collapsed button + opens the editor in an
-	// overlay. Popover (default for sidebar) anchors to the side of
-	// the field, leaving the canvas visible for live-update editing.
-	// Modal is for surfaces where you want focus-mode authoring and
-	// don't mind covering the canvas.
-	if (display === 'popover' || display === 'modal') {
-		const preview = htmlToPreview(value);
-		const triggerButton = ({ onToggle, isOpen }) => (
-			<Button
-				onClick={onToggle}
-				aria-expanded={isOpen}
-				className="gcb-richtext-control__open"
-			>
-				<span className="gcb-richtext-control__open-text">
-					{preview || control.placeholder || __('Edit rich text…', 'gcblite')}
-				</span>
-				<Icon icon={editIcon} size={20} className="gcb-richtext-control__open-icon" />
-			</Button>
-		);
-
-		const editorPanel = ({ close, variant }) => (
-			<div
-				className={`gcb-richtext-control__panel gcb-richtext-control__panel--${variant}`}
-			>
-				<RichtextEditorSurface editor={editor} control={control} />
-			</div>
-		);
-
-		// For 'modal' mode, force PopoverOrModal into modal by mounting
-		// inside a metabox-flavoured ControlContext. (PopoverOrModal
-		// dispatches purely on ctx.variant.) Pinning it explicitly
-		// keeps the per-field opt-in honest regardless of where the
-		// control is used.
-		if (display === 'modal') {
-			return (
-				<div className="components-base-control gcb-richtext-control gcb-richtext-control--popout">
-					<div className="components-base-control__field">
-						{control.label && (
-							<label className="components-base-control__label">
-								{control.label}
-							</label>
-						)}
-						<ControlContext.Provider value={{ variant: 'metabox' }}>
-							<PopoverOrModal
-								modalTitle={control.label || __('Edit rich text', 'gcblite')}
-								modalSize="large"
-								renderToggle={triggerButton}
-								renderContent={editorPanel}
-							/>
-						</ControlContext.Provider>
-					</div>
-					{control.helpText && (
-						<p className="components-base-control__help">{control.helpText}</p>
-					)}
-				</div>
-			);
-		}
-
-		// Popover variant — used by default in sidebar. PopoverOrModal
-		// reads the surrounding variant, which is 'sidebar' here, so
-		// it'll render as a Dropdown popover anchored to the trigger.
-		return (
-			<div className="components-base-control gcb-richtext-control gcb-richtext-control--popout">
-				<div className="components-base-control__field">
-					{control.label && (
-						<label className="components-base-control__label">
-							{control.label}
-						</label>
-					)}
-					<PopoverOrModal
-						modalTitle={control.label || __('Edit rich text', 'gcblite')}
-						modalSize="large"
-						dropdownProps={{
-							popoverProps: {
-								placement: 'left-start',
-								className: 'gcb-richtext-control__popover',
-							},
-						}}
-						renderToggle={triggerButton}
-						renderContent={editorPanel}
-					/>
-				</div>
-				{control.helpText && (
-					<p className="components-base-control__help">{control.helpText}</p>
-				)}
-			</div>
-		);
-	}
-
-	// Inline variant (default on wide surfaces: meta-box, options,
-	// taxonomy, user-profile). Toolbar + editor render directly into
-	// the field — no overlay.
-	return (
-		<div className="components-base-control gcb-richtext-control">
-			<div className="components-base-control__field">
-				{control.label && (
-					<label className="components-base-control__label">
-						{control.label}
-					</label>
-				)}
-				<RichtextEditorSurface editor={editor} control={control} />
-			</div>
-			{control.helpText && (
-				<p className="components-base-control__help">{control.helpText}</p>
-			)}
-		</div>
-	);
-}

package/src/controls/select.js

@@ -1,141 +0,0 @@
-/**
- * SelectField — ported from the original GCB SelectField.js verbatim.
- *
- * Supports plain {label, value} options, legacy `map` configs, and full
- * `tokenGroup` binding to theme.json tokens (with optional tokenKeys filter
- * and defaultOptionKey). When tokenGroup is set, the saved value is the
- * full token object { key, slug, value, cssVar } rather than a string.
- */
-
-import { __ } from '@wordpress/i18n';
-import { SelectControl, Spinner } from '@wordpress/components';
-import { parseMap, getTokenFromKey, getKeyFromToken, mapToOptions } from '../utils/map-utils';
-import { useTokens, getTokensByGroup, generateMapFromTokens } from '../hooks/useTokens';
-
-function SelectFieldImpl({
-	label,
-	value,
-	options = [],
-	onChange,
-	help,
-	className = '',
-	map,
-	tokenGroup,
-	tokenKeys,
-	defaultOptionKey,
-	placeholder,
-}) {
-	const { tokens, loading } = useTokens();
-
-	let groupTokens = null;
-	let normalizedMap = null;
-
-	if (tokenGroup && tokens) {
-		groupTokens = getTokensByGroup(tokens, tokenGroup);
-		if (groupTokens && tokenKeys && Array.isArray(tokenKeys) && tokenKeys.length > 0) {
-			groupTokens = groupTokens.filter((t) => tokenKeys.includes(t.key));
-		}
-		if (groupTokens) {
-			const generatedMap = generateMapFromTokens(groupTokens);
-			normalizedMap = generatedMap ? parseMap(generatedMap) : null;
-		}
-	} else if (map) {
-		normalizedMap = parseMap(map);
-	}
-
-	if (tokenGroup && loading) {
-		return (
-			<div style={{ padding: '12px 0' }}>
-				<div style={{ fontWeight: 500, marginBottom: '8px' }}>{label}</div>
-				<Spinner />
-			</div>
-		);
-	}
-
-	let effectiveOptions = normalizedMap ? mapToOptions(normalizedMap) : options;
-
-	// Add a clearing/placeholder option if no default is set, so users can pick blank.
-	if (!defaultOptionKey && !effectiveOptions.some((o) => o.value === '')) {
-		effectiveOptions = [
-			{ label: '— ' + (placeholder || __('Select', 'gcblite')) + ' —', value: '' },
-			...effectiveOptions,
-		];
-	}
-
-	// Apply default if value is empty.
-	if ((value === undefined || value === null || value === '') && defaultOptionKey && tokenGroup && groupTokens) {
-		const defaultToken = groupTokens.find((t) => t.key === defaultOptionKey);
-		if (defaultToken && onChange) {
-			const defaultValue = {
-				key: defaultToken.key,
-				slug: defaultToken.slug,
-				value: defaultToken.value,
-				cssVar: defaultToken.cssVar,
-			};
-			onChange(defaultValue);
-		}
-	}
-
-	let displayValue = value;
-	if (typeof value === 'object' && value !== null) {
-		displayValue = value.key !== undefined ? value.key : '';
-	} else if (normalizedMap && value !== undefined && value !== null && value !== '') {
-		displayValue = getKeyFromToken(normalizedMap, value) || value;
-	}
-	if ((displayValue === undefined || displayValue === null || displayValue === '') && defaultOptionKey) {
-		displayValue = defaultOptionKey;
-	}
-
-	const handleChange = (newOptionKey) => {
-		let finalValue = newOptionKey;
-
-		if (tokenGroup && groupTokens) {
-			const selected = groupTokens.find((t) => t.key === newOptionKey);
-			if (selected) {
-				finalValue = {
-					key: selected.key,
-					slug: selected.slug,
-					value: selected.value,
-					cssVar: selected.cssVar,
-				};
-			}
-		} else if (normalizedMap) {
-			finalValue = getTokenFromKey(normalizedMap, newOptionKey);
-		}
-
-		if (onChange) onChange(finalValue);
-	};
-
-	return (
-		<SelectControl
-			label={label}
-			value={displayValue ?? ''}
-			options={effectiveOptions}
-			onChange={handleChange}
-			help={help}
-			className={className}
-			__nextHasNoMarginBottom
-		/>
-	);
-}
-
-/**
- * Adapter: maps the registry's `{ control, value, onChange }` contract onto
- * SelectFieldImpl's flat-prop contract.
- */
-export default function SelectField({ control, value, onChange }) {
-	return (
-		<SelectFieldImpl
-			label={control.label}
-			value={value}
-			options={(control.options || []).map((o) => ({ label: o.label, value: o.value }))}
-			onChange={onChange}
-			help={control.helpText}
-			placeholder={control.placeholder}
-			map={control.map}
-			tokenGroup={control.tokenGroup}
-			tokenKeys={control.tokenKeys}
-			defaultOptionKey={control.defaultOptionKey ?? control.default}
-		/>
-	);
-}

package/src/controls/size.js

@@ -1,49 +0,0 @@
-/**
- * Size — dimension with a unit selector.
- *
- * Stored shape: a CSS length string with unit, e.g. `'16px'`, `'1.5rem'`,
- * `'100%'`. Empty string when not set.
- *
- * Supported units: px, em, rem, %, vh, vw.
- *
- * In a React component you can pass the value directly to `style.width`,
- * `style.height`, `style.padding`, etc. — it's already a valid CSS length.
- */
-import { __experimentalUnitControl as UnitControl, TextControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-const UNITS = [
-	{ value: 'px',  label: 'px' },
-	{ value: 'em',  label: 'em' },
-	{ value: 'rem', label: 'rem' },
-	{ value: '%',   label: '%' },
-	{ value: 'vh',  label: 'vh' },
-	{ value: 'vw',  label: 'vw' },
-];
-
-export default function SizeField({ control, value, onChange }) {
-	if (UnitControl) {
-		return (
-			<UnitControl
-				label={control.label}
-				value={value || ''}
-				onChange={onChange}
-				units={UNITS}
-				help={control.helpText}
-				__nextHasNoMarginBottom
-			/>
-		);
-	}
-
-	// Fallback when UnitControl isn't available — manual entry.
-	return (
-		<TextControl
-			label={control.label}
-			value={value || ''}
-			onChange={onChange}
-			placeholder="e.g. 16px, 1em, 100%"
-			help={control.helpText || __('Enter a size with unit (px, em, rem, %, vh, vw)', 'gcblite')}
-			__nextHasNoMarginBottom
-		/>
-	);
-}