@wordpress-gcb/fields 0.2.1 → 0.2.2

package/dist/controls/richtext.js

@@ -0,0 +1,494 @@
+/**
+ * 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.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 /*#__PURE__*/_jsx("span", {
+    "aria-hidden": true,
+    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 /*#__PURE__*/_jsx(Button, {
+    icon: icon,
+    label: label,
+    showTooltip: true,
+    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 /*#__PURE__*/_jsx(Popover, {
+    anchor: anchor,
+    onClose: onClose,
+    placement: "bottom-start",
+    children: /*#__PURE__*/_jsxs("div", {
+      style: {
+        padding: 12,
+        minWidth: 280
+      },
+      children: [/*#__PURE__*/_jsx(TextControl, {
+        label: __('Link URL', 'gcblite'),
+        value: url,
+        onChange: setUrl,
+        placeholder: "https://example.com",
+        __nextHasNoMarginBottom: true,
+        __next40pxDefaultSize: true
+      }), /*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: 8,
+          marginTop: 8
+        },
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          onClick: apply,
+          children: __('Apply', 'gcblite')
+        }), initial && /*#__PURE__*/_jsx(Button, {
+          variant: "tertiary",
+          onClick: () => {
+            editor.chain().focus().unsetLink().run();
+            onClose();
+          },
+          children: __('Remove', 'gcblite')
+        })]
+      })]
+    })
+  });
+}
+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 /*#__PURE__*/_jsxs("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'
+    },
+    children: [/*#__PURE__*/_jsxs("select", {
+      value: headingValue,
+      onChange: e => setHeading(e.target.value),
+      className: "gcb-richtext-block-select",
+      "aria-label": __('Text style', 'gcblite'),
+      children: [/*#__PURE__*/_jsx("option", {
+        value: "p",
+        children: __('Paragraph', 'gcblite')
+      }), headingLevels.map(l => /*#__PURE__*/_jsx("option", {
+        value: `h${l}`,
+        children: `Heading ${l}`
+      }, l))]
+    }), /*#__PURE__*/_jsx(ToolbarSeparator, {}), /*#__PURE__*/_jsx(TbButton, {
+      icon: formatBold,
+      label: __('Bold', 'gcblite'),
+      isPressed: editor.isActive('bold'),
+      onClick: () => editor.chain().focus().toggleBold().run()
+    }), /*#__PURE__*/_jsx(TbButton, {
+      icon: formatItalic,
+      label: __('Italic', 'gcblite'),
+      isPressed: editor.isActive('italic'),
+      onClick: () => editor.chain().focus().toggleItalic().run()
+    }), /*#__PURE__*/_jsx(TbButton, {
+      icon: formatStrikethrough,
+      label: __('Strikethrough', 'gcblite'),
+      isPressed: editor.isActive('strike'),
+      onClick: () => editor.chain().focus().toggleStrike().run()
+    }), /*#__PURE__*/_jsx(TbButton, {
+      icon: codeIcon,
+      label: __('Inline code', 'gcblite'),
+      isPressed: editor.isActive('code'),
+      onClick: () => editor.chain().focus().toggleCode().run()
+    }), /*#__PURE__*/_jsx(ToolbarSeparator, {}), /*#__PURE__*/_jsx(TbButton, {
+      icon: formatListBullets,
+      label: __('Bulleted list', 'gcblite'),
+      isPressed: editor.isActive('bulletList'),
+      onClick: () => editor.chain().focus().toggleBulletList().run()
+    }), /*#__PURE__*/_jsx(TbButton, {
+      icon: formatListNumbered,
+      label: __('Numbered list', 'gcblite'),
+      isPressed: editor.isActive('orderedList'),
+      onClick: () => editor.chain().focus().toggleOrderedList().run()
+    }), /*#__PURE__*/_jsx(TbButton, {
+      icon: quoteIcon,
+      label: __('Blockquote', 'gcblite'),
+      isPressed: editor.isActive('blockquote'),
+      onClick: () => editor.chain().focus().toggleBlockquote().run()
+    }), /*#__PURE__*/_jsx(ToolbarSeparator, {}), /*#__PURE__*/_jsx(TbButton, {
+      icon: linkIcon,
+      label: __('Link', 'gcblite'),
+      isPressed: editor.isActive('link'),
+      onClick: e => setLinkPopoverAnchor(e.currentTarget)
+    }), control.allowImages !== false && /*#__PURE__*/_jsx(TbButton, {
+      icon: imageIcon,
+      label: __('Insert image', 'gcblite'),
+      onClick: insertImage
+    }), /*#__PURE__*/_jsx(ToolbarSeparator, {}), /*#__PURE__*/_jsx(TbButton, {
+      icon: undoIcon,
+      label: __('Undo', 'gcblite'),
+      onClick: () => editor.chain().focus().undo().run(),
+      disabled: !editor.can().undo()
+    }), /*#__PURE__*/_jsx(TbButton, {
+      icon: redoIcon,
+      label: __('Redo', 'gcblite'),
+      onClick: () => editor.chain().focus().redo().run(),
+      disabled: !editor.can().redo()
+    }), linkPopoverAnchor && /*#__PURE__*/_jsx(LinkPopover, {
+      editor: editor,
+      anchor: linkPopoverAnchor,
+      onClose: () => setLinkPopoverAnchor(null)
+    })]
+  });
+}
+
+/**
+ * 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 /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Toolbar, {
+      editor: editor,
+      control: control
+    }), /*#__PURE__*/_jsx(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
+    }) => /*#__PURE__*/_jsxs(Button, {
+      onClick: onToggle,
+      "aria-expanded": isOpen,
+      className: "gcb-richtext-control__open",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "gcb-richtext-control__open-text",
+        children: preview || control.placeholder || __('Edit rich text…', 'gcblite')
+      }), /*#__PURE__*/_jsx(Icon, {
+        icon: editIcon,
+        size: 20,
+        className: "gcb-richtext-control__open-icon"
+      })]
+    });
+    const editorPanel = ({
+      close,
+      variant
+    }) => /*#__PURE__*/_jsx("div", {
+      className: `gcb-richtext-control__panel gcb-richtext-control__panel--${variant}`,
+      children: /*#__PURE__*/_jsx(RichtextEditorSurface, {
+        editor: editor,
+        control: control
+      })
+    });
+
+    // 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 /*#__PURE__*/_jsxs("div", {
+        className: "components-base-control gcb-richtext-control gcb-richtext-control--popout",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "components-base-control__field",
+          children: [control.label && /*#__PURE__*/_jsx("label", {
+            className: "components-base-control__label",
+            children: control.label
+          }), /*#__PURE__*/_jsx(ControlContext.Provider, {
+            value: {
+              variant: 'metabox'
+            },
+            children: /*#__PURE__*/_jsx(PopoverOrModal, {
+              modalTitle: control.label || __('Edit rich text', 'gcblite'),
+              modalSize: "large",
+              renderToggle: triggerButton,
+              renderContent: editorPanel
+            })
+          })]
+        }), control.helpText && /*#__PURE__*/_jsx("p", {
+          className: "components-base-control__help",
+          children: control.helpText
+        })]
+      });
+    }
+
+    // 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 /*#__PURE__*/_jsxs("div", {
+      className: "components-base-control gcb-richtext-control gcb-richtext-control--popout",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "components-base-control__field",
+        children: [control.label && /*#__PURE__*/_jsx("label", {
+          className: "components-base-control__label",
+          children: control.label
+        }), /*#__PURE__*/_jsx(PopoverOrModal, {
+          modalTitle: control.label || __('Edit rich text', 'gcblite'),
+          modalSize: "large",
+          dropdownProps: {
+            popoverProps: {
+              placement: 'left-start',
+              className: 'gcb-richtext-control__popover'
+            }
+          },
+          renderToggle: triggerButton,
+          renderContent: editorPanel
+        })]
+      }), control.helpText && /*#__PURE__*/_jsx("p", {
+        className: "components-base-control__help",
+        children: control.helpText
+      })]
+    });
+  }
+
+  // Inline variant (default on wide surfaces: meta-box, options,
+  // taxonomy, user-profile). Toolbar + editor render directly into
+  // the field — no overlay.
+  return /*#__PURE__*/_jsxs("div", {
+    className: "components-base-control gcb-richtext-control",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "components-base-control__field",
+      children: [control.label && /*#__PURE__*/_jsx("label", {
+        className: "components-base-control__label",
+        children: control.label
+      }), /*#__PURE__*/_jsx(RichtextEditorSurface, {
+        editor: editor,
+        control: control
+      })]
+    }), control.helpText && /*#__PURE__*/_jsx("p", {
+      className: "components-base-control__help",
+      children: control.helpText
+    })]
+  });
+}

package/dist/controls/select.js

@@ -0,0 +1,144 @@
+/**
+ * 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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 /*#__PURE__*/_jsxs("div", {
+      style: {
+        padding: '12px 0'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          fontWeight: 500,
+          marginBottom: '8px'
+        },
+        children: label
+      }), /*#__PURE__*/_jsx(Spinner, {})]
+    });
+  }
+  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 /*#__PURE__*/_jsx(SelectControl, {
+    label: label,
+    value: displayValue ?? '',
+    options: effectiveOptions,
+    onChange: handleChange,
+    help: help,
+    className: className,
+    __nextHasNoMarginBottom: true
+  });
+}
+
+/**
+ * Adapter: maps the registry's `{ control, value, onChange }` contract onto
+ * SelectFieldImpl's flat-prop contract.
+ */
+export default function SelectField({
+  control,
+  value,
+  onChange
+}) {
+  return /*#__PURE__*/_jsx(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/dist/controls/size.js

@@ -0,0 +1,59 @@
+/**
+ * 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';
+import { jsx as _jsx } from "react/jsx-runtime";
+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 /*#__PURE__*/_jsx(UnitControl, {
+      label: control.label,
+      value: value || '',
+      onChange: onChange,
+      units: UNITS,
+      help: control.helpText,
+      __nextHasNoMarginBottom: true
+    });
+  }
+
+  // Fallback when UnitControl isn't available — manual entry.
+  return /*#__PURE__*/_jsx(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: true
+  });
+}