@brilo/base-blocks 0.1.1 → 0.1.2

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

@@ -0,0 +1,178 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {Button, FormTokenField, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_TYPES} from './constants'
+import type {FormFieldAttributes, FormFieldOptions, FormFieldType} from './types'
+
+const {min: MIN_COLUMNS, max: MAX_COLUMNS} = FIELD_COLUMNS_RANGE
+
+function sanitizeHtmlName(raw: string): string {
+  return (raw ?? '')
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .replace(/[\s_]+/g, '-')
+    .replace(/[^a-zA-Z0-9_-]/g, '')
+    .replace(/[-_]{2,}/g, '-')
+    .replace(/^[-_]+/g, '')
+    .toLowerCase()
+}
+
+export function createFormFieldEdit(_options: FormFieldOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: FormFieldAttributes
+    setAttributes: (a: Partial<FormFieldAttributes>) => void
+  }) {
+    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): opt is string => typeof opt === 'string') : []
+
+    const selectOptions = [{label: __('Žádná', 'brilo-blocks'), value: ''}, ...options.map((opt) => ({label: opt, value: opt}))]
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Pole formuláře', 'brilo-blocks')}>
+            <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 as FormFieldType})}
+            />
+
+            {attributes.type !== 'hidden' && (
+              <>
+                <TextControl label={__('Popisek', 'brilo-blocks')} value={attributes.label} onChange={(label) => setAttributes({label})} />
+                <ToggleControl
+                  label={__('Povinné', 'brilo-blocks')}
+                  checked={attributes.required}
+                  onChange={(required) => setAttributes({required})}
+                />
+                <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)})}
+                />
+                <TextControl
+                  label={__('Placeholder', 'brilo-blocks')}
+                  value={attributes.placeholder}
+                  onChange={(placeholder) => setAttributes({placeholder})}
+                />
+              </>
+            )}
+
+            {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={__('Výchozí hodnota', 'brilo-blocks')}
+                  value={attributes.defaultValue ?? ''}
+                  options={selectOptions}
+                  onChange={(defaultValue) => setAttributes({defaultValue: defaultValue ?? ''})}
+                />
+              </>
+            )}
+
+            {attributes.type === 'hidden' && (
+              <>
+                <TextControl
+                  label={__('Hodnota', 'brilo-blocks')}
+                  value={attributes.value ?? ''}
+                  onChange={(value) => setAttributes({value})}
+                  help={__('Hodnota, která bude odeslána s formulářem.', 'brilo-blocks')}
+                />
+                <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' && (
+              <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 ?? FIELD_COLUMNS_DEFAULT))})
+                }
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-form-field__wrapper">
+            {attributes.type === 'hidden' ? (
+              <>
+                <strong>{__('Skryté pole', 'brilo-blocks')}</strong>
+                <div>
+                  {__('Hodnota', 'brilo-blocks')}: {attributes.value ?? ''}
+                </div>
+                <div>
+                  {__('Název', 'brilo-blocks')}: {attributes.name ?? ''}
+                </div>
+              </>
+            ) : (
+              <>
+                <strong>{attributes.label || __('Pole', 'brilo-blocks')}</strong>
+                <div>{attributes.type}</div>
+                <div className="i-form-field__columns-control">
+                  <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')}
+                  >
+                    -
+                  </Button>
+
+                  <div className="i-form-field__columns-value">{`${currentColumns}/${MAX_COLUMNS}`}</div>
+
+                  <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')}
+                  >
+                    +
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,71 @@
+.i-form-field {
+  width: 100%;
+  margin-block: 0;
+
+  &.--cols-1 {
+    grid-column: span 1;
+  }
+  &.--cols-2 {
+    grid-column: span 2;
+  }
+  &.--cols-3 {
+    grid-column: span 3;
+  }
+  &.--cols-4 {
+    grid-column: span 4;
+  }
+  &.--cols-5 {
+    grid-column: span 5;
+  }
+  &.--cols-6 {
+    grid-column: span 6;
+  }
+  &.--cols-7 {
+    grid-column: span 7;
+  }
+  &.--cols-8 {
+    grid-column: span 8;
+  }
+  &.--cols-9 {
+    grid-column: span 9;
+  }
+  &.--cols-10 {
+    grid-column: span 10;
+  }
+  &.--cols-11 {
+    grid-column: span 11;
+  }
+  &.--cols-12 {
+    grid-column: span 12;
+  }
+
+  // Hidden fields span the full row — no column control
+  &.--type-hidden {
+    grid-column: span 12;
+  }
+
+  &.--type-hidden .i-form-field__wrapper {
+    background: #f6f7f7;
+    border-style: dotted;
+  }
+}
+
+.i-form-field__wrapper {
+  padding: 12px;
+  border: 1px dashed rgba(0, 0, 0, 0.25);
+  background: #fff;
+}
+
+.i-form-field__columns-control {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.i-form-field__columns-value {
+  flex: 1;
+  text-align: center;
+  font-weight: 600;
+}

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

@@ -0,0 +1,32 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {FIELD_COLUMNS_DEFAULT} from './constants'
+import {createFormFieldEdit} from './edit'
+import type {FormFieldAttributes, FormFieldOptions} from './types'
+
+export type {FormFieldAttributes, FormFieldOptions}
+
+export function createFormFieldBlock(options: FormFieldOptions): BlockConfiguration<FormFieldAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Pole formuláře', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'forms',
+    supports: {html: false, customClassName: false, reusable: false},
+    attributes: {
+      type: {type: 'string', default: 'text'},
+      columns: {type: 'number', default: FIELD_COLUMNS_DEFAULT},
+      label: {type: 'string', default: ''},
+      name: {type: 'string', default: ''},
+      placeholder: {type: 'string', default: ''},
+      required: {type: 'boolean', default: false},
+      options: {type: 'array', default: []},
+      defaultValue: {type: 'string', default: ''},
+      value: {type: 'string', default: ''},
+    },
+    edit: createFormFieldEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<FormFieldAttributes>
+}

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

@@ -0,0 +1,10 @@
+export type {FormFieldAttributes, FormFieldOptions, FormFieldType} from './types'
+export {createFormFieldBlock} from './factory'
+export {FIELD_TYPES, FIELD_COLUMNS_RANGE, FIELD_COLUMNS_DEFAULT} from './constants'
+
+import type {FormFieldOptions} from './types'
+
+export const formFieldDefaults: FormFieldOptions = {
+  name: 'brilo/form-field',
+  parent: ['brilo/form-group'],
+}

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

@@ -0,0 +1,18 @@
+import {FIELD_TYPE_VALUES} from './constants'
+import type {BriloBlockType} from '~/types'
+
+export type FormFieldType = (typeof FIELD_TYPE_VALUES)[number]
+
+export interface FormFieldAttributes extends Record<string, unknown> {
+  type: FormFieldType
+  columns: number
+  label: string
+  name: string
+  placeholder: string
+  required: boolean
+  options: string[]
+  defaultValue: string
+  value: string
+}
+
+export interface FormFieldOptions extends BriloBlockType {}

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

@@ -0,0 +1,16 @@
+import {__} from '@wordpress/i18n'
+
+export const PROCESSING_MODES = [
+  {value: 'internal', label: __('Interní', 'brilo-blocks')},
+  {value: 'external', label: __('Externí', 'brilo-blocks')},
+] as const
+
+export const EXTERNAL_METHODS = [
+  {value: 'POST', label: 'POST'},
+  {value: 'GET', label: 'GET'},
+] as const
+
+export const INTERNAL_SUBMIT_BEHAVIORS = [
+  {value: 'stay', label: __('Zůstat na stránce', 'brilo-blocks')},
+  {value: 'redirect', label: __('Přesměrovat na děkovnou stránku', 'brilo-blocks')},
+] as const

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

@@ -0,0 +1,190 @@
+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 clsx from 'clsx'
+import {useEffect} from 'react'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {EXTERNAL_METHODS, INTERNAL_SUBMIT_BEHAVIORS, PROCESSING_MODES} from './constants'
+import type {ExternalMethod, FormGroupAttributes, FormGroupOptions, InternalSubmitBehavior, ProcessingMode} from './types'
+
+const ALLOWED_BLOCKS = ['brilo/form-field']
+
+export function createFormGroupEdit(options: FormGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+    clientId,
+  }: {
+    attributes: FormGroupAttributes
+    setAttributes: (a: Partial<FormGroupAttributes>) => void
+    clientId: string
+  }) {
+    const {lockPostSaving, unlockPostSaving} = useDispatch('core/editor') as unknown as {
+      lockPostSaving: (lockName: string) => void
+      unlockPostSaving: (lockName: string) => void
+    }
+
+    const processingMode = attributes.processingMode ?? 'internal'
+    const isInternal = processingMode === 'internal'
+    const isExternal = processingMode === 'external'
+    const recipients = Array.isArray(attributes.senders) ? attributes.senders : []
+    const isRecipientsMissing = isInternal && recipients.length === 0
+    const isExternalUrlMissing = isExternal && (attributes.externalUrl ?? '').trim() === ''
+
+    useEffect(() => {
+      const lockName = `brilo-form-group-${clientId}`
+
+      if (isRecipientsMissing || isExternalUrlMissing) {
+        lockPostSaving(lockName)
+      } else {
+        unlockPostSaving(lockName)
+      }
+
+      return () => unlockPostSaving(lockName)
+    }, [clientId, isRecipientsMissing, isExternalUrlMissing, lockPostSaving, unlockPostSaving])
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-form wp-block-section'),
+      containerClassName: [options.containerClassName ?? 'g-form__fields'],
+      allowedBlocks: options.allowedBlocks ?? ALLOWED_BLOCKS,
+      template: options.template,
+      orientation: 'horizontal',
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Formulář', 'brilo-blocks')}>
+            <TextControl
+              label={__('Název formuláře (volitelné)', 'brilo-blocks')}
+              value={attributes.formName ?? ''}
+              placeholder={__('Např. Kontaktní formulář', 'brilo-blocks')}
+              onChange={(formName) => setAttributes({formName})}
+            />
+
+            <SelectControl
+              label={__('Zpracování', 'brilo-blocks')}
+              value={processingMode}
+              options={PROCESSING_MODES.map((m) => ({label: m.label, value: m.value}))}
+              onChange={(mode) => setAttributes({processingMode: mode as ProcessingMode})}
+            />
+
+            {isExternal && (
+              <>
+                <SelectControl
+                  label={__('Metoda odeslání', 'brilo-blocks')}
+                  value={attributes.externalMethod ?? 'POST'}
+                  options={EXTERNAL_METHODS.map((m) => ({label: m.label, value: m.value}))}
+                  onChange={(externalMethod) => setAttributes({externalMethod: externalMethod as ExternalMethod})}
+                />
+
+                <TextControl
+                  label={__('Externí URL', 'brilo-blocks')}
+                  value={attributes.externalUrl ?? ''}
+                  onChange={(externalUrl) => setAttributes({externalUrl})}
+                />
+
+                {isExternalUrlMissing && (
+                  <Notice status="warning" isDismissible={false}>
+                    {__('Pole „Externí URL“ je povinné pro externí zpracování.', 'brilo-blocks')}
+                  </Notice>
+                )}
+              </>
+            )}
+
+            {isInternal && (
+              <>
+                <FormTokenField
+                  label={__('Komu (příjemci)', 'brilo-blocks')}
+                  value={recipients}
+                  __next40pxDefaultSize
+                  onChange={(senders) =>
+                    setAttributes({
+                      senders: (senders ?? [])
+                        .map((item) => (typeof item === 'string' ? item.trim() : ''))
+                        .filter((item): item is string => item.length > 0),
+                    })
+                  }
+                />
+
+                {isRecipientsMissing && (
+                  <Notice status="warning" isDismissible={false}>
+                    {__('Pole „Komu (příjemci)“ je povinné. Vyplňte alespoň jeden e-mail příjemce.', 'brilo-blocks')}
+                  </Notice>
+                )}
+
+                <TextControl
+                  label={__('Od koho (From email)', 'brilo-blocks')}
+                  value={attributes.fromEmail ?? ''}
+                  onChange={(fromEmail) => setAttributes({fromEmail})}
+                />
+
+                <TextControl
+                  label={__('Předmět emailu', 'brilo-blocks')}
+                  value={attributes.subject ?? ''}
+                  placeholder={__('Potvrzení odeslaného formuláře', 'brilo-blocks')}
+                  onChange={(subject) => setAttributes({subject})}
+                />
+
+                <SelectControl
+                  label={__('Po odeslání', 'brilo-blocks')}
+                  value={attributes.internalSubmitBehavior ?? 'stay'}
+                  options={INTERNAL_SUBMIT_BEHAVIORS.map((b) => ({label: b.label, value: b.value}))}
+                  onChange={(internalSubmitBehavior) =>
+                    setAttributes({internalSubmitBehavior: internalSubmitBehavior as InternalSubmitBehavior})
+                  }
+                />
+
+                {(attributes.internalSubmitBehavior ?? 'stay') === 'redirect' && (
+                  <TextControl
+                    label={__('URL děkovné stránky', 'brilo-blocks')}
+                    value={attributes.internalRedirectUrl ?? ''}
+                    onChange={(internalRedirectUrl) => setAttributes({internalRedirectUrl})}
+                  />
+                )}
+
+                <TextControl
+                  label={__('Úspěšná zpráva', 'brilo-blocks')}
+                  value={attributes.successMessage ?? ''}
+                  onChange={(successMessage) => setAttributes({successMessage})}
+                />
+              </>
+            )}
+
+            <TextControl
+              label={__('Titulek tlačítka odeslání', 'brilo-blocks')}
+              value={attributes.submit?.label ?? 'Odeslat'}
+              onChange={(label) => setAttributes({submit: {label}})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+
+          <div className="g-form__gdpr">
+            <div className="g-form__gdpr-header">
+              <strong>{__('GDPR obsah', 'brilo-blocks')}</strong>
+              <ToggleControl
+                label={__('S checkboxem?', 'brilo-blocks')}
+                checked={attributes.gdpr?.checkbox ?? true}
+                onChange={(checkbox) => setAttributes({gdpr: {content: attributes.gdpr?.content ?? '', checkbox}})}
+              />
+            </div>
+
+            <RichText
+              className="g-form__gdpr-content"
+              tagName="div"
+              value={attributes.gdpr?.content ?? ''}
+              allowedFormats={['core/bold', 'core/link']}
+              onChange={(content) => setAttributes({gdpr: {content, checkbox: attributes.gdpr?.checkbox ?? true}})}
+              placeholder={__('Text GDPR souhlasu…', 'brilo-blocks')}
+            />
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,41 @@
+.g-form {
+  width: 100%;
+
+  &__fields {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 16px;
+    padding: 16px;
+    padding-bottom: 56px;
+    outline: 1px dashed #ddd;
+
+    > * {
+      max-width: 100%;
+    }
+  }
+
+  &__gdpr {
+    margin-top: 16px;
+    padding: 16px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: #fff;
+  }
+
+  &__gdpr-header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+
+  &__gdpr-content {
+    min-height: 56px;
+    padding: 10px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: #fff;
+  }
+}

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

@@ -0,0 +1,35 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createFormGroupEdit} from './edit'
+import type {FormGroupAttributes, FormGroupOptions} from './types'
+
+export type {FormGroupAttributes, FormGroupOptions}
+
+export function createFormGroupBlock(options: FormGroupOptions): BlockConfiguration<FormGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Formulář', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'feedback',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      formName: {type: 'string', default: ''},
+      processingMode: {type: 'string', default: 'internal'},
+      externalMethod: {type: 'string', default: 'POST'},
+      externalUrl: {type: 'string', default: ''},
+      internalSubmitBehavior: {type: 'string', default: 'stay'},
+      internalRedirectUrl: {type: 'string', default: ''},
+      fromEmail: {type: 'string', default: ''},
+      senders: {type: 'array', default: []},
+      subject: {type: 'string', default: ''},
+      submit: {type: 'object', default: {label: 'Odeslat'}},
+      gdpr: {type: 'object', default: {content: '', checkbox: true}},
+      successMessage: {type: 'string', default: 'Formulář byl úspěšně odeslán.'},
+    },
+    edit: createFormGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<FormGroupAttributes>
+}

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

@@ -0,0 +1,18 @@
+export type {
+  ExternalMethod,
+  FormGroupAttributes,
+  FormGroupOptions,
+  InternalSubmitBehavior,
+  ProcessingMode,
+} from './types'
+export {createFormGroupBlock} from './factory'
+export {EXTERNAL_METHODS, INTERNAL_SUBMIT_BEHAVIORS, PROCESSING_MODES} from './constants'
+
+import type {FormGroupOptions} from './types'
+
+export const formGroupDefaults: FormGroupOptions = {
+  name: 'brilo/form-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/form-field'],
+  template: [['brilo/form-field', {type: 'text'}]],
+}

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

@@ -0,0 +1,22 @@
+import type {BriloBlockType} from '~/types'
+
+export type ProcessingMode = 'internal' | 'external'
+export type ExternalMethod = 'POST' | 'GET'
+export type InternalSubmitBehavior = 'stay' | 'redirect'
+
+export interface FormGroupAttributes extends Record<string, unknown> {
+  formName: string
+  processingMode: ProcessingMode
+  externalMethod: ExternalMethod
+  externalUrl: string
+  internalSubmitBehavior: InternalSubmitBehavior
+  internalRedirectUrl: string
+  fromEmail: string
+  senders: string[]
+  subject: string
+  submit: {label: string}
+  gdpr: {content: string; checkbox: boolean}
+  successMessage: string
+}
+
+export interface FormGroupOptions extends BriloBlockType {}

package/src/blocks/groups/banner-group/constants.ts

@@ -0,0 +1,15 @@
+import {__} from '@wordpress/i18n'
+import {HEADING_STYLES} from '~/constants'
+
+export const DEFAULT_HEADING_STYLES = HEADING_STYLES
+
+export const DEFAULT_VARIANTS = [
+  {
+    value: 'default',
+    label: __('Výchozí', 'brilo-blocks'),
+  },
+  {
+    value: 'full-width',
+    label: __('Na plnou šířku', 'brilo-blocks'),
+  },
+] as const