@brilo/base-blocks 0.1.1 → 0.1.3

package/src/blocks/compare/compare-option/edit.tsx

@@ -0,0 +1,64 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  TextControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {VARIANTS} from './constants'
+import type {CompareOptionAttributes, CompareOptionOptions} from './types'
+
+export function createCompareOptionEdit(options: CompareOptionOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: CompareOptionAttributes
+    setAttributes: (a: Partial<CompareOptionAttributes>) => void
+  }) {
+    const {text, variant, customChar} = attributes
+    const blockProps = useBlockProps({className: 'i-compare-option'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(v) => setAttributes({variant: v as CompareOptionAttributes['variant']})}
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            {variant === 'custom' && (
+              <TextControl
+                label={__('Vlastní znak', 'brilo-blocks')}
+                value={customChar}
+                onChange={(v) => setAttributes({customChar: v.substring(0, 1)})}
+                help={__('Zadejte 1 znak', 'brilo-blocks')}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div className="i-compare-option__bullet">
+            {variant === 'plus' && '+'}
+            {variant === 'minus' && '−'}
+            {variant === 'custom' && (customChar || '?')}
+          </div>
+          <RichText
+            tagName="span"
+            className="i-compare-option__text u-text-editable"
+            value={text}
+            onChange={(v) => setAttributes({text: v})}
+            placeholder={__('Text...', 'brilo-blocks')}
+          />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/compare/compare-option/editor.scss

@@ -0,0 +1,26 @@
+@layer base {
+  .i-compare-option__bullet {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    width: 24px;
+    height: 24px;
+    background-color: #006ba1;
+    color: #fff;
+    font-weight: 900;
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+
+  .i-compare-option__text {
+    flex-grow: 1;
+  }
+
+  .i-compare-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+  }
+}

package/src/blocks/compare/compare-option/factory.tsx

@@ -0,0 +1,35 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createCompareOptionEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {CompareOptionAttributes, CompareOptionOptions} from './types'
+
+export type {CompareOptionAttributes, CompareOptionOptions}
+
+export function createCompareOptionBlock(options: CompareOptionOptions): BlockConfiguration<CompareOptionAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Možnost srovnání', '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: {
+      text: {
+        type: 'string',
+        default: '',
+      },
+      variant: {
+        type: 'string',
+        default: 'plus',
+      },
+      customChar: {
+        type: 'string',
+        default: '',
+      },
+    },
+    edit: createCompareOptionEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<CompareOptionAttributes>
+}

package/src/blocks/compare/compare-option/icon.tsx

@@ -0,0 +1,7 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Compare Option</title>
+    <path d="M4 10H16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M10 4V16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)

package/src/blocks/compare/compare-option/index.ts

@@ -0,0 +1,8 @@
+export type {CompareOptionAttributes, CompareOptionOptions} from './types'
+export {createCompareOptionBlock} from './factory'
+import type {CompareOptionOptions} from './types'
+
+export const compareOptionDefaults: CompareOptionOptions = {
+  name: 'brilo/compare-option',
+  parent: ['brilo/compare-item'],
+}

package/src/blocks/compare/compare-option/types.ts

@@ -0,0 +1,12 @@
+import type {BriloBlockType} from '~/types'
+import {VARIANTS} from './constants'
+
+export type CompareOptionVariant = (typeof VARIANTS)[number]['value']
+
+export interface CompareOptionAttributes extends Record<string, unknown> {
+  text: string
+  variant: CompareOptionVariant
+  customChar: string
+}
+
+export interface CompareOptionOptions extends BriloBlockType {}

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

@@ -0,0 +1,3 @@
+export const CONTACT_COLUMNS = [2, 3] as const
+
+export const CONTACT_COLUMNS_CONTEXT = 'brilo/contact-columns'

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

@@ -0,0 +1,57 @@
+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 {CONTACT_COLUMNS} from './constants'
+import type {ContactColumns, ContactGroupAttributes, ContactGroupOptions} from './types'
+
+export function createContactGroupEdit(options: ContactGroupOptions) {
+  const COLUMNS = options.columns ?? CONTACT_COLUMNS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ContactGroupAttributes
+    setAttributes: (a: Partial<ContactGroupAttributes>) => void
+  }) {
+    const {columns} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-contact wp-block-section'),
+      containerClassName: [options.containerClassName ?? 'g-contact__items', `--cols-${columns}`],
+      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 ContactColumns})}
+            >
+              {COLUMNS.map((c) => (
+                <ToggleGroupControlOption key={c} value={String(c)} label={String(c)} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,20 @@
+@layer base {
+  .g-contact {
+    .g-contact__items {
+      display: grid;
+      grid-template-columns: repeat(var(--grid-max-col-count, 3), minmax(0, 1fr));
+      gap: 16px;
+      align-items: start;
+    }
+  }
+}
+
+// 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.
+.editor-styles-wrapper .g-contact__items > .wp-block {
+  margin-left: 0;
+  margin-right: 0;
+  max-width: none;
+}

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

@@ -0,0 +1,35 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {NumberArray} from '~/types'
+import {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT} from './constants'
+import {createContactGroupEdit} from './edit'
+import type {ContactGroupAttributes, ContactGroupOptions} from './types'
+
+export type {ContactGroupAttributes, ContactGroupOptions}
+
+export function createContactGroupBlock<TColumns extends NumberArray = typeof CONTACT_COLUMNS>(
+  options: ContactGroupOptions<TColumns>,
+): BlockConfiguration<ContactGroupAttributes<TColumns[number]>> {
+  const columns = options.columns ?? CONTACT_COLUMNS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Kontakty', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'id-alt',
+    supports: {html: false, customClassName: false},
+    providesContext: {[CONTACT_COLUMNS_CONTEXT]: 'columns'},
+    attributes: {
+      columns: {
+        type: 'number',
+        default: columns[1] ?? columns[0],
+        enum: [...columns],
+      },
+    },
+    edit: createContactGroupEdit(options as unknown as ContactGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<ContactGroupAttributes<TColumns[number]>>
+}

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

@@ -0,0 +1,12 @@
+export type {ContactColumns, ContactGroupAttributes, ContactGroupOptions} from './types'
+export {createContactGroupBlock} from './factory'
+export {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT} from './constants'
+
+import type {ContactGroupOptions} from './types'
+
+export const contactGroupDefaults: ContactGroupOptions = {
+  name: 'brilo/contact-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/contact-item'],
+  template: [['brilo/contact-item', {}]],
+}

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

@@ -0,0 +1,12 @@
+import type {BriloBlockType, NumberArray} from '~/types'
+import type {CONTACT_COLUMNS} from './constants'
+
+export type ContactColumns = (typeof CONTACT_COLUMNS)[number]
+
+export interface ContactGroupAttributes<TColumns extends number = ContactColumns> extends Record<string, unknown> {
+  columns: TColumns
+}
+
+export interface ContactGroupOptions<TColumns extends NumberArray = typeof CONTACT_COLUMNS> extends BriloBlockType {
+  columns?: TColumns
+}

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

@@ -0,0 +1,17 @@
+import {__} from '@wordpress/i18n'
+
+export const CONTACT_ICON_TYPES = [
+  {value: 'preselected', label: __('Předvolená', 'brilo-blocks')},
+  {value: 'media', label: __('Obrázek', 'brilo-blocks')},
+] as const
+
+export const CONTACT_ICON_SIZES = [
+  {value: 'sm', label: __('Malá', 'brilo-blocks'), size: 24},
+  {value: 'md', label: __('Střední', 'brilo-blocks'), size: 32},
+  {value: 'lg', label: __('Velká', 'brilo-blocks'), size: 48},
+  {value: 'custom', label: __('Vlastní', 'brilo-blocks')},
+] as const
+
+export const CONTACT_ICON_SIZE_RANGE = {min: 8, max: 100} as const
+
+export const CONTACT_ICON_SIZE_DEFAULT = 32

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

@@ -0,0 +1,93 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  RangeControl,
+  __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 {useGroupBlock} from '~/hooks/useGroupBlock'
+import {CONTACT_COLUMNS_CONTEXT} from '../contact-group/constants'
+import {CONTACT_ICON_SIZE_DEFAULT, CONTACT_ICON_SIZE_RANGE, CONTACT_ICON_SIZES, CONTACT_ICON_TYPES} from './constants'
+import type {ContactIconSizeVariant, ContactItemAttributes, ContactItemOptions} from './types'
+
+export function createContactItemEdit(options: ContactItemOptions) {
+  const iconOptions = {icons: options.icons ?? [], iconsSrc: options.iconsSrc ?? ''}
+
+  return function Edit({
+    attributes,
+    setAttributes,
+    context,
+  }: {
+    attributes: ContactItemAttributes
+    setAttributes: (a: Partial<ContactItemAttributes>) => void
+    context: Record<string, unknown>
+  }) {
+    const {colSpan, icon, iconSize} = attributes
+    const columns = Number(context[CONTACT_COLUMNS_CONTEXT] ?? 3)
+    const span = Math.min(colSpan, columns)
+
+    const sizePreset = CONTACT_ICON_SIZES.find((s) => s.value === iconSize.variant)
+    const iconPx =
+      iconSize.variant === 'custom' ? iconSize.custom : sizePreset && 'size' in sizePreset ? sizePreset.size : CONTACT_ICON_SIZE_DEFAULT
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-contact'),
+      containerClassName: [options.containerClassName ?? 'i-contact__inner'],
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+      orientation: 'vertical',
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Šířka', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Počet sloupců', 'brilo-blocks')}
+              value={String(span)}
+              onChange={(v) => setAttributes({colSpan: Number(v)})}
+            >
+              {Array.from({length: columns}, (_, i) => i + 1).map((c) => (
+                <ToggleGroupControlOption key={c} value={String(c)} label={String(c)} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Ikona', 'brilo-blocks')}>
+            <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={CONTACT_ICON_TYPES} options={iconOptions} />
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost ikony', 'brilo-blocks')}
+              value={iconSize.variant}
+              onChange={(v) => setAttributes({iconSize: {...iconSize, variant: v as ContactIconSizeVariant}})}
+            >
+              {CONTACT_ICON_SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+            {iconSize.variant === 'custom' && (
+              <RangeControl
+                label={__('Vlastní velikost (px)', 'brilo-blocks')}
+                value={iconSize.custom}
+                min={CONTACT_ICON_SIZE_RANGE.min}
+                max={CONTACT_ICON_SIZE_RANGE.max}
+                onChange={(v) => setAttributes({iconSize: {...iconSize, custom: v ?? CONTACT_ICON_SIZE_RANGE.min}})}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps} style={{...(blockProps.style as CSSProperties), '--col-span': span} as CSSProperties}>
+          <div className="i-contact__icon-wrap" style={{'--icon-size': `${iconPx}px`} as CSSProperties}>
+            <ItemIconPreview icon={icon} className="i-contact__icon" setAttributes={setAttributes} options={iconOptions} />
+          </div>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,38 @@
+// WP core centers `.wp-block` children (`margin-left/right: auto`) and caps their
+// `max-width` when the parent isn't is-layout-flex/grid. The item content lives in
+// `.i-contact__inner` (plain `display:flex`, no WP layout class), so kill it here.
+// Unlayered + (0,3,0) to beat core's unlayered (0,2,0) rule.
+.editor-styles-wrapper .i-contact__inner > .wp-block {
+  margin-left: 0;
+  margin-right: 0;
+  max-width: none;
+}
+
+.i-contact {
+  grid-column: span var(--col-span, 1);
+  margin-inline: 0;
+  width: 100%;
+
+  .i-contact__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    p,
+    h3,
+    h2,
+    h4 {
+      margin-block: 4px;
+    }
+  }
+
+  .i-contact__icon-wrap {
+    --icon-size: 32px;
+  }
+
+  .i-contact__icon img {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    object-fit: contain;
+  }
+}

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

@@ -0,0 +1,35 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {CONTACT_COLUMNS_CONTEXT} from '../contact-group/constants'
+import {CONTACT_ICON_SIZE_DEFAULT, CONTACT_ICON_TYPES} from './constants'
+import {createContactItemEdit} from './edit'
+import type {ContactItemAttributes, ContactItemOptions} from './types'
+
+export type {ContactItemAttributes, ContactItemOptions}
+
+export function createContactItemBlock(options: ContactItemOptions): BlockConfiguration<ContactItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Kontaktní položka', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'id-alt',
+    supports: {html: false, customClassName: false},
+    usesContext: [CONTACT_COLUMNS_CONTEXT],
+    attributes: {
+      colSpan: {type: 'number', default: 1},
+      icon: {
+        type: 'object',
+        default: {type: CONTACT_ICON_TYPES[0].value, src: '', media: {id: 0, alt: ''}},
+      },
+      iconSize: {
+        type: 'object',
+        default: {variant: 'md', custom: CONTACT_ICON_SIZE_DEFAULT},
+      },
+    },
+    edit: createContactItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<ContactItemAttributes>
+}

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

@@ -0,0 +1,23 @@
+export type {ContactIconSize, ContactIconSizeVariant, ContactItemAttributes, ContactItemOptions} from './types'
+export {createContactItemBlock} from './factory'
+export {CONTACT_ICON_SIZE_RANGE, CONTACT_ICON_SIZES, CONTACT_ICON_TYPES} from './constants'
+
+import type {ContactItemOptions} from './types'
+
+export const contactItemDefaults: ContactItemOptions = {
+  name: 'brilo/contact-item',
+  parent: ['brilo/contact-group'],
+  allowedBlocks: [
+    'core/heading',
+    'core/paragraph',
+    'core/list',
+    'core/image',
+    'core/table',
+    'brilo/column-group',
+    'brilo/responsive-grid-group',
+  ],
+  template: [
+    ['core/heading', {level: 3}],
+    ['core/paragraph', {}],
+  ],
+}

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

@@ -0,0 +1,21 @@
+import type {BriloBlockType, Icon} from '~/types'
+import type {IconType} from '~/components/IconControl'
+import type {CONTACT_ICON_SIZES} from './constants'
+
+export type ContactIconSizeVariant = (typeof CONTACT_ICON_SIZES)[number]['value']
+
+export interface ContactIconSize {
+  variant: ContactIconSizeVariant
+  custom: number
+}
+
+export interface ContactItemAttributes extends Record<string, unknown> {
+  colSpan: number
+  icon: Icon
+  iconSize: ContactIconSize
+}
+
+export interface ContactItemOptions extends BriloBlockType {
+  icons?: IconType[]
+  iconsSrc?: string
+}

package/src/blocks/core/basic-button/constants.ts

@@ -0,0 +1,17 @@
+import {__} from '@wordpress/i18n'
+
+export const DEFAULT_VARIANTS = [
+  {value: 'primary', label: __('Primární', 'brilo-blocks')},
+  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_SIZES = [
+  {value: 'default', label: __('Výchozí', 'brilo-blocks')},
+  {value: 'sm', label: __('Malá', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_FULL_WIDTH_OPTIONS = [
+  {value: 'false', label: __('Ne', 'brilo-blocks')},
+  {value: 'mobile', label: __('Mobil', 'brilo-blocks')},
+  {value: 'true', label: __('Vždy', 'brilo-blocks')},
+] as const

package/src/blocks/core/basic-button/edit.tsx

@@ -0,0 +1,107 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  TextControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {DEFAULT_FULL_WIDTH_OPTIONS, DEFAULT_SIZES, DEFAULT_VARIANTS} from './constants'
+import type {BasicButtonAttributes, BasicButtonOptions, ButtonFullWidth, ButtonSize, ButtonVariant} from './types'
+
+export function createBasicButtonEdit(options: BasicButtonOptions) {
+  const VARIANTS = options.variants ?? DEFAULT_VARIANTS
+  const SIZES = options.sizes ?? DEFAULT_SIZES
+  const FULL_WIDTH_OPTIONS = options.fullWidthOptions ?? DEFAULT_FULL_WIDTH_OPTIONS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: BasicButtonAttributes
+    setAttributes: (a: Partial<BasicButtonAttributes>) => void
+  }) {
+    const {title, variant, outline, fullWidth, size, url} = attributes
+    const blockProps = useBlockProps({
+      className: clsx(
+        options.blockClassName ?? 'i-button',
+        `--variant-${variant}`,
+        `--size-${size}`,
+        outline && '--outline',
+        fullWidth !== 'false' && `--full-width-${fullWidth}`,
+      ),
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Tlačítko', 'brilo-blocks')}>
+            <TextControl
+              label={__('Text tlačítka', 'brilo-blocks')}
+              value={title}
+              onChange={(value) => setAttributes({title: value})}
+              placeholder={__('Text tlačítka...', 'brilo-blocks')}
+            />
+            <ToggleGroupControl
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(value) => setAttributes({variant: value as ButtonVariant})}
+              isBlock
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleControl label={__('Outline', 'brilo-blocks')} checked={outline} onChange={(value) => setAttributes({outline: value})} />
+            <ToggleGroupControl
+              label={__('Velikost', 'brilo-blocks')}
+              value={size}
+              onChange={(value) => setAttributes({size: value as ButtonSize})}
+              isBlock
+            >
+              {SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Celá šířka', 'brilo-blocks')}
+              value={fullWidth}
+              onChange={(value) => setAttributes({fullWidth: value as ButtonFullWidth})}
+              isBlock
+            >
+              {FULL_WIDTH_OPTIONS.map((o) => (
+                <ToggleGroupControlOption key={o.value} value={o.value} label={o.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Odkaz', 'brilo-blocks')}>
+            <TextControl
+              label={__('URL', 'brilo-blocks')}
+              value={url.src}
+              onChange={(value) => setAttributes({url: {...url, src: value}})}
+            />
+            <ToggleControl
+              label={__('Otevřít v nové záložce', 'brilo-blocks')}
+              checked={url.blank}
+              onChange={(value) => setAttributes({url: {...url, blank: value}})}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div className="i-button__inner">
+            <RichText
+              tagName="span"
+              className="i-button__label"
+              value={title}
+              onChange={(value) => setAttributes({title: value})}
+              placeholder={__('Text tlačítka...', 'brilo-blocks')}
+              allowedFormats={[]}
+            />
+          </div>
+        </div>
+      </>
+    )
+  }
+}