@brilo/base-blocks 0.1.60 → 0.1.62

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

@@ -1,9 +1,40 @@
-export const FOOD_MENU_GROUP_MODES = ['manual', 'today', 'week'] as const
-export const FOOD_MENU_GROUP_LAYOUTS = ['slider', 'list'] as const
+import {__} from '@wordpress/i18n'
+
+export const FOOD_MENU_GROUP_MODES = [
+  {value: 'manual', label: __('Ruční výběr', 'brilo-blocks')},
+  {value: 'today', label: __('Dnešní', 'brilo-blocks')},
+  {value: 'week', label: __('Týden', 'brilo-blocks')},
+] as const
+
+export const FOOD_MENU_GROUP_LAYOUTS = [
+  {value: 'slider', label: __('Slider', 'brilo-blocks')},
+  {value: 'list', label: __('Seznam', 'brilo-blocks')},
+] as const
 
 /** What the block does on a day with no menu to show. */
-export const FOOD_MENU_GROUP_EMPTY_BEHAVIOURS = ['message', 'permanent', 'hide'] as const
+export const FOOD_MENU_GROUP_EMPTY_BEHAVIOURS = [
+  {value: 'message', label: __('Zpráva', 'brilo-blocks')},
+  {value: 'permanent', label: __('Stálá nabídka', 'brilo-blocks')},
+  {value: 'hide', label: __('Skrýt', 'brilo-blocks')},
+] as const
+
+/** How the "Rezervovat oběd" button under a daily menu works. */
+export const FOOD_MENU_GROUP_RESERVATION_MODES = [
+  {value: 'modal', label: __('Modal', 'brilo-blocks')},
+  {value: 'link', label: __('Odkaz', 'brilo-blocks')},
+  {value: 'off', label: __('Vypnuto', 'brilo-blocks')},
+] as const
+
+export const FOOD_MENU_GROUP_MODE = FOOD_MENU_GROUP_MODES[0].value
+export const FOOD_MENU_GROUP_RESERVATION_MODE = FOOD_MENU_GROUP_RESERVATION_MODES[0].value
+export const FOOD_MENU_GROUP_LAYOUT = FOOD_MENU_GROUP_LAYOUTS[0].value
+export const FOOD_MENU_GROUP_EMPTY_BEHAVIOUR = FOOD_MENU_GROUP_EMPTY_BEHAVIOURS[0].value
+
+/** Alignment of the texts around the dishes; the dish rows keep their own layout. */
+export const FOOD_MENU_GROUP_TEXT_ALIGNS = [
+  {value: 'left', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'center', label: __('Na střed', 'brilo-blocks')},
+  {value: 'right', label: __('Vpravo', 'brilo-blocks')},
+] as const
 
-export const FOOD_MENU_GROUP_MODE = FOOD_MENU_GROUP_MODES[0]
-export const FOOD_MENU_GROUP_LAYOUT = FOOD_MENU_GROUP_LAYOUTS[0]
-export const FOOD_MENU_GROUP_EMPTY_BEHAVIOUR = FOOD_MENU_GROUP_EMPTY_BEHAVIOURS[0]
+export const FOOD_MENU_GROUP_TEXT_ALIGN = FOOD_MENU_GROUP_TEXT_ALIGNS[0].value

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

@@ -1,3 +1,4 @@
+import apiFetch from '@wordpress/api-fetch'
 import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
 import {
   PanelBody,
@@ -10,8 +11,16 @@ import {
 import {__, sprintf} from '@wordpress/i18n'
 import clsx from 'clsx'
 // biome-ignore lint/correctness/noUnusedImports: required in scope for classic JSX transform
-import React from 'react'
+import React, {useEffect, useState} from 'react'
+import {DEFAULT_SURFACE_SHADOWS, SurfaceStylePanel} from '~/components/SurfaceStyleControl'
 import {plural} from '~/utils/plural'
+import {
+  FOOD_MENU_GROUP_EMPTY_BEHAVIOURS,
+  FOOD_MENU_GROUP_LAYOUTS,
+  FOOD_MENU_GROUP_MODES,
+  FOOD_MENU_GROUP_RESERVATION_MODES,
+  FOOD_MENU_GROUP_TEXT_ALIGNS,
+} from './constants'
 import {FoodMenuPreview} from './FoodMenuPreview'
 import type {FoodMenuGroupAttributes, FoodMenuGroupOptions} from './types'
 
@@ -27,6 +36,74 @@ const EMPTY_HINTS: Record<FoodMenuGroupAttributes['emptyBehaviour'], string> = {
   hide: __('Blok ze stránky zmizí. Stránka pak může zůstat prázdná.', 'brilo-blocks'),
 }
 
+type ReservationPage = {title: string; url: string} | null
+
+/**
+ * The "Stránka rezervace" module setting, for the hint under the reservation
+ * mode: the link mode needs it and falls back to the modal without it.
+ */
+function useReservationPage(enabled: boolean): {page: ReservationPage; isLoading: boolean} {
+  const [page, setPage] = useState<ReservationPage>(null)
+  const [isLoading, setIsLoading] = useState(enabled)
+
+  useEffect(() => {
+    if (!enabled) {
+      return
+    }
+
+    let cancelled = false
+    setIsLoading(true)
+
+    apiFetch<{page: ReservationPage}>({path: '/brilo/v1/food-reservation/preview'})
+      .then((result) => {
+        if (!cancelled) {
+          setPage(result.page)
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setPage(null)
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsLoading(false)
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [enabled])
+
+  return {page, isLoading}
+}
+
+function reservationHint(reservationMode: FoodMenuGroupAttributes['reservationMode'], page: ReservationPage, isLoading: boolean): string {
+  const scope = __('Tlačítko se ukáže jen u denních lístků a jen když jsou rezervace zapnuté v nastavení modulu.', 'brilo-blocks')
+
+  if ('off' === reservationMode) {
+    return __('Pod lístkem nebude tlačítko rezervace, formulář ani uzávěrka.', 'brilo-blocks')
+  }
+
+  if ('modal' === reservationMode) {
+    return `${__('Tlačítko otevře rezervační formulář v okně.', 'brilo-blocks')} ${scope}`
+  }
+
+  if (isLoading) {
+    return scope
+  }
+
+  if (!page) {
+    return __(
+      'Stránka rezervace není v nastavení modulu vybraná, tlačítko proto zatím otevře formulář v okně. Vyberte ji v Nastavení jídelního lístku.',
+      'brilo-blocks',
+    )
+  }
+
+  return `${sprintf(__('Tlačítko povede na stránku „%s“ k bloku Rezervace obědu s předvybraným dnem.', 'brilo-blocks'), page.title)} ${scope}`
+}
+
 function pickedNote(count: number): string {
   if (0 === count) {
     return __('Zatím nevybrán žádný lístek.', 'brilo-blocks')
@@ -43,6 +120,8 @@ function pickedNote(count: number): string {
 }
 
 export function createFoodMenuGroupEdit(options: FoodMenuGroupOptions) {
+  const shadows = options.shadows ?? DEFAULT_SURFACE_SHADOWS
+
   return function Edit({
     attributes,
     setAttributes,
@@ -50,7 +129,8 @@ export function createFoodMenuGroupEdit(options: FoodMenuGroupOptions) {
     attributes: FoodMenuGroupAttributes
     setAttributes: (a: Partial<FoodMenuGroupAttributes>) => void
   }) {
-    const {mode, layout, menuIds, showPrices, showAllergens, showReservation, emptyBehaviour, emptyText} = attributes
+    const {mode, layout, menuIds, showPrices, showAllergens, reservationMode, emptyBehaviour, emptyText, style, textAlign} = attributes
+    const {page, isLoading} = useReservationPage('link' === reservationMode)
 
     const blockProps = useBlockProps({className: clsx(options.blockClassName ?? 'g-food-menu', `--${layout}`)})
 
@@ -65,9 +145,9 @@ export function createFoodMenuGroupEdit(options: FoodMenuGroupOptions) {
               onChange={(value) => setAttributes({mode: value as FoodMenuGroupAttributes['mode']})}
               isBlock
             >
-              <ToggleGroupControlOption value="manual" label={__('Ruční výběr', 'brilo-blocks')} />
-              <ToggleGroupControlOption value="today" label={__('Dnešní', 'brilo-blocks')} />
-              <ToggleGroupControlOption value="week" label={__('Týden', 'brilo-blocks')} />
+              {FOOD_MENU_GROUP_MODES.map((option) => (
+                <ToggleGroupControlOption key={option.value} value={option.value} label={option.label} />
+              ))}
             </ToggleGroupControl>
 
             <ToggleGroupControl
@@ -77,8 +157,9 @@ export function createFoodMenuGroupEdit(options: FoodMenuGroupOptions) {
               onChange={(value) => setAttributes({layout: value as FoodMenuGroupAttributes['layout']})}
               isBlock
             >
-              <ToggleGroupControlOption value="slider" label={__('Slider', 'brilo-blocks')} />
-              <ToggleGroupControlOption value="list" label={__('Seznam', 'brilo-blocks')} />
+              {FOOD_MENU_GROUP_LAYOUTS.map((option) => (
+                <ToggleGroupControlOption key={option.value} value={option.value} label={option.label} />
+              ))}
             </ToggleGroupControl>
 
             <ToggleControl
@@ -95,16 +176,17 @@ export function createFoodMenuGroupEdit(options: FoodMenuGroupOptions) {
               onChange={(value) => setAttributes({showAllergens: value})}
             />
 
-            <ToggleControl
-              __nextHasNoMarginBottom
-              label={__('Umožnit rezervaci obědu', 'brilo-blocks')}
-              help={__(
-                'Tlačítko rezervace se ukáže jen u denních lístků a jen když jsou rezervace zapnuté v nastavení modulu.',
-                'brilo-blocks',
-              )}
-              checked={showReservation}
-              onChange={(value) => setAttributes({showReservation: value})}
-            />
+            <ToggleGroupControl
+              label={__('Rezervace', 'brilo-blocks')}
+              help={reservationHint(reservationMode, page, isLoading)}
+              value={reservationMode}
+              onChange={(value) => setAttributes({reservationMode: value as FoodMenuGroupAttributes['reservationMode']})}
+              isBlock
+            >
+              {FOOD_MENU_GROUP_RESERVATION_MODES.map((option) => (
+                <ToggleGroupControlOption key={option.value} value={option.value} label={option.label} />
+              ))}
+            </ToggleGroupControl>
           </PanelBody>
 
           <PanelBody title={__('Když není co zobrazit', 'brilo-blocks')} initialOpen={false}>
@@ -115,9 +197,9 @@ export function createFoodMenuGroupEdit(options: FoodMenuGroupOptions) {
               onChange={(value) => setAttributes({emptyBehaviour: value as FoodMenuGroupAttributes['emptyBehaviour']})}
               isBlock
             >
-              <ToggleGroupControlOption value="message" label={__('Zpráva', 'brilo-blocks')} />
-              <ToggleGroupControlOption value="permanent" label={__('Stálá nabídka', 'brilo-blocks')} />
-              <ToggleGroupControlOption value="hide" label={__('Skrýt', 'brilo-blocks')} />
+              {FOOD_MENU_GROUP_EMPTY_BEHAVIOURS.map((option) => (
+                <ToggleGroupControlOption key={option.value} value={option.value} label={option.label} />
+              ))}
             </ToggleGroupControl>
 
             {'hide' !== emptyBehaviour && (
@@ -131,6 +213,20 @@ export function createFoodMenuGroupEdit(options: FoodMenuGroupOptions) {
               />
             )}
           </PanelBody>
+
+          <SurfaceStylePanel style={style} shadows={shadows} idPrefix="food-menu-group" onChange={(next) => setAttributes({style: next})}>
+            <ToggleGroupControl
+              label={__('Zarovnání textu', 'brilo-blocks')}
+              help={__('Nadpisy, názvy chodů a texty pod lístkem. Řádky jídel zůstávají beze změny.', 'brilo-blocks')}
+              value={textAlign}
+              onChange={(value) => setAttributes({textAlign: value as FoodMenuGroupAttributes['textAlign']})}
+              isBlock
+            >
+              {FOOD_MENU_GROUP_TEXT_ALIGNS.map((align) => (
+                <ToggleGroupControlOption key={align.value} value={align.value} label={align.label} />
+              ))}
+            </ToggleGroupControl>
+          </SurfaceStylePanel>
         </InspectorControls>
 
         <div {...blockProps}>

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

@@ -34,6 +34,14 @@ $warn: #9a6700;
     padding: 10px 0 14px;
   }
 
+  // The block's own style (see `previewStyle`) overrides the admin palette
+  // through these properties; unset, the card looks as before.
+  .brilo-food-menu-preview__card {
+    color: var(--food-menu-preview-text, $fg);
+    border-radius: 4px;
+    box-shadow: var(--food-menu-preview-shadow, none);
+  }
+
   .brilo-food-menu-preview__head {
     display: flex;
     flex-wrap: wrap;
@@ -41,8 +49,8 @@ $warn: #9a6700;
     align-items: center;
     justify-content: space-between;
     padding: 10px 14px;
-    background: $surface;
-    border: 1px solid $line;
+    background: var(--food-menu-preview-background, $surface);
+    border: 1px solid var(--food-menu-preview-border, $line);
     border-bottom: 0;
     border-radius: 4px 4px 0 0;
   }
@@ -105,7 +113,8 @@ $warn: #9a6700;
   }
 
   .brilo-food-menu-preview__body {
-    border: 1px solid $line;
+    background: var(--food-menu-preview-background, transparent);
+    border: 1px solid var(--food-menu-preview-border, $line);
     border-radius: 0 0 4px 4px;
   }
 
@@ -164,9 +173,29 @@ $warn: #9a6700;
     }
   }
 
+  // Paired half sections of a standing lístek, side by side as on the page.
+  .brilo-food-menu-preview__sections--split {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+
+    .brilo-food-menu-preview__section:not(.brilo-food-menu-preview__section--half) {
+      grid-column: 1 / -1;
+    }
+
+    .brilo-food-menu-preview__section--half:not(.brilo-food-menu-preview__section--first-half) {
+      border-left: 1px solid var(--food-menu-preview-border, $line);
+    }
+
+    // A pair opening the lístek has no line above either half.
+    .brilo-food-menu-preview__section--first-half:first-child + .brilo-food-menu-preview__section--half {
+      border-top: 0;
+    }
+  }
+
   .brilo-food-menu-preview__section-title {
     margin: 0 0 4px;
-    color: $muted;
+    color: var(--food-menu-preview-text, $muted);
+    text-align: var(--food-menu-preview-align, left);
     font-weight: 600;
     font-size: 11px;
     letter-spacing: 0.08em;
@@ -234,8 +263,8 @@ $warn: #9a6700;
     padding: 8px 14px;
     color: $muted;
     font-size: 12px;
-    background: $surface;
-    border-top: 1px solid $line;
+    background: var(--food-menu-preview-background, $surface);
+    border-top: 1px solid var(--food-menu-preview-border, $line);
     border-radius: 0 0 4px 4px;
   }
 

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

@@ -1,5 +1,7 @@
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
+import {DEFAULT_SURFACE_SHADOWS, surfaceStyleAttribute} from '~/components/SurfaceStyleControl'
+import {withObjectDefaults} from '~/utils/withObjectDefaults'
 import {
   FOOD_MENU_GROUP_EMPTY_BEHAVIOUR,
   FOOD_MENU_GROUP_EMPTY_BEHAVIOURS,
@@ -7,12 +9,65 @@ import {
   FOOD_MENU_GROUP_LAYOUTS,
   FOOD_MENU_GROUP_MODE,
   FOOD_MENU_GROUP_MODES,
+  FOOD_MENU_GROUP_RESERVATION_MODE,
+  FOOD_MENU_GROUP_RESERVATION_MODES,
+  FOOD_MENU_GROUP_TEXT_ALIGN,
+  FOOD_MENU_GROUP_TEXT_ALIGNS,
 } 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> {
+  const attributes = {
+    mode: {
+      type: 'string',
+      default: FOOD_MENU_GROUP_MODE,
+      enum: FOOD_MENU_GROUP_MODES.map((option) => option.value),
+    },
+    layout: {
+      type: 'string',
+      default: FOOD_MENU_GROUP_LAYOUT,
+      enum: FOOD_MENU_GROUP_LAYOUTS.map((option) => option.value),
+    },
+    menuIds: {
+      type: 'array',
+      default: [],
+      items: {type: 'number'},
+    },
+    showPrices: {
+      type: 'boolean',
+      default: true,
+    },
+    showAllergens: {
+      type: 'boolean',
+      default: true,
+    },
+    reservationMode: {
+      type: 'string',
+      default: FOOD_MENU_GROUP_RESERVATION_MODE,
+      enum: FOOD_MENU_GROUP_RESERVATION_MODES.map((option) => option.value),
+    },
+    emptyBehaviour: {
+      type: 'string',
+      default: FOOD_MENU_GROUP_EMPTY_BEHAVIOUR,
+      enum: FOOD_MENU_GROUP_EMPTY_BEHAVIOURS.map((option) => option.value),
+    },
+    // Empty means "use the wording the server picks for this mode".
+    emptyText: {
+      type: 'string',
+      default: '',
+    },
+    style: surfaceStyleAttribute(options.shadows ?? DEFAULT_SURFACE_SHADOWS),
+    textAlign: {
+      type: 'string',
+      default: FOOD_MENU_GROUP_TEXT_ALIGN,
+      enum: FOOD_MENU_GROUP_TEXT_ALIGNS.map((align) => align.value),
+    },
+  }
+
+  const {reservationMode: _reservationMode, ...withoutReservationMode} = attributes
+
   return {
     name: options.name,
     title: options.title ?? __('Jídelní lístek', 'brilo-blocks'),
@@ -21,46 +76,29 @@ export function createFoodMenuGroupBlock(options: FoodMenuGroupOptions): BlockCo
     ...(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,
+    attributes,
+    // The on/off "Umožnit rezervaci obědu" toggle became a three-way choice.
+    // A dynamic block is always valid, so the migration opts in through
+    // `isEligible`, which sees the raw comment attributes. Blocks that never
+    // stored the toggle had it on, which is the new default too.
+    deprecated: [
+      {
+        attributes: {
+          ...withoutReservationMode,
+          showReservation: {
+            type: 'boolean',
+            default: true,
+          },
+        },
+        isEligible: (raw: Record<string, unknown>) => 'showReservation' in raw && !('reservationMode' in raw),
+        migrate: ({showReservation, ...rest}: Record<string, unknown>) => ({
+          ...rest,
+          reservationMode: false === showReservation ? 'off' : 'modal',
+        }),
+        save: () => null,
       },
-      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),
+    ],
+    edit: withObjectDefaults(createFoodMenuGroupEdit(options)),
     save: () => null,
   } as unknown as BlockConfiguration<FoodMenuGroupAttributes>
 }

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

@@ -4,6 +4,8 @@ export type {
   FoodMenuGroupLayout,
   FoodMenuGroupMode,
   FoodMenuGroupOptions,
+  FoodMenuGroupReservationMode,
+  FoodMenuGroupTextAlign,
 } from './types'
 export {createFoodMenuGroupBlock} from './factory'
 export {FoodMenuSelectModal} from './FoodMenuSelectModal'

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

@@ -1,9 +1,18 @@
+import type {SurfaceShadowOption, SurfaceStyle} from '~/components/SurfaceStyleControl'
 import type {BriloBlockType, SelectControlProps} from '~/types'
-import type {FOOD_MENU_GROUP_EMPTY_BEHAVIOURS, FOOD_MENU_GROUP_LAYOUTS, FOOD_MENU_GROUP_MODES} from './constants'
+import type {
+  FOOD_MENU_GROUP_EMPTY_BEHAVIOURS,
+  FOOD_MENU_GROUP_LAYOUTS,
+  FOOD_MENU_GROUP_MODES,
+  FOOD_MENU_GROUP_RESERVATION_MODES,
+  FOOD_MENU_GROUP_TEXT_ALIGNS,
+} 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 type FoodMenuGroupMode = (typeof FOOD_MENU_GROUP_MODES)[number]['value']
+export type FoodMenuGroupLayout = (typeof FOOD_MENU_GROUP_LAYOUTS)[number]['value']
+export type FoodMenuGroupEmptyBehaviour = (typeof FOOD_MENU_GROUP_EMPTY_BEHAVIOURS)[number]['value']
+export type FoodMenuGroupReservationMode = (typeof FOOD_MENU_GROUP_RESERVATION_MODES)[number]['value']
+export type FoodMenuGroupTextAlign = (typeof FOOD_MENU_GROUP_TEXT_ALIGNS)[number]['value']
 
 export interface FoodMenuGroupAttributes extends Record<string, unknown> {
   mode: FoodMenuGroupMode
@@ -11,11 +20,15 @@ export interface FoodMenuGroupAttributes extends Record<string, unknown> {
   menuIds: number[]
   showPrices: boolean
   showAllergens: boolean
-  showReservation: boolean
+  reservationMode: FoodMenuGroupReservationMode
   emptyBehaviour: FoodMenuGroupEmptyBehaviour
   emptyText: string
+  style: SurfaceStyle<string>
+  textAlign: FoodMenuGroupTextAlign
 }
 
 export interface FoodMenuGroupOptions extends BriloBlockType {
   renderMenusControl?: (props: SelectControlProps) => JSX.Element
+  /** Overrides the shared shadow presets — see `DEFAULT_SURFACE_SHADOWS`. */
+  shadows?: readonly SurfaceShadowOption[]
 }