@wordpress-gcb/fields 0.2.2 → 0.2.3

package/dist/controls/color.js

@@ -156,7 +156,8 @@ function ColorFieldImpl({
   disableCustomGradients = false,
   showGradients = true,
   className = '',
-  help
+  help,
+  tokenKeys
 }) {
   const themeColors = useSetting('color.palette');
   const themeGradients = useSetting('color.gradients');
@@ -164,8 +165,14 @@ function ColorFieldImpl({
   // 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`.
-  const finalColors = colors && colors.length ? colors : themeColors || [];
+  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,
@@ -236,6 +243,7 @@ export default function ColorField({
     showGradients: control.showGradients !== false,
     enableAlpha: control.enableAlpha !== false,
     disableCustomColors: control.disableCustomColors === true,
-    disableCustomGradients: control.disableCustomGradients === true
+    disableCustomGradients: control.disableCustomGradients === true,
+    tokenKeys: control.tokenKeys
   });
 }

package/dist/controls/spacing.js

@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { Button, TextControl, Notice } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalHStack as HStack } from '@wordpress/components';
+import { useTokens, getTokensByGroup } from '../hooks/useTokens';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_PRESETS = [{
   label: 'None',
@@ -25,6 +26,27 @@ const DEFAULT_PRESETS = [{
   value: 'large'
 }];
 const PRESET_KEYS = new Set(['none', 'small', 'medium', 'large']);
+
+/**
+ * Build the toggle presets from the theme's spacing tokens when the field was
+ * configured with a token group (and optional checked subset). Falls back to
+ * the simple None/S/M/L presets when no tokens are configured.
+ */
+function tokenPresets(control, tokens) {
+  const group = control.tokenGroup;
+  if (!group || !tokens) return null;
+  let list = getTokensByGroup(tokens, group);
+  if (!Array.isArray(list) || list.length === 0) return null;
+  if (Array.isArray(control.tokenKeys) && control.tokenKeys.length > 0) {
+    list = list.filter(t => control.tokenKeys.includes(t.slug || t.key));
+  }
+  if (list.length === 0) return null;
+  // Compact label (the slug or short name) — the value is the slug.
+  return list.map(t => ({
+    label: t.name || t.label || t.slug || t.key,
+    value: t.slug || t.key
+  }));
+}
 function isValidCSSValue(input) {
   if (!input) return true;
   return /^(\d*\.?\d+)(px|rem|em|%|vw|vh|vmin|vmax)?$/.test(String(input).trim());
@@ -34,13 +56,22 @@ export default function SpacingField({
   value,
   onChange
 }) {
+  const {
+    tokens
+  } = useTokens();
+
+  // Token-driven presets (from theme.json) take priority over the explicit
+  // `presets` config and the simple None/S/M/L fallback.
+  const presets = tokenPresets(control, tokens) || control.presets || DEFAULT_PRESETS;
+  const presetKeys = new Set(presets.map(p => p.value));
+  const firstPreset = presets[0]?.value || 'medium';
+
   // Decide if value is a preset or a custom string.
-  const isCustom = typeof value === 'string' && value !== '' && !PRESET_KEYS.has(value);
-  const presetValue = isCustom ? 'medium' : value || 'medium';
+  const isCustom = typeof value === 'string' && value !== '' && !presetKeys.has(value);
+  const presetValue = isCustom ? firstPreset : value || firstPreset;
   const [showCustom, setShowCustom] = useState(isCustom);
   const [customInput, setCustomInput] = useState(isCustom ? value : '');
   const [error, setError] = useState(null);
-  const presets = control.presets || DEFAULT_PRESETS;
   const handlePreset = next => {
     setShowCustom(false);
     setCustomInput('');
@@ -54,13 +85,13 @@ export default function SpacingField({
       return;
     }
     setError(null);
-    onChange(next || 'medium');
+    onChange(next || firstPreset);
   };
   const handleReset = () => {
     setShowCustom(false);
     setCustomInput('');
     setError(null);
-    onChange('medium');
+    onChange(firstPreset);
   };
   const displayHint = showCustom ? 'Custom' : presetValue.charAt(0).toUpperCase() + presetValue.slice(1);
   return /*#__PURE__*/_jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress-gcb/fields",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "GCB typed-field controls, inspector renderer, and schema — decoupled from the WordPress plugin so any Gutenberg/headless editor can use them.",
   "license": "GPL-2.0-or-later",
   "homepage": "https://gutenbergcontrolblocks.com",