@brilo/base-blocks 0.1.21 → 0.1.22

package/build/blocks/form/form-field/SelectOptionsRepeater.d.ts

@@ -0,0 +1,10 @@
+import type { OptionRow } from './normalizeOptions';
+type Props = {
+    rows: OptionRow[];
+    onChange: (rows: OptionRow[]) => void;
+    showEmail: boolean;
+    onClose: () => void;
+};
+export declare function SelectOptionsRepeater({ rows, onChange, showEmail, onClose }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SelectOptionsRepeater.d.ts.map

package/build/blocks/form/form-field/SelectOptionsRepeater.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOptionsRepeater.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/SelectOptionsRepeater.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAA;AAIjD,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,SAAS,EAAE,CAAA;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAC,EAAE,KAAK,+BAgGhF"}

package/build/blocks/form/form-field/SelectOptionsRepeater.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardBody, Flex, FlexBlock, FlexItem, TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { ReactSortable } from 'react-sortablejs';
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+export function SelectOptionsRepeater({ rows, onChange, showEmail, onClose }) {
+    const updateRow = (id, patch) => {
+        onChange(rows.map((row) => (row.id === id ? { ...row, ...patch } : row)));
+    };
+    const removeRow = (id) => {
+        onChange(rows.filter((row) => row.id !== id));
+    };
+    const addRow = () => {
+        onChange([...rows, { id: `${Date.now()}-${Math.random()}`, label: '', value: '', email: '' }]);
+    };
+    return (_jsxs("div", { className: "i-form-field__options-repeater", children: [_jsx(ReactSortable, { list: rows, setList: onChange, handle: ".i-form-field__option-drag-handle", animation: 150, children: rows.map((row) => {
+                    const isEmailInvalid = row.email.trim() !== '' && !EMAIL_PATTERN.test(row.email.trim());
+                    return (_jsx(Card, { size: "small", className: "i-form-field__option-row", children: _jsx(CardBody, { children: _jsxs(Flex, { align: "flex-start", gap: 3, children: [_jsx(FlexItem, { children: _jsx("span", { className: "i-form-field__option-drag-handle", "aria-hidden": "true", children: "\u283F" }) }), _jsx(FlexBlock, { children: _jsxs(Flex, { direction: "column", gap: 3, children: [_jsx(FlexItem, { children: _jsx(TextControl, { label: __('Popisek', 'brilo-blocks'), placeholder: __('Popisek možnosti', 'brilo-blocks'), value: row.label, onChange: (label) => updateRow(row.id, { label }) }) }), _jsx(FlexItem, { children: _jsx(TextControl, { label: __('Hodnota', 'brilo-blocks'), placeholder: __('auto (dle popisku)', 'brilo-blocks'), value: row.value, onChange: (value) => updateRow(row.id, { value }), help: __('Volitelné, jinak se odvodí z popisku.', 'brilo-blocks') }) }), showEmail && (_jsx(FlexItem, { children: _jsx(TextControl, { label: __('E-mail', 'brilo-blocks'), type: "email", placeholder: __('Email příjemce (volitelné)', 'brilo-blocks'), value: row.email, onChange: (email) => updateRow(row.id, { email }), help: isEmailInvalid ? __('Neplatný formát emailu.', 'brilo-blocks') : undefined }) }))] }) }), _jsx(FlexItem, { children: _jsx(Button, { icon: "no-alt", size: "small", variant: "tertiary", isDestructive: true, label: __('Odebrat možnost', 'brilo-blocks'), onClick: () => removeRow(row.id) }) })] }) }) }, row.id));
+                }) }), _jsxs(Flex, { className: "i-form-field__options-footer", justify: "flex-start", gap: 2, children: [_jsx(FlexItem, { children: _jsx(Button, { variant: "secondary", onClick: addRow, children: __('Přidat možnost', 'brilo-blocks') }) }), _jsx(FlexItem, { children: _jsx(Button, { variant: "tertiary", onClick: onClose, children: __('Zavřít', 'brilo-blocks') }) })] })] }));
+}

package/build/blocks/form/form-field/constants.d.ts

@@ -37,4 +37,12 @@ export declare const FIELD_COLUMNS_RANGE: {
     readonly max: 12;
 };
 export declare const FIELD_COLUMNS_DEFAULT = 6;
+export declare const FIELD_SELECT_MODE_VALUES: readonly ['classic', 'email'];
+export declare const FIELD_SELECT_MODES: readonly [{
+    readonly value: "classic";
+    readonly label: import("@wordpress/i18n").TransformedText<"Klasický">;
+}, {
+    readonly value: "email";
+    readonly label: import("@wordpress/i18n").TransformedText<"Výběr s routováním e-mailu">;
+}];
 //# sourceMappingURL=constants.d.ts.map

package/build/blocks/form/form-field/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,YAAI,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAA;AAElF,eAAO,MAAM,WAAW;aACrB,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;EAC3B,CAAA;AAEV,eAAO,MAAM,sBAAsB,YAAI,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAU,CAAA;AACjG,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;IAO5B,CAAA;AAED,eAAO,MAAM,mBAAmB;aAAI,GAAG,EAAE,CAAC;aAAE,GAAG,EAAE,EAAE;CAAU,CAAA;AAE7D,eAAO,MAAM,qBAAqB,IAAI,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,YAAI,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAA;AAElF,eAAO,MAAM,WAAW;aACrB,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;;aAClC,KAAK;aAAwB,KAAK;EAC3B,CAAA;AAEV,eAAO,MAAM,sBAAsB,YAAI,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAU,CAAA;AACjG,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;IAO5B,CAAA;AAED,eAAO,MAAM,mBAAmB;aAAI,GAAG,EAAE,CAAC;aAAE,GAAG,EAAE,EAAE;CAAU,CAAA;AAE7D,eAAO,MAAM,qBAAqB,IAAI,CAAA;AAEtC,eAAO,MAAM,wBAAwB,YAAI,SAAS,EAAE,OAAO,CAAU,CAAA;AAErE,eAAO,MAAM,kBAAkB;aAC5B,KAAK;aAA+B,KAAK;;aACzC,KAAK;aAA+B,KAAK;EAClC,CAAA"}

package/build/blocks/form/form-field/constants.js

@@ -17,3 +17,8 @@ export const FIELD_TEXT_TYPES = [
 ];
 export const FIELD_COLUMNS_RANGE = { min: 1, max: 12 };
 export const FIELD_COLUMNS_DEFAULT = 6;
+export const FIELD_SELECT_MODE_VALUES = ['classic', 'email'];
+export const FIELD_SELECT_MODES = [
+    { value: FIELD_SELECT_MODE_VALUES[0], label: __('Klasický', 'brilo-blocks') },
+    { value: FIELD_SELECT_MODE_VALUES[1], label: __('Výběr s routováním e-mailu', 'brilo-blocks') },
+];

package/build/blocks/form/form-field/edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/edit.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,mBAAmB,EAAE,gBAAgB,EAAmC,MAAM,SAAS,CAAA;AAe/F,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,oCAIzD;IACD,UAAU,EAAE,mBAAmB,CAAA;IAC/B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;CACzD,iCAiKF"}
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/edit.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,mBAAmB,EAAE,gBAAgB,EAAwD,MAAM,SAAS,CAAA;AAepH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,oCAIzD;IACD,UAAU,EAAE,mBAAmB,CAAA;IAC/B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;CACzD,iCAwLF"}

package/build/blocks/form/form-field/edit.js

@@ -1,9 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { Button, FormTokenField, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { Button, Modal, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_TEXT_TYPES, FIELD_TYPES } from './constants';
+import { useState } from 'react';
+import { FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_SELECT_MODES, FIELD_TEXT_TYPES, FIELD_TYPES } from './constants';
+import { normalizeOptions, serializeOptions } from './normalizeOptions';
+import { SelectOptionsRepeater } from './SelectOptionsRepeater';
 const { min: MIN_COLUMNS, max: MAX_COLUMNS } = FIELD_COLUMNS_RANGE;
 function sanitizeHtmlName(raw) {
     return (raw !== null && raw !== void 0 ? raw : '')
@@ -17,17 +20,23 @@ function sanitizeHtmlName(raw) {
 }
 export function createFormFieldEdit(_options) {
     return function Edit({ attributes, setAttributes, }) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const currentColumns = Math.max(MIN_COLUMNS, Math.min(MAX_COLUMNS, attributes.columns || MIN_COLUMNS));
         const blockProps = useBlockProps({
             className: clsx('i-form-field', `--type-${attributes.type}`, `--cols-${currentColumns}`, attributes.required && '--required'),
         });
-        const options = Array.isArray(attributes.options) ? attributes.options.filter((opt) => typeof opt === 'string') : [];
-        const selectOptions = [{ label: __('Žádná', 'brilo-blocks'), value: '' }, ...options.map((opt) => ({ label: opt, value: opt }))];
-        return (_jsxs(_Fragment, { children: [_jsx(InspectorControls, { children: _jsxs(PanelBody, { title: __('Pole formuláře', 'brilo-blocks'), children: [_jsx(SelectControl, { label: __('Typ inputu', 'brilo-blocks'), value: attributes.type, options: FIELD_TYPES.map((t) => ({ label: t.label, value: t.value })), onChange: (type) => setAttributes({ type: type }) }), attributes.type === 'text' && (_jsx(_Fragment, { children: _jsx(SelectControl, { label: __('Typ textovho inputu', 'brilo-blocks'), value: attributes.textType, options: FIELD_TEXT_TYPES.map((t) => ({ label: t.label, value: t.value })), onChange: (fieldType) => setAttributes({ textType: fieldType }) }) })), attributes.type !== 'hidden' && (_jsxs(_Fragment, { children: [_jsx(TextControl, { label: __('Popisek', 'brilo-blocks'), value: attributes.label, onChange: (label) => setAttributes({ label }) }), _jsx(ToggleControl, { label: __('Povinné', 'brilo-blocks'), checked: attributes.required, onChange: (required) => setAttributes({ required }) }), _jsx(TextControl, { label: __('Název html atributu', 'brilo-blocks'), value: attributes.name, help: __('Použijte pouze bezpečné znaky: a-z, 0-9, pomlčka a podtržítko. Např. city-born-to. Mezery a diakritika se automaticky odstraní.', 'brilo-blocks'), onChange: (name) => setAttributes({ name: sanitizeHtmlName(name) }) }), _jsx(TextControl, { label: __('Placeholder', 'brilo-blocks'), value: attributes.placeholder, onChange: (placeholder) => setAttributes({ placeholder }) })] })), attributes.type === 'select' && (_jsxs(_Fragment, { children: [_jsx(FormTokenField, { label: __('Možnosti', 'brilo-blocks'), value: options, onChange: (nextOptions) => setAttributes({
-                                            options: (nextOptions !== null && nextOptions !== void 0 ? nextOptions : [])
-                                                .map((opt) => (typeof opt === 'string' ? opt : opt.value))
-                                                .filter((opt) => typeof opt === 'string' && opt.length > 0),
-                                        }) }), _jsx(SelectControl, { label: __('Výchozí hodnota', 'brilo-blocks'), value: (_a = attributes.defaultValue) !== null && _a !== void 0 ? _a : '', options: selectOptions, onChange: (defaultValue) => setAttributes({ defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : '' }) })] })), attributes.type === 'hidden' && (_jsxs(_Fragment, { children: [_jsx(TextControl, { label: __('Hodnota', 'brilo-blocks'), value: (_b = attributes.value) !== null && _b !== void 0 ? _b : '', onChange: (value) => setAttributes({ value }), help: __('Hodnota, která bude odeslána s formulářem.', 'brilo-blocks') }), _jsx(TextControl, { label: __('Název html atributu', 'brilo-blocks'), value: attributes.name, help: __('Použijte pouze bezpečné znaky: a-z, 0-9, pomlčka a podtržítko. Mezery a diakritika se automaticky odstraní.', 'brilo-blocks'), onChange: (name) => setAttributes({ name: sanitizeHtmlName(name) }) })] })), attributes.type !== 'hidden' && (_jsx(RangeControl, { label: __('Počet sloupců', 'brilo-blocks'), value: currentColumns, min: MIN_COLUMNS, max: MAX_COLUMNS, onChange: (columns) => setAttributes({ columns: Math.max(MIN_COLUMNS, Math.min(MAX_COLUMNS, columns !== null && columns !== void 0 ? columns : FIELD_COLUMNS_DEFAULT)) }) }))] }) }), _jsx("div", { ...blockProps, children: _jsx("div", { className: "i-form-field__wrapper", children: attributes.type === 'hidden' ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: __('Skryté pole', 'brilo-blocks') }), _jsxs("div", { children: [__('Hodnota', 'brilo-blocks'), ": ", (_c = attributes.value) !== null && _c !== void 0 ? _c : ''] }), _jsxs("div", { children: [__('Název', 'brilo-blocks'), ": ", (_d = attributes.name) !== null && _d !== void 0 ? _d : ''] })] })) : (_jsxs(_Fragment, { children: [_jsx("strong", { children: attributes.label || __('Pole', 'brilo-blocks') }), _jsx("div", { children: attributes.type }), _jsxs("div", { className: "i-form-field__columns-control", children: [_jsx(Button, { size: "small", variant: "secondary", onClick: () => setAttributes({ columns: Math.max(MIN_COLUMNS, currentColumns - 1) }), disabled: currentColumns <= MIN_COLUMNS, "aria-label": __('Snížit počet sloupců', 'brilo-blocks'), children: "-" }), _jsx("div", { className: "i-form-field__columns-value", children: `${currentColumns}/${MAX_COLUMNS}` }), _jsx(Button, { size: "small", variant: "secondary", onClick: () => setAttributes({ columns: Math.min(MAX_COLUMNS, currentColumns + 1) }), disabled: currentColumns >= MAX_COLUMNS, "aria-label": __('Zvýšit počet sloupců', 'brilo-blocks'), children: "+" })] })] })) }) })] }));
+        // Rows carry a locally-generated id (for React/Sortable identity) that is never persisted;
+        // deriving it fresh from attributes on every render would remount inputs and drop focus mid-keystroke.
+        const [optionRows, setOptionRows] = useState(() => normalizeOptions(attributes.options));
+        const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
+        const updateOptionRows = (rows) => {
+            setOptionRows(rows);
+            setAttributes({ options: serializeOptions(rows) });
+        };
+        const selectOptions = [
+            { label: __('Žádná', 'brilo-blocks'), value: '' },
+            ...optionRows.map((row) => ({ label: row.label, value: row.label })),
+        ];
+        return (_jsxs(_Fragment, { children: [_jsx(InspectorControls, { children: _jsxs(PanelBody, { title: __('Pole formuláře', 'brilo-blocks'), children: [_jsx(SelectControl, { label: __('Typ inputu', 'brilo-blocks'), value: attributes.type, options: FIELD_TYPES.map((t) => ({ label: t.label, value: t.value })), onChange: (type) => setAttributes({ type: type }) }), attributes.type === 'text' && (_jsx(_Fragment, { children: _jsx(SelectControl, { label: __('Typ textovho inputu', 'brilo-blocks'), value: attributes.textType, options: FIELD_TEXT_TYPES.map((t) => ({ label: t.label, value: t.value })), onChange: (fieldType) => setAttributes({ textType: fieldType }) }) })), attributes.type !== 'hidden' && (_jsxs(_Fragment, { children: [_jsx(TextControl, { label: __('Popisek', 'brilo-blocks'), value: attributes.label, onChange: (label) => setAttributes({ label }) }), _jsx(ToggleControl, { label: __('Povinné', 'brilo-blocks'), checked: attributes.required, onChange: (required) => setAttributes({ required }) }), _jsx(TextControl, { label: __('Název html atributu', 'brilo-blocks'), value: attributes.name, help: __('Použijte pouze bezpečné znaky: a-z, 0-9, pomlčka a podtržítko. Např. city-born-to. Mezery a diakritika se automaticky odstraní.', 'brilo-blocks'), onChange: (name) => setAttributes({ name: sanitizeHtmlName(name) }) }), _jsx(TextControl, { label: __('Placeholder', 'brilo-blocks'), value: attributes.placeholder, onChange: (placeholder) => setAttributes({ placeholder }) })] })), attributes.type === 'select' && (_jsxs(_Fragment, { children: [_jsx(SelectControl, { label: __('Režim selectu', 'brilo-blocks'), value: (_a = attributes.selectMode) !== null && _a !== void 0 ? _a : 'classic', options: FIELD_SELECT_MODES.map((m) => ({ label: m.label, value: m.value })), onChange: (selectMode) => setAttributes({ selectMode: selectMode }) }), _jsx("div", { className: "i-form-field__options-trigger", children: _jsx(Button, { variant: "secondary", onClick: () => setIsOptionsModalOpen(true), children: sprintf(__('Upravit možnosti (%d)', 'brilo-blocks'), optionRows.length) }) }), isOptionsModalOpen && (_jsx(Modal, { title: __('Možnosti pole', 'brilo-blocks'), onRequestClose: () => setIsOptionsModalOpen(false), size: "large", children: _jsx(SelectOptionsRepeater, { rows: optionRows, onChange: updateOptionRows, showEmail: ((_b = attributes.selectMode) !== null && _b !== void 0 ? _b : 'classic') === 'email', onClose: () => setIsOptionsModalOpen(false) }) })), _jsx(SelectControl, { label: __('Výchozí hodnota', 'brilo-blocks'), value: (_c = attributes.defaultValue) !== null && _c !== void 0 ? _c : '', options: selectOptions, onChange: (defaultValue) => setAttributes({ defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : '' }) })] })), attributes.type === 'hidden' && (_jsxs(_Fragment, { children: [_jsx(TextControl, { label: __('Hodnota', 'brilo-blocks'), value: (_d = attributes.value) !== null && _d !== void 0 ? _d : '', onChange: (value) => setAttributes({ value }), help: __('Hodnota, která bude odeslána s formulářem.', 'brilo-blocks') }), _jsx(TextControl, { label: __('Název html atributu', 'brilo-blocks'), value: attributes.name, help: __('Použijte pouze bezpečné znaky: a-z, 0-9, pomlčka a podtržítko. Mezery a diakritika se automaticky odstraní.', 'brilo-blocks'), onChange: (name) => setAttributes({ name: sanitizeHtmlName(name) }) })] })), attributes.type !== 'hidden' && (_jsx(RangeControl, { label: __('Počet sloupců', 'brilo-blocks'), value: currentColumns, min: MIN_COLUMNS, max: MAX_COLUMNS, onChange: (columns) => setAttributes({ columns: Math.max(MIN_COLUMNS, Math.min(MAX_COLUMNS, columns !== null && columns !== void 0 ? columns : FIELD_COLUMNS_DEFAULT)) }) }))] }) }), _jsx("div", { ...blockProps, children: _jsx("div", { className: "i-form-field__wrapper", children: attributes.type === 'hidden' ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: __('Skryté pole', 'brilo-blocks') }), _jsxs("div", { children: [__('Hodnota', 'brilo-blocks'), ": ", (_e = attributes.value) !== null && _e !== void 0 ? _e : ''] }), _jsxs("div", { children: [__('Název', 'brilo-blocks'), ": ", (_f = attributes.name) !== null && _f !== void 0 ? _f : ''] })] })) : (_jsxs(_Fragment, { children: [_jsx("strong", { children: attributes.label || __('Pole', 'brilo-blocks') }), _jsx("div", { children: attributes.type }), _jsxs("div", { className: "i-form-field__columns-control", children: [_jsx(Button, { size: "small", variant: "secondary", onClick: () => setAttributes({ columns: Math.max(MIN_COLUMNS, currentColumns - 1) }), disabled: currentColumns <= MIN_COLUMNS, "aria-label": __('Snížit počet sloupců', 'brilo-blocks'), children: "-" }), _jsx("div", { className: "i-form-field__columns-value", children: `${currentColumns}/${MAX_COLUMNS}` }), _jsx(Button, { size: "small", variant: "secondary", onClick: () => setAttributes({ columns: Math.min(MAX_COLUMNS, currentColumns + 1) }), disabled: currentColumns >= MAX_COLUMNS, "aria-label": __('Zvýšit počet sloupců', 'brilo-blocks'), children: "+" })] })] })) }) })] }));
     };
 }

package/build/blocks/form/form-field/factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAIzD,OAAO,KAAK,EAAC,mBAAmB,EAAE,gBAAgB,EAAC,MAAM,SAAS,CAAA;AAElE,YAAY,EAAC,mBAAmB,EAAE,gBAAgB,EAAC,CAAA;AAEnD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,kBAAkB,CAAC,mBAAmB,CAAC,CAwBvG"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAIzD,OAAO,KAAK,EAAC,mBAAmB,EAAE,gBAAgB,EAAC,MAAM,SAAS,CAAA;AAElE,YAAY,EAAC,mBAAmB,EAAE,gBAAgB,EAAC,CAAA;AAEnD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,kBAAkB,CAAC,mBAAmB,CAAC,CAyBvG"}

package/build/blocks/form/form-field/factory.js

@@ -20,6 +20,7 @@ export function createFormFieldBlock(options) {
             placeholder: { type: 'string', default: '' },
             required: { type: 'boolean', default: false },
             options: { type: 'array', default: [] },
+            selectMode: { type: 'string', default: 'classic' },
             defaultValue: { type: 'string', default: '' },
             value: { type: 'string', default: '' },
         },

package/build/blocks/form/form-field/normalizeOptions.d.ts

@@ -0,0 +1,18 @@
+export type PersistedOption = string | {
+    label?: unknown;
+    value?: unknown;
+    email?: unknown;
+};
+export type OptionRow = {
+    id: string;
+    label: string;
+    value: string;
+    email: string;
+};
+export declare function normalizeOptions(options: unknown): OptionRow[];
+export declare function serializeOptions(rows: OptionRow[]): Array<{
+    label: string;
+    value?: string;
+    email?: string;
+}>;
+//# sourceMappingURL=normalizeOptions.d.ts.map

package/build/blocks/form/form-field/normalizeOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeOptions.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/normalizeOptions.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAC,CAAA;AAE1F,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAMD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,CA0B9D;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAgB1G"}

package/build/blocks/form/form-field/normalizeOptions.js

@@ -0,0 +1,39 @@
+function makeId() {
+    return typeof crypto !== 'undefined' && 'randomUUID' in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`;
+}
+export function normalizeOptions(options) {
+    if (!Array.isArray(options)) {
+        return [];
+    }
+    return options
+        .map((option) => {
+        if (typeof option === 'string') {
+            return option === '' ? null : { id: makeId(), label: option, value: '', email: '' };
+        }
+        if (option && typeof option === 'object') {
+            const label = typeof option.label === 'string' ? option.label : '';
+            const value = typeof option.value === 'string' ? option.value : '';
+            const email = typeof option.email === 'string' ? option.email : '';
+            if (label === '') {
+                return null;
+            }
+            return { id: makeId(), label, value, email };
+        }
+        return null;
+    })
+        .filter((row) => row !== null);
+}
+export function serializeOptions(rows) {
+    return rows
+        .filter((row) => row.label.trim() !== '')
+        .map((row) => {
+        const option = { label: row.label };
+        if (row.value.trim() !== '') {
+            option.value = row.value.trim();
+        }
+        if (row.email.trim() !== '') {
+            option.email = row.email.trim();
+        }
+        return option;
+    });
+}

package/build/blocks/form/form-field/types.d.ts

@@ -1,7 +1,13 @@
-import { FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES } from './constants';
+import { FIELD_SELECT_MODE_VALUES, FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES } from './constants';
 import type { BriloBlockType } from '../../../types';
 export type FormFieldType = (typeof FIELD_TYPE_VALUES)[number];
 export type FormFieldTextType = (typeof FIELD_TEXT_TYPE_VALUES)[number];
+export type FormFieldSelectMode = (typeof FIELD_SELECT_MODE_VALUES)[number];
+export type FormFieldOption = string | {
+    label?: string;
+    value?: string;
+    email?: string;
+};
 export interface FormFieldAttributes extends Record<string, unknown> {
     type: FormFieldType;
     textType: FormFieldTextType;
@@ -10,7 +16,8 @@ export interface FormFieldAttributes extends Record<string, unknown> {
     name: string;
     placeholder: string;
     required: boolean;
-    options: string[];
+    options: FormFieldOption[];
+    selectMode: FormFieldSelectMode;
     defaultValue: string;
     value: string;
 }

package/build/blocks/form/form-field/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,sBAAsB,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAA;AACvF,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAE3C,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvE,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,wBAAwB,EAAoB,sBAAsB,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAA;AACjH,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAE3C,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AACvE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3E,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAEvF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,UAAU,EAAE,mBAAmB,CAAA;IAC/B,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG"}

package/build/blocks/signpost/signpost-group/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const COLUMNS: readonly [5, 4, 3, 2];
+export declare const COLUMNS: readonly [4, 3, 2];
 export declare const RATIOS: readonly ['4:3', '3:2', '16:9', '1:1', '2:1', '3:4'];
 export declare const HEADING_LEVELS: readonly [2, 3, 4];
 export declare const DEFAULT_SHADOWS: readonly [{

package/build/blocks/signpost/signpost-group/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/signpost/signpost-group/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,YAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAA;AAC5C,eAAO,MAAM,MAAM,YAAI,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAU,CAAA;AAC1E,eAAO,MAAM,cAAc,YAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAA;AAEhD,eAAO,MAAM,eAAe;aACzB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,IAAI;aAAE,KAAK;EACX,CAAA;AAEV,eAAO,MAAM,aAAa;aACvB,KAAK,EAAE,CAAC;aAAE,KAAK,EAAE,GAAG;;aACpB,KAAK,EAAE,GAAG;aAAE,KAAK,EAAE,KAAK;;aACxB,KAAK,EAAE,CAAC;aAAE,KAAK,EAAE,GAAG;;aACpB,KAAK,EAAE,GAAG;aAAE,KAAK,EAAE,KAAK;;aACxB,KAAK,EAAE,CAAC;aAAE,KAAK,EAAE,GAAG;EACb,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/signpost/signpost-group/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,YAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAA;AACzC,eAAO,MAAM,MAAM,YAAI,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAU,CAAA;AAC1E,eAAO,MAAM,cAAc,YAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAA;AAEhD,eAAO,MAAM,eAAe;aACzB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,IAAI;aAAE,KAAK;EACX,CAAA;AAEV,eAAO,MAAM,aAAa;aACvB,KAAK,EAAE,CAAC;aAAE,KAAK,EAAE,GAAG;;aACpB,KAAK,EAAE,GAAG;aAAE,KAAK,EAAE,KAAK;;aACxB,KAAK,EAAE,CAAC;aAAE,KAAK,EAAE,GAAG;;aACpB,KAAK,EAAE,GAAG;aAAE,KAAK,EAAE,KAAK;;aACxB,KAAK,EAAE,CAAC;aAAE,KAAK,EAAE,GAAG;EACb,CAAA"}

package/build/blocks/signpost/signpost-group/constants.js

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-export const COLUMNS = [5, 4, 3, 2];
+export const COLUMNS = [4, 3, 2];
 export const RATIOS = ['4:3', '3:2', '16:9', '1:1', '2:1', '3:4'];
 export const HEADING_LEVELS = [2, 3, 4];
 export const DEFAULT_SHADOWS = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brilo/base-blocks",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "author": "Brilo",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -22,6 +22,7 @@
   "devDependencies": {
     "@biomejs/biome": "2.5.6",
     "@types/react": "^18.3.12",
+    "@types/sortablejs": "^1.15.8",
     "@types/wordpress__block-editor": "^15.0.6",
     "@wordpress/block-editor": "^16.1.0",
     "@wordpress/blocks": "^15.25.0",
@@ -34,7 +35,9 @@
     "typescript": "^7.0.2"
   },
   "dependencies": {
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "react-sortablejs": "^6.1.4",
+    "sortablejs": "^1.15.7"
   },
   "files": [
     "build",

package/src/blocks/form/form-field/SelectOptionsRepeater.tsx

@@ -0,0 +1,111 @@
+import {Button, Card, CardBody, Flex, FlexBlock, FlexItem, TextControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {ReactSortable} from 'react-sortablejs'
+import type {OptionRow} from './normalizeOptions'
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+type Props = {
+  rows: OptionRow[]
+  onChange: (rows: OptionRow[]) => void
+  showEmail: boolean
+  onClose: () => void
+}
+
+export function SelectOptionsRepeater({rows, onChange, showEmail, onClose}: Props) {
+  const updateRow = (id: string, patch: Partial<OptionRow>) => {
+    onChange(rows.map((row) => (row.id === id ? {...row, ...patch} : row)))
+  }
+
+  const removeRow = (id: string) => {
+    onChange(rows.filter((row) => row.id !== id))
+  }
+
+  const addRow = () => {
+    onChange([...rows, {id: `${Date.now()}-${Math.random()}`, label: '', value: '', email: ''}])
+  }
+
+  return (
+    <div className="i-form-field__options-repeater">
+      <ReactSortable list={rows} setList={onChange} handle=".i-form-field__option-drag-handle" animation={150}>
+        {rows.map((row) => {
+          const isEmailInvalid = row.email.trim() !== '' && !EMAIL_PATTERN.test(row.email.trim())
+
+          return (
+            <Card size="small" className="i-form-field__option-row" key={row.id}>
+              <CardBody>
+                <Flex align="flex-start" gap={3}>
+                  <FlexItem>
+                    <span className="i-form-field__option-drag-handle" aria-hidden="true">
+                      ⠿
+                    </span>
+                  </FlexItem>
+
+                  <FlexBlock>
+                    <Flex direction="column" gap={3}>
+                      <FlexItem>
+                        <TextControl
+                          label={__('Popisek', 'brilo-blocks')}
+                          placeholder={__('Popisek možnosti', 'brilo-blocks')}
+                          value={row.label}
+                          onChange={(label) => updateRow(row.id, {label})}
+                        />
+                      </FlexItem>
+
+                      <FlexItem>
+                        <TextControl
+                          label={__('Hodnota', 'brilo-blocks')}
+                          placeholder={__('auto (dle popisku)', 'brilo-blocks')}
+                          value={row.value}
+                          onChange={(value) => updateRow(row.id, {value})}
+                          help={__('Volitelné, jinak se odvodí z popisku.', 'brilo-blocks')}
+                        />
+                      </FlexItem>
+
+                      {showEmail && (
+                        <FlexItem>
+                          <TextControl
+                            label={__('E-mail', 'brilo-blocks')}
+                            type="email"
+                            placeholder={__('Email příjemce (volitelné)', 'brilo-blocks')}
+                            value={row.email}
+                            onChange={(email) => updateRow(row.id, {email})}
+                            help={isEmailInvalid ? __('Neplatný formát emailu.', 'brilo-blocks') : undefined}
+                          />
+                        </FlexItem>
+                      )}
+                    </Flex>
+                  </FlexBlock>
+
+                  <FlexItem>
+                    <Button
+                      icon="no-alt"
+                      size="small"
+                      variant="tertiary"
+                      isDestructive
+                      label={__('Odebrat možnost', 'brilo-blocks')}
+                      onClick={() => removeRow(row.id)}
+                    />
+                  </FlexItem>
+                </Flex>
+              </CardBody>
+            </Card>
+          )
+        })}
+      </ReactSortable>
+
+      <Flex className="i-form-field__options-footer" justify="flex-start" gap={2}>
+        <FlexItem>
+          <Button variant="secondary" onClick={addRow}>
+            {__('Přidat možnost', 'brilo-blocks')}
+          </Button>
+        </FlexItem>
+        <FlexItem>
+          <Button variant="tertiary" onClick={onClose}>
+            {__('Zavřít', 'brilo-blocks')}
+          </Button>
+        </FlexItem>
+      </Flex>
+    </div>
+  )
+}

package/src/blocks/form/form-field/constants.ts

@@ -22,3 +22,10 @@ export const FIELD_TEXT_TYPES = [
 export const FIELD_COLUMNS_RANGE = {min: 1, max: 12} as const
 
 export const FIELD_COLUMNS_DEFAULT = 6
+
+export const FIELD_SELECT_MODE_VALUES = ['classic', 'email'] as const
+
+export const FIELD_SELECT_MODES = [
+  {value: FIELD_SELECT_MODE_VALUES[0], label: __('Klasický', 'brilo-blocks')},
+  {value: FIELD_SELECT_MODE_VALUES[1], label: __('Výběr s routováním e-mailu', 'brilo-blocks')},
+] as const

package/src/blocks/form/form-field/edit.tsx

@@ -1,9 +1,12 @@
 import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
-import {Button, FormTokenField, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl} from '@wordpress/components'
-import {__} from '@wordpress/i18n'
+import {Button, Modal, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl} from '@wordpress/components'
+import {__, sprintf} from '@wordpress/i18n'
 import clsx from 'clsx'
-import {FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_TEXT_TYPES, FIELD_TYPES} from './constants'
-import {FormFieldAttributes, FormFieldOptions, FormFieldTextType, FormFieldType} from './types'
+import {useState} from 'react'
+import {FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_SELECT_MODES, FIELD_TEXT_TYPES, FIELD_TYPES} from './constants'
+import {normalizeOptions, serializeOptions, type OptionRow} from './normalizeOptions'
+import {SelectOptionsRepeater} from './SelectOptionsRepeater'
+import {FormFieldAttributes, FormFieldOptions, FormFieldSelectMode, FormFieldTextType, FormFieldType} from './types'
 
 const {min: MIN_COLUMNS, max: MAX_COLUMNS} = FIELD_COLUMNS_RANGE
 
@@ -32,9 +35,20 @@ export function createFormFieldEdit(_options: FormFieldOptions) {
       className: clsx('i-form-field', `--type-${attributes.type}`, `--cols-${currentColumns}`, attributes.required && '--required'),
     })
 
-    const options = Array.isArray(attributes.options) ? attributes.options.filter((opt): opt is string => typeof opt === 'string') : []
+    // Rows carry a locally-generated id (for React/Sortable identity) that is never persisted;
+    // deriving it fresh from attributes on every render would remount inputs and drop focus mid-keystroke.
+    const [optionRows, setOptionRows] = useState<OptionRow[]>(() => normalizeOptions(attributes.options))
+    const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false)
 
-    const selectOptions = [{label: __('Žádná', 'brilo-blocks'), value: ''}, ...options.map((opt) => ({label: opt, value: opt}))]
+    const updateOptionRows = (rows: OptionRow[]) => {
+      setOptionRows(rows)
+      setAttributes({options: serializeOptions(rows)})
+    }
+
+    const selectOptions = [
+      {label: __('Žádná', 'brilo-blocks'), value: ''},
+      ...optionRows.map((row) => ({label: row.label, value: row.label})),
+    ]
 
     return (
       <>
@@ -85,18 +99,30 @@ export function createFormFieldEdit(_options: FormFieldOptions) {
 
             {attributes.type === 'select' && (
               <>
-                <FormTokenField
-                  label={__('Možnosti', 'brilo-blocks')}
-                  value={options}
-                  onChange={(nextOptions) =>
-                    setAttributes({
-                      options: (nextOptions ?? [])
-                        .map((opt) => (typeof opt === 'string' ? opt : (opt as {value?: unknown}).value))
-                        .filter((opt): opt is string => typeof opt === 'string' && opt.length > 0),
-                    })
-                  }
+                <SelectControl
+                  label={__('Režim selectu', 'brilo-blocks')}
+                  value={attributes.selectMode ?? 'classic'}
+                  options={FIELD_SELECT_MODES.map((m) => ({label: m.label, value: m.value}))}
+                  onChange={(selectMode) => setAttributes({selectMode: selectMode as FormFieldSelectMode})}
                 />
 
+                <div className="i-form-field__options-trigger">
+                  <Button variant="secondary" onClick={() => setIsOptionsModalOpen(true)}>
+                    {sprintf(__('Upravit možnosti (%d)', 'brilo-blocks'), optionRows.length)}
+                  </Button>
+                </div>
+
+                {isOptionsModalOpen && (
+                  <Modal title={__('Možnosti pole', 'brilo-blocks')} onRequestClose={() => setIsOptionsModalOpen(false)} size="large">
+                    <SelectOptionsRepeater
+                      rows={optionRows}
+                      onChange={updateOptionRows}
+                      showEmail={(attributes.selectMode ?? 'classic') === 'email'}
+                      onClose={() => setIsOptionsModalOpen(false)}
+                    />
+                  </Modal>
+                )}
+
                 <SelectControl
                   label={__('Výchozí hodnota', 'brilo-blocks')}
                   value={attributes.defaultValue ?? ''}

package/src/blocks/form/form-field/editor.scss

@@ -69,3 +69,31 @@
   text-align: center;
   font-weight: 600;
 }
+
+.i-form-field__options-trigger {
+  margin-block: 16px;
+}
+
+.i-form-field__options-repeater {
+  margin-bottom: 16px;
+}
+
+.i-form-field__option-row {
+  margin-bottom: 8px;
+}
+
+// Sticky within the WP Modal own scrolling content area (.components-modal__content),
+// so it stays visible while the option rows above it scroll.
+.i-form-field__options-footer {
+  position: sticky;
+  bottom: 0;
+  padding-top: 12px;
+  margin-top: 8px;
+  background: #fff;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.i-form-field__option-drag-handle {
+  cursor: grab;
+  color: rgba(0, 0, 0, 0.4);
+}

package/src/blocks/form/form-field/factory.tsx

@@ -24,6 +24,7 @@ export function createFormFieldBlock(options: FormFieldOptions): BlockConfigurat
       placeholder: {type: 'string', default: ''},
       required: {type: 'boolean', default: false},
       options: {type: 'array', default: []},
+      selectMode: {type: 'string', default: 'classic'},
       defaultValue: {type: 'string', default: ''},
       value: {type: 'string', default: ''},
     },

package/src/blocks/form/form-field/normalizeOptions.ts

@@ -0,0 +1,58 @@
+export type PersistedOption = string | {label?: unknown; value?: unknown; email?: unknown}
+
+export type OptionRow = {
+  id: string
+  label: string
+  value: string
+  email: string
+}
+
+function makeId(): string {
+  return typeof crypto !== 'undefined' && 'randomUUID' in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`
+}
+
+export function normalizeOptions(options: unknown): OptionRow[] {
+  if (!Array.isArray(options)) {
+    return []
+  }
+
+  return (options as PersistedOption[])
+    .map((option): OptionRow | null => {
+      if (typeof option === 'string') {
+        return option === '' ? null : {id: makeId(), label: option, value: '', email: ''}
+      }
+
+      if (option && typeof option === 'object') {
+        const label = typeof option.label === 'string' ? option.label : ''
+        const value = typeof option.value === 'string' ? option.value : ''
+        const email = typeof option.email === 'string' ? option.email : ''
+
+        if (label === '') {
+          return null
+        }
+
+        return {id: makeId(), label, value, email}
+      }
+
+      return null
+    })
+    .filter((row): row is OptionRow => row !== null)
+}
+
+export function serializeOptions(rows: OptionRow[]): Array<{label: string; value?: string; email?: string}> {
+  return rows
+    .filter((row) => row.label.trim() !== '')
+    .map((row) => {
+      const option: {label: string; value?: string; email?: string} = {label: row.label}
+
+      if (row.value.trim() !== '') {
+        option.value = row.value.trim()
+      }
+
+      if (row.email.trim() !== '') {
+        option.email = row.email.trim()
+      }
+
+      return option
+    })
+}