@wordpress-gcb/fields 0.2.1 → 0.2.3

package/dist/controls/color.js

@@ -0,0 +1,249 @@
+/**
+ * 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.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function ColorPanel({
+  colorValue,
+  gradientValue,
+  onColorChange,
+  onGradientChange,
+  colors,
+  gradients,
+  enableAlpha,
+  disableCustomColors,
+  disableCustomGradients,
+  showGradients
+}) {
+  const palette = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ColorPalette, {
+      colors: colors,
+      value: colorValue,
+      onChange: onColorChange,
+      clearable: true,
+      disableCustomColors: disableCustomColors,
+      enableAlpha: enableAlpha
+    }), colorValue && /*#__PURE__*/_jsx(Button, {
+      variant: "secondary",
+      onClick: () => onColorChange(''),
+      style: {
+        marginTop: 10
+      },
+      children: __('Reset Color', 'gcblite')
+    })]
+  });
+  if (!showGradients) {
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        minWidth: 260,
+        padding: 12
+      },
+      children: palette
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      minWidth: 260,
+      padding: 12
+    },
+    children: /*#__PURE__*/_jsx(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'
+      }],
+      children: tab => /*#__PURE__*/_jsxs(_Fragment, {
+        children: [tab.name === 'color' && palette, tab.name === 'gradient' && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(GradientPicker, {
+            value: gradientValue || undefined,
+            onChange: next => onGradientChange(next || ''),
+            gradients: gradients || [],
+            clearable: true,
+            disableCustomGradients: disableCustomGradients,
+            __experimentalIsRenderedInSidebar: true
+          }), gradientValue && /*#__PURE__*/_jsx(Button, {
+            variant: "secondary",
+            onClick: () => onGradientChange(''),
+            style: {
+              marginTop: 10
+            },
+            children: __('Reset Gradient', 'gcblite')
+          })]
+        })]
+      })
+    })
+  });
+}
+
+/**
+ * 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 /*#__PURE__*/_jsx(Button, {
+    onClick: onToggle,
+    "aria-expanded": isOpen,
+    "aria-label": label,
+    className: "gcb-modal-toggle-button gcb-color-trigger",
+    children: /*#__PURE__*/_jsxs(HStack, {
+      spacing: 3,
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        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'
+        }
+      }), /*#__PURE__*/_jsx("span", {
+        style: {
+          flex: 1,
+          textAlign: 'left',
+          fontSize: 13,
+          color: '#1e1e1e',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        },
+        children: hasValue ? gradientValue ? __('Gradient', 'gcblite') : colorValue : __('Select a color', 'gcblite')
+      })]
+    })
+  });
+}
+function ColorFieldImpl({
+  label = __('Color', 'gcblite'),
+  colorValue,
+  gradientValue,
+  onColorChange,
+  onGradientChange,
+  colors,
+  gradients,
+  enableAlpha = true,
+  disableCustomColors = false,
+  disableCustomGradients = false,
+  showGradients = true,
+  className = '',
+  help,
+  tokenKeys
+}) {
+  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`.
+  let finalColors = colors && colors.length ? colors : themeColors || [];
+  const finalGradients = gradients && gradients.length ? gradients : themeGradients || [];
+
+  // When the field was built with a token subset (tokenKeys), restrict the
+  // palette to those theme colours by slug. Empty/absent = offer all.
+  if (Array.isArray(tokenKeys) && tokenKeys.length > 0) {
+    finalColors = finalColors.filter(c => tokenKeys.includes(c.slug));
+  }
+  return /*#__PURE__*/_jsx(BaseControl, {
+    label: label,
+    help: help,
+    className: `gcb-color-control components-base-control ${className}`.trim(),
+    __nextHasNoMarginBottom: true,
+    children: /*#__PURE__*/_jsx(PopoverOrModal, {
+      modalTitle: label,
+      dropdownProps: {
+        popoverProps: {
+          placement: 'left-start'
+        }
+      },
+      renderToggle: ({
+        isOpen,
+        onToggle
+      }) => /*#__PURE__*/_jsx(ColorTrigger, {
+        label: label,
+        colorValue: colorValue,
+        gradientValue: gradientValue,
+        onToggle: onToggle,
+        isOpen: isOpen
+      }),
+      renderContent: () => /*#__PURE__*/_jsx(ColorPanel, {
+        colorValue: colorValue,
+        gradientValue: gradientValue,
+        onColorChange: onColorChange,
+        onGradientChange: onGradientChange,
+        colors: finalColors,
+        gradients: finalGradients,
+        enableAlpha: enableAlpha,
+        disableCustomColors: disableCustomColors,
+        disableCustomGradients: disableCustomGradients,
+        showGradients: showGradients
+      })
+    })
+  });
+}
+
+/**
+ * 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 /*#__PURE__*/_jsx(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,
+    tokenKeys: control.tokenKeys
+  });
+}

package/dist/controls/date.js

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

package/dist/controls/datetime.js

@@ -0,0 +1,61 @@
+/**
+ * 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';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function DatetimeField({
+  control,
+  value,
+  onChange
+}) {
+  const displayLabel = value ? new Date(value).toLocaleString() : __('Pick a date and time', 'gcblite');
+  return /*#__PURE__*/_jsx(BaseControl, {
+    label: control.label,
+    help: control.helpText,
+    __nextHasNoMarginBottom: true,
+    children: /*#__PURE__*/_jsx(PopoverOrModal, {
+      modalTitle: control.label || __('Pick a date and time', 'gcblite'),
+      dropdownProps: {
+        popoverProps: {
+          placement: 'bottom-start'
+        }
+      },
+      renderToggle: ({
+        onToggle
+      }) => /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          onClick: onToggle,
+          children: displayLabel
+        }), value && /*#__PURE__*/_jsx(Button, {
+          variant: "tertiary",
+          size: "small",
+          isDestructive: true,
+          onClick: () => onChange(''),
+          style: {
+            marginLeft: 8
+          },
+          children: __('Clear', 'gcblite')
+        })]
+      }),
+      renderContent: () => /*#__PURE__*/_jsx("div", {
+        style: {
+          padding: 8
+        },
+        children: /*#__PURE__*/_jsx(DateTimePicker, {
+          currentDate: value || undefined,
+          onChange: next => onChange(next || ''),
+          is12Hour: true
+        })
+      })
+    })
+  });
+}

package/dist/controls/email.js

@@ -0,0 +1,17 @@
+import { TextControl } from '@wordpress/components';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function EmailField({
+  control,
+  value,
+  onChange
+}) {
+  return /*#__PURE__*/_jsx(TextControl, {
+    label: control.label,
+    help: control.helpText,
+    placeholder: control.placeholder ?? 'name@example.com',
+    type: "email",
+    value: value ?? '',
+    onChange: onChange,
+    __nextHasNoMarginBottom: true
+  });
+}

package/dist/controls/file.js

@@ -0,0 +1,163 @@
+/**
+ * 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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TOGGLE_BUTTON_STYLE = {
+  width: '100%',
+  height: 'auto',
+  padding: '12px',
+  justifyContent: 'flex-start',
+  border: '1px solid #ddd',
+  borderRadius: '2px',
+  backgroundColor: '#fff'
+};
+function FileIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    style: {
+      flexShrink: 0,
+      fill: '#1e1e1e'
+    },
+    "aria-hidden": true,
+    children: /*#__PURE__*/_jsx("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"
+    })
+  });
+}
+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 /*#__PURE__*/_jsxs("div", {
+    className: "components-base-control gcb-file-control",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "components-base-control__field",
+      children: /*#__PURE__*/_jsx("label", {
+        className: "components-base-control__label",
+        children: control.label
+      })
+    }), control.helpText && /*#__PURE__*/_jsx("p", {
+      className: "components-base-control__help",
+      children: control.helpText
+    }), /*#__PURE__*/_jsx(MediaCapabilityGate, {
+      children: /*#__PURE__*/_jsx(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
+        }) => /*#__PURE__*/_jsxs("div", {
+          children: [!hasFile && /*#__PURE__*/_jsx(Button, {
+            onClick: open,
+            variant: "secondary",
+            style: {
+              marginBottom: 8
+            },
+            children: __('Select File', 'gcblite')
+          }), hasFile && /*#__PURE__*/_jsx(PopoverOrModal, {
+            modalTitle: control.label || __('File', 'gcblite'),
+            dropdownProps: {
+              popoverProps: {
+                placement: 'left-start'
+              }
+            },
+            renderToggle: ({
+              isOpen,
+              onToggle
+            }) => /*#__PURE__*/_jsx(MediaTriggerBadges, {
+              onClear: () => onChange({
+                id: null,
+                url: '',
+                filename: '',
+                title: ''
+              }),
+              children: /*#__PURE__*/_jsx(Button, {
+                onClick: onToggle,
+                "aria-expanded": isOpen,
+                className: "gcb-modal-toggle-button gcb-file-control-toggle",
+                style: TOGGLE_BUTTON_STYLE,
+                children: /*#__PURE__*/_jsxs(HStack, {
+                  spacing: 3,
+                  children: [/*#__PURE__*/_jsx(FileIcon, {}), /*#__PURE__*/_jsx(Truncate, {
+                    numberOfLines: 1,
+                    children: displayTitle
+                  })]
+                })
+              })
+            }),
+            renderContent: ({
+              close
+            }) => /*#__PURE__*/_jsxs("div", {
+              style: {
+                padding: 16,
+                minWidth: 280
+              },
+              children: [/*#__PURE__*/_jsx(Button, {
+                onClick: () => {
+                  close();
+                  open();
+                },
+                variant: "secondary",
+                style: {
+                  width: '100%',
+                  marginBottom: 12
+                },
+                children: __('Replace File', 'gcblite')
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: () => {
+                  onChange({
+                    id: null,
+                    url: '',
+                    filename: '',
+                    title: ''
+                  });
+                  close();
+                },
+                variant: "tertiary",
+                isDestructive: true,
+                style: {
+                  width: '100%'
+                },
+                children: __('Remove File', 'gcblite')
+              })]
+            })
+          }), !hasFile && /*#__PURE__*/_jsx("p", {
+            style: {
+              fontSize: 13,
+              color: '#757575',
+              margin: 0
+            },
+            children: __('No file selected', 'gcblite')
+          })]
+        })
+      })
+    })]
+  });
+}