@brilo/base-blocks 0.1.0

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

package/src/blocks/groups/text-and-media-group/constants.ts

@@ -0,0 +1,43 @@
+import {__} from '@wordpress/i18n'
+
+export {CONTENT_SIZES as DEFAULT_CONTENT_SIZES, HEADING_LEVELS} from '~/constants'
+
+export const DEFAULT_RATIOS = [
+  {value: '3:2', label: '3:2'},
+  {value: '4:3', label: '4:3'},
+  {value: '16:9', label: '16:9'},
+  {value: '1:1', label: '1:1'},
+  {value: '2:1', label: '2:1'},
+  {value: '3:4', label: '3:4'},
+  {value: 'auto', label: 'Auto'},
+] as const
+
+export const CHIP_POSITIONS = [
+  {value: 'top-left', label: __('Vlevo nahoře', 'brilo-blocks')},
+  {value: 'top-right', label: __('Vpravo nahoře', 'brilo-blocks')},
+  {value: 'bottom-left', label: __('Vlevo dole', 'brilo-blocks')},
+  {value: 'bottom-right', label: __('Vpravo dole', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_CHIP_VARIANTS = [
+  {value: 'primary', label: __('Primární', 'brilo-blocks')},
+  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
+  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_MEDIA_POSITIONS = [
+  {value: 'left', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'right', label: __('Vpravo', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_HEADING_STYLES = [
+  {value: 'h1', label: 'H1 styl'},
+  {value: 'h2', label: 'H2 styl'},
+  {value: 'h3', label: 'H3 styl'},
+  {value: 'h4', label: 'H4 styl'},
+] as const
+
+export const DEFAULT_GRID_STYLES = [
+  {value: '1-1', label: __('Půl na půl', 'brilo-blocks')},
+  {value: '2-1', label: __('2/3 + 1/3', 'brilo-blocks')},
+] as const