@brilo/base-blocks 0.1.0

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>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,40 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {COLUMNS, HEADING_LEVELS, RATIOS} from './constants'
+import {createSignpostGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
+
+export type {SignpostGroupAttributes, SignpostGroupOptions}
+
+export function createSignpostGroupBlock(options: SignpostGroupOptions): BlockConfiguration<SignpostGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Rozcestník', '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: {
+      columns: {
+        type: 'number',
+        default: COLUMNS[1],
+        enum: [...COLUMNS],
+      },
+      ratio: {
+        type: 'string',
+        default: RATIOS[0],
+        enum: [...RATIOS],
+      },
+      headingLevel: {
+        type: 'number',
+        default: HEADING_LEVELS[0],
+        enum: [...HEADING_LEVELS],
+      },
+    },
+    edit: createSignpostGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<SignpostGroupAttributes>
+}

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

@@ -0,0 +1,19 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="7.5" width="8" height="11" stroke="black" fill="none" />
+    <rect x="2.5" y="9.5" width="4" height="3" stroke="black" fill="none" />
+    <path d="M2 14H6V15H2V14Z" fill="black" />
+    <path d="M2 16H7V17H2V16Z" fill="black" />
+    <rect x="11.5" y="7.5" width="8" height="11" stroke="black" fill="none" />
+    <rect x="13.5" y="9.5" width="4" height="3" stroke="black" fill="none" />
+    <path d="M13 14H17V15H13V14Z" fill="black" />
+    <path d="M13 16H18V17H13V16Z" fill="black" />
+    <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" />
+  </svg>
+)

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

@@ -0,0 +1,15 @@
+export type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
+export {createSignpostGroupBlock} from './factory'
+
+import type {SignpostGroupOptions} from './types'
+
+export const signpostGroupDefaults: SignpostGroupOptions = {
+  name: 'brilo/signpost-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/signpost-item'],
+  template: [
+    ['brilo/signpost-item', {}],
+    ['brilo/signpost-item', {}],
+    ['brilo/signpost-item', {}],
+  ],
+}

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

@@ -0,0 +1,9 @@
+import {BriloBlockType} from '~/types'
+
+export interface SignpostGroupAttributes extends Record<string, unknown> {
+  columns: number
+  headingLevel: number
+  ratio: string
+}
+
+export interface SignpostGroupOptions extends BriloBlockType {}

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

@@ -0,0 +1,4 @@
+import {__} from '@wordpress/i18n'
+
+// No item-specific constants yet, but file is required by anatomy
+export {}

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

@@ -0,0 +1,90 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {Button, PanelBody, TextControl, ToggleControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {ImagePickerControl} from '~/components/ImagePicker'
+import type {SignpostItemAttributes, SignpostItemOptions} from './types'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import clsx from 'clsx'
+
+export function createSignpostItemEdit(options: SignpostItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: SignpostItemAttributes
+    setAttributes: (a: Partial<SignpostItemAttributes>) => void
+  }) {
+    const {title, img, button, url} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-signpost'),
+      containerClassName: [options.containerClassName ?? 'i-signpost__content wp-block-inner-content'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'vertical',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Obrázek', 'brilo-blocks')}>
+            <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+          </PanelBody>
+          <PanelBody title={__('Tlačítko', 'brilo-blocks')}>
+            <TextControl
+              label={__('Text tlačítka', 'brilo-blocks')}
+              value={button.text}
+              onChange={(v) => setAttributes({button: {...button, text: v}})}
+            />
+          </PanelBody>
+          <PanelBody title={__('Odkaz', 'brilo-blocks')} initialOpen={false}>
+            <TextControl label={__('URL', 'brilo-blocks')} value={url.src} onChange={(v) => setAttributes({url: {...url, src: v}})} />
+            <ToggleControl
+              label={__('Otevřít v nové záložce', 'brilo-blocks')}
+              checked={url.blank}
+              onChange={(v) => setAttributes({url: {...url, blank: v}})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-signpost__inner">
+            <div className="i-signpost__image-wrapper">
+              {img.id ? (
+                <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} size={[128, 128]} />
+              ) : (
+                <div className="i-signpost__image-placeholder">
+                  <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+                </div>
+              )}
+            </div>
+
+            <div className="i-signpost__body">
+              <RichText
+                tagName="h3"
+                className="i-signpost__title u-text-editable"
+                value={title}
+                onChange={(v) => setAttributes({title: v})}
+                placeholder={__('Nadpis...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic']}
+              />
+
+              <div {...innerBlocksProps} />
+
+              <Button variant={'primary'} className="i-signpost__button">
+                <RichText
+                  tagName="span"
+                  className="i-signpost__button-text"
+                  value={button.text}
+                  onChange={(v) => setAttributes({button: {...button, text: v}})}
+                  placeholder={__('Text tlačítka...', 'brilo-blocks')}
+                />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,25 @@
+@layer base {
+  .i-signpost {
+    width: 100%;
+  }
+
+  .i-signpost__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+  }
+
+  .i-signpost__image-placeholder {
+    border: 1px dashed #0073aa;
+    padding: 16px 8px 8px;
+  }
+
+  .i-signpost__image-wrapper {
+    .c-image-picker-control__row {
+      flex-direction: column;
+    }
+  }
+}