@brilo/base-blocks 0.1.23 → 0.1.24

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/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,