@brilo/base-blocks 0.1.58 → 0.1.61

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, center);
     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[]
 }

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

@@ -0,0 +1,179 @@
+import apiFetch from '@wordpress/api-fetch'
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {Button, ExternalLink, Notice, PanelBody, Spinner, TextareaControl} from '@wordpress/components'
+import {__, sprintf} from '@wordpress/i18n'
+import clsx from 'clsx'
+import type React from 'react'
+import {useEffect, useState} from 'react'
+import {icon as reservationIcon} from './icon'
+import type {FoodReservationAttributes, FoodReservationOptions} from './types'
+
+type PreviewDay = {
+  menuId: number
+  date: string
+  label: string
+  deadline: string
+}
+
+type PreviewResponse = {
+  enabled: boolean
+  settingsUrl: string
+  anchor: string
+  days: PreviewDay[]
+  emptyMessage: string
+}
+
+// Shares the menu block's preview card styles (food-menu-group/editor.scss).
+const BASE = 'brilo-food-menu-preview'
+
+/**
+ * Which days the form would offer is decided on the server (deadlines,
+ * sold-out dishes, the site's time zone), so the preview asks the block's
+ * own endpoint. It describes the form instead of drawing it.
+ */
+function useReservationPreview() {
+  const [data, setData] = useState<PreviewResponse | null>(null)
+  const [hasError, setHasError] = useState(false)
+  const [attempt, setAttempt] = useState(0)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: attempt re-runs the effect on retry
+  useEffect(() => {
+    let cancelled = false
+    setHasError(false)
+
+    apiFetch<PreviewResponse>({path: '/brilo/v1/food-reservation/preview'})
+      .then((result) => {
+        if (!cancelled) {
+          setData(result)
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setHasError(true)
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [attempt])
+
+  return {data, hasError, retry: () => setAttempt((value) => value + 1)}
+}
+
+function DisabledNotice({settingsUrl}: {settingsUrl: string}) {
+  return (
+    <Notice status="warning" isDismissible={false}>
+      {__('Rezervace obědů jsou v nastavení modulu vypnuté, blok se na webu nezobrazí.', 'brilo-blocks')}{' '}
+      {settingsUrl && <ExternalLink href={settingsUrl}>{__('Nastavení jídelního lístku', 'brilo-blocks')}</ExternalLink>}
+    </Notice>
+  )
+}
+
+function PreviewCard({data, emptyText}: {data: PreviewResponse; emptyText: string}) {
+  const [first] = data.days
+
+  return (
+    <div className={`${BASE}__card`}>
+      <div className={`${BASE}__head`}>
+        <div className={`${BASE}__title`}>
+          {reservationIcon}
+          <span>{__('Rezervace obědu', 'brilo-blocks')}</span>
+        </div>
+
+        <div className={`${BASE}__meta`}>
+          <span className={clsx(`${BASE}__pill`, `${BASE}__pill--muted`)}>{`#${data.anchor}`}</span>
+          {first && <span className={clsx(`${BASE}__pill`, `${BASE}__pill--ok`)}>{__('Rezervace otevřené', 'brilo-blocks')}</span>}
+        </div>
+      </div>
+
+      <div className={`${BASE}__body`}>
+        {first ? (
+          <div className={`${BASE}__section`}>
+            <div className={`${BASE}__section-title`}>{__('Formulář nabídne dny', 'brilo-blocks')}</div>
+
+            {data.days.map((day, index) => (
+              <div className={clsx(`${BASE}__row`, `${BASE}__row--no-price`)} key={day.menuId}>
+                <span className={`${BASE}__unit`}>{0 === index ? __('výchozí', 'brilo-blocks') : ''}</span>
+                <span className={`${BASE}__name`}>
+                  {day.label}
+                  {day.deadline && <small className={`${BASE}__note`}>{sprintf(__('Uzávěrka: %s', 'brilo-blocks'), day.deadline)}</small>}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className={`${BASE}__empty`}>
+            <div>
+              <b>{__('Teď není na který den rezervovat', 'brilo-blocks')}</b>
+              {sprintf(__('Na webu se ukáže věta „%s“', 'brilo-blocks'), emptyText.trim() || data.emptyMessage)}
+            </div>
+          </div>
+        )}
+
+        <div className={`${BASE}__foot`}>
+          <span>{sprintf(__('Odkaz se stránkou?menu=ID#%s předvybere den daného lístku.', 'brilo-blocks'), data.anchor)}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function createFoodReservationEdit(options: FoodReservationOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: FoodReservationAttributes
+    setAttributes: (a: Partial<FoodReservationAttributes>) => void
+  }) {
+    const {emptyText} = attributes
+    const blockProps = useBlockProps({className: clsx(options.blockClassName ?? 'g-food-reservation')})
+    const {data, hasError, retry} = useReservationPreview()
+
+    let content: React.ReactNode
+
+    if (hasError) {
+      content = (
+        <div className={`${BASE}__empty`}>
+          <div>
+            <b>{__('Náhled se nepodařilo načíst.', 'brilo-blocks')}</b>
+            <Button variant="secondary" size="small" className={`${BASE}__retry`} onClick={retry}>
+              {__('Zkusit znovu', 'brilo-blocks')}
+            </Button>
+          </div>
+        </div>
+      )
+    } else if (!data) {
+      content = <Spinner />
+    } else if (!data.enabled) {
+      content = <DisabledNotice settingsUrl={data.settingsUrl} />
+    } else {
+      content = <PreviewCard data={data} emptyText={emptyText} />
+    }
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Když není co rezervovat', 'brilo-blocks')}>
+            <TextareaControl
+              __nextHasNoMarginBottom
+              label={__('Vlastní text zprávy', 'brilo-blocks')}
+              help={__('Když zůstane prázdné, použije se výchozí věta.', 'brilo-blocks')}
+              rows={2}
+              value={emptyText}
+              onChange={(value) => setAttributes({emptyText: value})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          {/* Left-aligned headings: the menu block's centre default is about the menu, not this list. */}
+          <div className={BASE} style={{'--food-menu-preview-align': 'left'} as React.CSSProperties}>
+            {content}
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,28 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createFoodReservationEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {FoodReservationAttributes, FoodReservationOptions} from './types'
+
+export function createFoodReservationBlock(options: FoodReservationOptions): BlockConfiguration<FoodReservationAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Rezervace obědu', 'brilo-blocks'),
+    description:
+      options.description ??
+      __('Rezervační formulář přímo na stránce. Tlačítka „Rezervovat oběd“ na něj vedou přes kotvu #rezervace.', 'brilo-blocks'),
+    category: options.category ?? 'widgets',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    // The anchor is fixed (`rezervace`), so the block takes no own HTML anchor.
+    supports: {html: false, customClassName: false, multiple: false},
+    attributes: {
+      emptyText: {
+        type: 'string',
+        default: '',
+      },
+    },
+    edit: createFoodReservationEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<FoodReservationAttributes>
+}

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

@@ -0,0 +1,9 @@
+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="Rezervace obědu">
+    <rect x="3" y="4" width="14" height="13" stroke="currentColor" fill="none" />
+    <line x1="3" y1="8" x2="17" y2="8" stroke="currentColor" />
+    <line x1="7" y1="2" x2="7" y2="6" stroke="currentColor" />
+    <line x1="13" y1="2" x2="13" y2="6" stroke="currentColor" />
+    <polyline points="7,12.5 9,14.5 13,10.5" stroke="currentColor" fill="none" />
+  </svg>
+)

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

@@ -0,0 +1,10 @@
+export type {FoodReservationAttributes, FoodReservationOptions} from './types'
+export {createFoodReservationBlock} from './factory'
+
+import type {FoodReservationOptions} from './types'
+
+export const foodReservationDefaults: FoodReservationOptions = {
+  name: 'brilo/food-reservation',
+  // A section of its own, or a column next to the day's menu.
+  parent: ['brilo/base-section', 'brilo/column-item'],
+}

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

@@ -0,0 +1,8 @@
+import type {BriloBlockType} from '~/types'
+
+export interface FoodReservationAttributes extends Record<string, unknown> {
+  /** Empty means "use the server's sentence". */
+  emptyText: string
+}
+
+export type FoodReservationOptions = BriloBlockType

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

@@ -1,10 +1,4 @@
-import {
-  type FIELD_SELECT_MODE_VALUES,
-  FIELD_TEXT_TYPES,
-  type FIELD_TEXT_TYPE_VALUES,
-  type FIELD_TYPE_VALUES,
-  type FILE_BUTTON_VARIANT_VALUES,
-} from './constants'
+import type {FIELD_SELECT_MODE_VALUES, FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES, FILE_BUTTON_VARIANT_VALUES} from './constants'
 import type {BriloBlockType} from '~/types'
 
 export type FormFieldType = (typeof FIELD_TYPE_VALUES)[number]

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