@brilo/base-blocks 0.1.7 → 0.1.9

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

@@ -1,10 +1,16 @@
 import {InspectorControls} from '@wordpress/block-editor'
-import {PanelBody, RangeControl} from '@wordpress/components'
+import {
+  PanelBody,
+  RangeControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import type {ColumnItemAttributes, ColumnItemOptions} from './types'
-import {SIZES} from './constants'
+import {ALIGN, SIZES} from './constants'
+import {Icon} from '@wordpress/icons'
 
 export function createColumnItemEdit(options: ColumnItemOptions) {
   return function Edit({
@@ -14,9 +20,9 @@ export function createColumnItemEdit(options: ColumnItemOptions) {
     attributes: ColumnItemAttributes
     setAttributes: (a: Partial<ColumnItemAttributes>) => void
   }) {
-    const {size} = attributes
+    const {size, align} = attributes
     const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: clsx(options.blockClassName ?? 'i-column', `--size-${size}`),
+      blockClassName: clsx(options.blockClassName ?? 'i-column', `--size-${size}`, align && `--align-${align}`),
       containerClassName: options.containerClassName ?? 'i-column__inner',
       allowedBlocks: options.allowedBlocks,
       template: options.template,
@@ -37,6 +43,16 @@ export function createColumnItemEdit(options: ColumnItemOptions) {
               withInputField={false}
               marks={SIZES.map((s, i) => ({label: s, value: i}))}
             />
+            <ToggleGroupControl
+              label={__('Zarovnání', 'brilo-blocks')}
+              value={align}
+              onChange={(v) => setAttributes({align: v as string})}
+              isBlock
+            >
+              {ALIGN.map((item) => (
+                <ToggleGroupControlOptionIcon key={item.value} value={item.value} label={item.label} icon={item.icon} />
+              ))}
+            </ToggleGroupControl>
           </PanelBody>
         </InspectorControls>
         <div {...blockProps}>

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

@@ -3,6 +3,7 @@ import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import {createColumnItemEdit} from './edit'
 import type {ColumnItemAttributes, ColumnItemOptions} from './types'
+import {ALIGN} from './constants'
 
 export function createColumnItemBlock(options: ColumnItemOptions): BlockConfiguration<ColumnItemAttributes> {
   return {
@@ -18,6 +19,10 @@ export function createColumnItemBlock(options: ColumnItemOptions): BlockConfigur
         type: 'string',
         default: '1/2',
       },
+      align: {
+        type: 'string',
+        default: ALIGN[0],
+      },
     },
     edit: createColumnItemEdit(options),
     save: () => <InnerBlocks.Content />,

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

@@ -6,5 +6,15 @@ 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'],
+  allowedBlocks: [
+    'core/paragraph',
+    'core/list',
+    'core/image',
+    'core/heading',
+    'core/embed',
+    'core/quote',
+    'core/table',
+    'core/gallery',
+    'brilo/link-item',
+  ],
 }

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

@@ -2,6 +2,7 @@ import type {BriloBlockType} from '~/types'
 
 export interface ColumnItemAttributes extends Record<string, unknown> {
   size: string
+  align: string
 }
 
 export interface ColumnItemOptions extends BriloBlockType {}

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

@@ -12,11 +12,15 @@
   grid-column: span var(--col-span, 1);
   margin-inline: 0;
   width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #eee;
+  padding: 8px;
 
   .i-contact__inner {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    width: 100%;
 
     p,
     h3,

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

@@ -1,14 +1,21 @@
 import {InnerBlocks} from '@wordpress/block-editor'
-import type {BlockConfiguration} from '@wordpress/blocks'
+import type {BlockConfiguration, BlockEditProps} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
+import type {Icon} from '~/types'
+import type {IconType} from '~/components/IconControl/IconControl'
 import {CONTACT_COLUMNS_CONTEXT} from '../contact-group/constants'
 import {CONTACT_ICON_SIZE_DEFAULT, CONTACT_ICON_TYPES} from './constants'
-import {createContactItemEdit} from './edit'
 import type {ContactItemAttributes, ContactItemOptions} from './types'
 
 export type {ContactItemAttributes, ContactItemOptions}
 
-export function createContactItemBlock(options: ContactItemOptions): BlockConfiguration<ContactItemAttributes> {
+export function createContactItemBlock<T extends ContactItemAttributes = ContactItemAttributes>(
+  options: ContactItemOptions & {
+    icons: IconType[]
+    iconsSrc: string
+    edit: (props: BlockEditProps<T>) => JSX.Element
+  },
+): BlockConfiguration<T> {
   return {
     name: options.name,
     title: options.title ?? __('Kontaktní položka', 'brilo-blocks'),
@@ -19,6 +26,7 @@ export function createContactItemBlock(options: ContactItemOptions): BlockConfig
     supports: {html: false, customClassName: false},
     usesContext: [CONTACT_COLUMNS_CONTEXT],
     attributes: {
+      ...(options.attributes as any),
       colSpan: {type: 'number', default: 1},
       icon: {
         type: 'object',
@@ -29,7 +37,7 @@ export function createContactItemBlock(options: ContactItemOptions): BlockConfig
         default: {variant: 'md', custom: CONTACT_ICON_SIZE_DEFAULT},
       },
     },
-    edit: createContactItemEdit(options),
+    edit: options.edit,
     save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<ContactItemAttributes>
+  } as BlockConfiguration<T>
 }

package/src/blocks/core/basic-button/edit.tsx

@@ -5,11 +5,14 @@ import {
   ToggleControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  RangeControl,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {DEFAULT_FULL_WIDTH_OPTIONS, DEFAULT_SIZES, DEFAULT_VARIANTS} from './constants'
 import type {BasicButtonAttributes, BasicButtonOptions, ButtonFullWidth, ButtonSize, ButtonVariant} from './types'
+import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {ICON_TYPES} from '~/blocks/link/link-item/constants'
 
 export function createBasicButtonEdit(options: BasicButtonOptions) {
   const VARIANTS = options.variants ?? DEFAULT_VARIANTS
@@ -23,7 +26,12 @@ export function createBasicButtonEdit(options: BasicButtonOptions) {
     attributes: BasicButtonAttributes
     setAttributes: (a: Partial<BasicButtonAttributes>) => void
   }) {
-    const {title, variant, outline, fullWidth, size, url} = attributes
+    const {title, variant, outline, fullWidth, size, url, icon} = attributes
+    const hasIcon = icon.type !== 'none' && (icon.src || icon.media?.id)
+
+    const setIconBase = (attrs: {icon: import('~/types').Icon}) => {
+      setAttributes({icon: {...icon, ...attrs.icon} as typeof icon})
+    }
     const blockProps = useBlockProps({
       className: clsx(
         options.blockClassName ?? 'i-button',
@@ -34,6 +42,8 @@ export function createBasicButtonEdit(options: BasicButtonOptions) {
       ),
     })
 
+    const iconPreviewStyle = {maxWidth: icon.size, flex: `0 0 ${icon.size}px`} as React.CSSProperties
+
     return (
       <>
         <InspectorControls>
@@ -88,8 +98,42 @@ export function createBasicButtonEdit(options: BasicButtonOptions) {
               onChange={(value) => setAttributes({url: {...url, blank: value}})}
             />
           </PanelBody>
+          <PanelBody title={__('Ikona', 'brilo-blocks')} initialOpen={false}>
+            <ItemIconControl
+              icon={icon as unknown as import('~/types').Icon}
+              setAttributes={setIconBase}
+              iconTypes={ICON_TYPES}
+              options={options}
+            />
+            {hasIcon && (
+              <>
+                <ToggleGroupControl
+                  isBlock
+                  label={__('Pozice', 'brilo-blocks')}
+                  value={icon.position}
+                  onChange={(v) => setAttributes({icon: {...icon, position: String(v) as 'before' | 'after'}})}
+                >
+                  <ToggleGroupControlOption value="before" label={__('Před', 'brilo-blocks')} />
+                  <ToggleGroupControlOption value="after" label={__('Za', 'brilo-blocks')} />
+                </ToggleGroupControl>
+                <RangeControl
+                  label={__('Velikost (px)', 'brilo-blocks')}
+                  value={icon.size}
+                  onChange={(v) => setAttributes({icon: {...icon, size: v ?? 24}})}
+                  min={8}
+                  max={80}
+                  step={1}
+                />
+              </>
+            )}
+          </PanelBody>
         </InspectorControls>
         <div {...blockProps}>
+          {hasIcon && icon.position === 'before' && (
+            <span className="link-item__icon" style={iconPreviewStyle}>
+              <ItemIconPreview icon={icon as unknown as import('~/types').Icon} setAttributes={setIconBase} options={options} />
+            </span>
+          )}
           <div className="i-button__inner">
             <RichText
               tagName="span"
@@ -100,6 +144,11 @@ export function createBasicButtonEdit(options: BasicButtonOptions) {
               allowedFormats={[]}
             />
           </div>
+          {hasIcon && icon.position === 'after' && (
+            <span className="link-item__icon" style={iconPreviewStyle}>
+              <ItemIconPreview icon={icon as unknown as import('~/types').Icon} setAttributes={setIconBase} options={options} />
+            </span>
+          )}
         </div>
       </>
     )

package/src/blocks/core/basic-button/factory.tsx

@@ -45,6 +45,10 @@ export function createBasicButtonBlock<
         enum: sizes.map((s) => s.value),
       },
       url: {type: 'object', default: {src: '', blank: false}},
+      icon: {
+        type: 'object',
+        default: {type: 'none', src: '', media: {}, position: 'after', size: 24},
+      },
     },
     edit: createBasicButtonEdit(options as unknown as BasicButtonOptions),
     save: () => null,

package/src/blocks/core/basic-button/index.ts

@@ -5,4 +5,6 @@ import type {BasicButtonOptions} from './types'
 
 export const basicButtonDefaults: BasicButtonOptions = {
   name: 'brilo/basic-button',
+  icons: [],
+  iconsSrc: '',
 }

package/src/blocks/core/basic-button/types.ts

@@ -1,10 +1,19 @@
-import type {BriloBlockType, OptionArray} from '~/types'
+import type {BriloBlockType, Media, OptionArray} from '~/types'
 import type {DEFAULT_FULL_WIDTH_OPTIONS, DEFAULT_SIZES, DEFAULT_VARIANTS} from './constants'
+import type {IconType} from '~/components/IconControl/IconControl'
 
 export type ButtonVariant = (typeof DEFAULT_VARIANTS)[number]['value']
 export type ButtonSize = (typeof DEFAULT_SIZES)[number]['value']
 export type ButtonFullWidth = (typeof DEFAULT_FULL_WIDTH_OPTIONS)[number]['value']
 
+export interface LinkItemIcon {
+  type: 'preselected' | 'media' | 'none'
+  src: string
+  media: Media
+  position: 'before' | 'after'
+  size: number
+}
+
 export interface BasicButtonAttributes<
   TVariant extends string = ButtonVariant,
   TSize extends string = ButtonSize,
@@ -15,6 +24,7 @@ export interface BasicButtonAttributes<
   outline: boolean
   fullWidth: TFullWidth
   size: TSize
+  icon: LinkItemIcon
   url: {src: string; blank: boolean}
 }
 
@@ -26,4 +36,6 @@ export interface BasicButtonOptions<
   variants?: TVariants
   sizes?: TSizes
   fullWidthOptions?: TFullWidthOptions
+  icons: IconType[]
+  iconsSrc: string
 }

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

@@ -0,0 +1,10 @@
+export const DEFAULT_COLUMNS = [2, 3, 4, 6] as const
+
+export const DEFAULT_RATIOS = [
+  {value: '4:3', label: '4:3'},
+  {value: '16:9', label: '16:9'},
+  {value: '3:2', label: '3:2'},
+  {value: '1:1', label: '1:1'},
+  {value: '2:1', label: '2:1'},
+  {value: '3:4', label: '3:4'},
+] as const

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

@@ -0,0 +1,117 @@
+import {InspectorControls, MediaUpload} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  TextControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {useDispatch} from '@wordpress/data'
+import {createBlock} from '@wordpress/blocks'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {DEFAULT_COLUMNS, DEFAULT_RATIOS} from './constants'
+import type {GalleryGroupAttributes, GalleryGroupOptions, GalleryRatio} from './types'
+
+type Media = {
+  id: number
+  url: string
+}
+
+export function createGalleryGroupEdit(options: GalleryGroupOptions) {
+  const COLUMNS = options.columns ?? DEFAULT_COLUMNS
+  const RATIOS = options.ratios ?? DEFAULT_RATIOS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+    clientId,
+  }: {
+    attributes: GalleryGroupAttributes
+    setAttributes: (a: Partial<GalleryGroupAttributes>) => void
+    clientId: string
+  }) {
+    const {columns, ratio, galleryId} = attributes
+    const {insertBlock} = useDispatch('core/block-editor')
+
+    const addNewBlock = (imageId: number) => {
+      const newBlock = createBlock(options.allowedBlocks[0], {
+        img: {
+          id: imageId,
+        },
+      })
+
+      insertBlock(newBlock, undefined, clientId)
+    }
+
+    const onSelectImages = (media: Media[]) => {
+      media.forEach((item) => addNewBlock(item.id))
+    }
+
+    const CustomAppender = () => {
+      return (
+        <MediaUpload
+          onSelect={onSelectImages}
+          multiple="add"
+          allowedTypes={['image']}
+          render={({open}) => (
+            <div onClick={open} className="g-gallery__appender">
+              {__('Přidat obrázky', 'brilo-blocks')}
+            </div>
+          )}
+        />
+      )
+    }
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-gallery wp-block-section'),
+      containerClassName: [options.containerClassName ?? 'u-grid-responsive', `--cols-${columns}`],
+      containerStyle: {
+        '--grid-max-col-count': columns,
+        '--gallery-aspect-ratio': ratio.replace(':', '/'),
+      },
+      allowedBlocks: options.allowedBlocks,
+      renderAppender: CustomAppender,
+      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 GalleryGroupAttributes['columns']})}
+            >
+              {COLUMNS.map((c) => (
+                <ToggleGroupControlOption key={c} value={String(c)} label={String(c)} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Poměr stran', 'brilo-blocks')}
+              value={ratio}
+              onChange={(v) => setAttributes({ratio: v as GalleryRatio})}
+            >
+              {RATIOS.map((r) => (
+                <ToggleGroupControlOption key={r.value} value={r.value} label={r.label} />
+              ))}
+            </ToggleGroupControl>
+            <TextControl
+              label={__('Gallery ID', 'brilo-blocks')}
+              value={galleryId}
+              onChange={(v) => setAttributes({galleryId: v})}
+              help={__('ID pro oddělení/spojení galerií', 'brilo-blocks')}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,18 @@
+.g-gallery__appender {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed lightblue;
+  height: 100%;
+  cursor: pointer;
+  box-sizing: border-box;
+  min-height: 256px;
+}
+
+.g-gallery {
+  .block-list-appender {
+    width: 100%;
+    position: relative;
+  }
+}

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

@@ -0,0 +1,36 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createGalleryGroupEdit} from './edit'
+import {DEFAULT_COLUMNS, DEFAULT_RATIOS} from './constants'
+import type {GalleryGroupAttributes, GalleryGroupOptions} from './types'
+import {InnerBlocks} from '@wordpress/block-editor'
+
+export type {GalleryGroupAttributes, GalleryGroupOptions}
+
+export function createGalleryGroupBlock(options: GalleryGroupOptions): BlockConfiguration<GalleryGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Gallery Group', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'format-gallery',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      columns: {
+        type: 'number',
+        default: options.columns ? options.columns[0] : DEFAULT_COLUMNS[1], // Default to 3 if not specified
+      },
+      ratio: {
+        type: 'string',
+        default: options.ratios ? options.ratios[0].value : DEFAULT_RATIOS[0].value,
+      },
+      galleryId: {
+        type: 'string',
+        default: 'gallery',
+      },
+    },
+    edit: createGalleryGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<GalleryGroupAttributes>
+}

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

@@ -0,0 +1,11 @@
+export type {GalleryGroupAttributes, GalleryGroupOptions} from './types'
+export {createGalleryGroupBlock} from './factory'
+
+import type {GalleryGroupOptions} from './types'
+
+export const galleryGroupDefaults: GalleryGroupOptions = {
+  name: 'brilo/gallery-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/gallery-item'],
+  template: [],
+}

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

@@ -0,0 +1,21 @@
+import type {BriloBlockType, NumberArray, OptionArray} from '~/types'
+import type {DEFAULT_COLUMNS, DEFAULT_RATIOS} from './constants'
+
+export type GalleryColumns = (typeof DEFAULT_COLUMNS)[number]
+export type GalleryRatio = (typeof DEFAULT_RATIOS)[number]['value']
+
+export interface GalleryGroupAttributes<TColumn extends number = GalleryColumns, TRatio extends string = GalleryRatio>
+  extends Record<string, unknown> {
+  columns: TColumn
+  ratio: TRatio
+  galleryId: string
+}
+
+export interface GalleryGroupOptions<
+  TColumns extends NumberArray = typeof DEFAULT_COLUMNS,
+  TRatios extends OptionArray = typeof DEFAULT_RATIOS,
+> extends BriloBlockType {
+  allowedBlocks: string[]
+  columns?: TColumns
+  ratios?: TRatios
+}

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

@@ -0,0 +1,46 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import type {GalleryItemAttributes, GalleryItemOptions} from './types'
+import {ImagePickerControl} from '~/components/ImagePicker/ImagePicker'
+
+export function createGalleryItemEdit(_options: GalleryItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: GalleryItemAttributes
+    setAttributes: (a: Partial<GalleryItemAttributes>) => void
+  }) {
+    const {img} = attributes
+
+    const blockProps = useBlockProps({className: clsx('i-gallery')})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Obrázek', 'brilo-blocks')}>
+            <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-gallery__image-wrapper">
+            {img.id ? (
+              <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+            ) : (
+              <div className="i-gallery__image-placeholder">
+                <ImagePickerControl
+                  labels={{select: __('Vybrat obrázek', 'brilo-blocks')}}
+                  value={img}
+                  onChange={(val) => setAttributes({img: val})}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,8 @@
+.i-gallery__image-wrapper {
+  padding: 8px;
+  background: #f5f5f5;
+}
+
+.i-gallery {
+  width: 100%;
+}

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

@@ -0,0 +1,26 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createGalleryItemEdit} from './edit'
+import type {GalleryItemAttributes, GalleryItemOptions} from './types'
+
+export type {GalleryItemAttributes, GalleryItemOptions}
+
+export function createGalleryItemBlock(options: GalleryItemOptions): BlockConfiguration<GalleryItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Gallery Item', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'format-image',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      img: {
+        type: 'object',
+        default: {id: 0, alt: ''},
+      },
+    },
+    edit: createGalleryItemEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<GalleryItemAttributes>
+}

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

@@ -0,0 +1,10 @@
+import {GalleryItemOptions} from './types'
+
+export type {GalleryItemAttributes, GalleryItemOptions} from './types'
+export {createGalleryItemBlock} from './factory'
+
+export const galleryItemDefaults: GalleryItemOptions = {
+  name: 'brilo/gallery-item',
+  parent: ['brilo/gallery-group'],
+  template: [],
+}

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

@@ -0,0 +1,7 @@
+import type {BriloBlockType, Media} from '~/types'
+
+export interface GalleryItemAttributes extends Record<string, unknown> {
+  img: Media
+}
+
+export interface GalleryItemOptions extends BriloBlockType {}

package/src/blocks/groups/content-group/factory.tsx

@@ -1,26 +1,26 @@
-import {InnerBlocks} from "@wordpress/block-editor";
-import type {BlockConfiguration} from "@wordpress/blocks";
-import {__} from "@wordpress/i18n";
-import {createContentGroupEdit} from "./edit";
-import type {ContentGroupAttributes, ContentGroupOptions} from "./types";
-import {icon as defaultIcon} from "./icon";
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createContentGroupEdit} from './edit'
+import type {ContentGroupAttributes, ContentGroupOptions} from './types'
+import {icon as defaultIcon} from './icon'
 
 export function createContentGroupBlock(options: ContentGroupOptions): BlockConfiguration<ContentGroupAttributes> {
   return {
     name: options.name,
-    title: options.title ?? __("Obsahová skupina", "brilo-blocks"),
+    title: options.title ?? __('Obsahová skupina', 'brilo-blocks'),
     description: options.description,
-    category: options.category ?? "layout",
+    category: options.category ?? 'layout',
     icon: options.icon ?? {src: defaultIcon},
     ...(options.parent && {parent: options.parent}),
     supports: {html: false, customClassName: false},
     attributes: {
       size: {
-        type: "string",
-        default: "8",
+        type: 'string',
+        default: '8',
       },
     },
     edit: createContentGroupEdit(options),
     save: () => <InnerBlocks.Content />,
-  } as BlockConfiguration<ContentGroupAttributes>;
+  } as BlockConfiguration<ContentGroupAttributes>
 }