@brilo/base-blocks 0.1.57 → 0.1.60

package/src/blocks/urgency/urgency-item/editor.scss

@@ -0,0 +1,99 @@
+.i-urgency {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .components-notice {
+    margin: 0;
+  }
+}
+
+.i-urgency__card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 16px;
+  border-radius: 8px;
+  background: var(--urgency-background, #f3f4f6);
+  text-align: center;
+
+  &.--text-sm {
+    .i-urgency__label {
+      font-size: 14px;
+    }
+
+    .i-urgency__unit-label {
+      font-size: 12px;
+    }
+  }
+
+  &.--text-lg {
+    .i-urgency__label {
+      font-size: 18px;
+    }
+
+    .i-urgency__unit-label {
+      font-size: 16px;
+    }
+  }
+}
+
+.i-urgency__label {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.i-urgency__countdown {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+
+.i-urgency__unit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 64px;
+  padding: 10px 8px;
+  border-radius: 6px;
+  background: var(--urgency-number-background, #fff);
+}
+
+.i-urgency__number,
+.i-urgency__value {
+  font-size: var(--urgency-number-size, 28px);
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.i-urgency__unit-label {
+  font-size: 14px;
+  color: var(--urgency-text-color, #50575e);
+}
+
+.i-urgency__progress {
+  display: block;
+  width: 240px;
+  max-width: 100%;
+  height: 8px;
+  border-radius: 4px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.i-urgency__progress-fill {
+  display: block;
+  height: 100%;
+  background: #1e2d45;
+}
+
+.i-urgency__number-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
+}

package/src/blocks/urgency/urgency-item/factory.tsx

@@ -0,0 +1,36 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {DEADLINE_DISPLAYS, TEXTS, TEXT_SIZES, TYPES} from './constants'
+import {createUrgencyItemEdit} from './edit'
+import type {UrgencyItemAttributes, UrgencyItemOptions} from './types'
+
+export type {UrgencyItemAttributes, UrgencyItemOptions}
+
+export function createUrgencyItemBlock(options: UrgencyItemOptions): BlockConfiguration<UrgencyItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Naléhavost', 'brilo-blocks'),
+    description:
+      options.description ?? __('Skutečný termín, počet volných míst nebo sezóna. Po vypršení termínu se na webu skryje.', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'clock',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      type: {type: 'string', default: TYPES[0].value, enum: TYPES.map((t) => t.value)},
+      text: {type: 'string', default: TEXTS.countdown},
+      deadline: {type: 'string', default: ''},
+      display: {type: 'string', default: DEADLINE_DISPLAYS[0].value, enum: DEADLINE_DISPLAYS.map((d) => d.value)},
+      remaining: {type: 'number'},
+      total: {type: 'number'},
+      endDate: {type: 'string', default: ''},
+      textSize: {type: 'string', default: TEXT_SIZES[1].value, enum: TEXT_SIZES.map((s) => s.value)},
+      numberSize: {type: 'number'},
+      backgroundColor: {type: 'string', default: ''},
+      numberBackgroundColor: {type: 'string', default: ''},
+      textColor: {type: 'string', default: ''},
+    },
+    edit: createUrgencyItemEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<UrgencyItemAttributes>
+}

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

@@ -0,0 +1,9 @@
+export type {UrgencyItemAttributes, UrgencyItemOptions} from './types'
+export {createUrgencyItemBlock} from './factory'
+
+import type {UrgencyItemOptions} from './types'
+
+export const urgencyItemDefaults: UrgencyItemOptions = {
+  name: 'brilo/urgency-item',
+  parent: ['brilo/base-section', 'brilo/text-and-media-group', 'brilo/text-and-form-text-column', 'brilo/column-item'],
+}

package/src/blocks/urgency/urgency-item/types.ts

@@ -0,0 +1,23 @@
+import type {BriloBlockType} from '~/types'
+import type {DEADLINE_DISPLAYS, TEXT_SIZES, TYPES} from './constants'
+
+export type UrgencyType = (typeof TYPES)[number]['value']
+export type UrgencyDeadlineDisplay = (typeof DEADLINE_DISPLAYS)[number]['value']
+export type UrgencyTextSize = (typeof TEXT_SIZES)[number]['value']
+
+export interface UrgencyItemAttributes extends Record<string, unknown> {
+  type: UrgencyType
+  text: string
+  deadline: string
+  display: UrgencyDeadlineDisplay
+  remaining?: number
+  total?: number
+  endDate: string
+  textSize: UrgencyTextSize
+  numberSize?: number
+  backgroundColor: string
+  numberBackgroundColor: string
+  textColor: string
+}
+
+export interface UrgencyItemOptions extends BriloBlockType {}

package/src/components/EntitySelectModal/EntitySelectModal.tsx

@@ -45,6 +45,12 @@ export type EntitySelectModalConfig<T extends EntityRecord> = {
   modalTitle: string
   emptyLabel: string
   className?: string
+  /**
+   * Keep the reorderable selection inside the modal instead of under the
+   * button — for blocks whose canvas already previews the picked items in
+   * order, where a second list would only repeat them.
+   */
+  listInModal?: boolean
 }
 
 function useEntities<T extends EntityRecord>(endpoint: string) {
@@ -191,19 +197,23 @@ export function createEntitySelectModal<T extends EntityRecord>(config: EntitySe
       onChange(selectedItems.includes(id) ? selectedItems.filter((itemId) => itemId !== id) : [...selectedItems, id])
     }
 
+    const selectedList = (
+      <SelectedOrderList
+        items={selectedEntities}
+        getItemLabel={config.getItemLabel}
+        emptyLabel={config.emptyLabel}
+        onChange={onChange}
+        onRemove={(id) => onChange(selectedItems.filter((itemId) => itemId !== id))}
+      />
+    )
+
     return (
       <VStack spacing={3} className={config.className ?? 'i-event-select-modal'}>
         <Button variant="secondary" icon={plusCircle} onClick={() => setIsOpen(true)}>
           {config.buttonLabel}
         </Button>
 
-        <SelectedOrderList
-          items={selectedEntities}
-          getItemLabel={config.getItemLabel}
-          emptyLabel={config.emptyLabel}
-          onChange={onChange}
-          onRemove={(id) => onChange(selectedItems.filter((itemId) => itemId !== id))}
-        />
+        {!config.listInModal && selectedList}
 
         {isOpen && (
           <Modal title={config.modalTitle} onRequestClose={() => setIsOpen(false)} size="fill">
@@ -236,6 +246,8 @@ export function createEntitySelectModal<T extends EntityRecord>(config: EntitySe
                 />
               </div>
 
+              {config.listInModal && selectedList}
+
               <HStack justify="flex-end">
                 <Button variant="primary" onClick={() => setIsOpen(false)}>
                   {__('Hotovo', 'brilo-blocks')}

package/src/components/GalleryImagesAppender/editor.scss

@@ -0,0 +1,15 @@
+.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;
+  width: 100%;
+  background: none;
+  font: inherit;
+  color: inherit;
+}

package/src/components/GalleryImagesAppender/index.tsx

@@ -0,0 +1,29 @@
+import {MediaUpload} from '@wordpress/block-editor'
+import {createBlock} from '@wordpress/blocks'
+import {useDispatch} from '@wordpress/data'
+import {__} from '@wordpress/i18n'
+
+export function GalleryImagesAppender({clientId, itemBlock}: {clientId: string; itemBlock: string}) {
+  const {insertBlocks} = useDispatch('core/block-editor')
+
+  const onSelectImages = (media: {id: number}[]) => {
+    insertBlocks(
+      media.map((item) => createBlock(itemBlock, {img: {id: item.id}})),
+      undefined,
+      clientId,
+    )
+  }
+
+  return (
+    <MediaUpload
+      onSelect={onSelectImages}
+      multiple="add"
+      allowedTypes={['image']}
+      render={({open}) => (
+        <button type="button" onClick={open} className="g-gallery__appender">
+          {__('Přidat obrázky', 'brilo-blocks')}
+        </button>
+      )}
+    />
+  )
+}

package/src/constants.ts

@@ -18,3 +18,12 @@ export const CONTENT_SIZES = [
   {value: 'default', label: __('Výchozí', 'brilo-blocks')},
   {value: 'lg', label: __('Velká', 'brilo-blocks')},
 ] as const
+
+export const GALLERY_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

package/src/editor.scss

@@ -41,11 +41,13 @@
 @forward "./blocks/person/person-item/editor";
 @forward "./blocks/event/event-calendar-group/editor";
 @forward "./blocks/event/event-list-group/editor";
+@forward "./blocks/food-menu/food-menu-group/editor";
 @forward "./blocks/responsive-grid/responsive-grid-item/editor";
 @forward "./blocks/layout/layout-aside/editor";
 @forward "./blocks/layout/layout-content/editor";
 @forward "./blocks/layout/layout-content-w-aside/editor";
 @forward "./components/IconControl/editor";
+@forward "./components/GalleryImagesAppender/editor";
 @forward "./components/ImagePicker/editor";
 @forward "./components/ItemIconControl/editor";
 @forward "./blocks/priceplan/priceplan-group/editor";
@@ -54,3 +56,6 @@
 @forward "./blocks/video/video-group/editor";
 @forward "./blocks/review/review-group/editor";
 @forward "./blocks/review/review-item/editor";
+@forward "./blocks/review/review-summary-item/editor";
+@forward "./blocks/gallery/gallery-strip-group/editor";
+@forward "./blocks/urgency/urgency-item/editor";

package/src/index.ts

@@ -189,6 +189,13 @@ export {
   DocumentsSelectModal,
   DocumentTermSelectModal,
 } from './blocks/document/documents-grid'
+export type {
+  FoodMenuGroupAttributes,
+  FoodMenuGroupLayout,
+  FoodMenuGroupMode,
+  FoodMenuGroupOptions,
+} from './blocks/food-menu/food-menu-group'
+export {createFoodMenuGroupBlock, foodMenuGroupDefaults, FoodMenuSelectModal} from './blocks/food-menu/food-menu-group'
 export type {LinkItemAttributes, LinkItemIcon, LinkItemOptions} from './blocks/link/link-item'
 export {createLinkItemBlock, linkItemDefaults} from './blocks/link/link-item'
 export type {ContentWithAsideAttributes, ContentWithAsideOptions} from './blocks/layout/layout-content-w-aside'
@@ -263,3 +270,9 @@ export type {ReviewGroupAttributes, ReviewGroupOptions} from './blocks/review/re
 export {createReviewGroupBlock, reviewGroupDefaults} from './blocks/review/review-group'
 export type {ReviewAuthor, ReviewItemAttributes, ReviewItemOptions, ReviewRating} from './blocks/review/review-item'
 export {createReviewItemBlock, reviewItemDefaults} from './blocks/review/review-item'
+export type {ReviewSummaryItemAttributes, ReviewSummaryItemOptions} from './blocks/review/review-summary-item'
+export {createReviewSummaryItemBlock, reviewSummaryItemDefaults} from './blocks/review/review-summary-item'
+export type {GalleryStripGroupAttributes, GalleryStripGroupOptions} from './blocks/gallery/gallery-strip-group'
+export {createGalleryStripGroupBlock, galleryStripGroupDefaults} from './blocks/gallery/gallery-strip-group'
+export type {UrgencyItemAttributes, UrgencyItemOptions} from './blocks/urgency/urgency-item'
+export {createUrgencyItemBlock, urgencyItemDefaults} from './blocks/urgency/urgency-item'

package/src/utils/plural.ts

@@ -0,0 +1,13 @@
+/** Picks the Czech plural form: 1, 2–4, 0 and 5+. `_n` only knows two. */
+export function plural<One extends string, Few extends string, Many extends string>(
+  count: number,
+  one: One,
+  few: Few,
+  many: Many,
+): One | Few | Many {
+  if (count === 1) {
+    return one
+  }
+
+  return count >= 2 && count <= 4 ? few : many
+}