@brilo/base-blocks 0.1.0 → 0.1.1

package/src/blocks/groups/basic-header-group/edit.tsx

@@ -1,99 +0,0 @@
-import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
-import {
-  PanelBody,
-  __experimentalToggleGroupControl as ToggleGroupControl,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components'
-import {__} from '@wordpress/i18n'
-import clsx from 'clsx'
-import {DEFAULT_ALIGNMENTS, DEFAULT_LEVELS, DEFAULT_STYLES} from './constants'
-import type {BasicHeaderGroupAttributes, BasicHeaderGroupOptions, HeaderAlignment, HeadingStyle} from './types'
-
-export function createBasicHeaderGroupEdit(options: BasicHeaderGroupOptions) {
-  const LEVELS = options.levels ?? DEFAULT_LEVELS
-  const STYLES = options.styles ?? DEFAULT_STYLES
-  const ALIGNMENTS = options.alignments ?? DEFAULT_ALIGNMENTS
-
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: BasicHeaderGroupAttributes
-    setAttributes: (a: Partial<BasicHeaderGroupAttributes>) => void
-  }) {
-    const {heading, overline, content, textAlign} = attributes
-    const blockProps = useBlockProps({
-      className: clsx(options.blockClassName ?? 'g-header wp-block-section', `--textAlign-${textAlign}`),
-    })
-
-    return (
-      <>
-        <InspectorControls>
-          <PanelBody title={__('Nadpis', 'brilo-blocks')}>
-            <ToggleGroupControl
-              label={__('Úroveň nadpisu', 'brilo-blocks')}
-              value={String(heading.level)}
-              onChange={(value) =>
-                setAttributes({
-                  heading: {...heading, level: Number(value) as BasicHeaderGroupAttributes['heading']['level']},
-                })
-              }
-              isBlock
-            >
-              {LEVELS.map((l) => (
-                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
-              ))}
-            </ToggleGroupControl>
-            <ToggleGroupControl
-              label={__('Styl nadpisu', 'brilo-blocks')}
-              value={heading.style}
-              onChange={(value) => setAttributes({heading: {...heading, style: value as HeadingStyle}})}
-              isBlock
-            >
-              {STYLES.map((s) => (
-                <ToggleGroupControlOption key={s} value={s} label={s.toUpperCase()} />
-              ))}
-            </ToggleGroupControl>
-            <ToggleGroupControl
-              label={__('Zarovnání', 'brilo-blocks')}
-              value={textAlign}
-              onChange={(value) => setAttributes({textAlign: value as HeaderAlignment})}
-              isBlock
-            >
-              {ALIGNMENTS.map((a) => (
-                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
-              ))}
-            </ToggleGroupControl>
-          </PanelBody>
-        </InspectorControls>
-        <div {...blockProps}>
-          <RichText
-            tagName="span"
-            className="g-header__overline u-text-editable"
-            value={overline.title}
-            onChange={(value) => setAttributes({overline: {title: value}})}
-            placeholder={__('Overline...', 'brilo-blocks')}
-            allowedFormats={[]}
-          />
-          <RichText
-            tagName={`h${heading.level}` as 'h1' | 'h2' | 'h3' | 'h4'}
-            className={clsx('g-header__heading', `--heading-style-${heading.style}`, 'u-text-editable')}
-            value={heading.title}
-            onChange={(value) => setAttributes({heading: {...heading, title: value}})}
-            placeholder={__('Nadpis...', 'brilo-blocks')}
-            allowedFormats={['core/bold', 'core/italic']}
-          />
-          <RichText
-            tagName="div"
-            multiline="p"
-            className="g-header__content u-text-editable"
-            value={content}
-            onChange={(value) => setAttributes({content: value})}
-            placeholder={__('Perex...', 'brilo-blocks')}
-            allowedFormats={['core/bold', 'core/italic', 'core/link']}
-          />
-        </div>
-      </>
-    )
-  }
-}

package/src/blocks/groups/basic-header-group/editor.scss

@@ -1,35 +0,0 @@
-@layer base {
-  .g-header {
-    padding: 12px 16px;
-
-    &.--textAlign-left {
-      text-align: left;
-    }
-    &.--textAlign-center {
-      text-align: center;
-    }
-  }
-
-  .g-header__overline {
-    display: inline-flex;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    color: #555;
-    background-color: #f0f0f0;
-    border-radius: 100px;
-    padding: 3px 10px;
-    margin-bottom: 8px;
-  }
-
-  .g-header__heading {
-    margin: 0 0 10px;
-    font-weight: 700;
-    font-size: var(--heading-size, 24px);
-  }
-
-  .g-header__content {
-    margin-block: 4px;
-  }
-}

package/src/blocks/groups/basic-header-group/factory.tsx

@@ -1,46 +0,0 @@
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import type {NumberArray, OptionArray, StringArray} from '~/types'
-import {DEFAULT_ALIGNMENTS, DEFAULT_LEVELS, DEFAULT_STYLES} from './constants'
-import {createBasicHeaderGroupEdit} from './edit'
-import {icon as defaultIcon} from './icon'
-import type {BasicHeaderGroupAttributes, BasicHeaderGroupOptions} from './types'
-
-export type {BasicHeaderGroupAttributes, BasicHeaderGroupOptions}
-
-export function createBasicHeaderGroupBlock<
-  TLevels extends NumberArray = typeof DEFAULT_LEVELS,
-  TStyles extends StringArray = typeof DEFAULT_STYLES,
-  TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS,
->(
-  options: BasicHeaderGroupOptions<TLevels, TStyles, TAlignments>,
-): BlockConfiguration<BasicHeaderGroupAttributes<TLevels[number], TStyles[number], TAlignments[number]['value']>> {
-  const levels = options.levels ?? DEFAULT_LEVELS
-  const styles = options.styles ?? DEFAULT_STYLES
-  const alignments = options.alignments ?? DEFAULT_ALIGNMENTS
-
-  return {
-    name: options.name,
-    title: options.title ?? __('Hlavička základní', 'brilo-blocks'),
-    description: options.description,
-    category: options.category ?? 'layout',
-    ...(options.parent && {parent: options.parent}),
-    icon: options.icon ?? defaultIcon,
-    supports: {html: false, customClassName: false},
-    attributes: {
-      heading: {
-        type: 'object',
-        default: {title: '', level: levels[1] ?? levels[0], style: styles[1] ?? styles[0]},
-      },
-      overline: {type: 'object', default: {title: ''}},
-      content: {type: 'string', default: ''},
-      textAlign: {
-        type: 'string',
-        default: alignments[1]?.value ?? alignments[0].value,
-        enum: alignments.map((a) => a.value),
-      },
-    },
-    edit: createBasicHeaderGroupEdit(options as unknown as BasicHeaderGroupOptions),
-    save: () => null,
-  } as unknown as BlockConfiguration<BasicHeaderGroupAttributes<TLevels[number], TStyles[number], TAlignments[number]['value']>>
-}

package/src/blocks/groups/basic-header-group/icon.tsx

@@ -1,17 +0,0 @@
-export const icon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <title>Basic Header Group</title>
-    <rect x="12" y="4" width="3" height="2" rx="1" fill="black" />
-    <rect x="5" y="4" width="6" height="2" rx="1" fill="black" />
-    <rect x="1" y="8" width="6" height="1" fill="black" />
-    <rect x="9" y="8" width="10" height="1" fill="black" />
-    <rect x="3" y="10" width="9" height="1" fill="black" />
-    <rect x="14" y="10" width="3" height="1" fill="black" />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M7.5 13C6.67157 13 6 13.6716 6 14.5C6 15.3284 6.67157 16 7.5 16H12.5C13.3284 16 14 15.3284 14 14.5C14 13.6716 13.3284 13 12.5 13H7.5ZM12 14H8V15H12V14Z"
-      fill="#357AB5"
-    />
-  </svg>
-)

package/src/blocks/groups/basic-header-group/index.ts

@@ -1,9 +0,0 @@
-export type {BasicHeaderGroupAttributes, BasicHeaderGroupOptions} from './types'
-export {createBasicHeaderGroupBlock} from './factory'
-
-import type {BasicHeaderGroupOptions} from './types'
-
-export const basicHeaderGroupDefaults: BasicHeaderGroupOptions = {
-  name: 'brilo/basic-header-group',
-  parent: ['brilo/base-section'],
-}

package/src/blocks/groups/basic-header-group/types.ts

@@ -1,27 +0,0 @@
-import type {BriloBlockType, NumberArray, OptionArray, StringArray} from '~/types'
-import type {DEFAULT_ALIGNMENTS, DEFAULT_LEVELS, DEFAULT_STYLES} from './constants'
-
-export type HeaderAlignment = (typeof DEFAULT_ALIGNMENTS)[number]['value']
-export type HeadingLevel = (typeof DEFAULT_LEVELS)[number]
-export type HeadingStyle = (typeof DEFAULT_STYLES)[number]
-
-export interface BasicHeaderGroupAttributes<
-  TLevel extends number = HeadingLevel,
-  TStyle extends string = HeadingStyle,
-  TAlignment extends string = HeaderAlignment,
-> extends Record<string, unknown> {
-  heading: {title: string; level: TLevel; style: TStyle}
-  overline: {title: string}
-  content: string
-  textAlign: TAlignment
-}
-
-export interface BasicHeaderGroupOptions<
-  TLevels extends NumberArray = typeof DEFAULT_LEVELS,
-  TStyles extends StringArray = typeof DEFAULT_STYLES,
-  TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS,
-> extends BriloBlockType {
-  levels?: TLevels
-  styles?: TStyles
-  alignments?: TAlignments
-}

package/src/blocks/groups/button-group/constants.ts

@@ -1,7 +0,0 @@
-import {__} from '@wordpress/i18n'
-
-export const DEFAULT_ALIGNMENTS = [
-  {value: 'left', label: __('Vlevo', 'brilo-blocks'), icon: 'align-left'},
-  {value: 'center', label: __('Na střed', 'brilo-blocks'), icon: 'align-center'},
-  {value: 'right', label: __('Vpravo', 'brilo-blocks'), icon: 'align-right'},
-] as const

package/src/blocks/groups/button-group/edit.tsx

@@ -1,52 +0,0 @@
-import {InspectorControls} from '@wordpress/block-editor'
-import {
-  PanelBody,
-  __experimentalToggleGroupControl as ToggleGroupControl,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components'
-import {__} from '@wordpress/i18n'
-import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {DEFAULT_ALIGNMENTS} from './constants'
-import type {ButtonGroupAlignment, ButtonGroupAttributes, ButtonGroupOptions} from './types'
-
-export function createButtonGroupEdit(options: ButtonGroupOptions) {
-  const alignments = options.alignments ?? DEFAULT_ALIGNMENTS
-
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: ButtonGroupAttributes
-    setAttributes: (a: Partial<ButtonGroupAttributes>) => void
-  }) {
-    const {alignment} = attributes
-    const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: [options.blockClassName ?? 'g-button-group wp-block-section', `--align-${alignment}`],
-      containerClassName: options.containerClassName ?? 'flex gap-3 g-button-group__inner',
-      allowedBlocks: options.allowedBlocks,
-      template: options.template,
-    })
-
-    return (
-      <>
-        <InspectorControls>
-          <PanelBody title={__('Skupina tlačítek', 'brilo-blocks')}>
-            <ToggleGroupControl
-              label={__('Zarovnání', 'brilo-blocks')}
-              value={alignment}
-              onChange={(v) => setAttributes({alignment: v as ButtonGroupAlignment})}
-              isBlock
-            >
-              {alignments.map((a) => (
-                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
-              ))}
-            </ToggleGroupControl>
-          </PanelBody>
-        </InspectorControls>
-        <div {...blockProps}>
-          <div {...innerBlocksProps} />
-        </div>
-      </>
-    )
-  }
-}

package/src/blocks/groups/button-group/editor.scss

@@ -1,23 +0,0 @@
-@layer base {
-  .g-button-group {
-    padding: 8px;
-    min-height: 44px;
-
-    &.--align-left {
-      --justify: flex-start;
-    }
-
-    &.--align-center {
-      --justify: center;
-    }
-
-    &.--align-right {
-      --justify: flex-end;
-    }
-  }
-}
-
-.g-button-group__inner {
-  flex-wrap: wrap;
-  justify-content: var(--justify, flex-start);
-}

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

@@ -1,34 +0,0 @@
-import {InnerBlocks} from '@wordpress/block-editor'
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import type {OptionArray} from '~/types'
-import {DEFAULT_ALIGNMENTS} from './constants'
-import {createButtonGroupEdit} from './edit'
-import type {ButtonGroupAttributes, ButtonGroupOptions} from './types'
-
-export type {ButtonGroupAttributes, ButtonGroupOptions}
-
-export function createButtonGroupBlock<TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS>(
-  options: ButtonGroupOptions<TAlignments>,
-): BlockConfiguration<ButtonGroupAttributes<TAlignments[number]['value']>> {
-  const alignments = options.alignments ?? DEFAULT_ALIGNMENTS
-
-  return {
-    name: options.name,
-    title: options.title ?? __('Skupina tlačítek', 'brilo-blocks'),
-    description: options.description,
-    category: options.category ?? 'layout',
-    ...(options.parent && {parent: options.parent}),
-    icon: options.icon ?? 'button',
-    supports: {html: false, customClassName: false},
-    attributes: {
-      alignment: {
-        type: 'string',
-        default: alignments[1]?.value ?? alignments[0].value,
-        enum: alignments.map((a) => a.value),
-      },
-    },
-    edit: createButtonGroupEdit(options as unknown as ButtonGroupOptions),
-    save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<ButtonGroupAttributes<TAlignments[number]['value']>>
-}

package/src/blocks/groups/button-group/index.ts

@@ -1,11 +0,0 @@
-export type {ButtonGroupAttributes, ButtonGroupOptions} from './types'
-export {createButtonGroupBlock} from './factory'
-
-import type {ButtonGroupOptions} from './types'
-
-export const buttonGroupDefaults: ButtonGroupOptions = {
-  name: 'brilo/button-group',
-  parent: ['brilo/base-section'],
-  allowedBlocks: ['brilo/basic-button'],
-  template: [['brilo/basic-button', {}]],
-}

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

@@ -1,43 +0,0 @@
-import {__} from '@wordpress/i18n'
-
-export {CONTENT_SIZES as DEFAULT_CONTENT_SIZES, HEADING_LEVELS} from '~/constants'
-
-export const DEFAULT_RATIOS = [
-  {value: '3:2', label: '3:2'},
-  {value: '4:3', label: '4:3'},
-  {value: '16:9', label: '16:9'},
-  {value: '1:1', label: '1:1'},
-  {value: '2:1', label: '2:1'},
-  {value: '3:4', label: '3:4'},
-  {value: 'auto', label: 'Auto'},
-] as const
-
-export const CHIP_POSITIONS = [
-  {value: 'top-left', label: __('Vlevo nahoře', 'brilo-blocks')},
-  {value: 'top-right', label: __('Vpravo nahoře', 'brilo-blocks')},
-  {value: 'bottom-left', label: __('Vlevo dole', 'brilo-blocks')},
-  {value: 'bottom-right', label: __('Vpravo dole', 'brilo-blocks')},
-] as const
-
-export const DEFAULT_CHIP_VARIANTS = [
-  {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_MEDIA_POSITIONS = [
-  {value: 'left', label: __('Vlevo', 'brilo-blocks')},
-  {value: 'right', label: __('Vpravo', 'brilo-blocks')},
-] as const
-
-export const DEFAULT_HEADING_STYLES = [
-  {value: 'h1', label: 'H1 styl'},
-  {value: 'h2', label: 'H2 styl'},
-  {value: 'h3', label: 'H3 styl'},
-  {value: 'h4', label: 'H4 styl'},
-] as const
-
-export const DEFAULT_GRID_STYLES = [
-  {value: '1-1', label: __('Půl na půl', 'brilo-blocks')},
-  {value: '2-1', label: __('2/3 + 1/3', 'brilo-blocks')},
-] as const

package/src/blocks/groups/text-and-media-group/edit.tsx

@@ -1,241 +0,0 @@
-import {BlockControls, InspectorControls, RichText} from '@wordpress/block-editor'
-import {
-  PanelBody,
-  TextControl,
-  __experimentalToggleGroupControl as ToggleGroupControl,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-  ToolbarButton,
-  ToolbarGroup,
-} from '@wordpress/components'
-import {__} from '@wordpress/i18n'
-import clsx from 'clsx'
-import {ImagePickerBody, ImagePickerControl} from '~/components/ImagePicker'
-import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {
-  CHIP_POSITIONS,
-  DEFAULT_CHIP_VARIANTS,
-  DEFAULT_CONTENT_SIZES,
-  DEFAULT_GRID_STYLES,
-  DEFAULT_HEADING_STYLES,
-  DEFAULT_MEDIA_POSITIONS,
-  DEFAULT_RATIOS,
-  HEADING_LEVELS,
-} from './constants'
-import type {
-  ChipPositions,
-  ChipVariants,
-  ContentSizes,
-  GridStyles,
-  HeadingLevels,
-  HeadingStyles,
-  MediaPositions,
-  Ratios,
-  TextAndMediaGroupAttributes,
-  TextAndMediaGroupOptions,
-} from './types'
-
-export function createTextAndMediaGroupEdit(options: TextAndMediaGroupOptions) {
-  const RATIOS = options.ratios ?? DEFAULT_RATIOS
-  const MEDIA_POSITIONS = options.mediaPositions ?? DEFAULT_MEDIA_POSITIONS
-  const GRID_STYLES = options.gridStyles ?? DEFAULT_GRID_STYLES
-  const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
-  const CONTENT_SIZES = options.contentSizes ?? DEFAULT_CONTENT_SIZES
-  const CHIP_VARIANTS = options.chipVariants ?? DEFAULT_CHIP_VARIANTS
-
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: TextAndMediaGroupAttributes
-    setAttributes: (a: Partial<TextAndMediaGroupAttributes>) => void
-  }) {
-    const {header, mediaPosition, img, ratio, gridStyle, content} = attributes
-    const isMediaLeft = mediaPosition === 'left'
-
-    const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: [
-        options.blockClassName ?? 'g-text-and-media wp-block-section',
-        `--media-${mediaPosition}`,
-        ratio && `--ratio-${ratio}`,
-        `--content-${content.size}`,
-      ],
-      containerClassName: options.containerClassName ?? 'g-text-and-media__inner-blocks',
-      allowedBlocks: options.allowedBlocks,
-      template: options.template,
-    })
-
-    const mediaColumn = (
-      <div className="g-text-and-media__media">
-        <ImagePickerBody
-          value={{id: img.id, alt: img.alt}}
-          onChange={(val) => setAttributes({img: {...img, ...val}})}
-          placeholder={__('Vybrat obrázek', 'brilo-blocks')}
-        />
-        {img.id > 0 && img.chip.title && (
-          <span className={clsx('g-text-and-media__chip', `--${img.chip.position}`, `--${img.chip.variant}`)}>{img.chip.title}</span>
-        )}
-      </div>
-    )
-
-    const textColumn = (
-      <div className="g-text-and-media__text">
-        <RichText
-          tagName="span"
-          className="g-text-and-media__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={clsx('g-text-and-media__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')}
-          allowedFormats={['core/bold', 'core/italic']}
-        />
-        <div {...innerBlocksProps} />
-      </div>
-    )
-
-    return (
-      <>
-        <BlockControls>
-          <ToolbarGroup>
-            <ToolbarButton
-              icon="align-pull-left"
-              label={__('Média vlevo', 'brilo-blocks')}
-              isActive={isMediaLeft}
-              onClick={() => setAttributes({mediaPosition: 'left'})}
-            />
-            <ToolbarButton
-              icon="align-pull-right"
-              label={__('Média vpravo', 'brilo-blocks')}
-              isActive={!isMediaLeft}
-              onClick={() => setAttributes({mediaPosition: 'right'})}
-            />
-          </ToolbarGroup>
-        </BlockControls>
-        <InspectorControls>
-          <PanelBody title={__('Obrázek', 'brilo-blocks')}>
-            <ImagePickerControl value={{id: img.id, alt: img.alt}} onChange={(val) => setAttributes({img: {...img, ...val}})} />
-            <ToggleGroupControl
-              label={__('Poměr stran', 'brilo-blocks')}
-              value={ratio}
-              onChange={(value) => setAttributes({ratio: value as Ratios})}
-              isBlock
-            >
-              {RATIOS.map((r) => (
-                <ToggleGroupControlOption key={r.value} value={r.value} label={r.label} />
-              ))}
-            </ToggleGroupControl>
-            <TextControl
-              label={__('URL videa', 'brilo-blocks')}
-              value={img.video.src}
-              onChange={(value: string) => setAttributes({img: {...img, video: {src: value}}})}
-            />
-          </PanelBody>
-          <PanelBody title={__('Chip', 'brilo-blocks')} initialOpen={false}>
-            <TextControl
-              label={__('Text chipu', 'brilo-blocks')}
-              value={img.chip.title}
-              onChange={(value: string) => setAttributes({img: {...img, chip: {...img.chip, title: value}}})}
-            />
-            <ToggleGroupControl
-              label={__('Pozice chipu', 'brilo-blocks')}
-              value={img.chip.position}
-              onChange={(value) => setAttributes({img: {...img, chip: {...img.chip, position: value as ChipPositions}}})}
-              isBlock
-            >
-              {CHIP_POSITIONS.map((p) => (
-                <ToggleGroupControlOption key={p.value} value={p.value} label={p.label} />
-              ))}
-            </ToggleGroupControl>
-            <ToggleGroupControl
-              label={__('Varianta chipu', 'brilo-blocks')}
-              value={img.chip.variant}
-              onChange={(value) => setAttributes({img: {...img, chip: {...img.chip, variant: value as ChipVariants}}})}
-              isBlock
-            >
-              {CHIP_VARIANTS.map((v) => (
-                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
-              ))}
-            </ToggleGroupControl>
-          </PanelBody>
-          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
-            <ToggleGroupControl
-              label={__('Pozice médií', 'brilo-blocks')}
-              value={mediaPosition}
-              onChange={(value) => setAttributes({mediaPosition: value as MediaPositions})}
-              isBlock
-            >
-              {MEDIA_POSITIONS.map((p) => (
-                <ToggleGroupControlOption key={p.value} value={p.value} label={p.label} />
-              ))}
-            </ToggleGroupControl>
-            <ToggleGroupControl
-              label={__('Styl mřížky', 'brilo-blocks')}
-              value={gridStyle}
-              onChange={(value) => setAttributes({gridStyle: value as GridStyles})}
-              isBlock
-            >
-              {GRID_STYLES.map((s) => (
-                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
-              ))}
-            </ToggleGroupControl>
-            <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>
-          <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>
-        </InspectorControls>
-        <div {...blockProps}>
-          <div className={clsx('u-grid-responsive --col-2 g-text-and-media__grid', `--grid-style-${gridStyle}`)}>
-            {isMediaLeft ? (
-              <>
-                {mediaColumn}
-                {textColumn}
-              </>
-            ) : (
-              <>
-                {textColumn}
-                {mediaColumn}
-              </>
-            )}
-          </div>
-        </div>
-      </>
-    )
-  }
-}