@wordpress-gcb/fields 0.2.1 → 0.2.3

package/dist/controls/icon.js

@@ -0,0 +1,292 @@
+/**
+ * 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.
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 /*#__PURE__*/_jsx("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 /*#__PURE__*/_jsxs(BaseControl, {
+    label: control.label,
+    help: control.helpText,
+    className: "gcb-icon-control",
+    __nextHasNoMarginBottom: true,
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6
+      },
+      children: [/*#__PURE__*/_jsxs(Button, {
+        ref: triggerRef,
+        variant: "secondary",
+        onClick: () => setOpen(v => !v),
+        className: "gcb-icon-control__trigger",
+        "aria-expanded": open,
+        children: [currentIcon ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(IconSvg, {
+            content: currentIcon.content,
+            className: "gcb-icon-control__trigger-svg"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "gcb-icon-control__trigger-label",
+            children: currentIcon.label
+          })]
+        }) : /*#__PURE__*/_jsx("span", {
+          className: "gcb-icon-control__trigger-empty",
+          children: current.name ? sprintf(__('Unknown icon (%s)', 'gcblite'), current.name) : __('Choose an icon…', 'gcblite')
+        }), /*#__PURE__*/_jsx("span", {
+          "aria-hidden": true,
+          className: "gcb-icon-control__trigger-caret",
+          children: "\u25BE"
+        })]
+      }), currentIcon && /*#__PURE__*/_jsx(Button, {
+        variant: "tertiary",
+        isDestructive: true,
+        onClick: clear,
+        "aria-label": __('Clear icon', 'gcblite'),
+        title: __('Clear icon', 'gcblite'),
+        children: "\u2715"
+      })]
+    }), open && /*#__PURE__*/_jsx(Popover, {
+      anchor: triggerRef.current,
+      onClose: () => {
+        setOpen(false);
+        setSearch('');
+      },
+      placement: "bottom-start",
+      className: "gcb-icon-control__popover",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "gcb-icon-control__panel",
+        children: [error === 'unsupported' && /*#__PURE__*/_jsx("p", {
+          className: "gcb-icon-control__error",
+          children: __('The icon picker needs WordPress 7.0 or newer.', 'gcblite')
+        }), error === 'fetch-failed' && /*#__PURE__*/_jsx("p", {
+          className: "gcb-icon-control__error",
+          children: __('Could not load icons from the REST API.', 'gcblite')
+        }), !error && !icons && /*#__PURE__*/_jsx("div", {
+          className: "gcb-icon-control__loading",
+          children: /*#__PURE__*/_jsx(Spinner, {})
+        }), !error && icons && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(TextControl, {
+            label: __('Search icons', 'gcblite'),
+            hideLabelFromVision: true,
+            placeholder: __('Search…', 'gcblite'),
+            value: search,
+            onChange: setSearch,
+            __nextHasNoMarginBottom: true,
+            __next40pxDefaultSize: true
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "gcb-icon-control__grid",
+            role: "listbox",
+            children: [filtered.length === 0 && /*#__PURE__*/_jsx("p", {
+              className: "gcb-icon-control__empty",
+              children: 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')
+            }), filtered.map(icon => /*#__PURE__*/_jsx("button", {
+              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),
+              children: /*#__PURE__*/_jsx(IconSvg, {
+                content: icon.content,
+                className: "gcb-icon-control__option-svg"
+              })
+            }, icon.name))]
+          }), current.name && /*#__PURE__*/_jsx("div", {
+            className: "gcb-icon-control__footer",
+            children: /*#__PURE__*/_jsx(Button, {
+              variant: "tertiary",
+              onClick: clear,
+              isDestructive: true,
+              children: __('Clear icon', 'gcblite')
+            })
+          })]
+        })]
+      })
+    })]
+  });
+}

package/dist/controls/image.js

@@ -0,0 +1,360 @@
+/**
+ * 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';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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'
+};
+
+/**
+ * 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 /*#__PURE__*/_jsxs("div", {
+    className: "gcb-image-control-content__sections",
+    children: [onReplace && /*#__PURE__*/_jsxs(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
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: '100%',
+          backgroundImage: `url(${imageValue.url})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          flexShrink: 0,
+          border: '1px solid #ddd',
+          display: 'block'
+        }
+      }), /*#__PURE__*/_jsx("span", {
+        style: {
+          flex: 1,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          textAlign: 'left'
+        },
+        children: displayTitle
+      }), /*#__PURE__*/_jsx(Icon, {
+        icon: editIcon,
+        size: 20,
+        style: {
+          fill: '#1e1e1e',
+          flexShrink: 0
+        }
+      })]
+    }), enableFocalPoint && /*#__PURE__*/_jsx(FocalPointPicker, {
+      url: imageValue.url,
+      value: focalPoint,
+      onChange: p => updateValue({
+        focalPoint: p
+      })
+    }), enableFixedBackground && /*#__PURE__*/_jsx(ToggleControl, {
+      label: __('Fixed background', 'gcblite'),
+      checked: isFixed,
+      onChange: v => updateValue({
+        isFixed: v
+      }),
+      __nextHasNoMarginBottom: true
+    }), enableSizeOptions && /*#__PURE__*/_jsxs("div", {
+      className: "gcb-image-control-content__sections",
+      children: [/*#__PURE__*/_jsxs(ToggleGroupControl, {
+        label: __('Size', 'gcblite'),
+        value: size,
+        onChange: v => {
+          if (v === 'cover' || v === 'contain') {
+            updateValue({
+              size: v,
+              repeat: false
+            });
+          } else {
+            updateValue({
+              size: v
+            });
+          }
+        },
+        isBlock: true,
+        __nextHasNoMarginBottom: true,
+        __next40pxDefaultSize: true,
+        help: size === 'cover' ? __('Image covers the space evenly.', 'gcblite') : size === 'contain' ? __('Image is contained without distortion.', 'gcblite') : undefined,
+        children: [/*#__PURE__*/_jsx(ToggleGroupControlOption, {
+          value: "cover",
+          label: __('Cover', 'gcblite')
+        }), /*#__PURE__*/_jsx(ToggleGroupControlOption, {
+          value: "contain",
+          label: __('Contain', 'gcblite')
+        }), /*#__PURE__*/_jsx(ToggleGroupControlOption, {
+          value: "auto",
+          label: __('Tile', 'gcblite')
+        })]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        spacing: 3,
+        children: [/*#__PURE__*/_jsx(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: true
+        }), enableRepeatOptions && /*#__PURE__*/_jsx(ToggleControl, {
+          label: __('Repeat', 'gcblite'),
+          checked: repeat,
+          onChange: v => updateValue({
+            repeat: v
+          }),
+          disabled: size === 'cover',
+          __nextHasNoMarginBottom: true
+        })]
+      })]
+    })]
+  });
+}
+export default function ImageField({
+  control,
+  value,
+  onChange
+}) {
+  const imageValue = value || {};
+  return /*#__PURE__*/_jsxs("div", {
+    className: "components-base-control gcb-image-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,
+            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
+        }) => /*#__PURE__*/_jsxs("div", {
+          className: "gcb-image-control-content",
+          children: [!imageValue?.url && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Button, {
+              onClick: open,
+              variant: "secondary",
+              style: {
+                marginBottom: 8
+              },
+              children: __('Add image', 'gcblite')
+            }), /*#__PURE__*/_jsx("p", {
+              style: {
+                fontSize: 13,
+                color: '#757575',
+                margin: 0
+              },
+              children: __('No image selected', 'gcblite')
+            })]
+          }), imageValue?.url && /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsx(MediaTriggerBadges, {
+                onClear: () => onChange(null),
+                children: /*#__PURE__*/_jsx(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,
+                  children: /*#__PURE__*/_jsxs(HStack, {
+                    spacing: 3,
+                    justify: "flex-start",
+                    children: [/*#__PURE__*/_jsx("span", {
+                      "aria-hidden": true,
+                      style: {
+                        width: 32,
+                        height: 32,
+                        borderRadius: '100%',
+                        backgroundImage: `url(${imageValue.url})`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                        flexShrink: 0,
+                        border: '1px solid #ddd',
+                        display: 'block'
+                      }
+                    }), /*#__PURE__*/_jsxs(FlexItem, {
+                      children: [/*#__PURE__*/_jsx(Truncate, {
+                        numberOfLines: 1,
+                        children: displayTitle
+                      }), /*#__PURE__*/_jsxs(VisuallyHidden, {
+                        children: [__('Image:', 'gcblite'), " ", displayTitle]
+                      })]
+                    })]
+                  })
+                })
+              });
+            },
+            renderContent: ({
+              close
+            }) => /*#__PURE__*/_jsx("div", {
+              style: {
+                padding: 16,
+                minWidth: 280
+              },
+              children: /*#__PURE__*/_jsx(ImageControlContent, {
+                control: control,
+                value: imageValue,
+                onChange: onChange,
+                onReplace: () => {
+                  close();
+                  open();
+                }
+              })
+            })
+          })]
+        })
+      })
+    })]
+  });
+}