@brilo/base-blocks 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brilo/base-blocks",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "Brilo",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -36,7 +36,8 @@
     "clsx": "^2.1.1"
   },
   "files": [
-    "build"
+    "build",
+    "src"
   ],
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,56 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {PanelBody, RangeControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {ColumnGroupAttributes, ColumnGroupOptions} from './types'
+
+export function createColumnGroupEdit(options: ColumnGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ColumnGroupAttributes
+    setAttributes: (a: Partial<ColumnGroupAttributes>) => void
+  }) {
+    const {spacingX, spacingY} = attributes
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: options.blockClassName ?? 'g-column wp-block-section',
+      containerClassName: options.containerClassName ?? 'g-column__inner',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+      layout: {type: 'default'},
+      containerStyle: {
+        '--gap-x': `${spacingX}px`,
+        '--gap-y': `${spacingY}px`,
+      },
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení sloupců', 'brilo-blocks')}>
+            <RangeControl
+              label={__('Horizontální mezera (px)', 'brilo-blocks')}
+              value={spacingX}
+              onChange={(v) => setAttributes({spacingX: v ?? 0})}
+              min={0}
+              max={64}
+              step={8}
+            />
+            <RangeControl
+              label={__('Vertikální mezera (px)', 'brilo-blocks')}
+              value={spacingY}
+              onChange={(v) => setAttributes({spacingY: v ?? 0})}
+              min={0}
+              max={64}
+              step={8}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,7 @@
+@layer base {
+  .g-column__inner {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: var(--gap-y) var(--gap-x);
+  }
+}

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

@@ -0,0 +1,29 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createColumnGroupEdit} from './edit'
+import type {ColumnGroupAttributes, ColumnGroupOptions} from './types'
+
+export function createColumnGroupBlock(options: ColumnGroupOptions): BlockConfiguration<ColumnGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Obsahové sloupce', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'columns',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      spacingX: {
+        type: 'number',
+        default: 16,
+      },
+      spacingY: {
+        type: 'number',
+        default: 16,
+      },
+    },
+    edit: createColumnGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<ColumnGroupAttributes>
+}

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

@@ -0,0 +1,14 @@
+export type {ColumnGroupAttributes, ColumnGroupOptions} from './types'
+export {createColumnGroupBlock} from './factory'
+
+import type {ColumnGroupOptions} from './types'
+
+export const columnGroupDefaults: ColumnGroupOptions = {
+  name: 'brilo/column-group',
+  allowedBlocks: ['brilo/column-item'],
+  parent: ['brilo/base-section'],
+  template: [
+    ['brilo/column-item', {}],
+    ['brilo/column-item', {}],
+  ],
+}

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

@@ -0,0 +1,8 @@
+import type {BriloBlockType} from '~/types'
+
+export interface ColumnGroupAttributes extends Record<string, unknown> {
+  spacingX: number
+  spacingY: number
+}
+
+export interface ColumnGroupOptions extends BriloBlockType {}

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

@@ -0,0 +1 @@
+export const SIZES = ['1/4', '1/3', '1/2', '2/3', '3/4', '1/1']

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

@@ -0,0 +1,48 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {PanelBody, RangeControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {ColumnItemAttributes, ColumnItemOptions} from './types'
+import {SIZES} from './constants'
+
+export function createColumnItemEdit(options: ColumnItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ColumnItemAttributes
+    setAttributes: (a: Partial<ColumnItemAttributes>) => void
+  }) {
+    const {size} = attributes
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-column', `--size-${size}`),
+      containerClassName: options.containerClassName ?? 'i-column__inner',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+    })
+
+    const sizeIndex = SIZES.indexOf(size)
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení položky sloupce', 'brilo-blocks')}>
+            <RangeControl
+              label={__('Šířka sloupce', 'brilo-blocks')}
+              value={sizeIndex}
+              onChange={(v) => setAttributes({size: SIZES[v as number]})}
+              min={0}
+              max={SIZES.length - 1}
+              withInputField={false}
+              marks={SIZES.map((s, i) => ({label: s, value: i}))}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,34 @@
+@layer base {
+  .i-column {
+    border: 1px dashed #0073aa;
+    box-sizing: border-box;
+    border-radius: 4px;
+    padding: 4px;
+    min-height: 64px;
+    margin: 0 !important;
+
+    &.--size-1\/4 {
+      grid-column: span 3;
+    }
+
+    &.--size-1\/3 {
+      grid-column: span 4;
+    }
+
+    &.--size-1\/2 {
+      grid-column: span 6;
+    }
+
+    &.--size-2\/3 {
+      grid-column: span 8;
+    }
+
+    &.--size-3\/4 {
+      grid-column: span 9;
+    }
+
+    &.--size-1\/1 {
+      grid-column: span 12;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createColumnItemEdit} from './edit'
+import type {ColumnItemAttributes, ColumnItemOptions} from './types'
+
+export function createColumnItemBlock(options: ColumnItemOptions): BlockConfiguration<ColumnItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Položka sloupce', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'column',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      size: {
+        type: 'string',
+        default: '1/2',
+      },
+    },
+    edit: createColumnItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<ColumnItemAttributes>
+}

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

@@ -0,0 +1,10 @@
+export type {ColumnItemAttributes, ColumnItemOptions} from './types'
+export {createColumnItemBlock} from './factory'
+
+import type {ColumnItemOptions} from './types'
+
+export const columnItemDefaults: ColumnItemOptions = {
+  name: 'brilo/column-item',
+  parent: ['brilo/column-group'],
+  allowedBlocks: ['core/paragraph', 'core/list', 'core/image', 'core/heading', 'core/embed', 'core/quote', 'core/table', 'core/gallery'],
+}

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

@@ -0,0 +1,7 @@
+import type {BriloBlockType} from '~/types'
+
+export interface ColumnItemAttributes extends Record<string, unknown> {
+  size: string
+}
+
+export interface ColumnItemOptions extends BriloBlockType {}

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

@@ -0,0 +1 @@
+export const HEADING_LEVELS = [2, 3, 4] as const

package/src/blocks/compare/compare-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 {HEADING_LEVELS} from './constants'
+import type {CompareGroupAttributes, CompareGroupOptions} from './types'
+
+export function createCompareGroupEdit(options: CompareGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: CompareGroupAttributes
+    setAttributes: (a: Partial<CompareGroupAttributes>) => void
+  }) {
+    const {headingLevel} = attributes
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: options.blockClassName ?? 'g-compare wp-block-section',
+      containerClassName: [options.containerClassName ?? 'u-grid-responsive'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Úroveň nadpisu', 'brilo-blocks')}
+              value={String(headingLevel)}
+              onChange={(v) => setAttributes({headingLevel: Number(v) as CompareGroupAttributes['headingLevel']})}
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,29 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createCompareGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import {HEADING_LEVELS} from './constants'
+import type {CompareGroupAttributes, CompareGroupOptions} from './types'
+
+export type {CompareGroupAttributes, CompareGroupOptions}
+
+export function createCompareGroupBlock(options: CompareGroupOptions): BlockConfiguration<CompareGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('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: {
+      headingLevel: {
+        type: 'number',
+        default: HEADING_LEVELS[1],
+      },
+    },
+    edit: createCompareGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<CompareGroupAttributes>
+}

package/src/blocks/compare/compare-group/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 Group</title>
+    <rect x="2" y="2" width="7" height="16" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <rect x="11" y="2" width="7" height="16" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
+  </svg>
+)

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

@@ -0,0 +1,13 @@
+export type {CompareGroupAttributes, CompareGroupOptions} from './types'
+export {createCompareGroupBlock} from './factory'
+import type {CompareGroupOptions} from './types'
+
+export const compareGroupDefaults: CompareGroupOptions = {
+  name: 'brilo/compare-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/compare-item'],
+  template: [
+    ['brilo/compare-item', {}],
+    ['brilo/compare-item', {}],
+  ],
+}

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

@@ -0,0 +1,12 @@
+import {HEADING_LEVELS} from './constants'
+import type {BriloBlockType} from '~/types'
+
+export type CompareHeadingLevel = (typeof HEADING_LEVELS)[number]
+
+export interface CompareGroupAttributes extends Record<string, unknown> {
+  headingLevel: CompareHeadingLevel
+}
+
+export interface CompareGroupOptions extends BriloBlockType {
+  allowedBlocks: string[]
+}

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

@@ -0,0 +1,38 @@
+import {RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import {__} from '@wordpress/i18n'
+import type {CompareItemAttributes, CompareItemOptions} from './types'
+
+export function createCompareItemEdit(options: CompareItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: CompareItemAttributes
+    setAttributes: (a: Partial<CompareItemAttributes>) => void
+  }) {
+    const {title} = attributes
+    const blockProps = useBlockProps({className: 'i-compare'})
+    const innerBlocksProps = useInnerBlocksProps(
+      {className: 'i-compare__options wp-block-inner-content'},
+      {
+        allowedBlocks: options.allowedBlocks,
+        template: options.template,
+      },
+    )
+
+    return (
+      <div {...blockProps}>
+        <div className={'i-compare__inner'}>
+          <RichText
+            tagName={'div'}
+            className="i-compare__title u-text-editable"
+            value={title}
+            onChange={(v) => setAttributes({title: v})}
+            placeholder={__('Nadpis...', 'brilo-blocks')}
+          />
+          <div {...innerBlocksProps} />
+        </div>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,15 @@
+@layer base {
+  .i-compare__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    border: 1px solid #ccc;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .i-compare {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,28 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createCompareItemEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {CompareItemAttributes, CompareItemOptions} from './types'
+
+export type {CompareItemAttributes, CompareItemOptions}
+
+export function createCompareItemBlock(options: CompareItemOptions): BlockConfiguration<CompareItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Položka 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: {
+      title: {
+        type: 'string',
+        default: '',
+      },
+    },
+    edit: createCompareItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<CompareItemAttributes>
+}

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

@@ -0,0 +1,9 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Compare Item</title>
+    <rect x="4" y="2" width="12" height="16" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <path d="M7 6H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M7 9H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M7 12H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)

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

@@ -0,0 +1,13 @@
+export type {CompareItemAttributes, CompareItemOptions} from './types'
+export {createCompareItemBlock} from './factory'
+import type {CompareItemOptions} from './types'
+
+export const compareItemDefaults: CompareItemOptions = {
+  name: 'brilo/compare-item',
+  parent: ['brilo/compare-group'],
+  allowedBlocks: ['brilo/compare-option'],
+  template: [
+    ['brilo/compare-option', {variant: 'plus'}],
+    ['brilo/compare-option', {variant: 'minus'}],
+  ],
+}

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

@@ -0,0 +1,9 @@
+import type {BriloBlockType} from '~/types'
+
+export interface CompareItemAttributes extends Record<string, unknown> {
+  title: string
+}
+
+export interface CompareItemOptions extends BriloBlockType {
+  allowedBlocks: string[]
+}

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

@@ -0,0 +1,7 @@
+import {__} from '@wordpress/i18n'
+
+export const VARIANTS = [
+  {value: 'plus', label: __('+', 'brilo-blocks')},
+  {value: 'minus', label: __('-', 'brilo-blocks')},
+  {value: 'custom', label: __('Vlastní', 'brilo-blocks')},
+] as const

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