@wordpress-gcb/fields 0.2.1 → 0.2.2

package/src/controls/icon.js

@@ -1,301 +0,0 @@
-/**
- * IconField — visual picker over the WP 7.0+ icon registry.
- *
- * Stored shape:
- *   { source: 'wp', name: 'core/arrow-down-left' }
- *
- * Authors don't type the name — they pick from a searchable grid in
- * a Popover. Icons come from /wp/v2/icons (the new WP 7.0 endpoint,
- * server-side registry exposed over REST). Storage is just the name;
- * render.php on the server hits WP_Icons_Registry to resolve to SVG
- * at render time so post_content stays small.
- *
- * Config options:
- *   namespace   string — restrict the picker to icons whose name
- *                        starts with `${namespace}/`. Useful once
- *                        themes/plugins register their own sets via
- *                        WP 7.1's register_block_icon API. Example:
- *                        `"namespace": "icomoon"` shows only icons a
- *                        theme registered with names like
- *                        `icomoon/twitter`, `icomoon/youtube`.
- *   filter      string[] — explicit allow-list of full icon names.
- *                          Takes precedence over namespace when set.
- *                          Use this when you want a hand-curated
- *                          subset for a specific block ("only show
- *                          these 5 brand icons here").
- *
- * Both options are no-ops on plain WP 7.0 because the registry only
- * contains `core/*` icons (filtering to `namespace: "icomoon"`
- * yields zero icons until something registers them). When WP 7.1
- * ships register_block_icon, the same config Just Works.
- *
- * Requires WP 7.0+. On older WP the endpoint 404s and the picker
- * surfaces a clear "needs WordPress 7.0" message rather than trying
- * to be clever with a legacy dashicon fallback.
- *
- * Older saved values that used the v1 shape ({ source: 'dashicon', icon })
- * still render — render.php dispatches by source. The picker just can't
- * MAKE a dashicon value anymore (one-way migration).
- */
-
-import { __, sprintf } from '@wordpress/i18n';
-import { useState, useEffect, useRef, useMemo } from '@wordpress/element';
-import {
-	Button,
-	Popover,
-	Spinner,
-	TextControl,
-	BaseControl,
-} from '@wordpress/components';
-import apiFetch from '@wordpress/api-fetch';
-
-// Module-level cache for the icon catalogue. /wp/v2/icons returns all
-// 88 icons in one request; we only need to fetch it once per page load
-// regardless of how many icon fields are rendered.
-let iconCache = null;
-let iconFetchPromise = null;
-let iconFetchError = null;
-
-async function fetchAllIconPages() {
-	// WP 7.0's icons endpoint caps per_page at 100 and there are 88
-	// core icons. WP 7.1+ will let plugins register more, so paginate
-	// at 100/page until a short page comes back.
-	const all = [];
-	for (let page = 1; page < 50; page++) {
-		// eslint-disable-next-line no-await-in-loop
-		const chunk = await apiFetch({ path: `/wp/v2/icons?per_page=100&page=${page}` });
-		if (!Array.isArray(chunk) || chunk.length === 0) break;
-		all.push(...chunk);
-		if (chunk.length < 100) break;
-	}
-	return all;
-}
-
-function fetchIcons() {
-	if (iconCache) return Promise.resolve(iconCache);
-	if (iconFetchError) return Promise.reject(iconFetchError);
-	if (iconFetchPromise) return iconFetchPromise;
-	iconFetchPromise = fetchAllIconPages()
-		.then((items) => {
-			iconCache = items;
-			return iconCache;
-		})
-		.catch((err) => {
-			iconFetchError = err;
-			iconFetchPromise = null;
-			throw err;
-		});
-	return iconFetchPromise;
-}
-
-function useIcons() {
-	const [icons, setIcons] = useState(iconCache);
-	const [error, setError] = useState(null);
-	useEffect(() => {
-		if (icons) return;
-		let cancelled = false;
-		fetchIcons()
-			.then((list) => { if (!cancelled) setIcons(list); })
-			.catch((err) => {
-				if (cancelled) return;
-				const status = err?.data?.status;
-				if (status === 404 || err?.code === 'rest_no_route') {
-					setError('unsupported');
-				} else {
-					setError('fetch-failed');
-				}
-			});
-		return () => { cancelled = true; };
-	}, [icons]);
-	return { icons, error };
-}
-
-/**
- * Inline-render an SVG string. We have to use dangerouslySetInnerHTML
- * because the icon `content` is an `<svg>...</svg>` string from the
- * registry, not a React element. The strings come from a trusted
- * server-side registry — no user content.
- */
-function IconSvg({ content, className }) {
-	if (!content) return null;
-	return (
-		<span
-			className={className}
-			aria-hidden="true"
-			dangerouslySetInnerHTML={{ __html: content }}
-		/>
-	);
-}
-
-function normalize(v) {
-	if (!v || typeof v !== 'object') return { source: 'wp', name: '' };
-	return {
-		source: v.source || 'wp',
-		name: v.name || v.icon || '',
-	};
-}
-
-export default function IconField({ control, value, onChange }) {
-	const current = normalize(value);
-	const { icons, error } = useIcons();
-	const [open, setOpen] = useState(false);
-	const [search, setSearch] = useState('');
-	const triggerRef = useRef(null);
-
-	const currentIcon = useMemo(() => {
-		if (!icons || !current.name) return null;
-		return icons.find((i) => i.name === current.name) || null;
-	}, [icons, current.name]);
-
-	// Restrict the candidate set BEFORE the search filter — control
-	// config can narrow to a specific namespace or hand-curated list.
-	const candidates = useMemo(() => {
-		if (!icons) return [];
-		let list = icons;
-		if (Array.isArray(control.filter) && control.filter.length > 0) {
-			const allow = new Set(control.filter);
-			list = list.filter((i) => allow.has(i.name));
-		} else if (typeof control.namespace === 'string' && control.namespace !== '') {
-			const prefix = control.namespace.replace(/\/+$/, '') + '/';
-			list = list.filter((i) => i.name.startsWith(prefix));
-		}
-		return list;
-	}, [icons, control.filter, control.namespace]);
-
-	const filtered = useMemo(() => {
-		if (!candidates.length) return [];
-		if (!search) return candidates;
-		const q = search.toLowerCase();
-		return candidates.filter((i) =>
-			i.name.toLowerCase().includes(q) ||
-			(i.label || '').toLowerCase().includes(q)
-		);
-	}, [candidates, search]);
-
-	const pick = (name) => {
-		onChange({ source: 'wp', name });
-		setOpen(false);
-		setSearch('');
-	};
-
-	const clear = () => {
-		onChange({ source: 'wp', name: '' });
-		setOpen(false);
-	};
-
-	return (
-		<BaseControl
-			label={control.label}
-			help={control.helpText}
-			className="gcb-icon-control"
-			__nextHasNoMarginBottom
-		>
-			<div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
-				<Button
-					ref={triggerRef}
-					variant="secondary"
-					onClick={() => setOpen((v) => !v)}
-					className="gcb-icon-control__trigger"
-					aria-expanded={open}
-				>
-					{currentIcon ? (
-						<>
-							<IconSvg content={currentIcon.content} className="gcb-icon-control__trigger-svg" />
-							<span className="gcb-icon-control__trigger-label">{currentIcon.label}</span>
-						</>
-					) : (
-						<span className="gcb-icon-control__trigger-empty">
-							{current.name
-								? sprintf(__('Unknown icon (%s)', 'gcblite'), current.name)
-								: __('Choose an icon…', 'gcblite')}
-						</span>
-					)}
-					<span aria-hidden className="gcb-icon-control__trigger-caret">▾</span>
-				</Button>
-				{currentIcon && (
-					<Button
-						variant="tertiary"
-						isDestructive
-						onClick={clear}
-						aria-label={__('Clear icon', 'gcblite')}
-						title={__('Clear icon', 'gcblite')}
-					>
-						✕
-					</Button>
-				)}
-			</div>
-
-			{open && (
-				<Popover
-					anchor={triggerRef.current}
-					onClose={() => { setOpen(false); setSearch(''); }}
-					placement="bottom-start"
-					className="gcb-icon-control__popover"
-				>
-					<div className="gcb-icon-control__panel">
-						{error === 'unsupported' && (
-							<p className="gcb-icon-control__error">
-								{__('The icon picker needs WordPress 7.0 or newer.', 'gcblite')}
-							</p>
-						)}
-						{error === 'fetch-failed' && (
-							<p className="gcb-icon-control__error">
-								{__('Could not load icons from the REST API.', 'gcblite')}
-							</p>
-						)}
-						{!error && !icons && (
-							<div className="gcb-icon-control__loading"><Spinner /></div>
-						)}
-						{!error && icons && (
-							<>
-								<TextControl
-									label={__('Search icons', 'gcblite')}
-									hideLabelFromVision
-									placeholder={__('Search…', 'gcblite')}
-									value={search}
-									onChange={setSearch}
-									__nextHasNoMarginBottom
-									__next40pxDefaultSize
-								/>
-								<div className="gcb-icon-control__grid" role="listbox">
-									{filtered.length === 0 && (
-										<p className="gcb-icon-control__empty">
-											{candidates.length === 0 && (control.namespace || control.filter)
-												? sprintf(
-													__('No icons registered for %s yet. Use register_block_icon() to add some.', 'gcblite'),
-													control.namespace
-														? `"${control.namespace}/*"`
-														: __('this picker', 'gcblite')
-												)
-												: __('No icons match.', 'gcblite')}
-										</p>
-									)}
-									{filtered.map((icon) => (
-										<button
-											key={icon.name}
-											type="button"
-											role="option"
-											aria-selected={icon.name === current.name}
-											className={`gcb-icon-control__option${icon.name === current.name ? ' is-selected' : ''}`}
-											title={icon.label}
-											onClick={() => pick(icon.name)}
-										>
-											<IconSvg content={icon.content} className="gcb-icon-control__option-svg" />
-										</button>
-									))}
-								</div>
-								{current.name && (
-									<div className="gcb-icon-control__footer">
-										<Button variant="tertiary" onClick={clear} isDestructive>
-											{__('Clear icon', 'gcblite')}
-										</Button>
-									</div>
-								)}
-							</>
-						)}
-					</div>
-				</Popover>
-			)}
-		</BaseControl>
-	);
-}

package/src/controls/image.js

@@ -1,334 +0,0 @@
-/**
- * ImageField — ported verbatim from the original GCB ImageControlComponent.
- *
- * Stored shape:
- *   {
- *     id, url, alt, title, filename, width, height, filesize,
- *     focalPoint: { x, y },
- *     size: 'cover' | 'contain' | 'auto',
- *     repeat: boolean,
- *     isFixed: boolean,
- *     customWidth: string  // e.g. "320px", "50%"
- *   }
- *
- * Features (toggleable via control config):
- *   - enableFocalPoint        (default true)  → FocalPointPicker on the selected image
- *   - enableSizeOptions       (default true)  → cover / contain / tile + custom width
- *   - enableRepeatOptions     (default true)  → repeat toggle (when size != cover)
- *   - enableFixedBackground   (default true)  → background-attachment: fixed
- */
-
-import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	FocalPointPicker,
-	Icon,
-	ToggleControl,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalUnitControl as UnitControl,
-	__experimentalHStack as HStack,
-	__experimentalTruncate as Truncate,
-	FlexItem,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { pencil as editIcon } from '@wordpress/icons';
-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',
-};
-
-/**
- * Resolve which MIME family the media library modal should allow. The
- * control defaults to images only; opt in to broader picks via the
- * schema:
- *
- *   { "type": "image", "allowVideo": true }            // image OR video
- *   { "type": "image", "allowedTypes": ["video"] }     // explicit override
- *
- * Authors uploading a video get a working URL back through the same
- * value shape — render templates pick <img> vs <video> by extension
- * (see the saas-banner / saas-feature-scroll item render.php examples).
- */
-function resolveAllowedTypes(control) {
-	if (Array.isArray(control?.allowedTypes) && control.allowedTypes.length > 0) {
-		return control.allowedTypes;
-	}
-	if (control?.allowVideo) {
-		return ['image', 'video'];
-	}
-	return ['image'];
-}
-
-/**
- * The settings panel rendered inside the Dropdown popover. Shows focal point,
- * size, custom width, repeat, fixed-background. Also offers a Replace button.
- *
- * Exported so the gallery control can reuse it for each gallery row.
- */
-export function ImageControlContent({ control, value, onChange, onReplace }) {
-	const enableFocalPoint = control.enableFocalPoint !== false;
-	const enableSizeOptions = control.enableSizeOptions !== false;
-	const enableRepeatOptions = control.enableRepeatOptions !== false;
-	const enableFixedBackground = control.enableFixedBackground !== false;
-
-	const imageValue = value || {};
-	const focalPoint = imageValue.focalPoint || { x: 0.5, y: 0.5 };
-	const size = imageValue.size || 'cover';
-	const customWidth = imageValue.customWidth || '';
-	const repeat = imageValue.repeat !== false;
-	const isFixed = imageValue.isFixed || false;
-
-	const updateValue = (updates) => onChange({ ...imageValue, ...updates });
-
-	if (!imageValue.url) return null;
-
-	const displayTitle = imageValue.title
-		|| imageValue.filename
-		|| imageValue.alt
-		|| __('(no description)', 'gcblite');
-
-	return (
-		<div className="gcb-image-control-content__sections">
-			{onReplace && (
-				<Button
-					onClick={onReplace}
-					className="gcb-modal-toggle-button"
-					aria-label={__('Replace image', 'gcblite')}
-					style={{
-						width: '100%',
-						display: 'flex',
-						alignItems: 'center',
-						justifyContent: 'flex-start',
-						padding: '8px 12px',
-						border: '1px solid #ddd',
-						borderRadius: 2,
-						background: 'white',
-						cursor: 'pointer',
-						gap: 12,
-					}}
-				>
-					<span
-						aria-hidden
-						style={{
-							width: 32,
-							height: 32,
-							borderRadius: '100%',
-							backgroundImage: `url(${imageValue.url})`,
-							backgroundSize: 'cover',
-							backgroundPosition: 'center',
-							flexShrink: 0,
-							border: '1px solid #ddd',
-							display: 'block',
-						}}
-					/>
-					<span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' }}>
-						{displayTitle}
-					</span>
-					<Icon icon={editIcon} size={20} style={{ fill: '#1e1e1e', flexShrink: 0 }} />
-				</Button>
-			)}
-
-			{enableFocalPoint && (
-				<FocalPointPicker
-					url={imageValue.url}
-					value={focalPoint}
-					onChange={(p) => updateValue({ focalPoint: p })}
-				/>
-			)}
-
-			{enableFixedBackground && (
-				<ToggleControl
-					label={__('Fixed background', 'gcblite')}
-					checked={isFixed}
-					onChange={(v) => updateValue({ isFixed: v })}
-					__nextHasNoMarginBottom
-				/>
-			)}
-
-			{enableSizeOptions && (
-				<div className="gcb-image-control-content__sections">
-					<ToggleGroupControl
-						label={__('Size', 'gcblite')}
-						value={size}
-						onChange={(v) => {
-							if (v === 'cover' || v === 'contain') {
-								updateValue({ size: v, repeat: false });
-							} else {
-								updateValue({ size: v });
-							}
-						}}
-						isBlock
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						help={
-							size === 'cover'
-								? __('Image covers the space evenly.', 'gcblite')
-								: size === 'contain'
-								? __('Image is contained without distortion.', 'gcblite')
-								: undefined
-						}
-					>
-						<ToggleGroupControlOption value="cover" label={__('Cover', 'gcblite')} />
-						<ToggleGroupControlOption value="contain" label={__('Contain', 'gcblite')} />
-						<ToggleGroupControlOption value="auto" label={__('Tile', 'gcblite')} />
-					</ToggleGroupControl>
-
-					<HStack spacing={3}>
-						<UnitControl
-							value={customWidth}
-							onChange={(v) => updateValue({ customWidth: v })}
-							units={[
-								{ value: 'px', label: 'px' },
-								{ value: '%', label: '%' },
-								{ value: 'em', label: 'em' },
-								{ value: 'rem', label: 'rem' },
-								{ value: 'vw', label: 'vw' },
-								{ value: 'vh', label: 'vh' },
-							]}
-							placeholder={__('Auto', 'gcblite')}
-							min={0}
-							step={1}
-							disabled={size === 'cover'}
-							aria-label={__('Background image width', 'gcblite')}
-							__nextHasNoMarginBottom
-						/>
-						{enableRepeatOptions && (
-							<ToggleControl
-								label={__('Repeat', 'gcblite')}
-								checked={repeat}
-								onChange={(v) => updateValue({ repeat: v })}
-								disabled={size === 'cover'}
-								__nextHasNoMarginBottom
-							/>
-						)}
-					</HStack>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default function ImageField({ control, value, onChange }) {
-	const imageValue = value || {};
-
-	return (
-		<div className="components-base-control gcb-image-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,
-							alt: media.alt || '',
-							title: media.title || media.filename || '',
-							filename: media.filename || '',
-							width: media.width,
-							height: media.height,
-							filesize: media.filesizeInBytes,
-							focalPoint: imageValue.focalPoint || { x: 0.5, y: 0.5 },
-							size: imageValue.size || 'cover',
-							repeat: imageValue.repeat !== false,
-							isFixed: imageValue.isFixed || false,
-							customWidth: imageValue.customWidth || '',
-						});
-					}}
-					allowedTypes={resolveAllowedTypes(control)}
-					value={imageValue?.id}
-					render={({ open }) => (
-						<div className="gcb-image-control-content">
-							{!imageValue?.url && (
-								<>
-									<Button
-										onClick={open}
-										variant="secondary"
-										style={{ marginBottom: 8 }}
-									>
-										{__('Add image', 'gcblite')}
-									</Button>
-									<p style={{ fontSize: 13, color: '#757575', margin: 0 }}>
-										{__('No image selected', 'gcblite')}
-									</p>
-								</>
-							)}
-
-							{imageValue?.url && (
-								<PopoverOrModal
-									modalTitle={control.label || __('Image settings', 'gcblite')}
-									dropdownProps={{ popoverProps: { placement: 'left-start' } }}
-									renderToggle={({ isOpen, onToggle }) => {
-										const displayTitle = imageValue.title || imageValue.filename || imageValue.alt || __('(no description)', 'gcblite');
-										return (
-											<MediaTriggerBadges onClear={() => onChange(null)}>
-												<Button
-													onClick={onToggle}
-													aria-expanded={isOpen}
-													aria-label={__('Image size, position and focal point options.', 'gcblite')}
-													className="gcb-modal-toggle-button gcb-image-control-toggle"
-													style={TOGGLE_BUTTON_STYLE}
-												>
-													<HStack spacing={3} justify="flex-start">
-														<span
-															aria-hidden
-															style={{
-																width: 32,
-																height: 32,
-																borderRadius: '100%',
-																backgroundImage: `url(${imageValue.url})`,
-																backgroundSize: 'cover',
-																backgroundPosition: 'center',
-																flexShrink: 0,
-																border: '1px solid #ddd',
-																display: 'block',
-															}}
-														/>
-														<FlexItem>
-															<Truncate numberOfLines={1}>{displayTitle}</Truncate>
-															<VisuallyHidden>
-																{__('Image:', 'gcblite')} {displayTitle}
-															</VisuallyHidden>
-														</FlexItem>
-													</HStack>
-												</Button>
-											</MediaTriggerBadges>
-										);
-									}}
-									renderContent={({ close }) => (
-										<div style={{ padding: 16, minWidth: 280 }}>
-											<ImageControlContent
-												control={control}
-												value={imageValue}
-												onChange={onChange}
-												onReplace={() => {
-													close();
-													open();
-												}}
-											/>
-										</div>
-									)}
-								/>
-							)}
-						</div>
-					)}
-				/>
-			</MediaCapabilityGate>
-		</div>
-	);
-}