@brilo/base-blocks 0.1.23 → 0.1.25

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/link/link-item/edit.tsx

@@ -75,6 +75,12 @@ export function createLinkItemEdit(options: LinkItemOptions) {
                   max={80}
                   step={1}
                 />
+                <p>{__('Barva ikony', 'brilo-blocks')}</p>
+                <ColorPalette
+                  colors={paletteColors}
+                  value={icon.color || undefined}
+                  onChange={(v) => setAttributes({icon: {...icon, color: v ?? ''}})}
+                />
               </>
             )}
           </PanelBody>

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

@@ -18,7 +18,7 @@ export function createLinkItemBlock(options: LinkItemOptions): BlockConfiguratio
       url: {type: 'object', default: {src: '', blank: false}},
       icon: {
         type: 'object',
-        default: {type: 'none', src: '', media: {}, position: 'after', size: 24},
+        default: {type: 'none', src: '', media: {}, position: 'after', size: 24, color: ''},
       },
       color: {type: 'string', default: ''},
       size: {type: 'number', default: 16},

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

@@ -8,6 +8,7 @@ export interface LinkItemIcon {
   media: Media
   position: 'before' | 'after'
   size: number
+  color: string
 }
 
 export interface LinkItemAttributes extends Record<string, unknown> {

package/src/editor.scss

@@ -1,4 +1,6 @@
 @forward "./globals";
+@forward "./blocks/anchor/anchor-group/editor";
+@forward "./blocks/anchor/anchor-item/editor";
 @forward "./blocks/column/column-group/editor";
 @forward "./blocks/link/link-item/editor";
 @forward "./blocks/column/column-item/editor";

package/src/index.ts

@@ -1,3 +1,14 @@
+export type {AnchorAlignment, AnchorColumns, AnchorGroupAttributes, AnchorGroupOptions} from './blocks/anchor/anchor-group'
+export {ANCHOR_ALIGNMENTS, ANCHOR_COLUMNS, anchorGroupDefaults, createAnchorGroupBlock} from './blocks/anchor/anchor-group'
+export type {AnchorItemAttributes, AnchorItemOptions} from './blocks/anchor/anchor-item'
+export {
+  ANCHOR_ICON_SIZE_DEFAULT,
+  ANCHOR_ICON_SIZE_RANGE,
+  ANCHOR_ICON_TYPES,
+  anchorItemDefaults,
+  createAnchorItemBlock,
+  createAnchorItemEdit,
+} from './blocks/anchor/anchor-item'
 export type {
   ContactColumns,
   ContactGroupAttributes,