@brilo/base-blocks 0.1.1 → 0.1.3

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

@@ -0,0 +1,40 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {COLUMNS, HEADING_LEVELS, RATIOS} from './constants'
+import {createSignpostGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
+
+export type {SignpostGroupAttributes, SignpostGroupOptions}
+
+export function createSignpostGroupBlock(options: SignpostGroupOptions): BlockConfiguration<SignpostGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Rozcestník', '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: {
+      columns: {
+        type: 'number',
+        default: COLUMNS[1],
+        enum: [...COLUMNS],
+      },
+      ratio: {
+        type: 'string',
+        default: RATIOS[0],
+        enum: [...RATIOS],
+      },
+      headingLevel: {
+        type: 'number',
+        default: HEADING_LEVELS[0],
+        enum: [...HEADING_LEVELS],
+      },
+    },
+    edit: createSignpostGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<SignpostGroupAttributes>
+}

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

@@ -0,0 +1,19 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="7.5" width="8" height="11" stroke="black" fill="none" />
+    <rect x="2.5" y="9.5" width="4" height="3" stroke="black" fill="none" />
+    <path d="M2 14H6V15H2V14Z" fill="black" />
+    <path d="M2 16H7V17H2V16Z" fill="black" />
+    <rect x="11.5" y="7.5" width="8" height="11" stroke="black" fill="none" />
+    <rect x="13.5" y="9.5" width="4" height="3" stroke="black" fill="none" />
+    <path d="M13 14H17V15H13V14Z" fill="black" />
+    <path d="M13 16H18V17H13V16Z" fill="black" />
+    <path d="M4 4H9V5H4V4Z" fill="black" />
+    <path d="M10 4H16V5H10V4Z" fill="black" />
+    <path
+      d="M12 2C12 1.44772 12.4477 1 13 1H14C14.5523 1 15 1.44772 15 2C15 2.55228 14.5523 3 14 3H13C12.4477 3 12 2.55228 12 2Z"
+      fill="black"
+    />
+    <path d="M5 2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3H6C5.44772 3 5 2.55228 5 2Z" fill="black" />
+  </svg>
+)

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

@@ -0,0 +1,15 @@
+export type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
+export {createSignpostGroupBlock} from './factory'
+
+import type {SignpostGroupOptions} from './types'
+
+export const signpostGroupDefaults: SignpostGroupOptions = {
+  name: 'brilo/signpost-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/signpost-item'],
+  template: [
+    ['brilo/signpost-item', {}],
+    ['brilo/signpost-item', {}],
+    ['brilo/signpost-item', {}],
+  ],
+}

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

@@ -0,0 +1,9 @@
+import {BriloBlockType} from '~/types'
+
+export interface SignpostGroupAttributes extends Record<string, unknown> {
+  columns: number
+  headingLevel: number
+  ratio: string
+}
+
+export interface SignpostGroupOptions extends BriloBlockType {}

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

@@ -0,0 +1,4 @@
+import {__} from '@wordpress/i18n'
+
+// No item-specific constants yet, but file is required by anatomy
+export {}

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

@@ -0,0 +1,90 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {Button, PanelBody, TextControl, ToggleControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {ImagePickerControl} from '~/components/ImagePicker'
+import type {SignpostItemAttributes, SignpostItemOptions} from './types'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import clsx from 'clsx'
+
+export function createSignpostItemEdit(options: SignpostItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: SignpostItemAttributes
+    setAttributes: (a: Partial<SignpostItemAttributes>) => void
+  }) {
+    const {title, img, button, url} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-signpost'),
+      containerClassName: [options.containerClassName ?? 'i-signpost__content wp-block-inner-content'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'vertical',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Obrázek', 'brilo-blocks')}>
+            <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+          </PanelBody>
+          <PanelBody title={__('Tlačítko', 'brilo-blocks')}>
+            <TextControl
+              label={__('Text tlačítka', 'brilo-blocks')}
+              value={button.text}
+              onChange={(v) => setAttributes({button: {...button, text: v}})}
+            />
+          </PanelBody>
+          <PanelBody title={__('Odkaz', 'brilo-blocks')} initialOpen={false}>
+            <TextControl label={__('URL', 'brilo-blocks')} value={url.src} onChange={(v) => setAttributes({url: {...url, src: v}})} />
+            <ToggleControl
+              label={__('Otevřít v nové záložce', 'brilo-blocks')}
+              checked={url.blank}
+              onChange={(v) => setAttributes({url: {...url, blank: v}})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-signpost__inner">
+            <div className="i-signpost__image-wrapper">
+              {img.id ? (
+                <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} size={[128, 128]} />
+              ) : (
+                <div className="i-signpost__image-placeholder">
+                  <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+                </div>
+              )}
+            </div>
+
+            <div className="i-signpost__body">
+              <RichText
+                tagName="h3"
+                className="i-signpost__title u-text-editable"
+                value={title}
+                onChange={(v) => setAttributes({title: v})}
+                placeholder={__('Nadpis...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic']}
+              />
+
+              <div {...innerBlocksProps} />
+
+              <Button variant={'primary'} className="i-signpost__button">
+                <RichText
+                  tagName="span"
+                  className="i-signpost__button-text"
+                  value={button.text}
+                  onChange={(v) => setAttributes({button: {...button, text: v}})}
+                  placeholder={__('Text tlačítka...', 'brilo-blocks')}
+                />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,25 @@
+@layer base {
+  .i-signpost {
+    width: 100%;
+  }
+
+  .i-signpost__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+  }
+
+  .i-signpost__image-placeholder {
+    border: 1px dashed #0073aa;
+    padding: 16px 8px 8px;
+  }
+
+  .i-signpost__image-wrapper {
+    .c-image-picker-control__row {
+      flex-direction: column;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createSignpostItemEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {SignpostItemAttributes, SignpostItemOptions} from './types'
+import {InnerBlocks} from '@wordpress/block-editor'
+
+export type {SignpostItemAttributes, SignpostItemOptions}
+
+export function createSignpostItemBlock(options: SignpostItemOptions): BlockConfiguration<SignpostItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Signpost položka', '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: ''},
+      img: {type: 'object', default: {id: 0, alt: ''}},
+      button: {type: 'object', default: {text: ''}},
+      url: {type: 'string', default: ''},
+      blank: {type: 'boolean', default: false},
+    },
+    edit: createSignpostItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<SignpostItemAttributes>
+}

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

@@ -0,0 +1,7 @@
+import {Path, SVG} from '@wordpress/components'
+
+export const icon = (
+  <SVG width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <Path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
+  </SVG>
+)

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

@@ -0,0 +1,10 @@
+export type {SignpostItemAttributes, SignpostItemOptions} from './types'
+export {createSignpostItemBlock} from './factory'
+
+import type {SignpostItemOptions} from './types'
+
+export const signpostItemDefaults: SignpostItemOptions = {
+  name: 'brilo/signpost-item',
+  parent: ['brilo/signpost-group'],
+  allowedBlocks: ['core/paragraph', 'core/list', 'core/heading'],
+}

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

@@ -0,0 +1,12 @@
+import {BriloBlockType} from '~/types'
+import {ImageValue} from '~/components/ImagePicker/ImagePicker'
+
+export interface SignpostItemAttributes extends Record<string, unknown> {
+  title: string
+  img: ImageValue
+  button: {text: string}
+  url: {src: string; blank: boolean}
+  blank: boolean
+}
+
+export interface SignpostItemOptions extends BriloBlockType {}

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

@@ -0,0 +1,6 @@
+import {__} from '@wordpress/i18n'
+
+export const DEFAULT_VARIANTS = [
+  {value: 'horizontal', label: __('Horizontální', 'brilo-blocks')},
+  {value: 'vertical', label: __('Vertikální', 'brilo-blocks')},
+] as const

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

@@ -0,0 +1,64 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {OptionArray} from '~/types'
+import type {StepGroupAttributes, StepGroupOptions, StepVariant} from './types'
+import {DEFAULT_VARIANTS} from './constants'
+
+export function createStepGroupEdit<TVariants extends OptionArray = typeof DEFAULT_VARIANTS>(options: StepGroupOptions<TVariants>) {
+  const VARIANTS = options.variants ?? DEFAULT_VARIANTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: StepGroupAttributes
+    setAttributes: (a: Partial<StepGroupAttributes>) => void
+  }) {
+    const {variant, disableIcon} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-step wp-block-section', `--variant-${variant}`, disableIcon && '--disable-icon'),
+      containerClassName: [options.containerClassName ?? 'g-step__container', 'u-grid-responsive', '--cols-3'],
+      containerStyle: {'--grid-max-col-count': 3},
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(v) => setAttributes({variant: v as StepGroupAttributes['variant']})}
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleControl
+              label={__('Vypnout ikonu', 'brilo-blocks')}
+              checked={disableIcon}
+              onChange={(v) => setAttributes({disableIcon: v})}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,19 @@
+@layer base {
+  .g-step {
+    counter-reset: step-counter;
+
+    &.--variant-vertical {
+      .g-step__container {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+    }
+
+    &.--disable-icon {
+      .i-step__icon-container {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {DEFAULT_VARIANTS} from './constants'
+import {createStepGroupEdit} from './edit'
+import type {StepGroupAttributes, StepGroupOptions} from './types'
+import {icon} from '~/blocks/step/step-group/icon'
+import {OptionArray} from '~/types'
+
+export function createStepGroupBlock<TVariants extends OptionArray = typeof DEFAULT_VARIANTS>(
+  options: StepGroupOptions<TVariants>,
+): BlockConfiguration<StepGroupAttributes<TVariants[number]['value']>> {
+  const variants = options.variants ?? DEFAULT_VARIANTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Krok skupina', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? icon,
+    supports: {html: false, customClassName: false},
+    attributes: {
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+      },
+      disableIcon: {
+        type: 'boolean',
+        default: false,
+      },
+    },
+    edit: createStepGroupEdit(options as unknown as StepGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<StepGroupAttributes<TVariants[number]['value']>>
+}

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

@@ -0,0 +1,27 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 6H7V7H4V6Z" fill="black" />
+    <path d="M12 6H15V7H12V6Z" fill="black" />
+    <path
+      d="M0 6.5C0 5.67157 0.671573 5 1.5 5C2.32843 5 3 5.67157 3 6.5C3 7.32843 2.32843 8 1.5 8C0.671573 8 0 7.32843 0 6.5Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M8 6.5C8 5.67157 8.67157 5 9.5 5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8C8.67157 8 8 7.32843 8 6.5Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M16 6.5C16 5.67157 16.6716 5 17.5 5C18.3284 5 19 5.67157 19 6.5C19 7.32843 18.3284 8 17.5 8C16.6716 8 16 7.32843 16 6.5Z"
+      fill="#357AB5"
+    />
+    <path d="M8 13H11V14H8V13Z" fill="black" />
+    <path
+      d="M4 13.5C4 12.6716 4.67157 12 5.5 12C6.32843 12 7 12.6716 7 13.5C7 14.3284 6.32843 15 5.5 15C4.67157 15 4 14.3284 4 13.5Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M12 13.5C12 12.6716 12.6716 12 13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.6716 15 12 14.3284 12 13.5Z"
+      fill="#357AB5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,15 @@
+export type {StepGroupAttributes, StepGroupOptions} from './types'
+export {createStepGroupBlock} from './factory'
+
+import type {StepGroupOptions} from './types'
+
+export const stepGroupDefaults: StepGroupOptions = {
+  name: 'brilo/step-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/step-item'],
+  template: [
+    ['brilo/step-item', {}],
+    ['brilo/step-item', {}],
+    ['brilo/step-item', {}],
+  ],
+}

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

@@ -0,0 +1,13 @@
+import {BriloBlockType, OptionArray} from '~/types'
+import {DEFAULT_VARIANTS} from './constants'
+
+export type StepVariant = (typeof DEFAULT_VARIANTS)[number]['value']
+
+export interface StepGroupAttributes<TVariant extends string = StepVariant> extends Record<string, unknown> {
+  variant: TVariant
+  disableIcon: boolean
+}
+
+export interface StepGroupOptions<TVariants extends OptionArray = typeof DEFAULT_VARIANTS> extends BriloBlockType {
+  variants?: TVariants
+}

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

@@ -0,0 +1,6 @@
+import {__} from '@wordpress/i18n'
+
+export const ICON_TYPES = [
+  {value: 'preselected', label: __('Předdefinovaná', 'brilo-blocks')},
+  {value: 'media', label: __('Z médií', 'brilo-blocks')},
+] as const

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

@@ -0,0 +1,60 @@
+import {InspectorControls, RichText} from '@wordpress/block-editor'
+import {PanelBody} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {ICON_TYPES} from './constants'
+import type {StepItemAttributes, StepItemOptions} from './types'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+
+export function createStepItemEdit(options: StepItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: StepItemAttributes
+    setAttributes: (a: Partial<StepItemAttributes>) => void
+  }) {
+    const {title, icon} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-step'),
+      containerClassName: [options.containerClassName ?? 'i-step__content wp-block-inner-content'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'vertical',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Ikona', 'brilo-blocks')}>
+            <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={ICON_TYPES} options={options} />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-step__inner wp-block-inner">
+            <div className="i-step__icon-container">
+              <ItemIconPreview icon={icon} className="i-step__icon" setAttributes={setAttributes} options={options} />
+            </div>
+
+            <div className={clsx('i-step__body', 'grow')}>
+              <RichText
+                tagName="h3"
+                className="i-step__title u-text-editable"
+                value={title}
+                onChange={(v) => setAttributes({title: v})}
+                placeholder={__('Nadpis kroku...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic']}
+              />
+
+              <div {...innerBlocksProps} />
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,18 @@
+@layer base {
+  .i-step {
+    width: min(480px, 100%);
+    counter-increment: step-counter;
+  }
+
+  .i-step__icon-container {
+    flex-shrink: 0;
+  }
+
+  .i-step__inner {
+    &::before {
+      content: counter(step-counter) ".";
+      font-size: 18px;
+      font-weight: 700;
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {ICON_TYPES} from './constants'
+import {createStepItemEdit} from './edit'
+import type {StepItemAttributes, StepItemOptions} from './types'
+import {InnerBlocks} from '@wordpress/block-editor'
+
+export function createStepItemBlock(options: StepItemOptions): BlockConfiguration<StepItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Krok položka', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'editor-ol',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      icon: {
+        type: 'object',
+        default: {type: ICON_TYPES[0].value, src: '', media: {id: 0, alt: ''}},
+      },
+    },
+    edit: createStepItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<StepItemAttributes>
+}

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

@@ -0,0 +1,11 @@
+export type {StepItemAttributes, StepItemOptions} from './types'
+export {createStepItemBlock} from './factory'
+
+import type {StepItemOptions} from './types'
+
+export const stepItemDefaults: StepItemOptions = {
+  name: 'brilo/step-item',
+  parent: ['brilo/step-group'],
+  icons: [],
+  iconsSrc: '',
+}

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

@@ -0,0 +1,12 @@
+import {BriloBlockType, Icon} from '~/types'
+import type {IconType} from '~/components/IconControl'
+
+export interface StepItemAttributes extends Record<string, unknown> {
+  title: string
+  icon: Icon
+}
+
+export interface StepItemOptions extends BriloBlockType {
+  icons: IconType[]
+  iconsSrc: string
+}

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

@@ -0,0 +1,27 @@
+import {__} from '@wordpress/i18n'
+
+export const VARIANTS = [
+  {
+    value: 'default',
+    label: __('Výchozí', 'brilo-blocks'),
+  },
+  {
+    value: 'slider',
+    label: __('Slider', 'brilo-blocks'),
+  },
+] as const
+
+export const SIZES = [
+  {
+    value: 'sm',
+    label: __('Malé', 'brilo-blocks'),
+  },
+  {
+    value: 'md',
+    label: __('Střední', 'brilo-blocks'),
+  },
+  {
+    value: 'lg',
+    label: __('Velká', 'brilo-blocks'),
+  },
+] as const