@brilo/base-blocks 0.1.1 → 0.1.3

package/src/blocks/groups/text-and-media-group/index.ts

@@ -0,0 +1,18 @@
+export type {TextAndMediaGroupAttributes, TextAndMediaGroupOptions} from './types'
+export {createTextAndMediaGroupBlock} from './factory'
+
+import type {TextAndMediaGroupOptions} from './types'
+
+export const textAndMediaGroupDefaults: TextAndMediaGroupOptions = {
+  name: 'brilo/text-and-media-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: [
+    'brilo/basic-button',
+    'brilo/basic-heading',
+    'brilo/basic-overline',
+    'brilo/button-group',
+    'core/heading',
+    'core/list',
+    'core/paragraph',
+  ],
+}

package/src/blocks/groups/text-and-media-group/types.ts

@@ -0,0 +1,60 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {
+  CHIP_POSITIONS,
+  DEFAULT_CHIP_VARIANTS,
+  DEFAULT_CONTENT_SIZES,
+  DEFAULT_GRID_STYLES,
+  DEFAULT_HEADING_STYLES,
+  DEFAULT_MEDIA_POSITIONS,
+  DEFAULT_RATIOS,
+  HEADING_LEVELS,
+} from './constants'
+
+export type MediaPositions = (typeof DEFAULT_MEDIA_POSITIONS)[number]['value']
+export type Ratios = (typeof DEFAULT_RATIOS)[number]['value']
+export type GridStyles = (typeof DEFAULT_GRID_STYLES)[number]['value']
+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 type ChipPositions = (typeof CHIP_POSITIONS)[number]['value']
+export type ChipVariants = (typeof DEFAULT_CHIP_VARIANTS)[number]['value']
+
+export interface TextAndMediaGroupAttributes<
+  TRatio extends string = Ratios,
+  TMediaPosition extends string = MediaPositions,
+  TGridStyle extends string = GridStyles,
+  THeadingStyle extends string = HeadingStyles,
+  TContentSize extends string = ContentSizes,
+  TChipVariant extends string = ChipVariants,
+> extends Record<string, unknown> {
+  header: {
+    heading: {title: string; level: HeadingLevels; style: THeadingStyle}
+    overline: {title: string}
+  }
+  mediaPosition: TMediaPosition
+  img: {
+    id: number
+    alt: string
+    video: {src: string}
+    chip: {title: string; position: ChipPositions; variant: TChipVariant}
+  }
+  ratio: TRatio
+  gridStyle: TGridStyle
+  content: {size: TContentSize}
+}
+
+export interface TextAndMediaGroupOptions<
+  TRatios extends OptionArray = typeof DEFAULT_RATIOS,
+  TMediaPositions extends OptionArray = typeof DEFAULT_MEDIA_POSITIONS,
+  TGridStyles extends OptionArray = typeof DEFAULT_GRID_STYLES,
+  THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
+  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
+  TChipVariants extends OptionArray = typeof DEFAULT_CHIP_VARIANTS,
+> extends BriloBlockType {
+  ratios?: TRatios
+  mediaPositions?: TMediaPositions
+  gridStyles?: TGridStyles
+  headingStyles?: THeadingStyles
+  contentSizes?: TContentSizes
+  chipVariants?: TChipVariants
+}

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

@@ -0,0 +1,23 @@
+import {__} from '@wordpress/i18n'
+
+export const VARIANTS = [
+  {
+    value: 'default',
+    label: __('Výchozí', 'brilo-blocks'),
+  },
+  {
+    value: 'full-width',
+    label: __('Na plnou šířku', 'brilo-blocks'),
+  },
+] as const
+
+export const EFFECTS = [
+  {
+    value: 'creative',
+    label: __('Slide', 'brilo-blocks'),
+  },
+  {
+    value: 'fade',
+    label: __('Fade', 'brilo-blocks'),
+  },
+] as const

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

@@ -0,0 +1,85 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  SelectControl,
+  ToggleControl,
+  __experimentalNumberControl as NumberControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {EFFECTS, VARIANTS} from './constants'
+import type {Effect, HeroGroupAttributes, HeroGroupOptions, Variant} from './types'
+
+export function createHeroGroupEdit(options: HeroGroupOptions) {
+  const VARIANTS_OPTIONS = options.variants ?? VARIANTS
+  const EFFECTS_OPTIONS = options.effects ?? EFFECTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: HeroGroupAttributes
+    setAttributes: (a: Partial<HeroGroupAttributes>) => void
+  }) {
+    const {variant, effect, autoplay, autoplaySpeed, pauseOnHover} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-hero wp-block-section', `--variant-${variant}`, `--effect-${effect}`),
+      containerClassName: [options.containerClassName ?? 'g-hero__container'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Rozložení a efekty', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(v) => setAttributes({variant: v as Variant})}
+            >
+              {VARIANTS_OPTIONS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <SelectControl
+              label={__('Efekt přechodu', 'brilo-blocks')}
+              value={effect}
+              options={EFFECTS_OPTIONS as any}
+              onChange={(v) => setAttributes({effect: v as Effect})}
+            />
+          </PanelBody>
+          <PanelBody title={__('Nastavení slideru', 'brilo-blocks')}>
+            <ToggleControl
+              label={__('Automatické přehrávání', 'brilo-blocks')}
+              checked={autoplay}
+              onChange={(v) => setAttributes({autoplay: v})}
+            />
+            {autoplay && (
+              <NumberControl
+                label={__('Rychlost přehrávání (ms)', 'brilo-blocks')}
+                value={autoplaySpeed}
+                onChange={(v) => setAttributes({autoplaySpeed: parseInt(v ?? '3000')})}
+              />
+            )}
+            <ToggleControl
+              label={__('Pozastavit při najetí myší', 'brilo-blocks')}
+              checked={pauseOnHover}
+              onChange={(v) => setAttributes({pauseOnHover: v})}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,45 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {EFFECTS, VARIANTS} from './constants'
+import {createHeroGroupEdit} from './edit'
+import type {HeroGroupAttributes, HeroGroupOptions} from './types'
+import {icon} from './icon'
+
+export type {HeroGroupAttributes, HeroGroupOptions}
+
+export function createHeroGroupBlock<TVariants extends OptionArray = typeof VARIANTS, TEffects extends OptionArray = typeof EFFECTS>(
+  options: HeroGroupOptions<TVariants, TEffects>,
+): BlockConfiguration<HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value']>> {
+  const variants = options.variants ?? VARIANTS
+  const effects = options.effects ?? EFFECTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Hero Slider', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? icon,
+    supports: {html: false, customClassName: false},
+    attributes: {
+      items: {type: 'array', default: []},
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+        enum: variants.map((v) => v.value),
+      },
+      autoplay: {type: 'boolean', default: false},
+      autoplaySpeed: {type: 'number', default: 3000},
+      pauseOnHover: {type: 'boolean', default: true},
+      effect: {
+        type: 'string',
+        default: effects[0].value,
+        enum: effects.map((e) => e.value),
+      },
+    },
+    edit: createHeroGroupEdit(options as unknown as HeroGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value']>>
+}

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

@@ -0,0 +1,28 @@
+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 4H8V5H4V4Z" fill="black" />
+    <path d="M7 19H9V20H7V19Z" fill="black" />
+    <path d="M10 19H11V20H10V19Z" fill="black" />
+    <path d="M12 19H13V20H12V19Z" fill="black" />
+    <path d="M9 4H16V5H9V4Z" 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" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 11L6 15L13 15L9.5 11Z" fill="black" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1 10L1 7H19V10H18V8H2V10H1ZM19 15V18H1L1 15H2V17H18V15H19Z" fill="black" />
+    <path
+      d="M14 11C14 11.5523 13.5523 12 13 12C12.4477 12 12 11.5523 12 11C12 10.4477 12.4477 10 13 10C13.5523 10 14 10.4477 14 11Z"
+      fill="black"
+    />
+    <path
+      d="M0 12.5C0 11.6716 0.671573 11 1.5 11C2.32843 11 3 11.6716 3 12.5C3 13.3284 2.32843 14 1.5 14C0.671573 14 0 13.3284 0 12.5Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M17 12.5C17 11.6716 17.6716 11 18.5 11C19.3284 11 20 11.6716 20 12.5C20 13.3284 19.3284 14 18.5 14C17.6716 14 17 13.3284 17 12.5Z"
+      fill="#357AB5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,11 @@
+export type {HeroGroupAttributes, HeroGroupOptions} from './types'
+export {createHeroGroupBlock} from './factory'
+
+import type {HeroGroupOptions} from './types'
+
+export const heroGroupDefaults: HeroGroupOptions = {
+  name: 'brilo/hero-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/hero-item'],
+  template: [['brilo/hero-item', {}]],
+}

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

@@ -0,0 +1,22 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {HeroSliderItem} from '../hero-item/types'
+import type {EFFECTS, VARIANTS} from './constants'
+
+export type Variant = (typeof VARIANTS)[number]['value']
+export type Effect = (typeof EFFECTS)[number]['value']
+
+export interface HeroGroupAttributes<TVariant extends string = Variant, TEffect extends string = Effect> extends Record<string, unknown> {
+  items: HeroSliderItem[]
+  variant: TVariant
+  autoplay: boolean
+  autoplaySpeed: number
+  pauseOnHover: boolean
+  effect: TEffect
+}
+
+export interface HeroGroupOptions<TVariants extends OptionArray = typeof VARIANTS, TEffects extends OptionArray = typeof EFFECTS>
+  extends BriloBlockType {
+  allowedBlocks: string[]
+  variants?: TVariants
+  effects?: TEffects
+}

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

@@ -0,0 +1,15 @@
+import {__} from '@wordpress/i18n'
+
+export const CONTENT_POSITIONS = [
+  {value: 'top left', label: __('Vlevo nahoře', 'brilo-blocks')},
+  {value: 'top center', label: __('Uprostřed nahoře', 'brilo-blocks')},
+  {value: 'top right', label: __('Vpravo nahoře', 'brilo-blocks')},
+  {value: 'center left', label: __('Vlevo uprostřed', 'brilo-blocks')},
+  {value: 'center center', label: __('Uprostřed', 'brilo-blocks')},
+  {value: 'center right', label: __('Vpravo uprostřed', 'brilo-blocks')},
+  {value: 'bottom left', label: __('Vlevo dole', 'brilo-blocks')},
+  {value: 'bottom center', label: __('Uprostřed dole', 'brilo-blocks')},
+  {value: 'bottom right', label: __('Vpravo dole', 'brilo-blocks')},
+] as const
+
+export const HEADING_LEVELS = [1, 2, 3] as const

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

@@ -0,0 +1,107 @@
+import {InspectorControls, RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  AlignmentMatrixControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  BaseControl,
+  TextControl,
+  ToggleControl,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {ImagePickerBody, ImagePickerControl} from '~/components/ImagePicker'
+import {CONTENT_POSITIONS, HEADING_LEVELS} from './constants'
+import type {ContentPosition, HeroItemAttributes, HeroItemOptions} from './types'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import clsx from 'clsx'
+
+export function createHeroItemEdit(options: HeroItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: HeroItemAttributes
+    setAttributes: (a: Partial<HeroItemAttributes>) => void
+  }) {
+    const {title, img, headingLevel, contentPosition, url, focalPoint} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-hero'),
+      containerClassName: [options.containerClassName ?? 'i-hero__content wp-block-inner-content'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'vertical',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení položky', 'brilo-blocks')}>
+            <ImagePickerControl value={{id: img.id, alt: img.alt}} onChange={(v) => setAttributes({img: {...img, ...v}})} />
+
+            <BaseControl label={__('Focal point (desktop)', 'brilo-blocks')}>
+              <AlignmentMatrixControl
+                value={focalPoint.point as any}
+                onChange={(v) => setAttributes({focalPoint: {...focalPoint, point: (v ?? 'center center') as ContentPosition}})}
+              />
+            </BaseControl>
+
+            <BaseControl label={__('Focal point (mobil)', 'brilo-blocks')}>
+              <AlignmentMatrixControl
+                value={(focalPoint.sm?.point ?? 'center center') as any}
+                onChange={(v) => setAttributes({focalPoint: {...focalPoint, sm: {point: (v ?? 'center center') as ContentPosition}}})}
+              />
+            </BaseControl>
+
+            <ToggleGroupControl
+              isBlock
+              label={__('Úroveň nadpisu položek', 'brilo-blocks')}
+              value={String(headingLevel)}
+              onChange={(v) => setAttributes({headingLevel: Number(v ?? HEADING_LEVELS[1])})}
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+
+            <BaseControl label={__('Pozice obsahu', 'brilo-blocks')}>
+              <AlignmentMatrixControl value={contentPosition} onChange={(v) => setAttributes({contentPosition: v as ContentPosition})} />
+            </BaseControl>
+
+            <TextControl
+              label={__('URL odkazu', 'brilo-blocks')}
+              value={url.src}
+              onChange={(v) => setAttributes({url: {...url, src: v}})}
+            />
+            <ToggleControl
+              label={__('Otevřít v novém okně', 'brilo-blocks')}
+              checked={url.blank}
+              onChange={(v) => setAttributes({url: {...url, blank: v}})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-hero__image-wrap">
+            <ImagePickerBody
+              value={{id: img.id, alt: img.alt}}
+              onChange={(v) => setAttributes({img: {...img, ...v}})}
+              placeholder={__('Vyberte obrázek', 'brilo-blocks')}
+            />
+          </div>
+          <div className={`i-hero__overlay --${contentPosition.replace(' ', '-')}`}>
+            <RichText
+              tagName={`h${headingLevel}` as any}
+              className="i-hero__title u-text-editable"
+              value={title}
+              onChange={(v) => setAttributes({title: v})}
+              placeholder={__('Nadpis...', 'brilo-blocks')}
+            />
+            <div {...innerBlocksProps} />
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,87 @@
+.i-hero {
+  position: relative;
+  overflow: hidden;
+}
+
+.i-hero__title {
+  margin-top: 0;
+}
+
+.i-hero__overlay {
+  position: absolute;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.95);
+  max-width: 80%;
+  z-index: 1;
+
+  &.--top-left {
+    top: 2rem;
+    left: 2rem;
+  }
+
+  &.--top-center {
+    top: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.--top-right {
+    top: 2rem;
+    right: 2rem;
+  }
+
+  &.--center-left {
+    top: 50%;
+    left: 2rem;
+    transform: translateY(-50%);
+  }
+
+  &.--center-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &.--center-right {
+    top: 50%;
+    right: 2rem;
+    transform: translateY(-50%);
+  }
+
+  &.--bottom-left {
+    bottom: 2rem;
+    left: 2rem;
+  }
+
+  &.--bottom-center {
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.--bottom-right {
+    bottom: 2rem;
+    right: 2rem;
+  }
+}
+
+.i-hero__image-wrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 2 / 1;
+
+  button {
+    height: 100%;
+  }
+
+  img,
+  .components-placeholder,
+  .image-picker-body {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

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

@@ -0,0 +1,49 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {CONTENT_POSITIONS, HEADING_LEVELS} from './constants'
+import {createHeroItemEdit} from './edit'
+import type {HeroItemAttributes, HeroItemOptions} from './types'
+import {InnerBlocks} from '@wordpress/block-editor'
+
+export type {HeroItemAttributes, HeroItemOptions}
+
+export function createHeroItemBlock(options: HeroItemOptions): BlockConfiguration<HeroItemAttributes> {
+  const contentPositions = options.contentPositions ?? CONTENT_POSITIONS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Hero položka', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'cover-image',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      img: {
+        type: 'object',
+        default: {id: 0, url: '', alt: ''},
+      },
+      headingLevel: {
+        type: 'number',
+        default: HEADING_LEVELS[0],
+        enum: [...HEADING_LEVELS],
+      },
+      contentPosition: {
+        type: 'string',
+        default: contentPositions[4].value,
+        enum: contentPositions.map((p) => p.value),
+      },
+      url: {
+        type: 'object',
+        default: {src: '', blank: false},
+      },
+      focalPoint: {
+        type: 'object',
+        default: {point: 'center center', sm: {point: 'center center'}},
+      },
+    },
+    edit: createHeroItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<HeroItemAttributes>
+}

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

@@ -0,0 +1,10 @@
+export type {HeroItemAttributes, HeroItemOptions} from './types'
+export {createHeroItemBlock} from './factory'
+
+import type {HeroItemOptions} from './types'
+
+export const heroItemDefaults: HeroItemOptions = {
+  name: 'brilo/hero-item',
+  parent: ['brilo/hero-group'],
+  allowedBlocks: ['core/list', 'core/paragraph', 'brilo/button-group'],
+}

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

@@ -0,0 +1,38 @@
+import {BriloBlockType, Media, OptionArray} from '~/types'
+import {CONTENT_POSITIONS, HEADING_LEVELS} from './constants'
+
+export type ContentPosition = (typeof CONTENT_POSITIONS)[number]['value']
+export type HeadingLevel = (typeof HEADING_LEVELS)[number]
+
+export type HeroItemUrl = {
+  src: string
+  blank: boolean
+}
+
+export type HeroSliderItem = {
+  title: string
+  img: Media
+  headingLevel: number
+  contentPosition: ContentPosition
+  url: HeroItemUrl
+}
+
+export type HeroItemFocalPoint = {
+  point: ContentPosition
+  sm?: {
+    point: ContentPosition
+  }
+}
+
+export interface HeroItemAttributes extends Record<string, unknown> {
+  title: string
+  img: Media
+  headingLevel: number
+  contentPosition: ContentPosition
+  url: HeroItemUrl
+  focalPoint: HeroItemFocalPoint
+}
+
+export interface HeroItemOptions extends BriloBlockType {
+  contentPositions?: OptionArray
+}

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

@@ -0,0 +1,20 @@
+import {__} from '@wordpress/i18n'
+
+export const MAP_TYPES = [
+  {
+    value: 'gps',
+    label: __('GPS', 'brilo-blocks'),
+  },
+  {
+    value: 'element',
+    label: __('Element', 'brilo-blocks'),
+  },
+  {
+    value: 'url',
+    label: __('URL', 'brilo-blocks'),
+  },
+  {
+    value: 'image',
+    label: __('Obrázek', 'brilo-blocks'),
+  },
+] as const