@wordpress-gcb/fields 0.2.1 → 0.2.3

package/dist/controls/gallery.js

@@ -0,0 +1,371 @@
+/**
+ * GalleryField — ported verbatim from the original GCB GalleryControlComponent.
+ *
+ * Stored shape: array of image objects (same shape as ImageField), with
+ * focalPoint / size / customWidth / repeat / isFixed preserved per item across
+ * media-library reselects.
+ *
+ * Each row is independently draggable (dnd-kit) and edits open the same
+ * focal-point/size panel as the single-image control.
+ */
+
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { Button, __experimentalHStack as HStack, __experimentalTruncate as Truncate } from '@wordpress/components';
+import MediaPicker from './MediaPicker';
+import MediaCapabilityGate from './MediaCapabilityGate';
+import PopoverOrModal from './PopoverOrModal';
+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';
+import { ImageControlContent } from './image';
+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'
+};
+
+/**
+ * Single gallery row — drag handle + thumbnail dropdown trigger + remove button.
+ */
+function SortableGalleryImage({
+  image,
+  onUpdate,
+  onRemove,
+  control
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: image.id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    marginBottom: 8
+  };
+  const displayTitle = image.title || image.filename || image.alt || __('(no description)', 'gcblite');
+  return /*#__PURE__*/_jsx("div", {
+    ref: setNodeRef,
+    style: style,
+    className: "gcb-gallery-image-item",
+    children: /*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        ...attributes,
+        ...listeners,
+        style: {
+          cursor: 'grab',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 4,
+          flexShrink: 0
+        },
+        "aria-label": __('Drag to reorder', 'gcblite'),
+        children: /*#__PURE__*/_jsx("svg", {
+          viewBox: "0 0 20 20",
+          width: "16",
+          height: "16",
+          style: {
+            fill: '#666'
+          },
+          children: /*#__PURE__*/_jsx("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"
+          })
+        })
+      }), /*#__PURE__*/_jsx(MediaPicker, {
+        onSelect: media => onUpdate(image.id, {
+          ...image,
+          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
+        }),
+        allowedTypes: ['image'],
+        value: image.id,
+        render: ({
+          open
+        }) => /*#__PURE__*/_jsx(PopoverOrModal, {
+          modalTitle: displayTitle || __('Gallery image', 'gcblite'),
+          dropdownProps: {
+            popoverProps: {
+              placement: 'left-start'
+            }
+          },
+          renderToggle: ({
+            isOpen,
+            onToggle
+          }) => /*#__PURE__*/_jsx(Button, {
+            onClick: onToggle,
+            "aria-expanded": isOpen,
+            "aria-label": __('Image settings', 'gcblite'),
+            className: "gcb-modal-toggle-button gcb-image-control-toggle",
+            style: {
+              ...TOGGLE_BUTTON_STYLE,
+              flex: 1
+            },
+            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(${image.url})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  flexShrink: 0,
+                  border: '1px solid #ddd',
+                  display: 'block'
+                }
+              }), /*#__PURE__*/_jsx(Truncate, {
+                numberOfLines: 1,
+                children: displayTitle
+              })]
+            })
+          }),
+          renderContent: ({
+            close
+          }) => /*#__PURE__*/_jsxs("div", {
+            style: {
+              padding: 16,
+              minWidth: 280
+            },
+            children: [/*#__PURE__*/_jsx(ImageControlContent, {
+              control: control,
+              value: image,
+              onChange: newValue => onUpdate(image.id, newValue),
+              onReplace: () => {
+                close();
+                open();
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              style: {
+                marginTop: 16,
+                paddingTop: 16,
+                borderTop: '1px solid #ddd'
+              },
+              children: /*#__PURE__*/_jsx(Button, {
+                onClick: () => {
+                  onRemove(image.id);
+                  close();
+                },
+                variant: "link",
+                isDestructive: true,
+                style: {
+                  width: '100%'
+                },
+                children: __('Remove from gallery', 'gcblite')
+              })
+            })]
+          })
+        })
+      })]
+    })
+  });
+}
+export default function GalleryField({
+  control,
+  value,
+  onChange
+}) {
+  const [activeId, setActiveId] = useState(null);
+  const images = Array.isArray(value) ? value : [];
+  const sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 8
+    }
+  }));
+  const handleDragStart = event => setActiveId(event.active.id);
+  const handleDragEnd = event => {
+    const {
+      active,
+      over
+    } = event;
+    setActiveId(null);
+    if (over && active.id !== over.id) {
+      const oldIndex = images.findIndex(img => img.id === active.id);
+      const newIndex = images.findIndex(img => img.id === over.id);
+      onChange(arrayMove(images, oldIndex, newIndex));
+    }
+  };
+  const handleSelect = media => {
+    const newImages = Array.isArray(media) ? media : [media];
+    const existingMap = new Map(images.map(img => [img.id, img]));
+    const formatted = newImages.map(img => {
+      const existing = existingMap.get(img.id);
+      if (existing) {
+        return {
+          ...existing,
+          url: img.url,
+          alt: img.alt || existing.alt,
+          title: img.title || img.filename || existing.title,
+          filename: img.filename || existing.filename,
+          width: img.width,
+          height: img.height,
+          filesize: img.filesizeInBytes
+        };
+      }
+      return {
+        id: img.id,
+        url: img.url,
+        alt: img.alt || '',
+        title: img.title || img.filename || '',
+        filename: img.filename || '',
+        width: img.width,
+        height: img.height,
+        filesize: img.filesizeInBytes,
+        focalPoint: {
+          x: 0.5,
+          y: 0.5
+        },
+        size: 'cover',
+        customWidth: '',
+        repeat: true,
+        isFixed: false
+      };
+    });
+    onChange(formatted);
+  };
+  const removeImage = imageId => onChange(images.filter(img => img.id !== imageId));
+  const updateImage = (imageId, updates) => onChange(images.map(img => img.id === imageId ? {
+    ...img,
+    ...updates
+  } : img));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "components-base-control gcb-gallery-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: handleSelect,
+        allowedTypes: ['image'],
+        multiple: true,
+        gallery: true,
+        value: images.map(img => img.id),
+        render: ({
+          open
+        }) => /*#__PURE__*/_jsx("div", {
+          className: "gcb-gallery-control-content",
+          children: images.length === 0 ? /*#__PURE__*/_jsx(Button, {
+            onClick: open,
+            variant: "secondary",
+            style: {
+              marginBottom: 8
+            },
+            children: __('Add images', 'gcblite')
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsxs(DndContext, {
+              sensors: sensors,
+              collisionDetection: closestCenter,
+              onDragStart: handleDragStart,
+              onDragEnd: handleDragEnd,
+              children: [/*#__PURE__*/_jsx(SortableContext, {
+                items: images.map(img => img.id),
+                strategy: verticalListSortingStrategy,
+                children: /*#__PURE__*/_jsx("div", {
+                  className: "gcb-gallery-items",
+                  children: images.map(image => /*#__PURE__*/_jsx(SortableGalleryImage, {
+                    image: image,
+                    onUpdate: updateImage,
+                    onRemove: removeImage,
+                    control: control
+                  }, image.id))
+                })
+              }), /*#__PURE__*/_jsx(DragOverlay, {
+                children: activeId ? (() => {
+                  const active = images.find(img => img.id === activeId);
+                  const title = active?.title || active?.filename || active?.alt || __('(no description)', 'gcblite');
+                  return /*#__PURE__*/_jsxs("div", {
+                    style: {
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8,
+                      padding: '8px 12px',
+                      background: 'white',
+                      borderRadius: 2,
+                      boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+                      opacity: 0.9,
+                      maxWidth: 400,
+                      border: '1px solid #ddd'
+                    },
+                    children: [/*#__PURE__*/_jsx("svg", {
+                      viewBox: "0 0 20 20",
+                      width: "16",
+                      height: "16",
+                      style: {
+                        fill: '#666'
+                      },
+                      children: /*#__PURE__*/_jsx("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"
+                      })
+                    }), /*#__PURE__*/_jsx("span", {
+                      "aria-hidden": true,
+                      style: {
+                        width: 32,
+                        height: 32,
+                        borderRadius: '100%',
+                        backgroundImage: `url(${active?.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',
+                        fontSize: 13
+                      },
+                      children: title
+                    })]
+                  });
+                })() : null
+              })]
+            }), /*#__PURE__*/_jsx(Button, {
+              onClick: open,
+              variant: "secondary",
+              style: {
+                width: '100%',
+                marginTop: 12
+              },
+              children: __('Add more images', 'gcblite')
+            })]
+          })
+        })
+      })
+    })]
+  });
+}

package/dist/controls/google-map.js

@@ -0,0 +1,143 @@
+import { BaseControl, Notice, TextControl } from '@wordpress/components';
+import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useGoogleMapsEnabled } from '../provider';
+
+/**
+ * Google Map control — address search with autocomplete + interactive map.
+ *
+ * Stored shape:  { address, lat, lng, zoom }
+ *
+ * Maps features are gated on the host signalling a configured API key —
+ * `googleMapsEnabled` from GcbFieldsProvider, falling back to
+ * `window.gcbLite.googleMaps.hasApiKey`. With no key, falls back to a plain
+ * address input that sets `address` only. (The Maps JS SDK itself is enqueued
+ * by the host when a key exists; this control just reads window.google.)
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function GoogleMapField({
+  control,
+  value,
+  onChange
+}) {
+  const location = value && typeof value === 'object' ? value : {
+    address: '',
+    lat: null,
+    lng: null,
+    zoom: 14
+  };
+  const hasApiKey = useGoogleMapsEnabled();
+  const [address, setAddress] = useState(location.address || '');
+  useEffect(() => {
+    setAddress(location.address || '');
+  }, [location.address]);
+  const inputRef = useRef(null);
+  const mapRef = useRef(null);
+  const mapInstance = useRef(null);
+  const markerRef = useRef(null);
+  const update = useCallback(next => {
+    onChange({
+      ...location,
+      ...next
+    });
+  }, [onChange, location]);
+
+  // Wire up Places autocomplete on the input.
+  useEffect(() => {
+    if (!hasApiKey || !inputRef.current || !window.google?.maps?.places) return;
+    const ac = new window.google.maps.places.Autocomplete(inputRef.current, {
+      fields: ['formatted_address', 'geometry']
+    });
+    const listener = ac.addListener('place_changed', () => {
+      const place = ac.getPlace();
+      if (!place.geometry) return;
+      const lat = place.geometry.location.lat();
+      const lng = place.geometry.location.lng();
+      update({
+        address: place.formatted_address || '',
+        lat,
+        lng
+      });
+    });
+    return () => window.google.maps.event.removeListener(listener);
+  }, [hasApiKey, update]);
+
+  // Wire up the map preview when we have coords.
+  useEffect(() => {
+    if (!hasApiKey || !mapRef.current || !window.google?.maps) return;
+    if (location.lat == null || location.lng == null) return;
+    const center = {
+      lat: Number(location.lat),
+      lng: Number(location.lng)
+    };
+    if (!mapInstance.current) {
+      mapInstance.current = new window.google.maps.Map(mapRef.current, {
+        center,
+        zoom: location.zoom || 14,
+        disableDefaultUI: true,
+        clickableIcons: false
+      });
+      markerRef.current = new window.google.maps.Marker({
+        position: center,
+        map: mapInstance.current,
+        draggable: true
+      });
+      markerRef.current.addListener('dragend', e => {
+        update({
+          lat: e.latLng.lat(),
+          lng: e.latLng.lng()
+        });
+      });
+    } else {
+      mapInstance.current.setCenter(center);
+      markerRef.current.setPosition(center);
+    }
+  }, [hasApiKey, location.lat, location.lng, location.zoom, update]);
+  if (!hasApiKey) {
+    return /*#__PURE__*/_jsxs(BaseControl, {
+      label: control.label,
+      help: control.helpText,
+      __nextHasNoMarginBottom: true,
+      children: [/*#__PURE__*/_jsx(Notice, {
+        status: "warning",
+        isDismissible: false,
+        children: __('No Google Maps API key configured. Set one with the `gcb_google_maps_api_key` filter to enable autocomplete and the map preview.', 'gcblite')
+      }), /*#__PURE__*/_jsx(TextControl, {
+        label: "",
+        hideLabelFromVision: true,
+        value: address,
+        onChange: next => {
+          setAddress(next);
+          update({
+            address: next
+          });
+        },
+        placeholder: __('Enter an address…', 'gcblite'),
+        __nextHasNoMarginBottom: true
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(BaseControl, {
+    label: control.label,
+    help: control.helpText,
+    __nextHasNoMarginBottom: true,
+    children: [/*#__PURE__*/_jsx(TextControl, {
+      label: "",
+      hideLabelFromVision: true,
+      ref: inputRef,
+      value: address,
+      onChange: setAddress,
+      placeholder: __('Start typing an address…', 'gcblite'),
+      __nextHasNoMarginBottom: true
+    }), location.lat != null && location.lng != null && /*#__PURE__*/_jsx("div", {
+      ref: mapRef,
+      style: {
+        width: '100%',
+        height: 200,
+        marginTop: 8,
+        borderRadius: 4,
+        overflow: 'hidden'
+      }
+    })]
+  });
+}

package/dist/controls/heading-level.js

@@ -0,0 +1,93 @@
+/**
+ * HeadingLevel — compound input: a text field for the heading content
+ * and an inline dropdown for the semantic level. Visually mirrors WP's
+ * UnitControl (the "10 px" combo): input on the left, suffix selector
+ * on the right, single 40px-tall row.
+ *
+ * Stored shape:
+ *   { text: 'Section title', level: 'h2' }
+ *
+ * React frontend usage:
+ *   const { text, level } = heading || {};
+ *   if (!text) return null;
+ *   const Tag = level || 'h2';
+ *   return <Tag className="...">{text}</Tag>;
+ *
+ * Config:
+ *   levels        ['h1','h2','h3','h4','h5','h6','p','div','span'] (default)
+ *                 — set to your own subset to restrict choice.
+ *   default       { text, level }  — initial value when the attribute is empty
+ *   placeholder   string  — placeholder for the text input
+ *
+ * Accessibility: `div` and `span` are non-semantic; the helper text turns
+ * red when one is selected so authors see the trade-off before shipping.
+ *
+ * Implementation note: uses WP's @experimental `InputControl` primitive
+ * directly — same component UnitControl is built on top of. The `suffix`
+ * slot is exactly the "input + dropdown" pattern; the component handles
+ * the row height, focus ring, and emotion class plumbing so we don't.
+ */
+
+import { __ } from '@wordpress/i18n';
+import { __experimentalInputControl as InputControl, Notice } from '@wordpress/components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ALL_LEVELS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'div', 'span'];
+const HEADING_LEVELS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+function resolveLevels(control) {
+  if (Array.isArray(control.levels) && control.levels.length > 0) {
+    return control.levels.filter(l => ALL_LEVELS.includes(l));
+  }
+  return ALL_LEVELS;
+}
+export default function HeadingLevelField({
+  control,
+  value,
+  onChange
+}) {
+  const levels = resolveLevels(control);
+  const heading = value && typeof value === 'object' ? value : {};
+  const text = heading.text ?? control.default?.text ?? '';
+  const level = heading.level ?? control.default?.level ?? levels[0] ?? 'h2';
+  const isNonSemantic = !HEADING_LEVELS.has(level);
+  const update = patch => onChange({
+    text,
+    level,
+    ...patch
+  });
+  const levelSelect = /*#__PURE__*/_jsx("select", {
+    className: "components-unit-control__select",
+    "aria-label": __('Heading level', 'gcblite'),
+    value: level,
+    onChange: e => update({
+      level: e.target.value
+    }),
+    children: levels.map(lvl => /*#__PURE__*/_jsx("option", {
+      value: lvl,
+      children: lvl.toUpperCase()
+    }, lvl))
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: "components-base-control gcb-heading-level-control",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "components-base-control__field",
+      children: [/*#__PURE__*/_jsx(InputControl, {
+        label: control.label,
+        value: text,
+        placeholder: control.placeholder || __('Heading text', 'gcblite'),
+        onChange: next => update({
+          text: next ?? ''
+        }),
+        suffix: levelSelect,
+        __next40pxDefaultSize: true
+      }), isNonSemantic && /*#__PURE__*/_jsx(Notice, {
+        status: "warning",
+        isDismissible: false,
+        className: "gcb-heading-level-control__warning",
+        children: __('Non-heading elements are skipped by screen-reader heading navigation. Prefer H1–H6 for content titles.', 'gcblite')
+      })]
+    }), control.helpText && /*#__PURE__*/_jsx("p", {
+      className: "components-base-control__help",
+      children: control.helpText
+    })]
+  });
+}