@brilo/base-blocks 0.1.0

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

@@ -0,0 +1,48 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, TextControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {ImagePickerBody, ImagePickerControl} from '~/components/ImagePicker'
+import type {TestimonialItemAttributes, TestimonialItemOptions} from './types'
+
+export function createTestimonialItemEdit(options: TestimonialItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: TestimonialItemAttributes
+    setAttributes: (a: Partial<TestimonialItemAttributes>) => void
+  }) {
+    const {title, url, img} = attributes
+
+    const blockProps = useBlockProps({
+      className: options.blockClassName ?? 'i-testimonial',
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení položky', 'brilo-blocks')}>
+            <ImagePickerControl value={img} onChange={(v) => setAttributes({img: v})} />
+            <TextControl label={__('Nadpis', 'brilo-blocks')} value={title} onChange={(v) => setAttributes({title: v})} />
+            <TextControl label={__('URL', 'brilo-blocks')} value={url} onChange={(v) => setAttributes({url: v})} />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-testimonial__inner wp-block-inner">
+            <div className="i-testimonial__image-wrap">
+              <ImagePickerBody value={img} onChange={(v) => setAttributes({img: v})} placeholder={__('Vyberte logo', 'brilo-blocks')} />
+            </div>
+            <RichText
+              tagName="p"
+              className="i-testimonial__title u-text-editable"
+              value={title}
+              onChange={(v) => setAttributes({title: v})}
+              placeholder={__('Název firmy / reference...', 'brilo-blocks')}
+            />
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,20 @@
+@layer base {
+  .i-testimonial__image-wrap {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 12px;
+    flex-grow: 1;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .i-testimonial__inner {
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,35 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createTestimonialItemEdit} from './edit'
+import type {TestimonialItemAttributes, TestimonialItemOptions} from './types'
+
+export function createTestimonialItemBlock(
+  options: TestimonialItemOptions & {parent?: string[]},
+): BlockConfiguration<TestimonialItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Reference - položka', 'brilo-blocks'),
+    category: options.category ?? 'brilo',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {
+        type: 'string',
+        default: '',
+      },
+      url: {
+        type: 'string',
+        default: '',
+      },
+      img: {
+        type: 'object',
+        default: {
+          id: 0,
+          url: '',
+          alt: '',
+        },
+      },
+    },
+    edit: createTestimonialItemEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<TestimonialItemAttributes>
+}

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

@@ -0,0 +1,9 @@
+export type {TestimonialItemAttributes, TestimonialItemOptions} from './types'
+export {createTestimonialItemBlock} from './factory'
+
+import type {TestimonialItemOptions} from './types'
+
+export const testimonialItemDefaults: TestimonialItemOptions = {
+  name: 'brilo/testimonial-item',
+  parent: ['brilo/testimonial-group'],
+}

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

@@ -0,0 +1,9 @@
+import type {BriloBlockType, Media} from '~/types'
+
+export interface TestimonialItemAttributes extends Record<string, unknown> {
+  title: string
+  url: string
+  img: Media
+}
+
+export interface TestimonialItemOptions extends BriloBlockType {}

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

@@ -0,0 +1,6 @@
+import {__} from '@wordpress/i18n'
+
+export const FORM_POSITIONS = [
+  {value: 'left', label: __('Formulář vlevo', 'brilo-blocks')},
+  {value: 'right', label: __('Formulář vpravo', 'brilo-blocks')},
+] as const

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

@@ -0,0 +1,59 @@
+import {BlockControls, InspectorControls} from '@wordpress/block-editor'
+import type {BlockEditProps} from '@wordpress/blocks'
+import {ToolbarButton, ToolbarGroup} from '@wordpress/components'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {FORM_POSITIONS} from './constants'
+import type {TextAndFormGroupAttributes, TextAndFormGroupOptions} from './types'
+
+const [POSITION_LEFT, POSITION_RIGHT] = FORM_POSITIONS
+
+export function createTextAndFormGroupEdit(options: TextAndFormGroupOptions) {
+  const textColumnBlock = options.textColumnBlock ?? 'brilo/text-and-form-text-column'
+  const formColumnBlock = options.formColumnBlock ?? 'brilo/form-group'
+
+  return function Edit(props: BlockEditProps<TextAndFormGroupAttributes>) {
+    const {attributes, setAttributes} = props
+    const {formPosition} = attributes
+    const isFormLeft = formPosition === POSITION_LEFT.value
+
+    const extraClasses = options.extraBlockClassName?.(attributes as never) ?? []
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: [options.blockClassName ?? 'g-text-and-form wp-block-section', `--form-${formPosition}`, ...extraClasses],
+      containerClassName: clsx(options.containerClassName ?? 'g-text-and-form__grid u-grid-responsive --col-2'),
+      allowedBlocks: [textColumnBlock, formColumnBlock],
+      template: [
+        [textColumnBlock, {}],
+        [formColumnBlock, {}],
+      ],
+      templateLock: false,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <BlockControls>
+          <ToolbarGroup>
+            <ToolbarButton
+              icon="align-pull-left"
+              label={POSITION_LEFT.label}
+              isActive={isFormLeft}
+              onClick={() => setAttributes({formPosition: POSITION_LEFT.value})}
+            />
+            <ToolbarButton
+              icon="align-pull-right"
+              label={POSITION_RIGHT.label}
+              isActive={!isFormLeft}
+              onClick={() => setAttributes({formPosition: POSITION_RIGHT.value})}
+            />
+          </ToolbarGroup>
+        </BlockControls>
+        {options.extraControls && <InspectorControls>{options.extraControls(props as never)}</InspectorControls>}
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,21 @@
+@layer base {
+  .g-text-and-form {
+    padding: 8px;
+
+    &.--form-left {
+      .g-text-and-form__grid > :first-child {
+        order: 2;
+      }
+
+      .g-text-and-form__grid > :last-child {
+        order: 1;
+      }
+    }
+  }
+
+  .g-text-and-form__grid {
+    --grid-gap: 24px;
+    --grid-min-col-size: 240px;
+    align-items: start;
+  }
+}

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

@@ -0,0 +1,38 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {FORM_POSITIONS} from './constants'
+import {createTextAndFormGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {TextAndFormGroupAttributes, TextAndFormGroupOptions} from './types'
+
+export type {TextAndFormGroupAttributes, TextAndFormGroupOptions}
+
+export function createTextAndFormGroupBlock<TExtra extends Record<string, unknown> = Record<string, never>>(
+  options: TextAndFormGroupOptions<TExtra>,
+): BlockConfiguration<TextAndFormGroupAttributes & TExtra> {
+  const attributes: Record<string, unknown> = {
+    formPosition: {
+      type: 'string',
+      default: FORM_POSITIONS[1].value,
+      enum: FORM_POSITIONS.map((p) => p.value),
+    },
+  }
+
+  if (options.extraAttributes) {
+    Object.assign(attributes, options.extraAttributes)
+  }
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Text a formulář', '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,
+    edit: createTextAndFormGroupEdit(options as unknown as TextAndFormGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<TextAndFormGroupAttributes & TExtra>
+}

package/src/blocks/text-and-form/text-and-form-group/icon.tsx

@@ -0,0 +1,23 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Text and Form Group</title>
+    <path d="M0 2H8V3H0V2Z" fill="black" />
+    <path d="M0 4H9V5H0V4Z" fill="black" />
+    <path d="M0 6H6V7H0V6Z" fill="black" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.5 9C0.671573 9 0 9.67157 0 10.5C0 11.3284 0.671573 12 1.5 12H6.5C7.32843 12 8 11.3284 8 10.5C8 9.67157 7.32843 9 6.5 9H1.5ZM6 10H2V11H6V10Z"
+      fill="#357AB5"
+    />
+    <rect x="10.5" y="1.5" width="9" height="3" rx="0.5" stroke="black" fill="none" />
+    <rect x="10.5" y="6.5" width="9" height="3" rx="0.5" stroke="black" fill="none" />
+    <rect x="10.5" y="11.5" width="4" height="3" rx="0.5" stroke="black" fill="none" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.5 16C10.6716 16 10 16.6716 10 17.5C10 18.3284 10.6716 19 11.5 19H15.5C16.3284 19 17 18.3284 17 17.5C17 16.6716 16.3284 16 15.5 16H11.5ZM15 17H12V18H15V17Z"
+      fill="#357AB5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,9 @@
+export type {TextAndFormGroupAttributes, TextAndFormGroupOptions} from './types'
+export {createTextAndFormGroupBlock} from './factory'
+
+import type {TextAndFormGroupOptions} from './types'
+
+export const textAndFormGroupDefaults: TextAndFormGroupOptions = {
+  name: 'brilo/text-and-form-group',
+  parent: ['brilo/base-section'],
+}

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

@@ -0,0 +1,23 @@
+import type {BlockEditProps} from '@wordpress/blocks'
+import type {ReactNode} from 'react'
+import type {BriloBlockType} from '~/types'
+import type {FORM_POSITIONS} from './constants'
+
+export type FormPositions = (typeof FORM_POSITIONS)[number]['value']
+
+export interface TextAndFormGroupAttributes extends Record<string, unknown> {
+  formPosition: FormPositions
+}
+
+export interface TextAndFormGroupOptions<TExtra extends Record<string, unknown> = Record<string, never>> extends BriloBlockType {
+  textColumnBlock?: string
+  formColumnBlock?: string
+  extraAttributes?: {
+    [K in keyof TExtra]: {
+      type: string
+      default: TExtra[K]
+    }
+  }
+  extraControls?: (props: BlockEditProps<TextAndFormGroupAttributes & TExtra>) => ReactNode
+  extraBlockClassName?: (attrs: TExtra) => (string | false | undefined)[]
+}

package/src/blocks/text-and-form/text-and-form-text-column/constants.ts

@@ -0,0 +1,10 @@
+import {__} from '@wordpress/i18n'
+
+export {CONTENT_SIZES as DEFAULT_CONTENT_SIZES, HEADING_LEVELS} from '~/constants'
+
+export const DEFAULT_HEADING_STYLES = [
+  {value: 'h1', label: __('H1 styl', 'brilo-blocks')},
+  {value: 'h2', label: __('H2 styl', 'brilo-blocks')},
+  {value: 'h3', label: __('H3 styl', 'brilo-blocks')},
+  {value: 'h4', label: __('H4 styl', 'brilo-blocks')},
+] as const

package/src/blocks/text-and-form/text-and-form-text-column/edit.tsx

@@ -0,0 +1,94 @@
+import {InspectorControls, RichText} 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 {DEFAULT_CONTENT_SIZES, DEFAULT_HEADING_STYLES, HEADING_LEVELS} from './constants'
+import type {ContentSizes, HeadingLevels, HeadingStyles, TextAndFormTextColumnAttributes, TextAndFormTextColumnOptions} from './types'
+
+export function createTextAndFormTextColumnEdit(options: TextAndFormTextColumnOptions) {
+  const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
+  const CONTENT_SIZES = options.contentSizes ?? DEFAULT_CONTENT_SIZES
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: TextAndFormTextColumnAttributes
+    setAttributes: (a: Partial<TextAndFormTextColumnAttributes>) => void
+  }) {
+    const {header, content} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: ['g-text-and-form__text', `--content-${content.size}`],
+      containerClassName: 'g-text-and-form__inner-blocks',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nadpis', 'brilo-blocks')} initialOpen={false}>
+            <ToggleGroupControl
+              label={__('Úroveň nadpisu', 'brilo-blocks')}
+              value={String(header.heading.level)}
+              onChange={(value) =>
+                setAttributes({header: {...header, heading: {...header.heading, level: Number(value) as HeadingLevels}}})
+              }
+              isBlock
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Styl nadpisu', 'brilo-blocks')}
+              value={header.heading.style}
+              onChange={(value) => setAttributes({header: {...header, heading: {...header.heading, style: value as HeadingStyles}}})}
+              isBlock
+            >
+              {HEADING_STYLES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Velikost textu', 'brilo-blocks')}
+              value={content.size}
+              onChange={(value) => setAttributes({content: {size: value as ContentSizes}})}
+              isBlock
+            >
+              {CONTENT_SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <RichText
+            tagName="span"
+            className="g-text-and-form__overline u-text-editable"
+            value={header.overline.title}
+            onChange={(value: string) => setAttributes({header: {...header, overline: {title: value}}})}
+            placeholder={__('Overline...', 'brilo-blocks')}
+            allowedFormats={[]}
+          />
+          <RichText
+            tagName={`h${header.heading.level}` as 'h1' | 'h2' | 'h3' | 'h4'}
+            className={`g-text-and-form__heading --heading-style-${header.heading.style} u-text-editable`}
+            value={header.heading.title}
+            onChange={(value: string) => setAttributes({header: {...header, heading: {...header.heading, title: value}}})}
+            placeholder={__('Nadpis...', 'brilo-blocks')}
+          />
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/text-and-form/text-and-form-text-column/editor.scss

@@ -0,0 +1,29 @@
+@layer base {
+  .g-text-and-form__text {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    width: 100%;
+  }
+
+  .g-text-and-form__overline {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #888;
+  }
+
+  .g-text-and-form__heading {
+    margin: 0;
+    font-weight: 700;
+    font-size: var(--heading-size, 24px);
+  }
+
+  .g-text-and-form__inner-blocks {
+    margin-top: 8px;
+    min-height: 40px;
+  }
+}

package/src/blocks/text-and-form/text-and-form-text-column/factory.tsx

@@ -0,0 +1,41 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {DEFAULT_CONTENT_SIZES, DEFAULT_HEADING_STYLES, HEADING_LEVELS} from './constants'
+import {createTextAndFormTextColumnEdit} from './edit'
+import type {TextAndFormTextColumnAttributes, TextAndFormTextColumnOptions} from './types'
+
+export type {TextAndFormTextColumnAttributes, TextAndFormTextColumnOptions}
+
+export function createTextAndFormTextColumnBlock<
+  THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
+  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
+>(
+  options: TextAndFormTextColumnOptions<THeadingStyles, TContentSizes>,
+): BlockConfiguration<TextAndFormTextColumnAttributes<THeadingStyles[number]['value'], TContentSizes[number]['value']>> {
+  const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
+  const contentSizes = options.contentSizes ?? DEFAULT_CONTENT_SIZES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Textový sloupec', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'text',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      header: {
+        type: 'object',
+        default: {
+          heading: {title: '', level: HEADING_LEVELS[1], style: headingStyles[1]?.value ?? headingStyles[0].value},
+          overline: {title: ''},
+        },
+      },
+      content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},
+    },
+    edit: createTextAndFormTextColumnEdit(options as unknown as TextAndFormTextColumnOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<TextAndFormTextColumnAttributes<THeadingStyles[number]['value'], TContentSizes[number]['value']>>
+}

package/src/blocks/text-and-form/text-and-form-text-column/index.ts

@@ -0,0 +1,18 @@
+export type {TextAndFormTextColumnAttributes, TextAndFormTextColumnOptions} from './types'
+export {createTextAndFormTextColumnBlock} from './factory'
+
+import type {TextAndFormTextColumnOptions} from './types'
+
+export const textAndFormTextColumnDefaults: TextAndFormTextColumnOptions = {
+  name: 'brilo/text-and-form-text-column',
+  parent: ['brilo/text-and-form-group'],
+  allowedBlocks: [
+    'brilo/basic-button',
+    'brilo/basic-heading',
+    'brilo/basic-overline',
+    'brilo/button-group',
+    'core/heading',
+    'core/list',
+    'core/paragraph',
+  ],
+}

package/src/blocks/text-and-form/text-and-form-text-column/types.ts

@@ -0,0 +1,23 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {DEFAULT_CONTENT_SIZES, DEFAULT_HEADING_STYLES, HEADING_LEVELS} from './constants'
+
+export type HeadingStyles = (typeof DEFAULT_HEADING_STYLES)[number]['value']
+export type HeadingLevels = (typeof HEADING_LEVELS)[number]
+export type ContentSizes = (typeof DEFAULT_CONTENT_SIZES)[number]['value']
+
+export interface TextAndFormTextColumnAttributes<THeadingStyle extends string = HeadingStyles, TContentSize extends string = ContentSizes>
+  extends Record<string, unknown> {
+  header: {
+    heading: {title: string; level: HeadingLevels; style: THeadingStyle}
+    overline: {title: string}
+  }
+  content: {size: TContentSize}
+}
+
+export interface TextAndFormTextColumnOptions<
+  THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
+  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
+> extends BriloBlockType {
+  headingStyles?: THeadingStyles
+  contentSizes?: TContentSizes
+}

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

@@ -0,0 +1,54 @@
+import {__} from '@wordpress/i18n'
+
+export {CONTENT_SIZES as DEFAULT_CONTENT_SIZES} from '~/constants'
+
+export const DEFAULT_COLUMNS = [2, 3, 4, 5, 6] as const
+
+export const DEFAULT_DIRECTIONS = [
+  {value: 'vertical', label: __('Vertikální', 'brilo-blocks')},
+  {value: 'horizontal', label: __('Horizontální', 'brilo-blocks')},
+] as const
+
+export const HEADING_LEVELS = [2, 3] as const
+
+export const DEFAULT_HEADING_STYLES = [
+  {value: 'h1', label: 'L', description: __('48px', 'brilo-blocks')},
+  {value: 'h2', label: 'M', description: __('32px', 'brilo-blocks')},
+  {value: 'h3', label: 'S', description: __('24px', 'brilo-blocks')},
+  {value: 'h4', label: 'XS', description: __('20px', 'brilo-blocks')},
+  {value: 'h5', label: 'XXS', description: __('16px', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_SHADOWS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'sm', label: __('Malý', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_SIZES = [
+  {value: 'xs', label: __('Extra Malá', 'brilo-blocks'), description: __('48px', 'brilo-blocks')},
+  {value: 'sm', label: __('Malá', 'brilo-blocks'), description: __('64px', 'brilo-blocks')},
+  {value: 'default', label: __('Výchozí', 'brilo-blocks'), description: __('88px', 'brilo-blocks')},
+  {value: 'lg', label: __('Velká', 'brilo-blocks'), description: __('104px', 'brilo-blocks')},
+  {value: 'xl', label: __('Extra Velká', 'brilo-blocks'), description: __('128px', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_COLORS = [
+  {value: 'none', label: __('Žádná', 'brilo-blocks')},
+  {value: 'primary', label: __('Primární', 'brilo-blocks')},
+  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
+  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
+  {value: 'conversion', label: __('Konverzní', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_BACKGROUNDS = [
+  {value: 'none', label: __('Žádné', 'brilo-blocks')},
+  {value: 'primary', label: __('Primární', 'brilo-blocks')},
+  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
+  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ALIGNMENTS = [
+  {value: 'left', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'center', label: __('Na střed', 'brilo-blocks')},
+] as const