@brilo/base-blocks 0.1.1 → 0.1.3

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

@@ -1 +1 @@
-{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-group/edit.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAiB,mBAAmB,EAAE,gBAAgB,EAAyC,MAAM,SAAS,CAAA;AAI1H,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,IACtC,0CAIlB;IACD,UAAU,EAAE,mBAAmB,CAAA;IAC/B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IACxD,QAAQ,EAAE,MAAM,CAAA;CACjB,iCAwKF"}
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-group/edit.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAiB,mBAAmB,EAAE,gBAAgB,EAAyC,MAAM,SAAS,CAAA;AAW1H,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,IACtC,0CAIlB;IACD,UAAU,EAAE,mBAAmB,CAAA;IAC/B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IACxD,QAAQ,EAAE,MAAM,CAAA;CACjB,iCAwLF"}

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

@@ -3,14 +3,20 @@ import { InspectorControls, RichText } from '@wordpress/block-editor';
 import { FormTokenField, Notice, PanelBody, SelectControl, TextControl, ToggleControl } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { cleanForSlug } from '@wordpress/url';
 import clsx from 'clsx';
 import { useEffect } from 'react';
 import { useGroupBlock } from '../../../hooks/useGroupBlock';
 import { EXTERNAL_METHODS, INTERNAL_SUBMIT_BEHAVIORS, PROCESSING_MODES } from './constants';
 const ALLOWED_BLOCKS = ['brilo/form-field'];
+function generateFormId(formName) {
+    const slug = cleanForSlug(formName) || 'form';
+    const hash = Math.random().toString(36).slice(2, 8);
+    return `form-${slug}-${hash}`;
+}
 export function createFormGroupEdit(options) {
     return function Edit({ attributes, setAttributes, clientId, }) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
         const { lockPostSaving, unlockPostSaving } = useDispatch('core/editor');
         const processingMode = (_a = attributes.processingMode) !== null && _a !== void 0 ? _a : 'internal';
         const isInternal = processingMode === 'internal';
@@ -28,6 +34,14 @@ export function createFormGroupEdit(options) {
             }
             return () => unlockPostSaving(lockName);
         }, [clientId, isRecipientsMissing, isExternalUrlMissing, lockPostSaving, unlockPostSaving]);
+        // Generated once and persisted into the block's attributes so it stays stable across edits.
+        // biome-ignore lint/correctness/useExhaustiveDependencies: must run once on mount only
+        useEffect(() => {
+            var _a;
+            if (!attributes.formId) {
+                setAttributes({ formId: generateFormId((_a = attributes.formName) !== null && _a !== void 0 ? _a : '') });
+            }
+        }, []);
         const { blockProps, innerBlocksProps } = useGroupBlock({
             blockClassName: clsx((_c = options.blockClassName) !== null && _c !== void 0 ? _c : 'g-form wp-block-section'),
             containerClassName: [(_d = options.containerClassName) !== null && _d !== void 0 ? _d : 'g-form__fields'],
@@ -36,10 +50,10 @@ export function createFormGroupEdit(options) {
             orientation: 'horizontal',
             layout: { type: 'default' },
         });
-        return (_jsxs(_Fragment, { children: [_jsx(InspectorControls, { children: _jsxs(PanelBody, { title: __('Formulář', 'brilo-blocks'), children: [_jsx(TextControl, { label: __('Název formuláře (volitelné)', 'brilo-blocks'), value: (_f = attributes.formName) !== null && _f !== void 0 ? _f : '', placeholder: __('Např. Kontaktní formulář', 'brilo-blocks'), onChange: (formName) => setAttributes({ formName }) }), _jsx(SelectControl, { label: __('Zpracování', 'brilo-blocks'), value: processingMode, options: PROCESSING_MODES.map((m) => ({ label: m.label, value: m.value })), onChange: (mode) => setAttributes({ processingMode: mode }) }), isExternal && (_jsxs(_Fragment, { children: [_jsx(SelectControl, { label: __('Metoda odeslání', 'brilo-blocks'), value: (_g = attributes.externalMethod) !== null && _g !== void 0 ? _g : 'POST', options: EXTERNAL_METHODS.map((m) => ({ label: m.label, value: m.value })), onChange: (externalMethod) => setAttributes({ externalMethod: externalMethod }) }), _jsx(TextControl, { label: __('Externí URL', 'brilo-blocks'), value: (_h = attributes.externalUrl) !== null && _h !== void 0 ? _h : '', onChange: (externalUrl) => setAttributes({ externalUrl }) }), isExternalUrlMissing && (_jsx(Notice, { status: "warning", isDismissible: false, children: __('Pole „Externí URL“ je povinné pro externí zpracování.', 'brilo-blocks') }))] })), isInternal && (_jsxs(_Fragment, { children: [_jsx(FormTokenField, { label: __('Komu (příjemci)', 'brilo-blocks'), value: recipients, __next40pxDefaultSize: true, onChange: (senders) => setAttributes({
+        return (_jsxs(_Fragment, { children: [_jsx(InspectorControls, { children: _jsxs(PanelBody, { title: __('Formulář', 'brilo-blocks'), children: [_jsx(TextControl, { label: __('ID formuláře', 'brilo-blocks'), value: (_f = attributes.formId) !== null && _f !== void 0 ? _f : '', readOnly: true, onChange: () => { }, help: __('Generuje se automaticky, slouží k jednoznačné identifikaci formuláře.', 'brilo-blocks') }), _jsx(TextControl, { label: __('Název formuláře (volitelné)', 'brilo-blocks'), value: (_g = attributes.formName) !== null && _g !== void 0 ? _g : '', placeholder: __('Např. Kontaktní formulář', 'brilo-blocks'), onChange: (formName) => setAttributes({ formName }) }), _jsx(SelectControl, { label: __('Zpracování', 'brilo-blocks'), value: processingMode, options: PROCESSING_MODES.map((m) => ({ label: m.label, value: m.value })), onChange: (mode) => setAttributes({ processingMode: mode }) }), isExternal && (_jsxs(_Fragment, { children: [_jsx(SelectControl, { label: __('Metoda odeslání', 'brilo-blocks'), value: (_h = attributes.externalMethod) !== null && _h !== void 0 ? _h : 'POST', options: EXTERNAL_METHODS.map((m) => ({ label: m.label, value: m.value })), onChange: (externalMethod) => setAttributes({ externalMethod: externalMethod }) }), _jsx(TextControl, { label: __('Externí URL', 'brilo-blocks'), value: (_j = attributes.externalUrl) !== null && _j !== void 0 ? _j : '', onChange: (externalUrl) => setAttributes({ externalUrl }) }), isExternalUrlMissing && (_jsx(Notice, { status: "warning", isDismissible: false, children: __('Pole „Externí URL“ je povinné pro externí zpracování.', 'brilo-blocks') }))] })), isInternal && (_jsxs(_Fragment, { children: [_jsx(FormTokenField, { label: __('Komu (příjemci)', 'brilo-blocks'), value: recipients, __next40pxDefaultSize: true, onChange: (senders) => setAttributes({
                                             senders: (senders !== null && senders !== void 0 ? senders : [])
                                                 .map((item) => (typeof item === 'string' ? item.trim() : ''))
                                                 .filter((item) => item.length > 0),
-                                        }) }), isRecipientsMissing && (_jsx(Notice, { status: "warning", isDismissible: false, children: __('Pole „Komu (příjemci)“ je povinné. Vyplňte alespoň jeden e-mail příjemce.', 'brilo-blocks') })), _jsx(TextControl, { label: __('Od koho (From email)', 'brilo-blocks'), value: (_j = attributes.fromEmail) !== null && _j !== void 0 ? _j : '', onChange: (fromEmail) => setAttributes({ fromEmail }) }), _jsx(TextControl, { label: __('Předmět emailu', 'brilo-blocks'), value: (_k = attributes.subject) !== null && _k !== void 0 ? _k : '', placeholder: __('Potvrzení odeslaného formuláře', 'brilo-blocks'), onChange: (subject) => setAttributes({ subject }) }), _jsx(SelectControl, { label: __('Po odeslání', 'brilo-blocks'), value: (_l = attributes.internalSubmitBehavior) !== null && _l !== void 0 ? _l : 'stay', options: INTERNAL_SUBMIT_BEHAVIORS.map((b) => ({ label: b.label, value: b.value })), onChange: (internalSubmitBehavior) => setAttributes({ internalSubmitBehavior: internalSubmitBehavior }) }), ((_m = attributes.internalSubmitBehavior) !== null && _m !== void 0 ? _m : 'stay') === 'redirect' && (_jsx(TextControl, { label: __('URL děkovné stránky', 'brilo-blocks'), value: (_o = attributes.internalRedirectUrl) !== null && _o !== void 0 ? _o : '', onChange: (internalRedirectUrl) => setAttributes({ internalRedirectUrl }) })), _jsx(TextControl, { label: __('Úspěšná zpráva', 'brilo-blocks'), value: (_p = attributes.successMessage) !== null && _p !== void 0 ? _p : '', onChange: (successMessage) => setAttributes({ successMessage }) })] })), _jsx(TextControl, { label: __('Titulek tlačítka odeslání', 'brilo-blocks'), value: (_r = (_q = attributes.submit) === null || _q === void 0 ? void 0 : _q.label) !== null && _r !== void 0 ? _r : 'Odeslat', onChange: (label) => setAttributes({ submit: { label } }) })] }) }), _jsxs("div", { ...blockProps, children: [_jsx("div", { ...innerBlocksProps }), _jsxs("div", { className: "g-form__gdpr", children: [_jsxs("div", { className: "g-form__gdpr-header", children: [_jsx("strong", { children: __('GDPR obsah', 'brilo-blocks') }), _jsx(ToggleControl, { label: __('S checkboxem?', 'brilo-blocks'), checked: (_t = (_s = attributes.gdpr) === null || _s === void 0 ? void 0 : _s.checkbox) !== null && _t !== void 0 ? _t : true, onChange: (checkbox) => { var _a, _b; return setAttributes({ gdpr: { content: (_b = (_a = attributes.gdpr) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : '', checkbox } }); } })] }), _jsx(RichText, { className: "g-form__gdpr-content", tagName: "div", value: (_v = (_u = attributes.gdpr) === null || _u === void 0 ? void 0 : _u.content) !== null && _v !== void 0 ? _v : '', allowedFormats: ['core/bold', 'core/link'], onChange: (content) => { var _a, _b; return setAttributes({ gdpr: { content, checkbox: (_b = (_a = attributes.gdpr) === null || _a === void 0 ? void 0 : _a.checkbox) !== null && _b !== void 0 ? _b : true } }); }, placeholder: __('Text GDPR souhlasu…', 'brilo-blocks') })] })] })] }));
+                                        }) }), isRecipientsMissing && (_jsx(Notice, { status: "warning", isDismissible: false, children: __('Pole „Komu (příjemci)“ je povinné. Vyplňte alespoň jeden e-mail příjemce.', 'brilo-blocks') })), _jsx(TextControl, { label: __('Od koho (From email)', 'brilo-blocks'), value: (_k = attributes.fromEmail) !== null && _k !== void 0 ? _k : '', onChange: (fromEmail) => setAttributes({ fromEmail }) }), _jsx(TextControl, { label: __('Předmět emailu', 'brilo-blocks'), value: (_l = attributes.subject) !== null && _l !== void 0 ? _l : '', placeholder: __('Potvrzení odeslaného formuláře', 'brilo-blocks'), onChange: (subject) => setAttributes({ subject }) }), _jsx(SelectControl, { label: __('Po odeslání', 'brilo-blocks'), value: (_m = attributes.internalSubmitBehavior) !== null && _m !== void 0 ? _m : 'stay', options: INTERNAL_SUBMIT_BEHAVIORS.map((b) => ({ label: b.label, value: b.value })), onChange: (internalSubmitBehavior) => setAttributes({ internalSubmitBehavior: internalSubmitBehavior }) }), ((_o = attributes.internalSubmitBehavior) !== null && _o !== void 0 ? _o : 'stay') === 'redirect' && (_jsx(TextControl, { label: __('URL děkovné stránky', 'brilo-blocks'), value: (_p = attributes.internalRedirectUrl) !== null && _p !== void 0 ? _p : '', onChange: (internalRedirectUrl) => setAttributes({ internalRedirectUrl }) })), _jsx(TextControl, { label: __('Úspěšná zpráva', 'brilo-blocks'), value: (_q = attributes.successMessage) !== null && _q !== void 0 ? _q : '', onChange: (successMessage) => setAttributes({ successMessage }) })] })), _jsx(TextControl, { label: __('Titulek tlačítka odeslání', 'brilo-blocks'), value: (_s = (_r = attributes.submit) === null || _r === void 0 ? void 0 : _r.label) !== null && _s !== void 0 ? _s : 'Odeslat', onChange: (label) => setAttributes({ submit: { label } }) })] }) }), _jsxs("div", { ...blockProps, children: [_jsx("div", { ...innerBlocksProps }), _jsxs("div", { className: "g-form__gdpr", children: [_jsxs("div", { className: "g-form__gdpr-header", children: [_jsx("strong", { children: __('GDPR obsah', 'brilo-blocks') }), _jsx(ToggleControl, { label: __('S checkboxem?', 'brilo-blocks'), checked: (_u = (_t = attributes.gdpr) === null || _t === void 0 ? void 0 : _t.checkbox) !== null && _u !== void 0 ? _u : true, onChange: (checkbox) => { var _a, _b; return setAttributes({ gdpr: { content: (_b = (_a = attributes.gdpr) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : '', checkbox } }); } })] }), _jsx(RichText, { className: "g-form__gdpr-content", tagName: "div", value: (_w = (_v = attributes.gdpr) === null || _v === void 0 ? void 0 : _v.content) !== null && _w !== void 0 ? _w : '', allowedFormats: ['core/bold', 'core/link'], onChange: (content) => { var _a, _b; return setAttributes({ gdpr: { content, checkbox: (_b = (_a = attributes.gdpr) === null || _a === void 0 ? void 0 : _a.checkbox) !== null && _b !== void 0 ? _b : true } }); }, placeholder: __('Text GDPR souhlasu…', 'brilo-blocks') })] })] })] }));
     };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-group/factory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAGzD,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,CA0BvG"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-group/factory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAGzD,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,CA2BvG"}

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

@@ -13,6 +13,7 @@ export function createFormGroupBlock(options) {
         icon: (_c = options.icon) !== null && _c !== void 0 ? _c : 'feedback',
         supports: { html: false, customClassName: false },
         attributes: {
+            formId: { type: 'string', default: '' },
             formName: { type: 'string', default: '' },
             processingMode: { type: 'string', default: 'internal' },
             externalMethod: { type: 'string', default: 'POST' },

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

@@ -3,6 +3,7 @@ export type ProcessingMode = 'internal' | 'external';
 export type ExternalMethod = 'POST' | 'GET';
 export type InternalSubmitBehavior = 'stay' | 'redirect';
 export interface FormGroupAttributes extends Record<string, unknown> {
+    formId: string;
     formName: string;
     processingMode: ProcessingMode;
     externalMethod: ExternalMethod;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAE3C,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,UAAU,CAAA;AACpD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,KAAK,CAAA;AAC3C,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,UAAU,CAAA;AAExD,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,cAAc,CAAA;IAC9B,cAAc,EAAE,cAAc,CAAA;IAC9B,WAAW,EAAE,MAAM,CAAA;IACnB,sBAAsB,EAAE,sBAAsB,CAAA;IAC9C,mBAAmB,EAAE,MAAM,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAA;IACvB,IAAI,EAAE;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAC,CAAA;IAC1C,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/form/form-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAE3C,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,UAAU,CAAA;AACpD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,KAAK,CAAA;AAC3C,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,UAAU,CAAA;AAExD,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,cAAc,CAAA;IAC9B,cAAc,EAAE,cAAc,CAAA;IAC9B,WAAW,EAAE,MAAM,CAAA;IACnB,sBAAsB,EAAE,sBAAsB,CAAA;IAC9C,mBAAmB,EAAE,MAAM,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAA;IACvB,IAAI,EAAE;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAC,CAAA;IAC1C,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brilo/base-blocks",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "author": "Brilo",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -36,7 +36,8 @@
     "clsx": "^2.1.1"
   },
   "files": [
-    "build"
+    "build",
+    "src"
   ],
   "publishConfig": {
     "access": "public"

package/src/blocks/column/column-group/edit.tsx

@@ -0,0 +1,56 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {PanelBody, RangeControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {ColumnGroupAttributes, ColumnGroupOptions} from './types'
+
+export function createColumnGroupEdit(options: ColumnGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ColumnGroupAttributes
+    setAttributes: (a: Partial<ColumnGroupAttributes>) => void
+  }) {
+    const {spacingX, spacingY} = attributes
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: options.blockClassName ?? 'g-column wp-block-section',
+      containerClassName: options.containerClassName ?? 'g-column__inner',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+      layout: {type: 'default'},
+      containerStyle: {
+        '--gap-x': `${spacingX}px`,
+        '--gap-y': `${spacingY}px`,
+      },
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení sloupců', 'brilo-blocks')}>
+            <RangeControl
+              label={__('Horizontální mezera (px)', 'brilo-blocks')}
+              value={spacingX}
+              onChange={(v) => setAttributes({spacingX: v ?? 0})}
+              min={0}
+              max={64}
+              step={8}
+            />
+            <RangeControl
+              label={__('Vertikální mezera (px)', 'brilo-blocks')}
+              value={spacingY}
+              onChange={(v) => setAttributes({spacingY: v ?? 0})}
+              min={0}
+              max={64}
+              step={8}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/column/column-group/editor.scss

@@ -0,0 +1,7 @@
+@layer base {
+  .g-column__inner {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: var(--gap-y) var(--gap-x);
+  }
+}

package/src/blocks/column/column-group/factory.tsx

@@ -0,0 +1,29 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createColumnGroupEdit} from './edit'
+import type {ColumnGroupAttributes, ColumnGroupOptions} from './types'
+
+export function createColumnGroupBlock(options: ColumnGroupOptions): BlockConfiguration<ColumnGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Obsahové sloupce', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'columns',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      spacingX: {
+        type: 'number',
+        default: 16,
+      },
+      spacingY: {
+        type: 'number',
+        default: 16,
+      },
+    },
+    edit: createColumnGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<ColumnGroupAttributes>
+}

package/src/blocks/column/column-group/index.ts

@@ -0,0 +1,14 @@
+export type {ColumnGroupAttributes, ColumnGroupOptions} from './types'
+export {createColumnGroupBlock} from './factory'
+
+import type {ColumnGroupOptions} from './types'
+
+export const columnGroupDefaults: ColumnGroupOptions = {
+  name: 'brilo/column-group',
+  allowedBlocks: ['brilo/column-item'],
+  parent: ['brilo/base-section'],
+  template: [
+    ['brilo/column-item', {}],
+    ['brilo/column-item', {}],
+  ],
+}

package/src/blocks/column/column-group/types.ts

@@ -0,0 +1,8 @@
+import type {BriloBlockType} from '~/types'
+
+export interface ColumnGroupAttributes extends Record<string, unknown> {
+  spacingX: number
+  spacingY: number
+}
+
+export interface ColumnGroupOptions extends BriloBlockType {}

package/src/blocks/column/column-item/constants.ts

@@ -0,0 +1 @@
+export const SIZES = ['1/4', '1/3', '1/2', '2/3', '3/4', '1/1']

package/src/blocks/column/column-item/edit.tsx

@@ -0,0 +1,48 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {PanelBody, RangeControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {ColumnItemAttributes, ColumnItemOptions} from './types'
+import {SIZES} from './constants'
+
+export function createColumnItemEdit(options: ColumnItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ColumnItemAttributes
+    setAttributes: (a: Partial<ColumnItemAttributes>) => void
+  }) {
+    const {size} = attributes
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-column', `--size-${size}`),
+      containerClassName: options.containerClassName ?? 'i-column__inner',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+    })
+
+    const sizeIndex = SIZES.indexOf(size)
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení položky sloupce', 'brilo-blocks')}>
+            <RangeControl
+              label={__('Šířka sloupce', 'brilo-blocks')}
+              value={sizeIndex}
+              onChange={(v) => setAttributes({size: SIZES[v as number]})}
+              min={0}
+              max={SIZES.length - 1}
+              withInputField={false}
+              marks={SIZES.map((s, i) => ({label: s, value: i}))}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/column/column-item/editor.scss

@@ -0,0 +1,34 @@
+@layer base {
+  .i-column {
+    border: 1px dashed #0073aa;
+    box-sizing: border-box;
+    border-radius: 4px;
+    padding: 4px;
+    min-height: 64px;
+    margin: 0 !important;
+
+    &.--size-1\/4 {
+      grid-column: span 3;
+    }
+
+    &.--size-1\/3 {
+      grid-column: span 4;
+    }
+
+    &.--size-1\/2 {
+      grid-column: span 6;
+    }
+
+    &.--size-2\/3 {
+      grid-column: span 8;
+    }
+
+    &.--size-3\/4 {
+      grid-column: span 9;
+    }
+
+    &.--size-1\/1 {
+      grid-column: span 12;
+    }
+  }
+}

package/src/blocks/column/column-item/factory.tsx

@@ -0,0 +1,25 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createColumnItemEdit} from './edit'
+import type {ColumnItemAttributes, ColumnItemOptions} from './types'
+
+export function createColumnItemBlock(options: ColumnItemOptions): BlockConfiguration<ColumnItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Položka sloupce', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'column',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      size: {
+        type: 'string',
+        default: '1/2',
+      },
+    },
+    edit: createColumnItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<ColumnItemAttributes>
+}

package/src/blocks/column/column-item/index.ts

@@ -0,0 +1,10 @@
+export type {ColumnItemAttributes, ColumnItemOptions} from './types'
+export {createColumnItemBlock} from './factory'
+
+import type {ColumnItemOptions} from './types'
+
+export const columnItemDefaults: ColumnItemOptions = {
+  name: 'brilo/column-item',
+  parent: ['brilo/column-group'],
+  allowedBlocks: ['core/paragraph', 'core/list', 'core/image', 'core/heading', 'core/embed', 'core/quote', 'core/table', 'core/gallery'],
+}

package/src/blocks/column/column-item/types.ts

@@ -0,0 +1,7 @@
+import type {BriloBlockType} from '~/types'
+
+export interface ColumnItemAttributes extends Record<string, unknown> {
+  size: string
+}
+
+export interface ColumnItemOptions extends BriloBlockType {}

package/src/blocks/compare/compare-group/constants.ts

@@ -0,0 +1 @@
+export const HEADING_LEVELS = [2, 3, 4] as const

package/src/blocks/compare/compare-group/edit.tsx

@@ -0,0 +1,52 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {HEADING_LEVELS} from './constants'
+import type {CompareGroupAttributes, CompareGroupOptions} from './types'
+
+export function createCompareGroupEdit(options: CompareGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: CompareGroupAttributes
+    setAttributes: (a: Partial<CompareGroupAttributes>) => void
+  }) {
+    const {headingLevel} = attributes
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: options.blockClassName ?? 'g-compare wp-block-section',
+      containerClassName: [options.containerClassName ?? 'u-grid-responsive'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Úroveň nadpisu', 'brilo-blocks')}
+              value={String(headingLevel)}
+              onChange={(v) => setAttributes({headingLevel: Number(v) as CompareGroupAttributes['headingLevel']})}
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/compare/compare-group/factory.tsx

@@ -0,0 +1,29 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createCompareGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import {HEADING_LEVELS} from './constants'
+import type {CompareGroupAttributes, CompareGroupOptions} from './types'
+
+export type {CompareGroupAttributes, CompareGroupOptions}
+
+export function createCompareGroupBlock(options: CompareGroupOptions): BlockConfiguration<CompareGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Srovnání', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      headingLevel: {
+        type: 'number',
+        default: HEADING_LEVELS[1],
+      },
+    },
+    edit: createCompareGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<CompareGroupAttributes>
+}

package/src/blocks/compare/compare-group/icon.tsx

@@ -0,0 +1,7 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Compare Group</title>
+    <rect x="2" y="2" width="7" height="16" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <rect x="11" y="2" width="7" height="16" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
+  </svg>
+)

package/src/blocks/compare/compare-group/index.ts

@@ -0,0 +1,13 @@
+export type {CompareGroupAttributes, CompareGroupOptions} from './types'
+export {createCompareGroupBlock} from './factory'
+import type {CompareGroupOptions} from './types'
+
+export const compareGroupDefaults: CompareGroupOptions = {
+  name: 'brilo/compare-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/compare-item'],
+  template: [
+    ['brilo/compare-item', {}],
+    ['brilo/compare-item', {}],
+  ],
+}

package/src/blocks/compare/compare-group/types.ts

@@ -0,0 +1,12 @@
+import {HEADING_LEVELS} from './constants'
+import type {BriloBlockType} from '~/types'
+
+export type CompareHeadingLevel = (typeof HEADING_LEVELS)[number]
+
+export interface CompareGroupAttributes extends Record<string, unknown> {
+  headingLevel: CompareHeadingLevel
+}
+
+export interface CompareGroupOptions extends BriloBlockType {
+  allowedBlocks: string[]
+}

package/src/blocks/compare/compare-item/edit.tsx

@@ -0,0 +1,38 @@
+import {RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import {__} from '@wordpress/i18n'
+import type {CompareItemAttributes, CompareItemOptions} from './types'
+
+export function createCompareItemEdit(options: CompareItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: CompareItemAttributes
+    setAttributes: (a: Partial<CompareItemAttributes>) => void
+  }) {
+    const {title} = attributes
+    const blockProps = useBlockProps({className: 'i-compare'})
+    const innerBlocksProps = useInnerBlocksProps(
+      {className: 'i-compare__options wp-block-inner-content'},
+      {
+        allowedBlocks: options.allowedBlocks,
+        template: options.template,
+      },
+    )
+
+    return (
+      <div {...blockProps}>
+        <div className={'i-compare__inner'}>
+          <RichText
+            tagName={'div'}
+            className="i-compare__title u-text-editable"
+            value={title}
+            onChange={(v) => setAttributes({title: v})}
+            placeholder={__('Nadpis...', 'brilo-blocks')}
+          />
+          <div {...innerBlocksProps} />
+        </div>
+      </div>
+    )
+  }
+}

package/src/blocks/compare/compare-item/editor.scss

@@ -0,0 +1,15 @@
+@layer base {
+  .i-compare__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    border: 1px solid #ccc;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .i-compare {
+    width: 100%;
+  }
+}

package/src/blocks/compare/compare-item/factory.tsx

@@ -0,0 +1,28 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createCompareItemEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {CompareItemAttributes, CompareItemOptions} from './types'
+
+export type {CompareItemAttributes, CompareItemOptions}
+
+export function createCompareItemBlock(options: CompareItemOptions): BlockConfiguration<CompareItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Položka srovnání', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {
+        type: 'string',
+        default: '',
+      },
+    },
+    edit: createCompareItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<CompareItemAttributes>
+}

package/src/blocks/compare/compare-item/icon.tsx

@@ -0,0 +1,9 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Compare Item</title>
+    <rect x="4" y="2" width="12" height="16" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <path d="M7 6H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M7 9H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M7 12H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)

package/src/blocks/compare/compare-item/index.ts

@@ -0,0 +1,13 @@
+export type {CompareItemAttributes, CompareItemOptions} from './types'
+export {createCompareItemBlock} from './factory'
+import type {CompareItemOptions} from './types'
+
+export const compareItemDefaults: CompareItemOptions = {
+  name: 'brilo/compare-item',
+  parent: ['brilo/compare-group'],
+  allowedBlocks: ['brilo/compare-option'],
+  template: [
+    ['brilo/compare-option', {variant: 'plus'}],
+    ['brilo/compare-option', {variant: 'minus'}],
+  ],
+}

package/src/blocks/compare/compare-item/types.ts

@@ -0,0 +1,9 @@
+import type {BriloBlockType} from '~/types'
+
+export interface CompareItemAttributes extends Record<string, unknown> {
+  title: string
+}
+
+export interface CompareItemOptions extends BriloBlockType {
+  allowedBlocks: string[]
+}

package/src/blocks/compare/compare-option/constants.ts

@@ -0,0 +1,7 @@
+import {__} from '@wordpress/i18n'
+
+export const VARIANTS = [
+  {value: 'plus', label: __('+', 'brilo-blocks')},
+  {value: 'minus', label: __('-', 'brilo-blocks')},
+  {value: 'custom', label: __('Vlastní', 'brilo-blocks')},
+] as const