@brilo/base-blocks 0.1.22 → 0.1.24

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

@@ -0,0 +1,70 @@
+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 {ANCHOR_ALIGNMENTS, ANCHOR_COLUMNS} from './constants'
+import type {AnchorAlignment, AnchorColumns, AnchorGroupAttributes, AnchorGroupOptions} from './types'
+
+export function createAnchorGroupEdit(options: AnchorGroupOptions) {
+  const columnsOptions = options.columnsOptions ?? ANCHOR_COLUMNS
+  const alignments = options.alignments ?? ANCHOR_ALIGNMENTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: AnchorGroupAttributes
+    setAttributes: (a: Partial<AnchorGroupAttributes>) => void
+  }) {
+    const {columns, align} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-anchors'),
+      containerClassName: [
+        options.containerClassName ?? 'g-anchors__inner',
+        columns === 'auto' ? '--auto' : `u-grid-responsive --cols-${columns}`,
+        align === 'center' && 'justify-content-center',
+      ],
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Kotvy', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Počet sloupců', 'brilo-blocks')}
+              value={columns}
+              onChange={(v) => setAttributes({columns: v as AnchorColumns})}
+            >
+              {columnsOptions.map((c) => (
+                <ToggleGroupControlOption key={c.value} value={c.value} label={c.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Zarovnání', 'brilo-blocks')}
+              value={align}
+              onChange={(v) => setAttributes({align: v as AnchorAlignment})}
+            >
+              {alignments.map((a) => (
+                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,52 @@
+@layer base {
+  .g-anchors {
+    border: 1px solid #eee;
+    padding: 16px;
+
+    .g-anchors__inner {
+      &.--auto {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      // .u-grid-responsive itself is a frontoffice utility class, not loaded in the
+      // editor bundle — recreate just enough of it here for the admin preview.
+      &.u-grid-responsive {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: 16px;
+
+        &.--cols-2 {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        &.--cols-3 {
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+
+        &.--cols-4 {
+          grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+
+        &.--cols-6 {
+          grid-template-columns: repeat(6, minmax(0, 1fr));
+        }
+      }
+
+      &.justify-content-center {
+        justify-content: center;
+      }
+    }
+  }
+}
+
+// WP core sets `margin-left/right: auto` on `.wp-block` children of containers whose
+// layout type isn't flex/grid (ours is `default`). That rule is UNLAYERED, so a
+// layered override can't beat it regardless of specificity — keep this UNLAYERED and
+// bump above WP's (0,2,0) specificity to win. Matches contact-group's editor.scss.
+.editor-styles-wrapper .g-anchors__inner > .wp-block {
+  margin-left: 0;
+  margin-right: 0;
+  max-width: none;
+}

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

@@ -0,0 +1,43 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {ANCHOR_ALIGNMENTS, ANCHOR_COLUMNS} from './constants'
+import {createAnchorGroupEdit} from './edit'
+import type {AnchorGroupAttributes, AnchorGroupOptions} from './types'
+
+export type {AnchorGroupAttributes, AnchorGroupOptions}
+
+export function createAnchorGroupBlock<
+  TColumnsOptions extends OptionArray = typeof ANCHOR_COLUMNS,
+  TAlignments extends OptionArray = typeof ANCHOR_ALIGNMENTS,
+>(
+  options: AnchorGroupOptions<TColumnsOptions, TAlignments>,
+): BlockConfiguration<AnchorGroupAttributes<TColumnsOptions[number]['value'], TAlignments[number]['value']>> {
+  const columnsOptions = options.columnsOptions ?? ANCHOR_COLUMNS
+  const alignments = options.alignments ?? ANCHOR_ALIGNMENTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Kotvy', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'anchor',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      columns: {
+        type: 'string',
+        default: columnsOptions[columnsOptions.length - 1].value,
+        enum: columnsOptions.map((c) => c.value),
+      },
+      align: {
+        type: 'string',
+        default: alignments[0].value,
+        enum: alignments.map((a) => a.value),
+      },
+    },
+    edit: createAnchorGroupEdit(options as unknown as AnchorGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<AnchorGroupAttributes<TColumnsOptions[number]['value'], TAlignments[number]['value']>>
+}

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

@@ -0,0 +1,11 @@
+export type {AnchorAlignment, AnchorColumns, AnchorGroupAttributes, AnchorGroupOptions} from './types'
+export {createAnchorGroupBlock} from './factory'
+export {ANCHOR_ALIGNMENTS, ANCHOR_COLUMNS} from './constants'
+
+import type {AnchorGroupOptions} from './types'
+
+export const anchorGroupDefaults: AnchorGroupOptions = {
+  name: 'brilo/anchor-group',
+  allowedBlocks: ['brilo/anchor-item'],
+  template: [['brilo/anchor-item', {}]],
+}

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

@@ -0,0 +1,19 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {ANCHOR_ALIGNMENTS, ANCHOR_COLUMNS} from './constants'
+
+export type AnchorColumns = (typeof ANCHOR_COLUMNS)[number]['value']
+export type AnchorAlignment = (typeof ANCHOR_ALIGNMENTS)[number]['value']
+
+export interface AnchorGroupAttributes<TColumns extends string = AnchorColumns, TAlignment extends string = AnchorAlignment>
+  extends Record<string, unknown> {
+  columns: TColumns
+  align: TAlignment
+}
+
+export interface AnchorGroupOptions<
+  TColumnsOptions extends OptionArray = typeof ANCHOR_COLUMNS,
+  TAlignments extends OptionArray = typeof ANCHOR_ALIGNMENTS,
+> extends BriloBlockType {
+  columnsOptions?: TColumnsOptions
+  alignments?: TAlignments
+}

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

@@ -0,0 +1,10 @@
+import {__} from '@wordpress/i18n'
+
+export const ANCHOR_ICON_TYPES = [
+  {value: 'preselected', label: __('Předdefinovaná', 'brilo-blocks')},
+  {value: 'media', label: __('Médium', 'brilo-blocks')},
+] as const
+
+export const ANCHOR_ICON_SIZE_RANGE = {min: 8, max: 100} as const
+
+export const ANCHOR_ICON_SIZE_DEFAULT = 32

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

@@ -0,0 +1,96 @@
+import {ColorPalette, InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {
+  BaseControl,
+  PanelBody,
+  RangeControl,
+  TextControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import type {CSSProperties} from 'react'
+import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {ANCHOR_ICON_SIZE_RANGE, ANCHOR_ICON_TYPES} from './constants'
+import type {AnchorItemAttributes, AnchorItemOptions} from './types'
+
+export function createAnchorItemEdit(options: AnchorItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: AnchorItemAttributes
+    setAttributes: (a: Partial<AnchorItemAttributes>) => void
+  }) {
+    const {title, url, icon, iconSize, iconColor, iconPosition} = attributes
+    const {paletteColors} = useTenantColorPalette()
+    const hasIcon = icon.src || icon.media?.id
+
+    const blockProps = useBlockProps({className: clsx(options.blockClassName ?? 'i-anchor')})
+    const iconPreviewStyle = {
+      maxWidth: iconSize,
+      flex: `0 0 ${iconSize}px`,
+      '--icon-color': iconColor || undefined,
+    } as CSSProperties
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Odkaz', 'brilo-blocks')}>
+            <TextControl label={__('Titulek', 'brilo-blocks')} value={title} onChange={(v) => setAttributes({title: v})} />
+            <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>
+          <PanelBody title={__('Ikona', 'brilo-blocks')}>
+            <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={ANCHOR_ICON_TYPES} options={options} />
+            <RangeControl
+              label={__('Velikost ikony (px)', 'brilo-blocks')}
+              value={iconSize}
+              onChange={(v) => setAttributes({iconSize: v ?? ANCHOR_ICON_SIZE_RANGE.min})}
+              min={ANCHOR_ICON_SIZE_RANGE.min}
+              max={ANCHOR_ICON_SIZE_RANGE.max}
+            />
+            <BaseControl label={__('Barva ikony', 'brilo-blocks')} id="anchor-item-icon-color">
+              <ColorPalette colors={paletteColors} value={iconColor || undefined} onChange={(v) => setAttributes({iconColor: v ?? ''})} />
+            </BaseControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Pozice ikony', 'brilo-blocks')}
+              value={iconPosition}
+              onChange={(v) => setAttributes({iconPosition: v as 'before' | 'after'})}
+            >
+              <ToggleGroupControlOption value="before" label={__('Před textem', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="after" label={__('Za textem', 'brilo-blocks')} />
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          {hasIcon && iconPosition === 'before' && (
+            <span className="i-anchor__icon" style={iconPreviewStyle}>
+              <ItemIconPreview icon={icon} setAttributes={setAttributes} options={options} />
+            </span>
+          )}
+          <RichText
+            tagName="span"
+            className="i-anchor__title"
+            value={title}
+            onChange={(v) => setAttributes({title: v})}
+            placeholder={__('Titulek kotvy...', 'brilo-blocks')}
+            allowedFormats={[]}
+          />
+          {hasIcon && iconPosition === 'after' && (
+            <span className="i-anchor__icon" style={iconPreviewStyle}>
+              <ItemIconPreview icon={icon} setAttributes={setAttributes} options={options} />
+            </span>
+          )}
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,22 @@
+@layer base {
+  .i-anchor {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid #eee;
+    padding: 8px 12px;
+    width: 100%;
+    box-sizing: border-box;
+
+    .i-anchor__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .i-anchor__title {
+      flex: 1;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {ANCHOR_ICON_SIZE_DEFAULT} from './constants'
+import {createAnchorItemEdit} from './edit'
+import type {AnchorItemAttributes, AnchorItemOptions} from './types'
+
+export type {AnchorItemAttributes, AnchorItemOptions}
+
+export function createAnchorItemBlock(options: AnchorItemOptions): BlockConfiguration<AnchorItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Kotva', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'text',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'admin-links',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      url: {type: 'object', default: {src: '', blank: false}},
+      icon: {type: 'object', default: {type: 'preselected', src: '', media: {}}},
+      iconSize: {type: 'number', default: ANCHOR_ICON_SIZE_DEFAULT},
+      iconColor: {type: 'string', default: ''},
+      iconPosition: {type: 'string', default: 'before', enum: ['before', 'after']},
+    },
+    edit: createAnchorItemEdit(options),
+    save: () => null,
+  } as BlockConfiguration<AnchorItemAttributes>
+}

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

@@ -0,0 +1,13 @@
+export type {AnchorItemAttributes, AnchorItemOptions} from './types'
+export {createAnchorItemBlock} from './factory'
+export {createAnchorItemEdit} from './edit'
+export {ANCHOR_ICON_SIZE_DEFAULT, ANCHOR_ICON_SIZE_RANGE, ANCHOR_ICON_TYPES} from './constants'
+
+import type {AnchorItemOptions} from './types'
+
+export const anchorItemDefaults: AnchorItemOptions = {
+  name: 'brilo/anchor-item',
+  parent: ['brilo/anchor-group'],
+  icons: [],
+  iconsSrc: '',
+}

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

@@ -0,0 +1,16 @@
+import type {BriloBlockType, Icon} from '~/types'
+import type {IconType} from '~/components/IconControl'
+
+export interface AnchorItemAttributes extends Record<string, unknown> {
+  title: string
+  url: {src: string; blank: boolean}
+  icon: Icon
+  iconSize: number
+  iconColor: string
+  iconPosition: 'before' | 'after'
+}
+
+export interface AnchorItemOptions extends BriloBlockType {
+  icons: IconType[]
+  iconsSrc: string
+}

package/src/blocks/layout/layout-aside/constants.ts

@@ -0,0 +1 @@
+export const ASIDE_DEFAULTS = {}

package/src/blocks/layout/layout-aside/edit.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {AsideAttributes, AsideOptions} from './types'
+
+export function createAsideEdit(options: AsideOptions) {
+  return function Edit() {
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: 'l-content-w-aside__aside',
+      containerClassName: 'l-content-w-aside__aside-container',
+      layout: {type: 'default'},
+      orientation: 'vertical',
+    })
+
+    return (
+      <aside {...blockProps}>
+        <div {...innerBlocksProps} />
+      </aside>
+    )
+  }
+}

package/src/blocks/layout/layout-aside/editor.scss

@@ -0,0 +1,9 @@
+@layer base {
+  .l-content-w-aside__aside {
+    width: var(--aside-width, 300px);
+    border: 2px dashed #0073aa;
+    box-sizing: border-box;
+    padding: 8px;
+    min-height: 120px;
+  }
+}

package/src/blocks/layout/layout-aside/factory.tsx

@@ -0,0 +1,24 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import React from 'react'
+import {createAsideEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {AsideAttributes, AsideOptions} from './types'
+
+export function createAsideBlock(
+  options: AsideOptions,
+): BlockConfiguration<AsideAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Postranní panel', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    parent: options.parent,
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {},
+    edit: createAsideEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<AsideAttributes>
+}

package/src/blocks/layout/layout-aside/icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const icon = (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 4H20V20H8V4ZM10 6H18V18H10V6Z"
+      fill="currentColor"
+    />
+  </svg>
+)

package/src/blocks/layout/layout-aside/index.ts

@@ -0,0 +1,9 @@
+export type {AsideAttributes, AsideOptions} from './types'
+export {createAsideBlock} from './factory'
+
+import type {AsideOptions} from './types'
+
+export const asideDefaults: AsideOptions = {
+  name: 'brilo/layout-aside',
+  parent: ['brilo/layout-content-w-aside'],
+}

package/src/blocks/layout/layout-aside/types.ts

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

package/src/blocks/layout/layout-content/constants.ts

@@ -0,0 +1 @@
+export const CONTENT_DEFAULTS = {}

package/src/blocks/layout/layout-content/edit.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {ContentAttributes, ContentOptions} from './types'
+
+export function createContentEdit(options: ContentOptions) {
+  return function Edit() {
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: 'l-content-w-aside__content',
+      containerClassName: 'l-content-w-aside__content-container',
+      layout: {type: 'default'},
+      orientation: 'vertical',
+    })
+
+    return (
+      <div {...blockProps}>
+        <div {...innerBlocksProps} />
+      </div>
+    )
+  }
+}

package/src/blocks/layout/layout-content/editor.scss

@@ -0,0 +1,9 @@
+@layer base {
+  .l-content-w-aside__content {
+    border: 2px dashed #0073aa;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px;
+    min-height: 120px;
+  }
+}

package/src/blocks/layout/layout-content/factory.tsx

@@ -0,0 +1,24 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import React from 'react'
+import {createContentEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {ContentAttributes, ContentOptions} from './types'
+
+export function createContentBlock(
+  options: ContentOptions,
+): BlockConfiguration<ContentAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Obsah', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    parent: options.parent,
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {},
+    edit: createContentEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<ContentAttributes>
+}

package/src/blocks/layout/layout-content/icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const icon = (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 4H16V20H4V4ZM6 6H14V18H6V6Z"
+      fill="currentColor"
+    />
+  </svg>
+)

package/src/blocks/layout/layout-content/index.ts

@@ -0,0 +1,9 @@
+export type {ContentAttributes, ContentOptions} from './types'
+export {createContentBlock} from './factory'
+
+import type {ContentOptions} from './types'
+
+export const contentDefaults: ContentOptions = {
+  name: 'brilo/layout-content',
+  parent: ['brilo/layout-content-w-aside'],
+}

package/src/blocks/layout/layout-content/types.ts

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

package/src/blocks/layout/layout-content-w-aside/constants.ts

@@ -0,0 +1,7 @@
+import {__} from '@wordpress/i18n'
+
+export const ASIDE_SIZES = [
+  {value: 'sm', label: __('Malá', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+  {value: 'lg', label: __('Velká', 'brilo-blocks')},
+] as const

package/src/blocks/layout/layout-content-w-aside/edit.tsx

@@ -0,0 +1,52 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {PanelBody, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import React from 'react'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {ASIDE_SIZES} from './constants'
+import type {AsideSize, ContentWithAsideAttributes, ContentWithAsideOptions} from './types'
+
+export function createContentWithAsideEdit(options: ContentWithAsideOptions) {
+  const ASIDE_SIZES_OPTIONS = options.asideSizes ?? ASIDE_SIZES
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ContentWithAsideAttributes
+    setAttributes: (a: Partial<ContentWithAsideAttributes>) => void
+  }) {
+    const {asideSize} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: 'l-content-w-aside',
+      containerClassName: `l-content-w-aside__container --aside-${asideSize}`,
+      template: options.template,
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost postranního panelu', 'brilo-blocks')}
+              value={asideSize}
+              onChange={(v) => setAttributes({asideSize: v as AsideSize})}
+            >
+              {ASIDE_SIZES_OPTIONS.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}