@brilo/base-blocks 0.1.0

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

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

@@ -0,0 +1,64 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  TextControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {VARIANTS} from './constants'
+import type {CompareOptionAttributes, CompareOptionOptions} from './types'
+
+export function createCompareOptionEdit(options: CompareOptionOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: CompareOptionAttributes
+    setAttributes: (a: Partial<CompareOptionAttributes>) => void
+  }) {
+    const {text, variant, customChar} = attributes
+    const blockProps = useBlockProps({className: 'i-compare-option'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(v) => setAttributes({variant: v as CompareOptionAttributes['variant']})}
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            {variant === 'custom' && (
+              <TextControl
+                label={__('Vlastní znak', 'brilo-blocks')}
+                value={customChar}
+                onChange={(v) => setAttributes({customChar: v.substring(0, 1)})}
+                help={__('Zadejte 1 znak', 'brilo-blocks')}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div className="i-compare-option__bullet">
+            {variant === 'plus' && '+'}
+            {variant === 'minus' && '−'}
+            {variant === 'custom' && (customChar || '?')}
+          </div>
+          <RichText
+            tagName="span"
+            className="i-compare-option__text u-text-editable"
+            value={text}
+            onChange={(v) => setAttributes({text: v})}
+            placeholder={__('Text...', 'brilo-blocks')}
+          />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,26 @@
+@layer base {
+  .i-compare-option__bullet {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    width: 24px;
+    height: 24px;
+    background-color: #006ba1;
+    color: #fff;
+    font-weight: 900;
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+
+  .i-compare-option__text {
+    flex-grow: 1;
+  }
+
+  .i-compare-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,35 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createCompareOptionEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {CompareOptionAttributes, CompareOptionOptions} from './types'
+
+export type {CompareOptionAttributes, CompareOptionOptions}
+
+export function createCompareOptionBlock(options: CompareOptionOptions): BlockConfiguration<CompareOptionAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Možnost 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: {
+      text: {
+        type: 'string',
+        default: '',
+      },
+      variant: {
+        type: 'string',
+        default: 'plus',
+      },
+      customChar: {
+        type: 'string',
+        default: '',
+      },
+    },
+    edit: createCompareOptionEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<CompareOptionAttributes>
+}

package/src/blocks/compare/compare-option/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 Option</title>
+    <path d="M4 10H16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M10 4V16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)

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

@@ -0,0 +1,8 @@
+export type {CompareOptionAttributes, CompareOptionOptions} from './types'
+export {createCompareOptionBlock} from './factory'
+import type {CompareOptionOptions} from './types'
+
+export const compareOptionDefaults: CompareOptionOptions = {
+  name: 'brilo/compare-option',
+  parent: ['brilo/compare-item'],
+}

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

@@ -0,0 +1,12 @@
+import type {BriloBlockType} from '~/types'
+import {VARIANTS} from './constants'
+
+export type CompareOptionVariant = (typeof VARIANTS)[number]['value']
+
+export interface CompareOptionAttributes extends Record<string, unknown> {
+  text: string
+  variant: CompareOptionVariant
+  customChar: string
+}
+
+export interface CompareOptionOptions extends BriloBlockType {}

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

@@ -0,0 +1,3 @@
+export const CONTACT_COLUMNS = [2, 3] as const
+
+export const CONTACT_COLUMNS_CONTEXT = 'brilo/contact-columns'

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

@@ -0,0 +1,57 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {CONTACT_COLUMNS} from './constants'
+import type {ContactColumns, ContactGroupAttributes, ContactGroupOptions} from './types'
+
+export function createContactGroupEdit(options: ContactGroupOptions) {
+  const COLUMNS = options.columns ?? CONTACT_COLUMNS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ContactGroupAttributes
+    setAttributes: (a: Partial<ContactGroupAttributes>) => void
+  }) {
+    const {columns} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-contact wp-block-section'),
+      containerClassName: [options.containerClassName ?? 'g-contact__items', `--cols-${columns}`],
+      containerStyle: {'--grid-max-col-count': columns},
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Počet sloupců', 'brilo-blocks')}
+              value={String(columns)}
+              onChange={(v) => setAttributes({columns: Number(v) as ContactColumns})}
+            >
+              {COLUMNS.map((c) => (
+                <ToggleGroupControlOption key={c} value={String(c)} label={String(c)} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,20 @@
+@layer base {
+  .g-contact {
+    .g-contact__items {
+      display: grid;
+      grid-template-columns: repeat(var(--grid-max-col-count, 3), minmax(0, 1fr));
+      gap: 16px;
+      align-items: start;
+    }
+  }
+}
+
+// WP core sets `margin-left/right: auto` on `.wp-block` children of containers whose
+// layout type isn't flex/grid (ours is `default`). That rule is UNLAYERED, so a
+// layered override can't beat it regardless of specificity — keep this UNLAYERED and
+// bump above WP's (0,2,0) specificity to win.
+.editor-styles-wrapper .g-contact__items > .wp-block {
+  margin-left: 0;
+  margin-right: 0;
+  max-width: none;
+}

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

@@ -0,0 +1,35 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {NumberArray} from '~/types'
+import {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT} from './constants'
+import {createContactGroupEdit} from './edit'
+import type {ContactGroupAttributes, ContactGroupOptions} from './types'
+
+export type {ContactGroupAttributes, ContactGroupOptions}
+
+export function createContactGroupBlock<TColumns extends NumberArray = typeof CONTACT_COLUMNS>(
+  options: ContactGroupOptions<TColumns>,
+): BlockConfiguration<ContactGroupAttributes<TColumns[number]>> {
+  const columns = options.columns ?? CONTACT_COLUMNS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Kontakty', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'id-alt',
+    supports: {html: false, customClassName: false},
+    providesContext: {[CONTACT_COLUMNS_CONTEXT]: 'columns'},
+    attributes: {
+      columns: {
+        type: 'number',
+        default: columns[1] ?? columns[0],
+        enum: [...columns],
+      },
+    },
+    edit: createContactGroupEdit(options as unknown as ContactGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<ContactGroupAttributes<TColumns[number]>>
+}

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

@@ -0,0 +1,12 @@
+export type {ContactColumns, ContactGroupAttributes, ContactGroupOptions} from './types'
+export {createContactGroupBlock} from './factory'
+export {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT} from './constants'
+
+import type {ContactGroupOptions} from './types'
+
+export const contactGroupDefaults: ContactGroupOptions = {
+  name: 'brilo/contact-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/contact-item'],
+  template: [['brilo/contact-item', {}]],
+}

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

@@ -0,0 +1,12 @@
+import type {BriloBlockType, NumberArray} from '~/types'
+import type {CONTACT_COLUMNS} from './constants'
+
+export type ContactColumns = (typeof CONTACT_COLUMNS)[number]
+
+export interface ContactGroupAttributes<TColumns extends number = ContactColumns> extends Record<string, unknown> {
+  columns: TColumns
+}
+
+export interface ContactGroupOptions<TColumns extends NumberArray = typeof CONTACT_COLUMNS> extends BriloBlockType {
+  columns?: TColumns
+}

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

@@ -0,0 +1,17 @@
+import {__} from '@wordpress/i18n'
+
+export const CONTACT_ICON_TYPES = [
+  {value: 'preselected', label: __('Předvolená', 'brilo-blocks')},
+  {value: 'media', label: __('Obrázek', 'brilo-blocks')},
+] as const
+
+export const CONTACT_ICON_SIZES = [
+  {value: 'sm', label: __('Malá', 'brilo-blocks'), size: 24},
+  {value: 'md', label: __('Střední', 'brilo-blocks'), size: 32},
+  {value: 'lg', label: __('Velká', 'brilo-blocks'), size: 48},
+  {value: 'custom', label: __('Vlastní', 'brilo-blocks')},
+] as const
+
+export const CONTACT_ICON_SIZE_RANGE = {min: 8, max: 100} as const
+
+export const CONTACT_ICON_SIZE_DEFAULT = 32