@wordpress-gcb/fields 0.2.0 → 0.2.2

package/src/controls/color.js

@@ -1,235 +0,0 @@
-/**
- * ColorField — ported verbatim from the original GCB.
- * Tabbed color/gradient picker that uses theme.json palettes via useSetting.
- *
- * Control config can opt out of gradients with `showGradients: false`.
- * For dual-attribute mode (separate color + gradient attrs), set
- * `gradientAttributeKey` on the control config.
- */
-
-import { __ } from '@wordpress/i18n';
-import {
-	BaseControl,
-	Button,
-	ColorPalette,
-	GradientPicker,
-	TabPanel,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
-import { useSetting } from '@wordpress/block-editor';
-import PopoverOrModal from './PopoverOrModal';
-
-/**
- * The popover contents — palette + (optional) gradient tab.
- */
-function ColorPanel({
-	colorValue,
-	gradientValue,
-	onColorChange,
-	onGradientChange,
-	colors,
-	gradients,
-	enableAlpha,
-	disableCustomColors,
-	disableCustomGradients,
-	showGradients,
-}) {
-	const palette = (
-		<>
-			<ColorPalette
-				colors={colors}
-				value={colorValue}
-				onChange={onColorChange}
-				clearable
-				disableCustomColors={disableCustomColors}
-				enableAlpha={enableAlpha}
-			/>
-			{colorValue && (
-				<Button variant="secondary" onClick={() => onColorChange('')} style={{ marginTop: 10 }}>
-					{__('Reset Color', 'gcblite')}
-				</Button>
-			)}
-		</>
-	);
-
-	if (!showGradients) {
-		return <div style={{ minWidth: 260, padding: 12 }}>{palette}</div>;
-	}
-
-	return (
-		<div style={{ minWidth: 260, padding: 12 }}>
-			<TabPanel
-				className="gcb-color-field-tabs"
-				activeClass="is-active"
-				tabs={[
-					{ name: 'color', title: __('Color', 'gcblite'), className: 'tab-color' },
-					{ name: 'gradient', title: __('Gradient', 'gcblite'), className: 'tab-gradient' },
-				]}
-			>
-				{(tab) => (
-					<>
-						{tab.name === 'color' && palette}
-						{tab.name === 'gradient' && (
-							<>
-								<GradientPicker
-									value={gradientValue || undefined}
-									onChange={(next) => onGradientChange(next || '')}
-									gradients={gradients || []}
-									clearable
-									disableCustomGradients={disableCustomGradients}
-									__experimentalIsRenderedInSidebar
-								/>
-								{gradientValue && (
-									<Button
-										variant="secondary"
-										onClick={() => onGradientChange('')}
-										style={{ marginTop: 10 }}
-									>
-										{__('Reset Gradient', 'gcblite')}
-									</Button>
-								)}
-							</>
-						)}
-					</>
-				)}
-			</TabPanel>
-		</div>
-	);
-}
-
-/**
- * The trigger swatch — large white tile with a colour swatch on the left,
- * the resolved value (or label) on the right. Same "popout" pattern as the
- * image / post-object controls.
- */
-function ColorTrigger({ label, colorValue, gradientValue, onToggle, isOpen }) {
-	const hasValue = !!(colorValue || gradientValue);
-	const swatchBackground = gradientValue || colorValue || 'transparent';
-	const isCheckered = !hasValue;
-
-	return (
-		<Button
-			onClick={onToggle}
-			aria-expanded={isOpen}
-			aria-label={label}
-			className="gcb-modal-toggle-button gcb-color-trigger"
-		>
-			<HStack spacing={3}>
-				<span
-					aria-hidden
-					className={isCheckered ? 'gcb-color-trigger__swatch is-empty' : 'gcb-color-trigger__swatch'}
-					style={{
-						width: 24,
-						height: 24,
-						borderRadius: '100%',
-						background: swatchBackground,
-						flexShrink: 0,
-						border: '1px solid #ddd',
-						display: 'inline-block',
-					}}
-				/>
-				<span style={{ flex: 1, textAlign: 'left', fontSize: 13, color: '#1e1e1e', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-					{hasValue ? (gradientValue ? __('Gradient', 'gcblite') : colorValue) : __('Select a color', 'gcblite')}
-				</span>
-			</HStack>
-		</Button>
-	);
-}
-
-function ColorFieldImpl({
-	label = __('Color', 'gcblite'),
-	colorValue,
-	gradientValue,
-	onColorChange,
-	onGradientChange,
-	colors,
-	gradients,
-	enableAlpha = true,
-	disableCustomColors = false,
-	disableCustomGradients = false,
-	showGradients = true,
-	className = '',
-	help,
-}) {
-	const themeColors = useSetting('color.palette');
-	const themeGradients = useSetting('color.gradients');
-
-	// Always end up with arrays — `useSetting('color.gradients')` returns
-	// undefined on themes that don't declare any gradients, and feeding that
-	// to <GradientPicker> crashes on `.orientation`.
-	const finalColors = (colors && colors.length ? colors : (themeColors || []));
-	const finalGradients = (gradients && gradients.length ? gradients : (themeGradients || []));
-
-	return (
-		<BaseControl
-			label={label}
-			help={help}
-			className={`gcb-color-control components-base-control ${className}`.trim()}
-			__nextHasNoMarginBottom
-		>
-			<PopoverOrModal
-				modalTitle={label}
-				dropdownProps={{ popoverProps: { placement: 'left-start' } }}
-				renderToggle={({ isOpen, onToggle }) => (
-					<ColorTrigger
-						label={label}
-						colorValue={colorValue}
-						gradientValue={gradientValue}
-						onToggle={onToggle}
-						isOpen={isOpen}
-					/>
-				)}
-				renderContent={() => (
-					<ColorPanel
-						colorValue={colorValue}
-						gradientValue={gradientValue}
-						onColorChange={onColorChange}
-						onGradientChange={onGradientChange}
-						colors={finalColors}
-						gradients={finalGradients}
-						enableAlpha={enableAlpha}
-						disableCustomColors={disableCustomColors}
-						disableCustomGradients={disableCustomGradients}
-						showGradients={showGradients}
-					/>
-				)}
-			/>
-		</BaseControl>
-	);
-}
-
-/**
- * Adapter for the registry contract.
- *
- * The control stores a single string value — either a colour (e.g. `#ff0000`,
- * `var(--wp--preset--color--primary)`) or a gradient (e.g. `linear-gradient(...)`).
- * When the user picks one, the other is cleared. This matches the WP attribute
- * type `string` that the loader generates for `color` controls.
- *
- * For separate color + gradient attributes on the same block, declare two
- * controls (one with `showGradients: false`, one purely gradient — coming in v0.2).
- */
-export default function ColorField({ control, value, onChange }) {
-	const stringValue = typeof value === 'string' ? value : '';
-	const isGradient = stringValue.includes('gradient(');
-	const colorValue = isGradient ? '' : stringValue;
-	const gradientValue = isGradient ? stringValue : '';
-
-	const handleColor = (next) => onChange(next || '');
-	const handleGradient = (next) => onChange(next || '');
-
-	return (
-		<ColorFieldImpl
-			label={control.label}
-			help={control.helpText}
-			colorValue={colorValue}
-			gradientValue={gradientValue}
-			onColorChange={handleColor}
-			onGradientChange={handleGradient}
-			showGradients={control.showGradients !== false}
-			enableAlpha={control.enableAlpha !== false}
-			disableCustomColors={control.disableCustomColors === true}
-			disableCustomGradients={control.disableCustomGradients === true}
-		/>
-	);
-}

package/src/controls/date.js

@@ -1,37 +0,0 @@
-import { BaseControl, Button, DatePicker } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import PopoverOrModal from './PopoverOrModal';
-
-export default function DateField({ control, value, onChange }) {
-	return (
-		<BaseControl label={control.label} help={control.helpText} __nextHasNoMarginBottom>
-			<PopoverOrModal
-				modalTitle={control.label || __('Pick a date', 'gcblite')}
-				dropdownProps={{ popoverProps: { placement: 'bottom-start' } }}
-				renderToggle={({ onToggle }) => (
-					<>
-						<Button variant="secondary" onClick={onToggle}>
-							{value ? new Date(value).toLocaleDateString() : __('Pick a date', 'gcblite')}
-						</Button>
-						{value && (
-							<Button variant="tertiary" size="small" isDestructive onClick={() => onChange('')} style={{ marginLeft: 8 }}>
-								{__('Clear', 'gcblite')}
-							</Button>
-						)}
-					</>
-				)}
-				renderContent={({ close }) => (
-					<div style={{ padding: 8 }}>
-						<DatePicker
-							currentDate={value || undefined}
-							onChange={(next) => {
-								onChange(next || '');
-								close();
-							}}
-						/>
-					</div>
-				)}
-			/>
-		</BaseControl>
-	);
-}

package/src/controls/datetime.js

@@ -1,54 +0,0 @@
-/**
- * DateTime — like Date, but with a time picker too. Stores an ISO 8601
- * timestamp string (e.g. "2026-05-25T14:30:00").
- *
- * Uses WP's DateTimePicker rather than DatePicker so the panel shows hours
- * and minutes alongside the calendar. Renders inside PopoverOrModal so it
- * behaves correctly in both sidebar (popover) and metabox (modal) contexts.
- */
-
-import { BaseControl, Button, DateTimePicker } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import PopoverOrModal from './PopoverOrModal';
-
-export default function DatetimeField({ control, value, onChange }) {
-	const displayLabel = value
-		? new Date(value).toLocaleString()
-		: __('Pick a date and time', 'gcblite');
-
-	return (
-		<BaseControl label={control.label} help={control.helpText} __nextHasNoMarginBottom>
-			<PopoverOrModal
-				modalTitle={control.label || __('Pick a date and time', 'gcblite')}
-				dropdownProps={{ popoverProps: { placement: 'bottom-start' } }}
-				renderToggle={({ onToggle }) => (
-					<>
-						<Button variant="secondary" onClick={onToggle}>
-							{displayLabel}
-						</Button>
-						{value && (
-							<Button
-								variant="tertiary"
-								size="small"
-								isDestructive
-								onClick={() => onChange('')}
-								style={{ marginLeft: 8 }}
-							>
-								{__('Clear', 'gcblite')}
-							</Button>
-						)}
-					</>
-				)}
-				renderContent={() => (
-					<div style={{ padding: 8 }}>
-						<DateTimePicker
-							currentDate={value || undefined}
-							onChange={(next) => onChange(next || '')}
-							is12Hour
-						/>
-					</div>
-				)}
-			/>
-		</BaseControl>
-	);
-}

package/src/controls/email.js

@@ -1,15 +0,0 @@
-import { TextControl } from '@wordpress/components';
-
-export default function EmailField({ control, value, onChange }) {
-	return (
-		<TextControl
-			label={control.label}
-			help={control.helpText}
-			placeholder={control.placeholder ?? 'name@example.com'}
-			type="email"
-			value={value ?? ''}
-			onChange={onChange}
-			__nextHasNoMarginBottom
-		/>
-	);
-}

package/src/controls/file.js

@@ -1,134 +0,0 @@
-/**
- * FileField — non-image attachment picker. Stores `{ id, url, filename, title }`.
- *
- * The trigger button mirrors the image control's "popout" tile (file icon +
- * filename + chevron) so the Inspector feels consistent.
- */
-
-import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	__experimentalHStack as HStack,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
-import MediaPicker from './MediaPicker';
-import PopoverOrModal from './PopoverOrModal';
-import MediaCapabilityGate from './MediaCapabilityGate';
-import MediaTriggerBadges from './MediaTriggerBadges';
-
-const TOGGLE_BUTTON_STYLE = {
-	width: '100%',
-	height: 'auto',
-	padding: '12px',
-	justifyContent: 'flex-start',
-	border: '1px solid #ddd',
-	borderRadius: '2px',
-	backgroundColor: '#fff',
-};
-
-function FileIcon() {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 24 24"
-			width="20"
-			height="20"
-			style={{ flexShrink: 0, fill: '#1e1e1e' }}
-			aria-hidden
-		>
-			<path d="M14 9V3.5L19.5 9H14zM6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2v16h12V11h-5V4H6z" />
-		</svg>
-	);
-}
-
-export default function FileField({ control, value, onChange }) {
-	const fileValue = (typeof value === 'object' && value !== null)
-		? value
-		: { id: null, url: value || '', filename: '', title: '' };
-	const hasFile = !!(fileValue.id || fileValue.url);
-	const displayTitle = fileValue.title || fileValue.filename || __('(no title)', 'gcblite');
-
-	return (
-		<div className="components-base-control gcb-file-control">
-			<div className="components-base-control__field">
-				<label className="components-base-control__label">{control.label}</label>
-			</div>
-			{control.helpText && (
-				<p className="components-base-control__help">{control.helpText}</p>
-			)}
-
-			<MediaCapabilityGate>
-				<MediaPicker
-					onSelect={(media) => onChange({
-						id: media.id,
-						url: media.url,
-						filename: media.filename,
-						title: media.title,
-					})}
-					allowedTypes={control.allowedTypes || ['application', 'text', 'image', 'video', 'audio']}
-					value={fileValue.id}
-					render={({ open }) => (
-						<div>
-							{!hasFile && (
-								<Button
-									onClick={open}
-									variant="secondary"
-									style={{ marginBottom: 8 }}
-								>
-									{__('Select File', 'gcblite')}
-								</Button>
-							)}
-
-							{hasFile && (
-								<PopoverOrModal
-									modalTitle={control.label || __('File', 'gcblite')}
-									dropdownProps={{ popoverProps: { placement: 'left-start' } }}
-									renderToggle={({ isOpen, onToggle }) => (
-										<MediaTriggerBadges onClear={() => onChange({ id: null, url: '', filename: '', title: '' })}>
-											<Button
-												onClick={onToggle}
-												aria-expanded={isOpen}
-												className="gcb-modal-toggle-button gcb-file-control-toggle"
-												style={TOGGLE_BUTTON_STYLE}
-											>
-												<HStack spacing={3}>
-													<FileIcon />
-													<Truncate numberOfLines={1}>{displayTitle}</Truncate>
-												</HStack>
-											</Button>
-										</MediaTriggerBadges>
-									)}
-									renderContent={({ close }) => (
-										<div style={{ padding: 16, minWidth: 280 }}>
-											<Button
-												onClick={() => { close(); open(); }}
-												variant="secondary"
-												style={{ width: '100%', marginBottom: 12 }}
-											>
-												{__('Replace File', 'gcblite')}
-											</Button>
-											<Button
-												onClick={() => { onChange({ id: null, url: '', filename: '', title: '' }); close(); }}
-												variant="tertiary"
-												isDestructive
-												style={{ width: '100%' }}
-											>
-												{__('Remove File', 'gcblite')}
-											</Button>
-										</div>
-									)}
-								/>
-							)}
-
-							{!hasFile && (
-								<p style={{ fontSize: 13, color: '#757575', margin: 0 }}>
-									{__('No file selected', 'gcblite')}
-								</p>
-							)}
-						</div>
-					)}
-				/>
-			</MediaCapabilityGate>
-		</div>
-	);
-}