@wordpress-gcb/fields 0.2.0 → 0.2.2

package/src/controls/gallery.js

@@ -1,338 +0,0 @@
-/**
- * GalleryField — ported verbatim from the original GCB GalleryControlComponent.
- *
- * Stored shape: array of image objects (same shape as ImageField), with
- * focalPoint / size / customWidth / repeat / isFixed preserved per item across
- * media-library reselects.
- *
- * Each row is independently draggable (dnd-kit) and edits open the same
- * focal-point/size panel as the single-image control.
- */
-
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import {
-	Button,
-	__experimentalHStack as HStack,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
-import MediaPicker from './MediaPicker';
-import MediaCapabilityGate from './MediaCapabilityGate';
-import PopoverOrModal from './PopoverOrModal';
-import {
-	DndContext,
-	closestCenter,
-	PointerSensor,
-	useSensor,
-	useSensors,
-	DragOverlay,
-} from '@dnd-kit/core';
-import {
-	SortableContext,
-	verticalListSortingStrategy,
-	useSortable,
-	arrayMove,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { ImageControlContent } from './image';
-
-const TOGGLE_BUTTON_STYLE = {
-	width: '100%',
-	height: 'auto',
-	padding: '12px',
-	justifyContent: 'flex-start',
-	border: '1px solid #ddd',
-	borderRadius: '2px',
-	backgroundColor: '#fff',
-};
-
-/**
- * Single gallery row — drag handle + thumbnail dropdown trigger + remove button.
- */
-function SortableGalleryImage({ image, onUpdate, onRemove, control }) {
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({ id: image.id });
-
-	const style = {
-		transform: CSS.Transform.toString(transform),
-		transition,
-		opacity: isDragging ? 0.5 : 1,
-		marginBottom: 8,
-	};
-
-	const displayTitle = image.title || image.filename || image.alt || __('(no description)', 'gcblite');
-
-	return (
-		<div ref={setNodeRef} style={style} className="gcb-gallery-image-item">
-			<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-				<div
-					{...attributes}
-					{...listeners}
-					style={{
-						cursor: 'grab',
-						display: 'flex',
-						alignItems: 'center',
-						justifyContent: 'center',
-						padding: 4,
-						flexShrink: 0,
-					}}
-					aria-label={__('Drag to reorder', 'gcblite')}
-				>
-					<svg viewBox="0 0 20 20" width="16" height="16" style={{ fill: '#666' }}>
-						<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>
-
-				<MediaPicker
-					onSelect={(media) => onUpdate(image.id, {
-						...image,
-						id: media.id,
-						url: media.url,
-						alt: media.alt || '',
-						title: media.title || media.filename || '',
-						filename: media.filename || '',
-						width: media.width,
-						height: media.height,
-						filesize: media.filesizeInBytes,
-					})}
-					allowedTypes={['image']}
-					value={image.id}
-					render={({ open }) => (
-						<PopoverOrModal
-							modalTitle={displayTitle || __('Gallery image', 'gcblite')}
-							dropdownProps={{ popoverProps: { placement: 'left-start' } }}
-							renderToggle={({ isOpen, onToggle }) => (
-								<Button
-									onClick={onToggle}
-									aria-expanded={isOpen}
-									aria-label={__('Image settings', 'gcblite')}
-									className="gcb-modal-toggle-button gcb-image-control-toggle"
-									style={{ ...TOGGLE_BUTTON_STYLE, flex: 1 }}
-								>
-									<HStack spacing={3} justify="flex-start">
-										<span
-											aria-hidden
-											style={{
-												width: 32,
-												height: 32,
-												borderRadius: '100%',
-												backgroundImage: `url(${image.url})`,
-												backgroundSize: 'cover',
-												backgroundPosition: 'center',
-												flexShrink: 0,
-												border: '1px solid #ddd',
-												display: 'block',
-											}}
-										/>
-										<Truncate numberOfLines={1}>{displayTitle}</Truncate>
-									</HStack>
-								</Button>
-							)}
-							renderContent={({ close }) => (
-								<div style={{ padding: 16, minWidth: 280 }}>
-									<ImageControlContent
-										control={control}
-										value={image}
-										onChange={(newValue) => onUpdate(image.id, newValue)}
-										onReplace={() => { close(); open(); }}
-									/>
-									<div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid #ddd' }}>
-										<Button
-											onClick={() => { onRemove(image.id); close(); }}
-											variant="link"
-											isDestructive
-											style={{ width: '100%' }}
-										>
-											{__('Remove from gallery', 'gcblite')}
-										</Button>
-									</div>
-								</div>
-							)}
-						/>
-					)}
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default function GalleryField({ control, value, onChange }) {
-	const [activeId, setActiveId] = useState(null);
-	const images = Array.isArray(value) ? value : [];
-
-	const sensors = useSensors(
-		useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
-	);
-
-	const handleDragStart = (event) => setActiveId(event.active.id);
-
-	const handleDragEnd = (event) => {
-		const { active, over } = event;
-		setActiveId(null);
-		if (over && active.id !== over.id) {
-			const oldIndex = images.findIndex((img) => img.id === active.id);
-			const newIndex = images.findIndex((img) => img.id === over.id);
-			onChange(arrayMove(images, oldIndex, newIndex));
-		}
-	};
-
-	const handleSelect = (media) => {
-		const newImages = Array.isArray(media) ? media : [media];
-		const existingMap = new Map(images.map((img) => [img.id, img]));
-
-		const formatted = newImages.map((img) => {
-			const existing = existingMap.get(img.id);
-			if (existing) {
-				return {
-					...existing,
-					url: img.url,
-					alt: img.alt || existing.alt,
-					title: img.title || img.filename || existing.title,
-					filename: img.filename || existing.filename,
-					width: img.width,
-					height: img.height,
-					filesize: img.filesizeInBytes,
-				};
-			}
-			return {
-				id: img.id,
-				url: img.url,
-				alt: img.alt || '',
-				title: img.title || img.filename || '',
-				filename: img.filename || '',
-				width: img.width,
-				height: img.height,
-				filesize: img.filesizeInBytes,
-				focalPoint: { x: 0.5, y: 0.5 },
-				size: 'cover',
-				customWidth: '',
-				repeat: true,
-				isFixed: false,
-			};
-		});
-
-		onChange(formatted);
-	};
-
-	const removeImage = (imageId) => onChange(images.filter((img) => img.id !== imageId));
-	const updateImage = (imageId, updates) =>
-		onChange(images.map((img) => (img.id === imageId ? { ...img, ...updates } : img)));
-
-	return (
-		<div className="components-base-control gcb-gallery-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={handleSelect}
-					allowedTypes={['image']}
-					multiple
-					gallery
-					value={images.map((img) => img.id)}
-					render={({ open }) => (
-						<div className="gcb-gallery-control-content">
-							{images.length === 0 ? (
-								<Button
-									onClick={open}
-									variant="secondary"
-									style={{ marginBottom: 8 }}
-								>
-									{__('Add images', 'gcblite')}
-								</Button>
-							) : (
-								<>
-									<DndContext
-										sensors={sensors}
-										collisionDetection={closestCenter}
-										onDragStart={handleDragStart}
-										onDragEnd={handleDragEnd}
-									>
-										<SortableContext
-											items={images.map((img) => img.id)}
-											strategy={verticalListSortingStrategy}
-										>
-											<div className="gcb-gallery-items">
-												{images.map((image) => (
-													<SortableGalleryImage
-														key={image.id}
-														image={image}
-														onUpdate={updateImage}
-														onRemove={removeImage}
-														control={control}
-													/>
-												))}
-											</div>
-										</SortableContext>
-
-										<DragOverlay>
-											{activeId
-												? (() => {
-													const active = images.find((img) => img.id === activeId);
-													const title = active?.title || active?.filename || active?.alt || __('(no description)', 'gcblite');
-													return (
-														<div style={{
-															display: 'flex',
-															alignItems: 'center',
-															gap: 8,
-															padding: '8px 12px',
-															background: 'white',
-															borderRadius: 2,
-															boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-															opacity: 0.9,
-															maxWidth: 400,
-															border: '1px solid #ddd',
-														}}>
-															<svg viewBox="0 0 20 20" width="16" height="16" style={{ fill: '#666' }}>
-																<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>
-															<span
-																aria-hidden
-																style={{
-																	width: 32,
-																	height: 32,
-																	borderRadius: '100%',
-																	backgroundImage: `url(${active?.url})`,
-																	backgroundSize: 'cover',
-																	backgroundPosition: 'center',
-																	flexShrink: 0,
-																	border: '1px solid #ddd',
-																	display: 'block',
-																}}
-															/>
-															<span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 13 }}>
-																{title}
-															</span>
-														</div>
-													);
-												})()
-												: null}
-										</DragOverlay>
-									</DndContext>
-
-									<Button
-										onClick={open}
-										variant="secondary"
-										style={{ width: '100%', marginTop: 12 }}
-									>
-										{__('Add more images', 'gcblite')}
-									</Button>
-								</>
-							)}
-						</div>
-					)}
-				/>
-			</MediaCapabilityGate>
-		</div>
-	);
-}

package/src/controls/google-map.js

@@ -1,117 +0,0 @@
-import { BaseControl, Notice, TextControl } from '@wordpress/components';
-import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { useGoogleMapsEnabled } from '../provider';
-
-/**
- * Google Map control — address search with autocomplete + interactive map.
- *
- * Stored shape:  { address, lat, lng, zoom }
- *
- * Maps features are gated on the host signalling a configured API key —
- * `googleMapsEnabled` from GcbFieldsProvider, falling back to
- * `window.gcbLite.googleMaps.hasApiKey`. With no key, falls back to a plain
- * address input that sets `address` only. (The Maps JS SDK itself is enqueued
- * by the host when a key exists; this control just reads window.google.)
- */
-export default function GoogleMapField({ control, value, onChange }) {
-	const location = value && typeof value === 'object' ? value : { address: '', lat: null, lng: null, zoom: 14 };
-	const hasApiKey = useGoogleMapsEnabled();
-
-	const [address, setAddress] = useState(location.address || '');
-	useEffect(() => { setAddress(location.address || ''); }, [location.address]);
-
-	const inputRef = useRef(null);
-	const mapRef = useRef(null);
-	const mapInstance = useRef(null);
-	const markerRef = useRef(null);
-
-	const update = useCallback((next) => {
-		onChange({ ...location, ...next });
-	}, [onChange, location]);
-
-	// Wire up Places autocomplete on the input.
-	useEffect(() => {
-		if (!hasApiKey || !inputRef.current || !window.google?.maps?.places) return;
-
-		const ac = new window.google.maps.places.Autocomplete(inputRef.current, {
-			fields: ['formatted_address', 'geometry'],
-		});
-		const listener = ac.addListener('place_changed', () => {
-			const place = ac.getPlace();
-			if (!place.geometry) return;
-			const lat = place.geometry.location.lat();
-			const lng = place.geometry.location.lng();
-			update({ address: place.formatted_address || '', lat, lng });
-		});
-		return () => window.google.maps.event.removeListener(listener);
-	}, [hasApiKey, update]);
-
-	// Wire up the map preview when we have coords.
-	useEffect(() => {
-		if (!hasApiKey || !mapRef.current || !window.google?.maps) return;
-		if (location.lat == null || location.lng == null) return;
-
-		const center = { lat: Number(location.lat), lng: Number(location.lng) };
-		if (!mapInstance.current) {
-			mapInstance.current = new window.google.maps.Map(mapRef.current, {
-				center,
-				zoom: location.zoom || 14,
-				disableDefaultUI: true,
-				clickableIcons: false,
-			});
-			markerRef.current = new window.google.maps.Marker({
-				position: center,
-				map: mapInstance.current,
-				draggable: true,
-			});
-			markerRef.current.addListener('dragend', (e) => {
-				update({ lat: e.latLng.lat(), lng: e.latLng.lng() });
-			});
-		} else {
-			mapInstance.current.setCenter(center);
-			markerRef.current.setPosition(center);
-		}
-	}, [hasApiKey, location.lat, location.lng, location.zoom, update]);
-
-	if (!hasApiKey) {
-		return (
-			<BaseControl label={control.label} help={control.helpText} __nextHasNoMarginBottom>
-				<Notice status="warning" isDismissible={false}>
-					{__('No Google Maps API key configured. Set one with the `gcb_google_maps_api_key` filter to enable autocomplete and the map preview.', 'gcblite')}
-				</Notice>
-				<TextControl
-					label=""
-					hideLabelFromVision
-					value={address}
-					onChange={(next) => {
-						setAddress(next);
-						update({ address: next });
-					}}
-					placeholder={__('Enter an address…', 'gcblite')}
-					__nextHasNoMarginBottom
-				/>
-			</BaseControl>
-		);
-	}
-
-	return (
-		<BaseControl label={control.label} help={control.helpText} __nextHasNoMarginBottom>
-			<TextControl
-				label=""
-				hideLabelFromVision
-				ref={inputRef}
-				value={address}
-				onChange={setAddress}
-				placeholder={__('Start typing an address…', 'gcblite')}
-				__nextHasNoMarginBottom
-			/>
-			{location.lat != null && location.lng != null && (
-				<div
-					ref={mapRef}
-					style={{ width: '100%', height: 200, marginTop: 8, borderRadius: 4, overflow: 'hidden' }}
-				/>
-			)}
-		</BaseControl>
-	);
-}

package/src/controls/heading-level.js

@@ -1,99 +0,0 @@
-/**
- * HeadingLevel — compound input: a text field for the heading content
- * and an inline dropdown for the semantic level. Visually mirrors WP's
- * UnitControl (the "10 px" combo): input on the left, suffix selector
- * on the right, single 40px-tall row.
- *
- * Stored shape:
- *   { text: 'Section title', level: 'h2' }
- *
- * React frontend usage:
- *   const { text, level } = heading || {};
- *   if (!text) return null;
- *   const Tag = level || 'h2';
- *   return <Tag className="...">{text}</Tag>;
- *
- * Config:
- *   levels        ['h1','h2','h3','h4','h5','h6','p','div','span'] (default)
- *                 — set to your own subset to restrict choice.
- *   default       { text, level }  — initial value when the attribute is empty
- *   placeholder   string  — placeholder for the text input
- *
- * Accessibility: `div` and `span` are non-semantic; the helper text turns
- * red when one is selected so authors see the trade-off before shipping.
- *
- * Implementation note: uses WP's @experimental `InputControl` primitive
- * directly — same component UnitControl is built on top of. The `suffix`
- * slot is exactly the "input + dropdown" pattern; the component handles
- * the row height, focus ring, and emotion class plumbing so we don't.
- */
-
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalInputControl as InputControl,
-	Notice,
-} from '@wordpress/components';
-
-const ALL_LEVELS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'div', 'span'];
-const HEADING_LEVELS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
-
-function resolveLevels(control) {
-	if (Array.isArray(control.levels) && control.levels.length > 0) {
-		return control.levels.filter((l) => ALL_LEVELS.includes(l));
-	}
-	return ALL_LEVELS;
-}
-
-export default function HeadingLevelField({ control, value, onChange }) {
-	const levels = resolveLevels(control);
-	const heading = value && typeof value === 'object' ? value : {};
-	const text  = heading.text  ?? control.default?.text  ?? '';
-	const level = heading.level ?? control.default?.level ?? levels[0] ?? 'h2';
-	const isNonSemantic = !HEADING_LEVELS.has(level);
-
-	const update = (patch) => onChange({ text, level, ...patch });
-
-	const levelSelect = (
-		<select
-			className="components-unit-control__select"
-			aria-label={__('Heading level', 'gcblite')}
-			value={level}
-			onChange={(e) => update({ level: e.target.value })}
-		>
-			{levels.map((lvl) => (
-				<option key={lvl} value={lvl}>{lvl.toUpperCase()}</option>
-			))}
-		</select>
-	);
-
-	return (
-		<div className="components-base-control gcb-heading-level-control">
-			<div className="components-base-control__field">
-				<InputControl
-					label={control.label}
-					value={text}
-					placeholder={control.placeholder || __('Heading text', 'gcblite')}
-					onChange={(next) => update({ text: next ?? '' })}
-					suffix={levelSelect}
-					__next40pxDefaultSize
-				/>
-
-				{isNonSemantic && (
-					<Notice
-						status="warning"
-						isDismissible={false}
-						className="gcb-heading-level-control__warning"
-					>
-						{__(
-							'Non-heading elements are skipped by screen-reader heading navigation. Prefer H1–H6 for content titles.',
-							'gcblite',
-						)}
-					</Notice>
-				)}
-			</div>
-			{control.helpText && (
-				<p className="components-base-control__help">{control.helpText}</p>
-			)}
-		</div>
-	);
-}