@brilo/base-blocks 0.1.1 → 0.1.3

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

@@ -0,0 +1,74 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {VARIANTS, SIZES} from './constants'
+import type {Variant, Size, TestimonialGroupAttributes, TestimonialGroupOptions} from './types'
+
+export function createTestimonialGroupEdit(options: TestimonialGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: TestimonialGroupAttributes
+    setAttributes: (a: Partial<TestimonialGroupAttributes>) => void
+  }) {
+    const {size, isBlackAndWhite, variant} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(
+        options.blockClassName ?? 'g-testimonial wp-block-section',
+        `--variant-${variant}`,
+        isBlackAndWhite && '--is-bw',
+      ),
+      containerClassName:
+        options.containerClassName ?? clsx(options.blockClassName ?? 'g-testimonial__inner-blocks u-grid-responsive', `--size-${size}`),
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(v) => setAttributes({variant: v as Variant})}
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost', 'brilo-blocks')}
+              value={size}
+              onChange={(v) => setAttributes({size: v as Size})}
+            >
+              {SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleControl
+              label={__('Zobrazovat loga černobíle', 'brilo-blocks')}
+              checked={isBlackAndWhite}
+              onChange={(v) => setAttributes({isBlackAndWhite: v})}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,38 @@
+@layer base {
+  .g-testimonial {
+    &.--is-bw {
+      .i-testimonial__image-wrap {
+        filter: grayscale(100%);
+        opacity: 0.7;
+        transition:
+          filter 0.3s ease,
+          opacity 0.3s ease;
+
+        &:hover {
+          filter: grayscale(0%);
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .g-testimonial__inner-blocks {
+    &.--size-sm {
+      --grid-min-col-size: 100px;
+      --grid-gap: 16px;
+      --grid-max-col-count: 5;
+    }
+
+    &.--size-md {
+      --grid-min-col-size: 150px;
+      --grid-gap: 24px;
+      --grid-max-col-count: 4;
+    }
+
+    &.--size-lg {
+      --grid-min-col-size: 200px;
+      --grid-gap: 32px;
+      --grid-max-col-count: 3;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {VARIANTS, SIZES} from './constants'
+import {createTestimonialGroupEdit} from './edit'
+import type {TestimonialGroupAttributes, TestimonialGroupOptions} from './types'
+import {icon} from './icon'
+
+export type {TestimonialGroupAttributes, TestimonialGroupOptions}
+
+export function createTestimonialGroupBlock<TVariants extends OptionArray = typeof VARIANTS, TSizes extends OptionArray = typeof SIZES>(
+  options: TestimonialGroupOptions<TVariants, TSizes>,
+): BlockConfiguration<TestimonialGroupAttributes<TVariants[number]['value'], TSizes[number]['value']>> {
+  const variants = options.variants ?? VARIANTS
+  const sizes = options.sizes ?? SIZES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Reference - loga', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    icon: options.icon ?? icon,
+    attributes: {
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+        enum: variants.map((v) => v.value),
+      },
+      size: {
+        type: 'string',
+        default: sizes[1].value,
+        enum: sizes.map((s) => s.value),
+      },
+      isBlackAndWhite: {
+        type: 'boolean',
+        default: true,
+      },
+    },
+    edit: createTestimonialGroupEdit(options as unknown as TestimonialGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<TestimonialGroupAttributes<TVariants[number]['value'], TSizes[number]['value']>>
+}

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

@@ -0,0 +1,33 @@
+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 4H9V5H4V4Z" fill="black" />
+    <path d="M10 4H16V5H10V4Z" 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 d="M1 9C1 8.44772 1.44772 8 2 8H3C3.55228 8 4 8.44772 4 9C4 9.55228 3.55228 10 3 10H2C1.44772 10 1 9.55228 1 9Z" fill="#357AB5" />
+    <path d="M6 9C6 8.44772 6.44772 8 7 8H8C8.55228 8 9 8.44772 9 9C9 9.55228 8.55228 10 8 10H7C6.44772 10 6 9.55228 6 9Z" fill="#357AB5" />
+    <path
+      d="M11 9C11 8.44772 11.4477 8 12 8H13C13.5523 8 14 8.44772 14 9C14 9.55228 13.5523 10 13 10H12C11.4477 10 11 9.55228 11 9Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M16 9C16 8.44772 16.4477 8 17 8H18C18.5523 8 19 8.44772 19 9C19 9.55228 18.5523 10 18 10H17C16.4477 10 16 9.55228 16 9Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M3 13C3 12.4477 3.44772 12 4 12H5C5.55228 12 6 12.4477 6 13C6 13.5523 5.55228 14 5 14H4C3.44772 14 3 13.5523 3 13Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M8 13C8 12.4477 8.44772 12 9 12H11C11.5523 12 12 12.4477 12 13C12 13.5523 11.5523 14 11 14H9C8.44772 14 8 13.5523 8 13Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M14 13C14 12.4477 14.4477 12 15 12H16C16.5523 12 17 12.4477 17 13C17 13.5523 16.5523 14 16 14H15C14.4477 14 14 13.5523 14 13Z"
+      fill="#357AB5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,15 @@
+export type {TestimonialGroupAttributes} from './types'
+export {createTestimonialGroupBlock} from './factory'
+
+import {TestimonialGroupOptions} from './types'
+
+export const testimonialGroupDefaults: TestimonialGroupOptions = {
+  name: 'brilo/testimonial-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/testimonial-item'],
+  template: [
+    ['brilo/testimonial-item', {}],
+    ['brilo/testimonial-item', {}],
+    ['brilo/testimonial-item', {}],
+  ],
+}

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

@@ -0,0 +1,19 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import {VARIANTS, SIZES} from './constants'
+
+export type Variant = (typeof VARIANTS)[number]['value']
+export type Size = (typeof SIZES)[number]['value']
+
+export interface TestimonialGroupAttributes<TVariant extends string = Variant, TSize extends string = Size>
+  extends Record<string, unknown> {
+  size: TSize
+  isBlackAndWhite: boolean
+  variant: TVariant
+}
+
+export interface TestimonialGroupOptions<TVariants extends OptionArray = typeof VARIANTS, TSizes extends OptionArray = typeof SIZES>
+  extends BriloBlockType {
+  allowedBlocks: string[]
+  variants?: TVariants
+  sizes?: TSizes
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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