@brilo/base-blocks 0.1.57 → 0.1.60

package/src/blocks/food-menu/food-menu-group/editor.scss

@@ -0,0 +1,269 @@
+// Editor preview of the menu block: an admin card, not a copy of the page.
+// wp-admin palette only — the canvas carries the theme's front-end styles,
+// and none of its tokens belong here.
+$fg: #1e1e1e;
+$muted: #757575;
+$line: #dcdcde;
+$surface: #f6f7f7;
+$accent: #3858e9;
+$ok: #1d7c4d;
+$ok-soft: #e5f3ec;
+$warn: #9a6700;
+
+@layer base {
+  .brilo-food-menu-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    color: $fg;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    text-align: left;
+
+    &--loading {
+      opacity: 0.6;
+    }
+  }
+
+  .brilo-food-menu-preview__pick {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    padding: 10px 0 14px;
+  }
+
+  .brilo-food-menu-preview__head {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    background: $surface;
+    border: 1px solid $line;
+    border-bottom: 0;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .brilo-food-menu-preview__card--loading .brilo-food-menu-preview__head {
+    // Same height as a loaded head, so the block does not jump when it lands.
+    min-height: 43px;
+    justify-content: center;
+    border-bottom: 1px solid $line;
+    border-radius: 4px;
+
+    .components-spinner {
+      margin: 0;
+    }
+  }
+
+  .brilo-food-menu-preview__title {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    min-width: 0;
+    font-weight: 600;
+
+    svg {
+      flex: none;
+      width: 18px;
+      height: 18px;
+      color: $muted;
+    }
+  }
+
+  .brilo-food-menu-preview__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .brilo-food-menu-preview__pill {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    padding: 2px 9px;
+    color: $accent;
+    font-weight: 600;
+    font-size: 12px;
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+    background: rgba($accent, 0.1);
+    border-radius: 999px;
+
+    &--ok {
+      color: $ok;
+      background: $ok-soft;
+    }
+
+    &--muted {
+      color: $muted;
+      background: $surface;
+    }
+  }
+
+  .brilo-food-menu-preview__body {
+    border: 1px solid $line;
+    border-radius: 0 0 4px 4px;
+  }
+
+  .brilo-food-menu-preview__days {
+    display: flex;
+    overflow-x: auto;
+    // A shadow, not a border: the selected tab's underline paints over it
+    // without a negative margin, which would make the strip scroll vertically.
+    box-shadow: inset 0 -1px 0 $line;
+  }
+
+  .brilo-food-menu-preview__day {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    margin: 0;
+    padding: 8px 14px;
+    color: $muted;
+    font: inherit;
+    font-size: 13px;
+    white-space: nowrap;
+    background: none;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    border-radius: 0;
+    cursor: pointer;
+
+    &[aria-selected="true"] {
+      color: $fg;
+      font-weight: 600;
+      border-bottom-color: $accent;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $accent;
+      outline-offset: -2px;
+    }
+  }
+
+  .brilo-food-menu-preview__dot {
+    width: 6px;
+    height: 6px;
+    background: $ok;
+    border-radius: 50%;
+
+    &--off {
+      background: $line;
+    }
+  }
+
+  .brilo-food-menu-preview__section {
+    padding: 10px 14px 4px;
+
+    & + & {
+      border-top: 1px solid $line;
+    }
+  }
+
+  .brilo-food-menu-preview__section-title {
+    margin: 0 0 4px;
+    color: $muted;
+    font-weight: 600;
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .brilo-food-menu-preview__row {
+    display: grid;
+    grid-template-columns: 48px 1fr auto;
+    gap: 10px;
+    align-items: baseline;
+    padding: 6px 0;
+    font-size: 14px;
+
+    &--no-price {
+      grid-template-columns: 48px 1fr;
+    }
+  }
+
+  .brilo-food-menu-preview__unit {
+    color: $muted;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .brilo-food-menu-preview__name {
+    min-width: 0;
+
+    &--missing {
+      color: $muted;
+      font-style: italic;
+    }
+  }
+
+  .brilo-food-menu-preview__note {
+    display: block;
+    color: $muted;
+    font-size: 12px;
+  }
+
+  .brilo-food-menu-preview__chip {
+    display: inline-block;
+    margin-left: 4px;
+    padding: 0 5px;
+    color: $muted;
+    font-weight: 600;
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    line-height: 16px;
+    background: $surface;
+    border: 1px solid $line;
+    border-radius: 3px;
+  }
+
+  .brilo-food-menu-preview__price {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .brilo-food-menu-preview__foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: space-between;
+    padding: 8px 14px;
+    color: $muted;
+    font-size: 12px;
+    background: $surface;
+    border-top: 1px solid $line;
+    border-radius: 0 0 4px 4px;
+  }
+
+  .brilo-food-menu-preview__empty {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    padding: 14px 16px;
+    color: $muted;
+    font-size: 14px;
+    border: 1px dashed $line;
+    border-radius: 4px;
+
+    b {
+      display: block;
+      color: $fg;
+      font-weight: 600;
+    }
+  }
+
+  .brilo-food-menu-preview__empty-icon {
+    flex: none;
+    width: 20px;
+    height: 20px;
+    color: $warn;
+  }
+
+  .brilo-food-menu-preview__retry {
+    margin-top: 8px;
+  }
+}

package/src/blocks/food-menu/food-menu-group/factory.tsx

@@ -0,0 +1,66 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {
+  FOOD_MENU_GROUP_EMPTY_BEHAVIOUR,
+  FOOD_MENU_GROUP_EMPTY_BEHAVIOURS,
+  FOOD_MENU_GROUP_LAYOUT,
+  FOOD_MENU_GROUP_LAYOUTS,
+  FOOD_MENU_GROUP_MODE,
+  FOOD_MENU_GROUP_MODES,
+} from './constants'
+import {createFoodMenuGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {FoodMenuGroupAttributes, FoodMenuGroupOptions} from './types'
+
+export function createFoodMenuGroupBlock(options: FoodMenuGroupOptions): BlockConfiguration<FoodMenuGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Jídelní lístek', 'brilo-blocks'),
+    description: options.description ?? __('Zobrazí vybraný lístek, dnešní denní lístek nebo celý týden.', 'brilo-blocks'),
+    category: options.category ?? 'widgets',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      mode: {
+        type: 'string',
+        default: FOOD_MENU_GROUP_MODE,
+        enum: [...FOOD_MENU_GROUP_MODES],
+      },
+      layout: {
+        type: 'string',
+        default: FOOD_MENU_GROUP_LAYOUT,
+        enum: [...FOOD_MENU_GROUP_LAYOUTS],
+      },
+      menuIds: {
+        type: 'array',
+        default: [],
+        items: {type: 'number'},
+      },
+      showPrices: {
+        type: 'boolean',
+        default: true,
+      },
+      showAllergens: {
+        type: 'boolean',
+        default: true,
+      },
+      showReservation: {
+        type: 'boolean',
+        default: true,
+      },
+      emptyBehaviour: {
+        type: 'string',
+        default: FOOD_MENU_GROUP_EMPTY_BEHAVIOUR,
+        enum: [...FOOD_MENU_GROUP_EMPTY_BEHAVIOURS],
+      },
+      // Empty means "use the wording the server picks for this mode".
+      emptyText: {
+        type: 'string',
+        default: '',
+      },
+    },
+    edit: createFoodMenuGroupEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<FoodMenuGroupAttributes>
+}

package/src/blocks/food-menu/food-menu-group/icon.tsx

@@ -0,0 +1,8 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Jídelní lístek">
+    <rect x="3" y="2" width="14" height="16" stroke="currentColor" fill="none" />
+    <line x1="6" y1="6" x2="14" y2="6" stroke="currentColor" />
+    <line x1="6" y1="10" x2="14" y2="10" stroke="currentColor" />
+    <line x1="6" y1="14" x2="11" y2="14" stroke="currentColor" />
+  </svg>
+)

package/src/blocks/food-menu/food-menu-group/index.ts

@@ -0,0 +1,17 @@
+export type {
+  FoodMenuGroupAttributes,
+  FoodMenuGroupEmptyBehaviour,
+  FoodMenuGroupLayout,
+  FoodMenuGroupMode,
+  FoodMenuGroupOptions,
+} from './types'
+export {createFoodMenuGroupBlock} from './factory'
+export {FoodMenuSelectModal} from './FoodMenuSelectModal'
+
+import type {FoodMenuGroupOptions} from './types'
+
+export const foodMenuGroupDefaults: FoodMenuGroupOptions = {
+  name: 'brilo/food-menu-group',
+  // Also allowed inside a content column, so a menu can sit next to a gallery.
+  parent: ['brilo/base-section', 'brilo/column-item'],
+}

package/src/blocks/food-menu/food-menu-group/types.ts

@@ -0,0 +1,21 @@
+import type {BriloBlockType, SelectControlProps} from '~/types'
+import type {FOOD_MENU_GROUP_EMPTY_BEHAVIOURS, FOOD_MENU_GROUP_LAYOUTS, FOOD_MENU_GROUP_MODES} from './constants'
+
+export type FoodMenuGroupMode = (typeof FOOD_MENU_GROUP_MODES)[number]
+export type FoodMenuGroupLayout = (typeof FOOD_MENU_GROUP_LAYOUTS)[number]
+export type FoodMenuGroupEmptyBehaviour = (typeof FOOD_MENU_GROUP_EMPTY_BEHAVIOURS)[number]
+
+export interface FoodMenuGroupAttributes extends Record<string, unknown> {
+  mode: FoodMenuGroupMode
+  layout: FoodMenuGroupLayout
+  menuIds: number[]
+  showPrices: boolean
+  showAllergens: boolean
+  showReservation: boolean
+  emptyBehaviour: FoodMenuGroupEmptyBehaviour
+  emptyText: string
+}
+
+export interface FoodMenuGroupOptions extends BriloBlockType {
+  renderMenusControl?: (props: SelectControlProps) => JSX.Element
+}

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

@@ -12,7 +12,7 @@ import type {FormGroupOptions} from './types'
 
 export const formGroupDefaults: FormGroupOptions = {
   name: 'brilo/form-group',
-  parent: ['brilo/base-section'],
+  parent: ['brilo/base-section', 'brilo/column-item', 'brilo/responsive-grid-item'],
   allowedBlocks: ['brilo/form-field'],
   template: [['brilo/form-field', {type: 'text'}]],
 }

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

@@ -1,10 +1,3 @@
 export const DEFAULT_COLUMNS = [2, 3, 4, 6] as const
 
-export const DEFAULT_RATIOS = [
-  {value: '4:3', label: '4:3'},
-  {value: '16:9', label: '16:9'},
-  {value: '3:2', label: '3:2'},
-  {value: '1:1', label: '1:1'},
-  {value: '2:1', label: '2:1'},
-  {value: '3:4', label: '3:4'},
-] as const
+export {GALLERY_RATIOS as DEFAULT_RATIOS} from '~/constants'

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

@@ -1,4 +1,4 @@
-import {InspectorControls, MediaUpload} from '@wordpress/block-editor'
+import {InspectorControls} from '@wordpress/block-editor'
 import {
   PanelBody,
   TextControl,
@@ -6,19 +6,13 @@ import {
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
-import {useDispatch} from '@wordpress/data'
-import {createBlock} from '@wordpress/blocks'
 import clsx from 'clsx'
+import {GalleryImagesAppender} from '~/components/GalleryImagesAppender'
 import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import {DEFAULT_COLUMNS, DEFAULT_RATIOS} from './constants'
 import type {GalleryGroupAttributes, GalleryGroupOptions, GalleryRatio} from './types'
 
-type Media = {
-  id: number
-  url: string
-}
-
 export function createGalleryGroupEdit(options: GalleryGroupOptions) {
   const COLUMNS = options.columns ?? DEFAULT_COLUMNS
   const RATIOS = options.ratios ?? DEFAULT_RATIOS
@@ -33,36 +27,6 @@ export function createGalleryGroupEdit(options: GalleryGroupOptions) {
     clientId: string
   }) {
     const {columns, ratio, galleryId, spacing} = attributes
-    const {insertBlock} = useDispatch('core/block-editor')
-
-    const addNewBlock = (imageId: number) => {
-      const newBlock = createBlock(options.allowedBlocks[0], {
-        img: {
-          id: imageId,
-        },
-      })
-
-      insertBlock(newBlock, undefined, clientId)
-    }
-
-    const onSelectImages = (media: Media[]) => {
-      media.forEach((item) => addNewBlock(item.id))
-    }
-
-    const CustomAppender = () => {
-      return (
-        <MediaUpload
-          onSelect={onSelectImages}
-          multiple="add"
-          allowedTypes={['image']}
-          render={({open}) => (
-            <div onClick={open} className="g-gallery__appender">
-              {__('Přidat obrázky', 'brilo-blocks')}
-            </div>
-          )}
-        />
-      )
-    }
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(options.blockClassName ?? 'g-gallery wp-block-section'),
@@ -73,7 +37,7 @@ export function createGalleryGroupEdit(options: GalleryGroupOptions) {
         ...itemSpacingStyle(spacing),
       },
       allowedBlocks: options.allowedBlocks,
-      renderAppender: CustomAppender,
+      renderAppender: () => <GalleryImagesAppender clientId={clientId} itemBlock={options.allowedBlocks[0]} />,
       template: options.template,
       layout: {type: 'default'},
     })

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

@@ -1,15 +1,3 @@
-.g-gallery__appender {
-  padding: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px dashed lightblue;
-  height: 100%;
-  cursor: pointer;
-  box-sizing: border-box;
-  min-height: 256px;
-}
-
 .g-gallery {
   .block-list-appender {
     width: 100%;

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

@@ -5,7 +5,7 @@ import type {GalleryGroupOptions} from './types'
 
 export const galleryGroupDefaults: GalleryGroupOptions = {
   name: 'brilo/gallery-group',
-  parent: ['brilo/base-section'],
+  parent: ['brilo/base-section', 'brilo/column-item'],
   allowedBlocks: ['brilo/gallery-item'],
   template: [],
 }

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

@@ -5,6 +5,6 @@ export {createGalleryItemBlock} from './factory'
 
 export const galleryItemDefaults: GalleryItemOptions = {
   name: 'brilo/gallery-item',
-  parent: ['brilo/gallery-group'],
+  parent: ['brilo/gallery-group', 'brilo/gallery-strip-group'],
   template: [],
 }

package/src/blocks/gallery/gallery-strip-group/constants.ts

@@ -0,0 +1,22 @@
+import {__} from '@wordpress/i18n'
+
+export const HEIGHTS = [
+  {value: 'sm', label: __('Malá', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+  {value: 'lg', label: __('Velká', 'brilo-blocks')},
+] as const
+
+export const SPEEDS = [
+  {value: 'slow', label: __('Pomalu', 'brilo-blocks')},
+  {value: 'medium', label: __('Středně', 'brilo-blocks')},
+  {value: 'fast', label: __('Rychle', 'brilo-blocks')},
+] as const
+
+export const DIRECTIONS = [
+  {value: 'left', label: __('Doleva', 'brilo-blocks')},
+  {value: 'right', label: __('Doprava', 'brilo-blocks')},
+] as const
+
+export {GALLERY_RATIOS as DEFAULT_RATIOS} from '~/constants'
+
+export const HEIGHT_PIXELS = {sm: 160, md: 240, lg: 320} as const

package/src/blocks/gallery/gallery-strip-group/edit.tsx

@@ -0,0 +1,112 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {GalleryImagesAppender} from '~/components/GalleryImagesAppender'
+import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, HEIGHT_PIXELS, SPEEDS} from './constants'
+import type {
+  GalleryStripDirection,
+  GalleryStripGroupAttributes,
+  GalleryStripGroupOptions,
+  GalleryStripHeight,
+  GalleryStripRatio,
+  GalleryStripSpeed,
+} from './types'
+
+export function createGalleryStripGroupEdit(options: GalleryStripGroupOptions) {
+  const RATIOS = options.ratios ?? DEFAULT_RATIOS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+    clientId,
+  }: {
+    attributes: GalleryStripGroupAttributes
+    setAttributes: (a: Partial<GalleryStripGroupAttributes>) => void
+    clientId: string
+  }) {
+    const {height, ratio, speed, direction, spacing} = attributes
+    const heightPx = HEIGHT_PIXELS[height] ?? HEIGHT_PIXELS.md
+    const [ratioWidth, ratioHeight] = ratio.split(':').map(Number)
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(
+        options.blockClassName ?? 'g-gallery g-gallery-strip wp-block-section',
+        `--speed-${speed}`,
+        `--direction-${direction}`,
+      ),
+      containerClassName: options.containerClassName ?? 'g-gallery-strip__track',
+      containerStyle: {
+        '--gallery-strip-height': `${heightPx}px`,
+        '--gallery-strip-item-width': `${Math.round((heightPx * ratioWidth) / ratioHeight)}px`,
+        ...itemSpacingStyle(spacing),
+      },
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      renderAppender: () => <GalleryImagesAppender clientId={clientId} itemBlock={options.allowedBlocks[0]} />,
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Výška', 'brilo-blocks')}
+              value={height}
+              onChange={(v) => setAttributes({height: v as GalleryStripHeight})}
+            >
+              {HEIGHTS.map((h) => (
+                <ToggleGroupControlOption key={h.value} value={h.value} label={h.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Poměr stran', 'brilo-blocks')}
+              value={ratio}
+              onChange={(v) => setAttributes({ratio: v as GalleryStripRatio})}
+            >
+              {RATIOS.map((r) => (
+                <ToggleGroupControlOption key={r.value} value={r.value} label={r.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Animace', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Rychlost', 'brilo-blocks')}
+              value={speed}
+              onChange={(v) => setAttributes({speed: v as GalleryStripSpeed})}
+            >
+              {SPEEDS.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Směr', 'brilo-blocks')}
+              value={direction}
+              onChange={(v) => setAttributes({direction: v as GalleryStripDirection})}
+            >
+              {DIRECTIONS.map((d) => (
+                <ToggleGroupControlOption key={d.value} value={d.value} label={d.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/gallery/gallery-strip-group/editor.scss

@@ -0,0 +1,36 @@
+.g-gallery-strip {
+  // Horizontal scroll only: items get a fixed width (height × ratio) and grow
+  // vertically to fit the gallery-item controls instead of overflowing.
+  .g-gallery-strip__track {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    gap: 16px;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .g-gallery-strip__track > .wp-block,
+  .g-gallery-strip__track > .block-list-appender {
+    flex: 0 0 var(--gallery-strip-item-width);
+    width: var(--gallery-strip-item-width);
+    display: flex;
+    flex-direction: column;
+    min-height: var(--gallery-strip-height);
+    margin: 0;
+  }
+
+  .i-gallery {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .i-gallery__image-wrapper {
+    flex: 1;
+  }
+
+  .g-gallery__appender {
+    min-height: var(--gallery-strip-height);
+  }
+}