@brilo/base-blocks 0.1.1 → 0.1.2

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

@@ -0,0 +1,122 @@
+import {InspectorControls, RichText} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  ColorPalette,
+  ToggleControl,
+  BaseControl,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {ImagePickerBody, ImagePickerControl} from '~/components/ImagePicker'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {DEFAULT_HEADING_STYLES, DEFAULT_VARIANTS} from './constants'
+import {HEADING_LEVELS} from '~/constants'
+import type {BannerGroupAttributes, BannerGroupOptions, HeadingLevels, HeadingStyles, Variants} from './types'
+import clsx from 'clsx'
+
+export function createBannerGroupEdit(options: BannerGroupOptions) {
+  const VARIANTS = options.variants ?? DEFAULT_VARIANTS
+  const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: BannerGroupAttributes
+    setAttributes: (a: Partial<BannerGroupAttributes>) => void
+  }) {
+    const {header, img, description, variant, hasBackgroundColor, backgroundColor, textColor} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: [options.blockClassName ?? 'g-banner wp-block-section', `--variant-${variant}`],
+      containerClassName: options.containerClassName ?? 'g-banner__inner-blocks',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Vzhled', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(value) => setAttributes({variant: value as Variants})}
+              isBlock
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+
+          <PanelBody title={__('Nadpis', 'brilo-blocks')} initialOpen={false}>
+            <ToggleGroupControl
+              label={__('Úroveň nadpisu', 'brilo-blocks')}
+              value={String(header.heading.level)}
+              onChange={(value) =>
+                setAttributes({header: {...header, heading: {...header.heading, level: Number(value) as HeadingLevels}}})
+              }
+              isBlock
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Styl nadpisu', 'brilo-blocks')}
+              value={header.heading.style}
+              onChange={(value) => setAttributes({header: {...header, heading: {...header.heading, style: value as HeadingStyles}}})}
+              isBlock
+            >
+              {HEADING_STYLES.map((s) => (
+                <ToggleGroupControlOption key={s} value={s} label={s} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+
+          <PanelBody title={__('Obrázek v pozadí', 'brilo-blocks')}>
+            <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+          </PanelBody>
+
+          <PanelBody title={__('Vzhled', 'brilo-blocks')}>
+            <ToggleControl
+              label={__('Použít barvu pozadí', 'brilo-blocks')}
+              checked={hasBackgroundColor}
+              onChange={(value) => setAttributes({hasBackgroundColor: value})}
+            />
+            {hasBackgroundColor && (
+              <BaseControl label={__('Barva pozadí', 'brilo-blocks')}>
+                <ColorPalette value={backgroundColor} onChange={(value) => setAttributes({backgroundColor: value})} enableAlpha={true} />
+              </BaseControl>
+            )}
+            <BaseControl label={__('Barva textu', 'brilo-blocks')}>
+              <ColorPalette value={textColor} onChange={(value) => setAttributes({textColor: value})} />
+            </BaseControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div className="g-banner__content">
+            <RichText
+              tagName={`h${header.heading.level}` as HeadingStyles}
+              className={clsx('g-banner__heading', `--heading-style-${header.heading.style}`, 'u-text-editable')}
+              value={header.heading.title}
+              onChange={(value: string) => setAttributes({header: {...header, heading: {...header.heading, title: value}}})}
+              placeholder={__('Nadpis...', 'brilo-blocks')}
+              allowedFormats={['core/bold', 'core/italic']}
+            />
+            <RichText
+              tagName="div"
+              className="g-banner__description u-text-editable"
+              value={description}
+              onChange={(value: string) => setAttributes({description: value})}
+              placeholder={__('Popis...', 'brilo-blocks')}
+            />
+          </div>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,18 @@
+.g-banner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+
+.g-banner__content {
+  flex-grow: 1;
+}
+
+.g-banner__inner-blocks {
+  flex-shrink: 0;
+
+  .g-button-group {
+    padding: 16px;
+  }
+}

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

@@ -0,0 +1,64 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray, StringArray} from '~/types'
+import {DEFAULT_VARIANTS, DEFAULT_HEADING_STYLES} from './constants'
+import {createBannerGroupEdit} from './edit'
+import type {BannerGroupAttributes, BannerGroupOptions} from './types'
+import {HEADING_LEVELS} from '~/constants'
+import {icon as defaultIcon} from './icon'
+
+export type {BannerGroupAttributes, BannerGroupOptions}
+
+export function createBannerGroupBlock<
+  TVariants extends OptionArray = typeof DEFAULT_VARIANTS,
+  THeadingStyles extends StringArray = typeof DEFAULT_HEADING_STYLES,
+>(
+  options: BannerGroupOptions<TVariants, THeadingStyles>,
+): BlockConfiguration<BannerGroupAttributes<TVariants[number]['value'], THeadingStyles[number]>> {
+  const variants = options.variants ?? DEFAULT_VARIANTS
+  const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Banner', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    icon: options.icon ?? defaultIcon,
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {
+        type: 'string',
+        default: '',
+      },
+      header: {
+        type: 'object',
+        default: {
+          heading: {title: '', level: HEADING_LEVELS[1], style: headingStyles[1] ?? headingStyles[0]},
+        },
+      },
+      img: {
+        type: 'object',
+        default: {
+          id: 0,
+          alt: '',
+        },
+      },
+      description: {
+        type: 'string',
+        default: '',
+      },
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+        enum: variants.map((v) => v.value),
+      },
+      hasBackgroundColor: {type: 'boolean', default: false},
+      backgroundColor: {type: 'string', default: ''},
+      textColor: {type: 'string', default: ''},
+    },
+    edit: createBannerGroupEdit(options as unknown as BannerGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<BannerGroupAttributes<TVariants[number]['value'], THeadingStyles[number]>>
+}

package/src/blocks/groups/banner-group/icon.tsx

@@ -0,0 +1,13 @@
+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="5.5" width="19" height="8" stroke="black" fill="none" />
+    <path d="M2 8H8V9H2V8Z" fill="black" />
+    <path d="M2 10H9V11H2V10Z" fill="black" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.5 8C10.6716 8 10 8.67157 10 9.5C10 10.3284 10.6716 11 11.5 11H16.5C17.3284 11 18 10.3284 18 9.5C18 8.67157 17.3284 8 16.5 8H11.5ZM16 9H12V10H16V9Z"
+      fill="#357AB5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,11 @@
+import {BannerGroupOptions} from '~/blocks/groups/banner-group/types'
+
+export type {BannerGroupAttributes, BannerGroupOptions} from './factory'
+export {createBannerGroupBlock} from './factory'
+
+export const bannerGroupDefaults: BannerGroupOptions = {
+  name: 'brilo/banner-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/button-group'],
+  template: [['brilo/button-group', {}]],
+}

package/src/blocks/groups/banner-group/types.ts

@@ -0,0 +1,30 @@
+import type {BriloBlockType, Media, OptionArray, StringArray} from '~/types'
+import {DEFAULT_HEADING_STYLES, DEFAULT_VARIANTS} from './constants'
+import {HEADING_LEVELS} from '~/constants'
+
+export type Variants = (typeof DEFAULT_VARIANTS)[number]['value']
+export type HeadingLevels = (typeof HEADING_LEVELS)[number]
+export type HeadingStyles = (typeof DEFAULT_HEADING_STYLES)[number]
+
+export interface BannerGroupAttributes<TVariant extends string = Variants, THeadingStyle extends string = HeadingStyles>
+  extends Record<string, unknown> {
+  title: string
+  header: {
+    heading: {title: string; level: HeadingLevels; style: THeadingStyle}
+  }
+  img: Media
+  hasBackgroundColor: boolean
+  backgroundColor: string
+  textColor: string
+  description: string
+  variant: TVariant
+}
+
+export interface BannerGroupOptions<
+  TVariants extends OptionArray = typeof DEFAULT_VARIANTS,
+  THeadingStyles extends StringArray = typeof DEFAULT_HEADING_STYLES,
+> extends BriloBlockType {
+  variants?: TVariants
+  headingStyles?: THeadingStyles
+  headingLevels?: HeadingLevels
+}

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

@@ -0,0 +1,9 @@
+import {__} from '@wordpress/i18n'
+
+export {HEADING_LEVELS as DEFAULT_LEVELS, HEADING_STYLES as DEFAULT_STYLES} from '~/constants'
+
+export const DEFAULT_ALIGNMENTS = [
+  {value: 'left', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'center', label: __('Středem', 'brilo-blocks')},
+  {value: 'right', label: __('Vpravo', 'brilo-blocks')},
+] as const

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import type {OptionArray, BriloBlockType} from '~/types'
+import type {DEFAULT_ALIGNMENTS} from './constants'
+
+export type ButtonGroupAlignment = (typeof DEFAULT_ALIGNMENTS)[number]['value']
+
+export interface ButtonGroupAttributes<TAlignment extends string = ButtonGroupAlignment> extends Record<string, unknown> {
+  alignment: TAlignment
+}
+
+export interface ButtonGroupOptions<TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS> extends BriloBlockType {
+  alignments?: TAlignments
+}