@brilo/base-blocks 0.1.21 → 0.1.23

package/src/blocks/form/form-field/constants.ts

@@ -22,3 +22,10 @@ export const FIELD_TEXT_TYPES = [
 export const FIELD_COLUMNS_RANGE = {min: 1, max: 12} as const
 
 export const FIELD_COLUMNS_DEFAULT = 6
+
+export const FIELD_SELECT_MODE_VALUES = ['classic', 'email'] as const
+
+export const FIELD_SELECT_MODES = [
+  {value: FIELD_SELECT_MODE_VALUES[0], label: __('Klasický', 'brilo-blocks')},
+  {value: FIELD_SELECT_MODE_VALUES[1], label: __('Výběr s routováním e-mailu', 'brilo-blocks')},
+] as const

package/src/blocks/form/form-field/edit.tsx

@@ -1,9 +1,12 @@
 import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
-import {Button, FormTokenField, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl} from '@wordpress/components'
-import {__} from '@wordpress/i18n'
+import {Button, Modal, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl} from '@wordpress/components'
+import {__, sprintf} from '@wordpress/i18n'
 import clsx from 'clsx'
-import {FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_TEXT_TYPES, FIELD_TYPES} from './constants'
-import {FormFieldAttributes, FormFieldOptions, FormFieldTextType, FormFieldType} from './types'
+import {useState} from 'react'
+import {FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_SELECT_MODES, FIELD_TEXT_TYPES, FIELD_TYPES} from './constants'
+import {normalizeOptions, serializeOptions, type OptionRow} from './normalizeOptions'
+import {SelectOptionsRepeater} from './SelectOptionsRepeater'
+import {FormFieldAttributes, FormFieldOptions, FormFieldSelectMode, FormFieldTextType, FormFieldType} from './types'
 
 const {min: MIN_COLUMNS, max: MAX_COLUMNS} = FIELD_COLUMNS_RANGE
 
@@ -32,9 +35,20 @@ export function createFormFieldEdit(_options: FormFieldOptions) {
       className: clsx('i-form-field', `--type-${attributes.type}`, `--cols-${currentColumns}`, attributes.required && '--required'),
     })
 
-    const options = Array.isArray(attributes.options) ? attributes.options.filter((opt): opt is string => typeof opt === 'string') : []
+    // Rows carry a locally-generated id (for React/Sortable identity) that is never persisted;
+    // deriving it fresh from attributes on every render would remount inputs and drop focus mid-keystroke.
+    const [optionRows, setOptionRows] = useState<OptionRow[]>(() => normalizeOptions(attributes.options))
+    const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false)
 
-    const selectOptions = [{label: __('Žádná', 'brilo-blocks'), value: ''}, ...options.map((opt) => ({label: opt, value: opt}))]
+    const updateOptionRows = (rows: OptionRow[]) => {
+      setOptionRows(rows)
+      setAttributes({options: serializeOptions(rows)})
+    }
+
+    const selectOptions = [
+      {label: __('Žádná', 'brilo-blocks'), value: ''},
+      ...optionRows.map((row) => ({label: row.label, value: row.label})),
+    ]
 
     return (
       <>
@@ -85,18 +99,30 @@ export function createFormFieldEdit(_options: FormFieldOptions) {
 
             {attributes.type === 'select' && (
               <>
-                <FormTokenField
-                  label={__('Možnosti', 'brilo-blocks')}
-                  value={options}
-                  onChange={(nextOptions) =>
-                    setAttributes({
-                      options: (nextOptions ?? [])
-                        .map((opt) => (typeof opt === 'string' ? opt : (opt as {value?: unknown}).value))
-                        .filter((opt): opt is string => typeof opt === 'string' && opt.length > 0),
-                    })
-                  }
+                <SelectControl
+                  label={__('Režim selectu', 'brilo-blocks')}
+                  value={attributes.selectMode ?? 'classic'}
+                  options={FIELD_SELECT_MODES.map((m) => ({label: m.label, value: m.value}))}
+                  onChange={(selectMode) => setAttributes({selectMode: selectMode as FormFieldSelectMode})}
                 />
 
+                <div className="i-form-field__options-trigger">
+                  <Button variant="secondary" onClick={() => setIsOptionsModalOpen(true)}>
+                    {sprintf(__('Upravit možnosti (%d)', 'brilo-blocks'), optionRows.length)}
+                  </Button>
+                </div>
+
+                {isOptionsModalOpen && (
+                  <Modal title={__('Možnosti pole', 'brilo-blocks')} onRequestClose={() => setIsOptionsModalOpen(false)} size="large">
+                    <SelectOptionsRepeater
+                      rows={optionRows}
+                      onChange={updateOptionRows}
+                      showEmail={(attributes.selectMode ?? 'classic') === 'email'}
+                      onClose={() => setIsOptionsModalOpen(false)}
+                    />
+                  </Modal>
+                )}
+
                 <SelectControl
                   label={__('Výchozí hodnota', 'brilo-blocks')}
                   value={attributes.defaultValue ?? ''}

package/src/blocks/form/form-field/editor.scss

@@ -69,3 +69,31 @@
   text-align: center;
   font-weight: 600;
 }
+
+.i-form-field__options-trigger {
+  margin-block: 16px;
+}
+
+.i-form-field__options-repeater {
+  margin-bottom: 16px;
+}
+
+.i-form-field__option-row {
+  margin-bottom: 8px;
+}
+
+// Sticky within the WP Modal own scrolling content area (.components-modal__content),
+// so it stays visible while the option rows above it scroll.
+.i-form-field__options-footer {
+  position: sticky;
+  bottom: 0;
+  padding-top: 12px;
+  margin-top: 8px;
+  background: #fff;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.i-form-field__option-drag-handle {
+  cursor: grab;
+  color: rgba(0, 0, 0, 0.4);
+}

package/src/blocks/form/form-field/factory.tsx

@@ -24,6 +24,7 @@ export function createFormFieldBlock(options: FormFieldOptions): BlockConfigurat
       placeholder: {type: 'string', default: ''},
       required: {type: 'boolean', default: false},
       options: {type: 'array', default: []},
+      selectMode: {type: 'string', default: 'classic'},
       defaultValue: {type: 'string', default: ''},
       value: {type: 'string', default: ''},
     },

package/src/blocks/form/form-field/normalizeOptions.ts

@@ -0,0 +1,58 @@
+export type PersistedOption = string | {label?: unknown; value?: unknown; email?: unknown}
+
+export type OptionRow = {
+  id: string
+  label: string
+  value: string
+  email: string
+}
+
+function makeId(): string {
+  return typeof crypto !== 'undefined' && 'randomUUID' in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`
+}
+
+export function normalizeOptions(options: unknown): OptionRow[] {
+  if (!Array.isArray(options)) {
+    return []
+  }
+
+  return (options as PersistedOption[])
+    .map((option): OptionRow | null => {
+      if (typeof option === 'string') {
+        return option === '' ? null : {id: makeId(), label: option, value: '', email: ''}
+      }
+
+      if (option && typeof option === 'object') {
+        const label = typeof option.label === 'string' ? option.label : ''
+        const value = typeof option.value === 'string' ? option.value : ''
+        const email = typeof option.email === 'string' ? option.email : ''
+
+        if (label === '') {
+          return null
+        }
+
+        return {id: makeId(), label, value, email}
+      }
+
+      return null
+    })
+    .filter((row): row is OptionRow => row !== null)
+}
+
+export function serializeOptions(rows: OptionRow[]): Array<{label: string; value?: string; email?: string}> {
+  return rows
+    .filter((row) => row.label.trim() !== '')
+    .map((row) => {
+      const option: {label: string; value?: string; email?: string} = {label: row.label}
+
+      if (row.value.trim() !== '') {
+        option.value = row.value.trim()
+      }
+
+      if (row.email.trim() !== '') {
+        option.email = row.email.trim()
+      }
+
+      return option
+    })
+}

package/src/blocks/form/form-field/types.ts

@@ -1,8 +1,11 @@
-import {FIELD_TEXT_TYPES, FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES} from './constants'
+import {FIELD_SELECT_MODE_VALUES, FIELD_TEXT_TYPES, FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES} from './constants'
 import type {BriloBlockType} from '~/types'
 
 export type FormFieldType = (typeof FIELD_TYPE_VALUES)[number]
 export type FormFieldTextType = (typeof FIELD_TEXT_TYPE_VALUES)[number]
+export type FormFieldSelectMode = (typeof FIELD_SELECT_MODE_VALUES)[number]
+
+export type FormFieldOption = string | {label?: string; value?: string; email?: string}
 
 export interface FormFieldAttributes extends Record<string, unknown> {
   type: FormFieldType
@@ -12,7 +15,8 @@ export interface FormFieldAttributes extends Record<string, unknown> {
   name: string
   placeholder: string
   required: boolean
-  options: string[]
+  options: FormFieldOption[]
+  selectMode: FormFieldSelectMode
   defaultValue: string
   value: string
 }

package/src/blocks/layout/layout-aside/constants.ts

@@ -0,0 +1 @@
+export const ASIDE_DEFAULTS = {}

package/src/blocks/layout/layout-aside/edit.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {AsideAttributes, AsideOptions} from './types'
+
+export function createAsideEdit(options: AsideOptions) {
+  return function Edit() {
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: 'l-content-w-aside__aside',
+      containerClassName: 'l-content-w-aside__aside-container',
+      layout: {type: 'default'},
+      orientation: 'vertical',
+    })
+
+    return (
+      <aside {...blockProps}>
+        <div {...innerBlocksProps} />
+      </aside>
+    )
+  }
+}

package/src/blocks/layout/layout-aside/editor.scss

@@ -0,0 +1,9 @@
+@layer base {
+  .l-content-w-aside__aside {
+    width: var(--aside-width, 300px);
+    border: 2px dashed #0073aa;
+    box-sizing: border-box;
+    padding: 8px;
+    min-height: 120px;
+  }
+}

package/src/blocks/layout/layout-aside/factory.tsx

@@ -0,0 +1,24 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import React from 'react'
+import {createAsideEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {AsideAttributes, AsideOptions} from './types'
+
+export function createAsideBlock(
+  options: AsideOptions,
+): BlockConfiguration<AsideAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Postranní panel', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    parent: options.parent,
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {},
+    edit: createAsideEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<AsideAttributes>
+}

package/src/blocks/layout/layout-aside/icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const icon = (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 4H20V20H8V4ZM10 6H18V18H10V6Z"
+      fill="currentColor"
+    />
+  </svg>
+)

package/src/blocks/layout/layout-aside/index.ts

@@ -0,0 +1,9 @@
+export type {AsideAttributes, AsideOptions} from './types'
+export {createAsideBlock} from './factory'
+
+import type {AsideOptions} from './types'
+
+export const asideDefaults: AsideOptions = {
+  name: 'brilo/layout-aside',
+  parent: ['brilo/layout-content-w-aside'],
+}

package/src/blocks/layout/layout-aside/types.ts

@@ -0,0 +1,5 @@
+import type {BriloBlockType} from '~/types'
+
+export interface AsideAttributes extends Record<string, unknown> {}
+
+export interface AsideOptions extends BriloBlockType {}

package/src/blocks/layout/layout-content/constants.ts

@@ -0,0 +1 @@
+export const CONTENT_DEFAULTS = {}

package/src/blocks/layout/layout-content/edit.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {ContentAttributes, ContentOptions} from './types'
+
+export function createContentEdit(options: ContentOptions) {
+  return function Edit() {
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: 'l-content-w-aside__content',
+      containerClassName: 'l-content-w-aside__content-container',
+      layout: {type: 'default'},
+      orientation: 'vertical',
+    })
+
+    return (
+      <div {...blockProps}>
+        <div {...innerBlocksProps} />
+      </div>
+    )
+  }
+}

package/src/blocks/layout/layout-content/editor.scss

@@ -0,0 +1,9 @@
+@layer base {
+  .l-content-w-aside__content {
+    border: 2px dashed #0073aa;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px;
+    min-height: 120px;
+  }
+}

package/src/blocks/layout/layout-content/factory.tsx

@@ -0,0 +1,24 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import React from 'react'
+import {createContentEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {ContentAttributes, ContentOptions} from './types'
+
+export function createContentBlock(
+  options: ContentOptions,
+): BlockConfiguration<ContentAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Obsah', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    parent: options.parent,
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {},
+    edit: createContentEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<ContentAttributes>
+}

package/src/blocks/layout/layout-content/icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const icon = (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 4H16V20H4V4ZM6 6H14V18H6V6Z"
+      fill="currentColor"
+    />
+  </svg>
+)

package/src/blocks/layout/layout-content/index.ts

@@ -0,0 +1,9 @@
+export type {ContentAttributes, ContentOptions} from './types'
+export {createContentBlock} from './factory'
+
+import type {ContentOptions} from './types'
+
+export const contentDefaults: ContentOptions = {
+  name: 'brilo/layout-content',
+  parent: ['brilo/layout-content-w-aside'],
+}

package/src/blocks/layout/layout-content/types.ts

@@ -0,0 +1,5 @@
+import type {BriloBlockType} from '~/types'
+
+export interface ContentAttributes extends Record<string, unknown> {}
+
+export interface ContentOptions extends BriloBlockType {}

package/src/blocks/layout/layout-content-w-aside/constants.ts

@@ -0,0 +1,7 @@
+import {__} from '@wordpress/i18n'
+
+export const ASIDE_SIZES = [
+  {value: 'sm', label: __('Malá', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+  {value: 'lg', label: __('Velká', 'brilo-blocks')},
+] as const

package/src/blocks/layout/layout-content-w-aside/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 React from 'react'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {ASIDE_SIZES} from './constants'
+import type {AsideSize, ContentWithAsideAttributes, ContentWithAsideOptions} from './types'
+
+export function createContentWithAsideEdit(options: ContentWithAsideOptions) {
+  const ASIDE_SIZES_OPTIONS = options.asideSizes ?? ASIDE_SIZES
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ContentWithAsideAttributes
+    setAttributes: (a: Partial<ContentWithAsideAttributes>) => void
+  }) {
+    const {asideSize} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: 'l-content-w-aside',
+      containerClassName: `l-content-w-aside__container --aside-${asideSize}`,
+      template: options.template,
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost postranního panelu', 'brilo-blocks')}
+              value={asideSize}
+              onChange={(v) => setAttributes({asideSize: v as AsideSize})}
+            >
+              {ASIDE_SIZES_OPTIONS.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/layout/layout-content-w-aside/editor.scss

@@ -0,0 +1,35 @@
+@layer base {
+  .l-content-w-aside {
+    padding: 16px;
+    border: 2px dashed #0073aa;
+    flex-shrink: 0;
+
+    &__container {
+      display: flex;
+      gap: 16px;
+
+      &.--aside-small {
+        --aside-width: 15%;
+      }
+
+      &.--aside-medium {
+        --aside-width: 25%;
+      }
+
+      &.--aside-large {
+        --aside-width: 35%;
+      }
+    }
+
+    &::before {
+      content: "Obsah s postranním panelem";
+      display: block;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #0073aa;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+  }
+}

package/src/blocks/layout/layout-content-w-aside/factory.tsx

@@ -0,0 +1,34 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import React from 'react'
+import type {OptionArray} from '~/types'
+import {ASIDE_SIZES} from './constants'
+import {createContentWithAsideEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {ContentWithAsideAttributes, ContentWithAsideOptions} from './types'
+
+export function createContentWithAsideBlock<
+  TAsideSizes extends OptionArray = typeof ASIDE_SIZES,
+>(
+  options: ContentWithAsideOptions<TAsideSizes>,
+): BlockConfiguration<ContentWithAsideAttributes<TAsideSizes[number]['value']>> {
+  const asideSizes = options.asideSizes ?? ASIDE_SIZES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Obsah s postranním panelem', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      asideSize: {
+        type: 'string',
+        default: asideSizes[1].value, // medium
+      },
+    },
+    edit: createContentWithAsideEdit(options as unknown as ContentWithAsideOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<ContentWithAsideAttributes<TAsideSizes[number]['value']>>
+}

package/src/blocks/layout/layout-content-w-aside/icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const icon = (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 4H20V20H4V4ZM6 6H13V18H6V6ZM15 6H18V18H15V6Z"
+      fill="currentColor"
+    />
+  </svg>
+)

package/src/blocks/layout/layout-content-w-aside/index.ts

@@ -0,0 +1,13 @@
+export type {ContentWithAsideAttributes, ContentWithAsideOptions} from './types'
+export {createContentWithAsideBlock} from './factory'
+
+import type {ContentWithAsideOptions} from './types'
+
+export const contentWithAsideDefaults: ContentWithAsideOptions = {
+  name: 'brilo/layout-content-w-aside',
+  allowedBlocks: ['brilo/layout-content', 'brilo/layout-aside'],
+  template: [
+    ['brilo/layout-content', {}],
+    ['brilo/layout-aside', {}],
+  ],
+}

package/src/blocks/layout/layout-content-w-aside/types.ts

@@ -0,0 +1,12 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {ASIDE_SIZES} from './constants'
+
+export type AsideSize = (typeof ASIDE_SIZES)[number]['value']
+
+export interface ContentWithAsideAttributes<TAsideSize extends string = AsideSize> extends Record<string, unknown> {
+  asideSize: TAsideSize
+}
+
+export interface ContentWithAsideOptions<TAsideSizes extends OptionArray = typeof ASIDE_SIZES> extends BriloBlockType {
+  asideSizes?: TAsideSizes
+}

package/src/blocks/post/posts-grid/constants.ts

@@ -0,0 +1,3 @@
+export const POSTS_PER_PAGE_MIN = 1
+export const POSTS_PER_PAGE_MAX = 12
+export const POSTS_PER_PAGE_DEFAULT = 6