@wordpress-gcb/fields 0.2.1 → 0.2.3

package/src/controls/toggle.js

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

package/src/controls/url.js

@@ -1,164 +0,0 @@
-import { BaseControl, Button, Popover, Modal, TextControl, CheckboxControl, __experimentalHStack as HStack, __experimentalSpacer as Spacer } from '@wordpress/components';
-import { useState, useContext } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
-import { ControlContext } from '../control-context';
-
-/**
- * URL control — stores `{ url, text, opensInNewTab }`.
- *
- * Two renderings of the same stored shape:
- *   - **Sidebar context** (block Inspector): compact summary + Edit popover
- *     that mounts the rich @wordpress/block-editor LinkControl.
- *   - **Meta-box context** (post-fields panel): three stacked inputs
- *     (URL, link text, open-in-new-tab checkbox). The popover-based UI
- *     feels out of place in a wide meta-box and the LinkControl's
- *     post/page suggestions push the popover off-screen.
- *
- * Both render the same data; the chooser is the `variant` field on the
- * ControlContext provider supplied by the host (block edit.js vs the
- * post-fields meta-box App). Default is sidebar.
- *
- * When wiring a React component on the frontend:
- *   const { url, text, opensInNewTab } = link || {};
- *   if (!url) return null;
- *   return <a
- *     href={url}
- *     target={opensInNewTab ? '_blank' : undefined}
- *     rel={opensInNewTab ? 'noopener noreferrer' : undefined}
- *   >{text || url}</a>;
- */
-export default function UrlField({ control, value, onChange }) {
-	const ctx = useContext(ControlContext);
-	const link = value && typeof value === 'object'
-		? value
-		: { url: '', text: '', opensInNewTab: false };
-
-	if (ctx.variant === 'metabox') {
-		return <MetaboxUrl control={control} link={link} onChange={onChange} />;
-	}
-	return <SidebarUrl control={control} link={link} onChange={onChange} />;
-}
-
-function MetaboxUrl({ control, link, onChange }) {
-	const [editing, setEditing] = useState(false);
-	// Draft state so Cancel can discard pending edits without touching the
-	// real meta value. Seed from `link` whenever the modal opens.
-	const [draft, setDraft] = useState(link);
-	const hasUrl = !!link.url;
-
-	const openModal = () => {
-		setDraft(link);
-		setEditing(true);
-	};
-
-	const save = () => {
-		onChange({
-			url: draft.url || '',
-			text: draft.text || '',
-			opensInNewTab: !!draft.opensInNewTab,
-		});
-		setEditing(false);
-	};
-
-	return (
-		<BaseControl label={control.label} help={control.helpText} __nextHasNoMarginBottom>
-			<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-				<div style={{ flex: 1, fontSize: 13, color: hasUrl ? '#1e1e1e' : '#757575', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-					{hasUrl ? (link.text || link.url) : __('No link set', 'gcblite')}
-				</div>
-				<Button variant="secondary" onClick={openModal}>
-					{hasUrl ? __('Edit', 'gcblite') : __('Set link', 'gcblite')}
-				</Button>
-				{hasUrl && (
-					<Button variant="tertiary" isDestructive onClick={() => onChange({ url: '', text: '', opensInNewTab: false })}>
-						{__('Clear', 'gcblite')}
-					</Button>
-				)}
-			</div>
-
-			{editing && (
-				<Modal
-					title={control.label || __('Edit link', 'gcblite')}
-					onRequestClose={() => setEditing(false)}
-					size="medium"
-				>
-					<div style={{ display: 'grid', gap: 16 }}>
-						<TextControl
-							label={__('URL', 'gcblite')}
-							value={draft.url || ''}
-							onChange={(url) => setDraft({ ...draft, url })}
-							placeholder="https://example.com"
-							type="url"
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-						/>
-						<TextControl
-							label={__('Link text', 'gcblite')}
-							value={draft.text || ''}
-							onChange={(text) => setDraft({ ...draft, text })}
-							placeholder={draft.url || __('Optional display label', 'gcblite')}
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-						/>
-						<CheckboxControl
-							label={__('Open in new tab', 'gcblite')}
-							checked={!!draft.opensInNewTab}
-							onChange={(opensInNewTab) => setDraft({ ...draft, opensInNewTab })}
-							__nextHasNoMarginBottom
-						/>
-					</div>
-					<Spacer marginTop={6} />
-					<HStack justify="flex-end" spacing={3}>
-						<Button variant="tertiary" onClick={() => setEditing(false)}>
-							{__('Cancel', 'gcblite')}
-						</Button>
-						<Button variant="primary" onClick={save}>
-							{__('Save link', 'gcblite')}
-						</Button>
-					</HStack>
-				</Modal>
-			)}
-		</BaseControl>
-	);
-}
-
-function SidebarUrl({ control, link, onChange }) {
-	const [editing, setEditing] = useState(false);
-	const hasUrl = !!link.url;
-
-	return (
-		<BaseControl label={control.label} help={control.helpText} __nextHasNoMarginBottom>
-			<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-				<div style={{ flex: 1, fontSize: 12, color: hasUrl ? '#1e1e1e' : '#757575', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-					{hasUrl ? (link.text || link.url) : __('No link set', 'gcblite')}
-				</div>
-				<Button variant="secondary" size="small" onClick={() => setEditing((e) => !e)}>
-					{hasUrl ? __('Edit', 'gcblite') : __('Set link', 'gcblite')}
-				</Button>
-				{hasUrl && (
-					<Button variant="tertiary" size="small" isDestructive onClick={() => onChange({ url: '', text: '', opensInNewTab: false })}>
-						{__('Clear', 'gcblite')}
-					</Button>
-				)}
-			</div>
-			{editing && (
-				<Popover onClose={() => setEditing(false)} placement="bottom-start">
-					<div style={{ width: 320, padding: 8 }}>
-						<LinkControl
-							value={link}
-							onChange={(next) => onChange({
-								url: next.url || '',
-								text: next.title || link.text || '',
-								opensInNewTab: !!next.opensInNewTab,
-							})}
-							settings={[
-								{ id: 'opensInNewTab', title: __('Open in new tab', 'gcblite') },
-							]}
-						/>
-					</div>
-				</Popover>
-			)}
-		</BaseControl>
-	);
-}

package/src/controls/user.js

@@ -1,343 +0,0 @@
-/**
- * UserField — ported from the original GCB.
- *
- * Single OR multiple user selection (control.multiple). Stored as ID(s) or
- * full user object(s) (control.returnFormat). Drag-and-drop reordering for
- * multi-select.
- */
-
-import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	TextControl,
-} from '@wordpress/components';
-import PopoverOrModal from './PopoverOrModal';
-import { useState, useEffect, useMemo, useCallback } from '@wordpress/element';
-import apiFetch from '@wordpress/api-fetch';
-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';
-
-const TOGGLE_BUTTON_STYLE = {
-	width: '100%',
-	height: 'auto',
-	padding: '12px',
-	justifyContent: 'flex-start',
-	border: '1px solid #ddd',
-	borderRadius: '2px',
-	backgroundColor: '#fff',
-};
-
-function UserIcon() {
-	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style={{ marginRight: 8, flexShrink: 0, opacity: 0.6 }}>
-			<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-		</svg>
-	);
-}
-
-function SortableUserItem({ user, onRemove }) {
-	const {
-		attributes: dndAttributes,
-		listeners,
-		setNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({ id: user.id });
-
-	const style = {
-		transform: CSS.Transform.toString(transform),
-		transition,
-		opacity: isDragging ? 0.5 : 1,
-	};
-
-	return (
-		<div
-			ref={setNodeRef}
-			style={style}
-			className="gcb-post-object-selected-item"
-			{...dndAttributes}
-			{...listeners}
-		>
-			<div className="gcb-post-object-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>
-			<UserIcon />
-			<span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', userSelect: 'none' }}>
-				{user.name || __('(no name)', 'gcblite')}
-			</span>
-			<button
-				type="button"
-				onClick={(e) => {
-					e.stopPropagation();
-					onRemove(user.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>
-	);
-}
-
-export default function UserField({ control, value, onChange }) {
-	const [allUsers, setAllUsers] = useState([]);
-	const [searchResults, setSearchResults] = useState([]);
-	const [loading, setLoading] = useState(false);
-	const [search, setSearch] = useState('');
-	const [activeId, setActiveId] = useState(null);
-
-	const isMultiple = !!control.multiple;
-
-	const selectedIds = isMultiple
-		? (Array.isArray(value) ? value : (value ? [value] : []))
-		: (value ? [value] : []);
-
-	const selectedUsers = useMemo(
-		() => selectedIds.map((id) => allUsers.find((u) => u.id === id)).filter(Boolean),
-		[selectedIds, allUsers]
-	);
-
-	const mergeUsersIntoCache = useCallback((newUsers) => {
-		setAllUsers((prev) => {
-			const merged = [...prev];
-			newUsers.forEach((nu) => {
-				if (!merged.find((u) => u.id === nu.id)) merged.push(nu);
-			});
-			return merged;
-		});
-	}, []);
-
-	const loadUsers = useCallback(async (term = '') => {
-		setLoading(true);
-		try {
-			const response = await apiFetch({
-				path: `/wp/v2/users?search=${encodeURIComponent(term)}&per_page=50&_fields=id,name`,
-			});
-			setSearchResults(response);
-			mergeUsersIntoCache(response);
-		} catch {
-			// ignore
-		}
-		setLoading(false);
-	}, [mergeUsersIntoCache]);
-
-	useEffect(() => {
-		loadUsers();
-	}, [loadUsers]);
-
-	const handleSelect = (userId) => {
-		const newIds = isMultiple
-			? (selectedIds.includes(userId)
-				? selectedIds.filter((id) => id !== userId)
-				: [...selectedIds, userId])
-			: [userId];
-
-		if (control.returnFormat === 'object') {
-			const objs = newIds.map((id) => allUsers.find((u) => u.id === id)).filter(Boolean);
-			onChange(isMultiple ? objs : (objs[0] || null));
-		} else {
-			onChange(isMultiple ? newIds : (newIds[0] || null));
-		}
-	};
-
-	const handleRemove = (userId) => {
-		const newIds = selectedIds.filter((id) => id !== userId);
-		if (control.returnFormat === 'object') {
-			const objs = newIds.map((id) => allUsers.find((u) => u.id === id)).filter(Boolean);
-			onChange(isMultiple ? objs : (objs[0] || null));
-		} else {
-			onChange(isMultiple ? newIds : (newIds[0] || null));
-		}
-	};
-
-	const handleReorder = (newOrder) => {
-		if (control.returnFormat === 'object') {
-			onChange(newOrder.map((id) => allUsers.find((u) => u.id === id)).filter(Boolean));
-		} else {
-			onChange(newOrder);
-		}
-	};
-
-	const handleClear = () => onChange(isMultiple ? [] : null);
-
-	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }));
-
-	const handleDragStart = (e) => setActiveId(e.active.id);
-	const handleDragCancel = () => setActiveId(null);
-	const handleDragEnd = (e) => {
-		const { active, over } = e;
-		if (over && active.id !== over.id) {
-			const oldIndex = selectedIds.indexOf(active.id);
-			const newIndex = selectedIds.indexOf(over.id);
-			handleReorder(arrayMove(selectedIds, oldIndex, newIndex));
-		}
-		setActiveId(null);
-	};
-
-	const activeUser = activeId ? selectedUsers.find((u) => u.id === activeId) : null;
-	const availableUsers = searchResults.filter((u) => !selectedIds.includes(u.id));
-
-	return (
-		<div className="components-base-control gcb-user-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>
-			)}
-
-			<div className="gcb-post-object-stacked">
-				<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-					<PopoverOrModal
-						modalTitle={control.label || __('Select users', 'gcblite')}
-						dropdownProps={{ popoverProps: { placement: 'left-start' } }}
-						renderToggle={({ isOpen, onToggle }) => (
-							<Button
-								onClick={onToggle}
-								aria-expanded={isOpen}
-								className="gcb-modal-toggle-button"
-								style={{ ...TOGGLE_BUTTON_STYLE, flex: 1 }}
-							>
-								{selectedUsers.length > 0
-									? `${selectedUsers.length} ${selectedUsers.length === 1 ? __('user', 'gcblite') : __('users', 'gcblite')} ${__('selected', 'gcblite')}`
-									: __('Select Users', 'gcblite')}
-							</Button>
-						)}
-						renderContent={({ close: onClose, variant }) => (
-							<div style={variant === 'modal' ? { width: '100%' } : { minWidth: 320, maxWidth: 400 }}>
-<div style={{ padding: '0 16px 8px 16px' }}>
-									<TextControl
-										value={search}
-										onChange={(val) => {
-											setSearch(val);
-											loadUsers(val);
-										}}
-										placeholder={__('Search users…', 'gcblite')}
-										__nextHasNoMarginBottom
-									/>
-								</div>
-
-								<div className="block-editor-link-control__search-results-wrapper" style={{ maxHeight: 300, overflowY: 'auto' }}>
-									{loading && (
-										<p style={{ textAlign: 'center', color: '#757575', padding: 16 }}>
-											{__('Loading…', 'gcblite')}
-										</p>
-									)}
-									{!loading && availableUsers.length === 0 && (
-										<p style={{ textAlign: 'center', color: '#757575', padding: 16 }}>
-											{__('No users found', 'gcblite')}
-										</p>
-									)}
-									{!loading && availableUsers.length > 0 && (
-										<div className="block-editor-link-control__search-results" role="listbox">
-											<div className="components-menu-group">
-												<div role="group">
-													{availableUsers.map((user) => (
-														<button
-															key={user.id}
-															type="button"
-															role="option"
-															className="components-button components-menu-item__button block-editor-link-control__search-item"
-															onClick={() => handleSelect(user.id)}
-															style={{
-																display: 'flex',
-																alignItems: 'center',
-																width: '100%',
-																padding: '8px 16px',
-																textAlign: 'left',
-																border: 'none',
-																background: 'transparent',
-															}}
-														>
-															<UserIcon />
-															<span className="components-menu-item__item" style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-																{user.name}
-															</span>
-														</button>
-													))}
-												</div>
-											</div>
-										</div>
-									)}
-								</div>
-							</div>
-						)}
-					/>
-
-					{selectedUsers.length > 0 && (
-						<Button
-							onClick={handleClear}
-							variant="secondary"
-							isSmall
-							className="components-range-control__reset"
-						>
-							{__('Reset', 'gcblite')}
-						</Button>
-					)}
-				</div>
-
-				{selectedUsers.length > 0 && isMultiple && (
-					<div className="gcb-post-object-selected-list" style={{ marginTop: 8 }}>
-						<DndContext
-							sensors={sensors}
-							collisionDetection={closestCenter}
-							onDragStart={handleDragStart}
-							onDragEnd={handleDragEnd}
-							onDragCancel={handleDragCancel}
-						>
-							<SortableContext items={selectedIds} strategy={verticalListSortingStrategy}>
-								{selectedUsers.map((user) => (
-									<SortableUserItem key={user.id} user={user} onRemove={handleRemove} />
-								))}
-							</SortableContext>
-							<DragOverlay>
-								{activeUser ? (
-									<div className="gcb-post-object-selected-item" style={{ opacity: 0.8, boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}>
-										<div className="gcb-post-object-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>
-										<UserIcon />
-										<span style={{ flex: 1 }}>{activeUser.name}</span>
-									</div>
-								) : null}
-							</DragOverlay>
-						</DndContext>
-					</div>
-				)}
-
-				{selectedUsers.length > 0 && !isMultiple && (
-					<div className="gcb-post-object-selected-list" style={{ marginTop: 8 }}>
-						<div className="gcb-post-object-selected-item">
-							<UserIcon />
-							<span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-								{selectedUsers[0].name}
-							</span>
-						</div>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}

package/src/inspector.js

@@ -1,174 +0,0 @@
-/**
- * Render an Inspector panel tree from a block's `gcb.controls` array.
- *
- * Controls are flat in the JSON; structure comes from `parentPanelId` references
- * to `type: "group"` controls. We bucket controls under their group and emit one
- * <PanelBody> per group, plus a default panel for anything ungrouped.
- */
-
-import { PanelBody } from '@wordpress/components';
-import { Fragment, useContext } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { controlComponents } from './controls';
-import { ValidationContext } from './validation-context';
-import {
-	STRUCTURAL_TYPES,
-	shouldRender,
-	panelsContainingErrors,
-} from './conditional-logic';
-
-// Re-export so existing callers keep working (post-fields.js imports
-// shouldRender + panelsContainingErrors from './inspector').
-export { shouldRender, panelsContainingErrors };
-
-/**
- * @param {Array}    controls
- * @param {Object}   attributes
- * @param {Function} setAttributes
- * @param {Object}   [options]
- * @param {boolean}  [options.flatten] When true and no groups exist, render
- *   ungrouped controls flat (no outer "Settings" PanelBody). Used by the
- *   post-fields meta-box where the meta-box itself IS the panel — nesting
- *   another PanelBody would look like a redundant dropdown.
- * @param {Set<string>} [options.forceOpenPanelIds] Panel ids to render
- *   with initialOpen=true. Used by the meta-box to auto-open any panel
- *   containing a field that just failed validation, so the user can see
- *   the offending field.
- */
-export function renderInspector(controls, attributes, setAttributes, options = {}) {
-	const { groups, ungrouped } = bucketControls(controls);
-	const flatten = options.flatten === true && groups.length === 0;
-	const forceOpen = options.forceOpenPanelIds || new Set();
-
-	return (
-		<Fragment>
-			{ungrouped.length > 0 && (
-				flatten ? (
-					ungrouped.map((control) =>
-						renderControl(control, attributes, setAttributes)
-					)
-				) : (
-					<PanelBody title={__('Settings', 'gcblite')} initialOpen={true}>
-						{ungrouped.map((control) =>
-							renderControl(control, attributes, setAttributes)
-						)}
-					</PanelBody>
-				)
-			)}
-			{groups.map(({ group, children }) => (
-				<PanelBody
-					// Remount the panel when its forced-open status changes so
-					// the new initialOpen value is honoured. (PanelBody only
-					// reads initialOpen on mount.)
-					key={`${group.id}:${forceOpen.has(group.id) ? 'open' : 'closed'}`}
-					title={group.label}
-					initialOpen={forceOpen.has(group.id)}
-				>
-					{children.map((control) =>
-						renderControl(control, attributes, setAttributes)
-					)}
-				</PanelBody>
-			))}
-		</Fragment>
-	);
-}
-
-function bucketControls(controls) {
-	const groupsById = new Map();
-	const groupOrder = [];
-	const ungrouped = [];
-
-	// First pass: register structural controls (group / panel / tools-panel)
-	// in declaration order.
-	controls.forEach((control) => {
-		if (STRUCTURAL_TYPES.has(control.type) && control.id) {
-			groupsById.set(control.id, { group: control, children: [] });
-			groupOrder.push(control.id);
-		}
-	});
-
-	// Second pass: assign each non-structural control to a panel or to ungrouped.
-	controls.forEach((control) => {
-		if (STRUCTURAL_TYPES.has(control.type)) return;
-
-		const parentId = control.parentPanelId;
-		if (parentId && groupsById.has(parentId)) {
-			groupsById.get(parentId).children.push(control);
-		} else {
-			ungrouped.push(control);
-		}
-	});
-
-	return {
-		groups: groupOrder.map((id) => groupsById.get(id)),
-		ungrouped,
-	};
-}
-
-function renderControl(control, attributes, setAttributes) {
-	if (!shouldRender(control, attributes)) {
-		return null;
-	}
-
-	const Component = controlComponents[control.type];
-	if (!Component) {
-		return (
-			<div key={control.id} style={{ padding: 8, background: '#fff3cd', border: '1px solid #ffeeba', marginBottom: 8 }}>
-				<strong>{control.label}</strong>: unknown control type <code>{control.type}</code>
-			</div>
-		);
-	}
-
-	const value = attributes[control.attributeKey];
-	const onChange = (next) => setAttributes({ [control.attributeKey]: next });
-
-	// Wrap each rendered control in a ValidationWrapper that overlays the
-	// required `*`, the inline error message, and the data-attribute used
-	// by the meta-box submit interceptor to scroll-into-view. The wrapper
-	// is invisible in surfaces without validation (sidebar default
-	// ValidationContext is { errors:{}, showErrors:false }) so blocks
-	// don't see any change.
-	return (
-		<ValidationWrapper key={control.id} control={control}>
-			<Component
-				control={control}
-				value={value}
-				onChange={onChange}
-				attributes={attributes}
-			/>
-		</ValidationWrapper>
-	);
-}
-
-/**
- * Per-field decorator: stamps data-gcblite-field for scroll-to-error,
- * shows the required asterisk, and surfaces the inline error message
- * once the host has flipped showErrors on.
- */
-function ValidationWrapper({ control, children }) {
-	const { errors, showErrors } = useContext(ValidationContext);
-	const key = control.attributeKey;
-	const required = !!control.validation?.required;
-	const errorMessage = showErrors && key ? errors[key] : null;
-
-	if (!required && !errorMessage && !key) {
-		return children;
-	}
-
-	return (
-		<div
-			data-gcblite-field={key || undefined}
-			className={[
-				'gcblite-field',
-				required ? 'gcblite-field--required' : '',
-				errorMessage ? 'gcblite-field--has-error' : '',
-			].filter(Boolean).join(' ')}
-		>
-			{children}
-			{errorMessage && (
-				<p className="gcblite-field__error" role="alert">{errorMessage}</p>
-			)}
-		</div>
-	);
-}
-