@brilo/base-blocks 0.1.1 → 0.1.3

package/src/blocks/post/post-slider-group/factory.tsx

@@ -0,0 +1,43 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {MAX_ITEMS_DEFAULT} from './constants'
+import {createPostSliderGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {PostSliderGroupAttributes, PostSliderGroupOptions} from './types'
+
+export type {PostSliderGroupAttributes, PostSliderGroupOptions}
+
+export function createPostSliderGroupBlock(options: PostSliderGroupOptions): BlockConfiguration<PostSliderGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Post Slider', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'widgets',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      mode: {
+        type: 'string',
+        default: 'default',
+        enum: ['default', 'category', 'selected'],
+      },
+      maxItems: {
+        type: 'number',
+        default: MAX_ITEMS_DEFAULT,
+      },
+      selectedCategories: {
+        type: 'array',
+        default: [],
+        items: {type: 'number'},
+      },
+      selectedPosts: {
+        type: 'array',
+        default: [],
+        items: {type: 'number'},
+      },
+    },
+    edit: createPostSliderGroupEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<PostSliderGroupAttributes>
+}

package/src/blocks/post/post-slider-group/icon.tsx

@@ -0,0 +1,13 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1" y="4" width="18" height="12" rx="1" stroke="black" fill="none" />
+    <rect x="3" y="6" width="6" height="5" stroke="black" fill="none" />
+    <path d="M3 13H7V14H3V13Z" fill="black" />
+    <path d="M3 15H9V16H3V15Z" fill="black" />
+    <path d="M11 8H17V9H11V8Z" fill="black" />
+    <path d="M11 11H17V12H11V11Z" fill="black" />
+    <path d="M11 14H15V15H11V14Z" fill="black" />
+    <circle cx="17.5" cy="10" r="1" fill="#357AB5" />
+    <circle cx="2.5" cy="10" r="1" fill="#357AB5" />
+  </svg>
+)

package/src/blocks/post/post-slider-group/index.ts

@@ -0,0 +1,9 @@
+export type {PostSliderGroupAttributes, PostSliderGroupOptions} from './types'
+export {createPostSliderGroupBlock} from './factory'
+
+import type {PostSliderGroupOptions} from './types'
+
+export const postSliderGroupDefaults: PostSliderGroupOptions = {
+  name: 'brilo/post-slider-group',
+  parent: ['brilo/base-section'],
+}

package/src/blocks/post/post-slider-group/types.ts

@@ -0,0 +1,20 @@
+import type {BriloBlockType} from '~/types'
+
+export type PostSliderMode = 'default' | 'category' | 'selected'
+
+export interface PostSliderGroupAttributes extends Record<string, unknown> {
+  mode: PostSliderMode
+  maxItems: number
+  selectedCategories: number[]
+  selectedPosts: number[]
+}
+
+export interface SelectControlProps {
+  selectedItems: number[]
+  onChange: (ids: number[]) => void
+}
+
+export interface PostSliderGroupOptions extends BriloBlockType {
+  renderCategoryControl?: (props: SelectControlProps) => JSX.Element
+  renderPostsControl?: (props: SelectControlProps) => JSX.Element
+}

package/src/blocks/responsive-grid/responsive-grid-group/edit.tsx

@@ -0,0 +1,95 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalNumberControl as NumberControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {ResponsiveGridGroupAttributes, ResponsiveGridGroupOptions} from './types'
+
+const COLUMN_OPTIONS = [2, 3, 4, 5, 6]
+const GAP_PRESETS = [8, 16, 24, 32, 48]
+const MIN_COL_PRESETS = [150, 200, 250, 300]
+
+export function createResponsiveGridGroupEdit(options: ResponsiveGridGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ResponsiveGridGroupAttributes
+    setAttributes: (a: Partial<ResponsiveGridGroupAttributes>) => void
+  }) {
+    const {columns, gap, minColSize} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: options.blockClassName ?? 'wp-block-section',
+      containerClassName: options.containerClassName ?? 'u-grid-responsive',
+      containerStyle: {
+        '--grid-max-col-count': columns,
+        '--grid-min-col-size': `${minColSize}px`,
+        '--grid-gap': `${gap}px`,
+      },
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Rozložení mřížky', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Počet sloupců', 'brilo-blocks')}
+              value={String(columns)}
+              onChange={(v) => setAttributes({columns: Number(v)})}
+            >
+              {COLUMN_OPTIONS.map((c) => (
+                <ToggleGroupControlOption key={c} value={String(c)} label={String(c)} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Mezera (gap)', 'brilo-blocks')}
+              value={GAP_PRESETS.includes(gap) ? String(gap) : undefined}
+              onChange={(v) => v && setAttributes({gap: Number(v)})}
+            >
+              {GAP_PRESETS.map((p) => (
+                <ToggleGroupControlOption key={p} value={String(p)} label={`${p}px`} />
+              ))}
+            </ToggleGroupControl>
+            <NumberControl
+              label={__('Vlastní mezera (px)', 'brilo-blocks')}
+              value={gap}
+              onChange={(v) => setAttributes({gap: Number(v) || 0})}
+              min={0}
+              step={4}
+            />
+            <ToggleGroupControl
+              isBlock
+              label={__('Minimální šířka sloupce', 'brilo-blocks')}
+              value={MIN_COL_PRESETS.includes(minColSize) ? String(minColSize) : undefined}
+              onChange={(v) => v && setAttributes({minColSize: Number(v)})}
+            >
+              {MIN_COL_PRESETS.map((p) => (
+                <ToggleGroupControlOption key={p} value={String(p)} label={`${p}px`} />
+              ))}
+            </ToggleGroupControl>
+            <NumberControl
+              label={__('Vlastní minimum (px)', 'brilo-blocks')}
+              value={minColSize}
+              onChange={(v) => setAttributes({minColSize: Number(v) || 0})}
+              min={0}
+              step={10}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/responsive-grid/responsive-grid-group/factory.tsx

@@ -0,0 +1,33 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createResponsiveGridGroupEdit} from './edit'
+import type {ResponsiveGridGroupAttributes, ResponsiveGridGroupOptions} from './types'
+
+export function createResponsiveGridGroupBlock(options: ResponsiveGridGroupOptions): BlockConfiguration<ResponsiveGridGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Responzivní mřížka', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'grid-view',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      columns: {
+        type: 'number',
+        default: 2,
+      },
+      gap: {
+        type: 'number',
+        default: 32,
+      },
+      minColSize: {
+        type: 'number',
+        default: 300,
+      },
+    },
+    edit: createResponsiveGridGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<ResponsiveGridGroupAttributes>
+}

package/src/blocks/responsive-grid/responsive-grid-group/index.ts

@@ -0,0 +1,13 @@
+export type {ResponsiveGridGroupAttributes, ResponsiveGridGroupOptions} from './types'
+export {createResponsiveGridGroupBlock} from './factory'
+
+import type {ResponsiveGridGroupOptions} from './types'
+
+export const responsiveGridGroupDefaults: ResponsiveGridGroupOptions = {
+  name: 'brilo/responsive-grid-group',
+  allowedBlocks: ['brilo/responsive-grid-item'],
+  template: [
+    ['brilo/responsive-grid-item', {}],
+    ['brilo/responsive-grid-item', {}],
+  ],
+}

package/src/blocks/responsive-grid/responsive-grid-group/types.ts

@@ -0,0 +1,9 @@
+import type {BriloBlockType} from '~/types'
+
+export interface ResponsiveGridGroupAttributes extends Record<string, unknown> {
+  columns: number
+  gap: number
+  minColSize: number
+}
+
+export interface ResponsiveGridGroupOptions extends BriloBlockType {}

package/src/blocks/responsive-grid/responsive-grid-item/edit.tsx

@@ -0,0 +1,19 @@
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {ResponsiveGridItemAttributes, ResponsiveGridItemOptions} from './types'
+
+export function createResponsiveGridItemEdit(options: ResponsiveGridItemOptions) {
+  return function Edit(_: {attributes: ResponsiveGridItemAttributes; setAttributes: (a: Partial<ResponsiveGridItemAttributes>) => void}) {
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: options.blockClassName ?? 'u-grid-responsive__item',
+      containerClassName: options.containerClassName ?? 'u-grid-responsive__item-inner entry-content',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+    })
+
+    return (
+      <div {...blockProps}>
+        <div {...innerBlocksProps} />
+      </div>
+    )
+  }
+}

package/src/blocks/responsive-grid/responsive-grid-item/factory.tsx

@@ -0,0 +1,20 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createResponsiveGridItemEdit} from './edit'
+import type {ResponsiveGridItemAttributes, ResponsiveGridItemOptions} from './types'
+
+export function createResponsiveGridItemBlock(options: ResponsiveGridItemOptions): BlockConfiguration<ResponsiveGridItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Buňka mřížky', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'grid-view',
+    supports: {html: false, customClassName: false},
+    attributes: {},
+    edit: createResponsiveGridItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<ResponsiveGridItemAttributes>
+}

package/src/blocks/responsive-grid/responsive-grid-item/index.ts

@@ -0,0 +1,9 @@
+export type {ResponsiveGridItemAttributes, ResponsiveGridItemOptions} from './types'
+export {createResponsiveGridItemBlock} from './factory'
+
+import type {ResponsiveGridItemOptions} from './types'
+
+export const responsiveGridItemDefaults: ResponsiveGridItemOptions = {
+  name: 'brilo/responsive-grid-item',
+  parent: ['brilo/responsive-grid-group'],
+}

package/src/blocks/responsive-grid/responsive-grid-item/types.ts

@@ -0,0 +1,5 @@
+import type {BriloBlockType} from '~/types'
+
+export interface ResponsiveGridItemAttributes extends Record<string, unknown> {}
+
+export interface ResponsiveGridItemOptions extends BriloBlockType {}

package/src/blocks/sections/base-section/attributes.ts

@@ -0,0 +1,17 @@
+export const baseAttributes = {
+  id: {
+    type: 'string',
+    default: '',
+  },
+  spacing: {
+    type: 'object',
+    default: {
+      position: 'default',
+      size: 'default',
+    },
+  },
+  background: {
+    type: 'string',
+    default: 'none',
+  },
+} as const

package/src/blocks/sections/base-section/constants.ts

@@ -0,0 +1,18 @@
+import {__} from '@wordpress/i18n'
+
+export const SPACING_POSITIONS = [
+  {value: 'default', label: __('Nahoře i dole', 'brilo-blocks')},
+  {value: 'none', label: __('Žádná', 'brilo-blocks')},
+  {value: 'bottom-0', label: __('Pouze nahoře', 'brilo-blocks')},
+  {value: 'top-0', label: __('Pouze dole', 'brilo-blocks')},
+] as const
+
+export const SPACING_SIZES = ['default', 'sm', 'xs'] as const
+
+export const BACKGROUNDS = [
+  {value: 'none', label: __('Žádné', 'brilo-blocks')},
+  {value: 'primary', label: __('Primární', 'brilo-blocks')},
+  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
+  {value: 'conversion', label: __('Konverzní', 'brilo-blocks')},
+  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
+] as const

package/src/blocks/sections/base-section/controls.tsx

@@ -0,0 +1,70 @@
+import {
+  PanelBody,
+  SelectControl,
+  TextControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import type {BaseBlockAttributes, ExcludableBaseAttr} from './types'
+import {BACKGROUNDS, SPACING_POSITIONS, SPACING_SIZES} from './constants'
+
+type SpacingPosition = BaseBlockAttributes['spacing']['position']
+type SpacingSize = BaseBlockAttributes['spacing']['size']
+
+interface BaseControlsProps {
+  attributes: BaseBlockAttributes
+  setAttributes: (attrs: Partial<BaseBlockAttributes>) => void
+  exclude: ExcludableBaseAttr[]
+}
+
+export function BaseControls({attributes, setAttributes, exclude}: BaseControlsProps) {
+  const {id, spacing, background} = attributes
+
+  return (
+    <>
+      {!exclude.includes('spacing') && (
+        <PanelBody title={__('Rozestupy', 'brilo-blocks')}>
+          <SelectControl<string>
+            label={__('Pozice', 'brilo-blocks')}
+            value={spacing.position}
+            options={[...SPACING_POSITIONS]}
+            onChange={(value) => setAttributes({spacing: {...spacing, position: value as SpacingPosition}})}
+          />
+          <ToggleGroupControl
+            label={__('Velikost', 'brilo-blocks')}
+            value={spacing.size}
+            onChange={(value) => setAttributes({spacing: {...spacing, size: value as SpacingSize}})}
+            isBlock
+          >
+            {SPACING_SIZES.map((s) => (
+              <ToggleGroupControlOption key={s} value={s} label={s === 'default' ? __('Výchozí', 'brilo-blocks') : s.toUpperCase()} />
+            ))}
+          </ToggleGroupControl>
+        </PanelBody>
+      )}
+
+      {!exclude.includes('background') && (
+        <PanelBody title={__('Pozadí', 'brilo-blocks')}>
+          <SelectControl<string>
+            label={__('Pozadí', 'brilo-blocks')}
+            value={background}
+            options={[...BACKGROUNDS]}
+            onChange={(value) => setAttributes({background: value})}
+          />
+        </PanelBody>
+      )}
+
+      {!exclude.includes('id') && (
+        <PanelBody title={__('Kotva', 'brilo-blocks')} initialOpen={false}>
+          <TextControl
+            label={__('ID sekce', 'brilo-blocks')}
+            value={id ?? ''}
+            onChange={(value) => setAttributes({id: value})}
+            help={__('Použije se jako HTML atribut id pro kotevní odkaz.', 'brilo-blocks')}
+          />
+        </PanelBody>
+      )}
+    </>
+  )
+}

package/src/blocks/sections/base-section/edit.tsx

@@ -0,0 +1,34 @@
+import {InspectorControls, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import type {BlockEditProps} from '@wordpress/blocks'
+import type {BaseBlockAttributes, BaseSectionOptions} from './types'
+import {BaseControls} from './controls'
+
+export function createBaseSectionEdit<TExtra extends Record<string, unknown> = Record<string, never>>(options: BaseSectionOptions<TExtra>) {
+  const EXCLUDE = options.exclude ?? []
+
+  return function Edit(props: BlockEditProps<BaseBlockAttributes & TExtra>) {
+    const {attributes, setAttributes} = props
+    const blockProps = useBlockProps({className: options.blockClassName})
+    const innerBlocksProps = useInnerBlocksProps({className: options.containerClassName}, {
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'vertical',
+      layout: {type: 'default'},
+    } as Parameters<typeof useInnerBlocksProps>[1])
+
+    return (
+      <>
+        <InspectorControls>
+          <BaseControls
+            attributes={attributes as BaseBlockAttributes}
+            setAttributes={setAttributes as (attrs: Partial<BaseBlockAttributes>) => void}
+            exclude={EXCLUDE}
+          />
+          {options.extraControls?.(props)}
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/sections/base-section/editor.scss

@@ -0,0 +1,24 @@
+@layer base {
+  .s-base {
+    border: 2px dashed #0073aa;
+    padding: 16px;
+    min-height: 60px;
+    position: relative;
+    max-width: 1200px;
+
+    &::before {
+      content: "Sekce";
+      display: block;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #0073aa;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+  }
+
+  .s-base__inner {
+    min-height: 40px;
+  }
+}

package/src/blocks/sections/base-section/factory.tsx

@@ -0,0 +1,47 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {baseAttributes} from './attributes'
+import {BACKGROUNDS} from './constants'
+import {createBaseSectionEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './types'
+
+export type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr}
+
+export function createBaseSectionBlock<TExtra extends Record<string, unknown> = Record<string, never>>(
+  options: BaseSectionOptions<TExtra>,
+): BlockConfiguration<BaseBlockAttributes & TExtra> {
+  const exclude = options.exclude ?? []
+
+  const attributes: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(baseAttributes)) {
+    if (!exclude.includes(key as keyof typeof baseAttributes)) {
+      if (key === 'background') {
+        attributes[key] = {...value, enum: BACKGROUNDS.map((b) => b.value)}
+      } else {
+        attributes[key] = value
+      }
+    }
+  }
+
+  if (options.extraAttributes) {
+    Object.assign(attributes, options.extraAttributes)
+  }
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Sekce', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    icon: options.icon ?? {src: defaultIcon},
+    supports: options.supports ?? {
+      html: false,
+      customClassName: false,
+      align: false,
+    },
+    attributes,
+    edit: createBaseSectionEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<BaseBlockAttributes & TExtra>
+}

package/src/blocks/sections/base-section/icon.tsx

@@ -0,0 +1,6 @@
+export const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512" fill="black">
+    <title>Base Section</title>
+    <path d="M.3 89.5C.1 91.6 0 93.8 0 96L0 224 0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-192 0-128c0-35.3-28.7-64-64-64L64 32c-2.2 0-4.4 .1-6.5 .3c-9.2 .9-17.8 3.8-25.5 8.2C21.8 46.5 13.4 55.1 7.7 65.5c-3.9 7.3-6.5 15.4-7.4 24zM48 224l416 0 0 192c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16l0-192z" />
+  </svg>
+)

package/src/blocks/sections/base-section/index.ts

@@ -0,0 +1,14 @@
+export type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './types'
+export {baseAttributes} from './attributes'
+export {BACKGROUNDS, SPACING_POSITIONS, SPACING_SIZES} from './constants'
+export {createBaseSectionEdit} from './edit'
+export {createBaseSectionBlock} from './factory'
+
+import type {BaseSectionOptions} from './types'
+
+export const baseSectionDefaults: BaseSectionOptions = {
+  name: 'brilo/base-section',
+  blockClassName: 'wp-block-section',
+  containerClassName: 'wp-block-section__inner',
+  allowedBlocks: [],
+}

package/src/blocks/sections/base-section/types.ts

@@ -0,0 +1,26 @@
+import type {BlockConfiguration, BlockEditProps} from '@wordpress/blocks'
+import type {ReactNode} from 'react'
+import type {BriloBlockType} from '~/types'
+
+export interface BaseBlockAttributes extends Record<string, unknown> {
+  id: string
+  spacing: {
+    position: string
+    size: string
+  }
+  background: string
+}
+
+export type ExcludableBaseAttr = 'spacing' | 'background' | 'id'
+
+export interface BaseSectionOptions<TExtra extends Record<string, unknown> = Record<string, never>> extends BriloBlockType {
+  supports?: BlockConfiguration['supports']
+  extraAttributes?: {
+    [K in keyof TExtra]: {
+      type: string
+      default: TExtra[K]
+    }
+  }
+  extraControls?: (props: BlockEditProps<BaseBlockAttributes & TExtra>) => ReactNode
+  exclude?: ExcludableBaseAttr[]
+}

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

@@ -0,0 +1,3 @@
+export const COLUMNS = [4, 3, 2] as const
+export const RATIOS = ['4:3', '3:2', '16:9', '1:1', '2:1', '3:4'] as const
+export const HEADING_LEVELS = [2, 3, 4] as const

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

@@ -0,0 +1,75 @@
+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 {COLUMNS, HEADING_LEVELS, RATIOS} from './constants'
+import type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
+
+export function createSignpostGroupEdit(options: SignpostGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: SignpostGroupAttributes
+    setAttributes: (a: Partial<SignpostGroupAttributes>) => void
+  }) {
+    const {columns, headingLevel, ratio} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-signpost wp-block-section'),
+      containerClassName: [options.containerClassName ?? 'u-grid-responsive', `--cols-${columns}`, `--ratio-${ratio.replace(':', '-')}`],
+      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 SignpostGroupAttributes['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 string})}
+            >
+              {RATIOS.map((r) => (
+                <ToggleGroupControlOption key={r} value={r} label={r} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Úroveň nadpisu položek', 'brilo-blocks')}
+              value={String(headingLevel)}
+              onChange={(v) => setAttributes({headingLevel: Number(v)})}
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}