@brilo/base-blocks 0.1.58 → 0.1.61

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/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/components/ImagePicker/ImagePicker.tsx

@@ -25,16 +25,16 @@ interface ImagePickerProps {
   size?: [number, number]
 }
 
+type CoreSelectors = {
+  getEntityRecord: (kind: 'postType', name: 'attachment', id: number) => {source_url?: string; mime_type?: string} | undefined
+}
+
 export function useMediaData(id: number): {url?: string; mimeType?: string} {
   return useSelect(
     (select) => {
       if (!id) return {}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const media = (select('core') as any).getEntityRecord('postType', 'attachment', id)
-      return {
-        url: media?.source_url as string | undefined,
-        mimeType: media?.mime_type as string | undefined,
-      }
+      const media = (select('core') as CoreSelectors).getEntityRecord('postType', 'attachment', id)
+      return {url: media?.source_url, mimeType: media?.mime_type}
     },
     [id],
   )

package/src/components/ItemIconControl/types.d.ts

@@ -1,6 +1,5 @@
 import type {Icon, SelectOption} from '~/types'
 import type {IconType} from '../IconControl/IconControl'
-import {UspIconType} from '~/blocks/usp/usp-item/types'
 
 export interface ItemIconOptions {
   icons: IconType[]

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

@@ -47,6 +47,7 @@
 @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";
@@ -55,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/hooks/useGroupBlock.ts

@@ -37,13 +37,21 @@ export function useGroupBlock({
 }: GroupBlockConfig): GroupBlockResult {
   const blockProps = useBlockProps({className: clsx(blockClassName)})
 
+  // `layout` works at runtime but is missing from the @wordpress/block-editor types
+  const innerBlocksOptions: Parameters<typeof useInnerBlocksProps>[1] & {layout?: GroupBlockConfig['layout']} = {
+    allowedBlocks,
+    template,
+    templateLock,
+    orientation,
+    layout,
+    renderAppender,
+  }
   const innerBlocksProps = useInnerBlocksProps(
     {
       className: clsx(containerClassName),
       ...(containerStyle && {style: containerStyle}),
     },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    {allowedBlocks, template, templateLock, orientation, layout, renderAppender} as any,
+    innerBlocksOptions,
   )
 
   return {

package/src/index.ts

@@ -196,6 +196,8 @@ export type {
   FoodMenuGroupOptions,
 } from './blocks/food-menu/food-menu-group'
 export {createFoodMenuGroupBlock, foodMenuGroupDefaults, FoodMenuSelectModal} from './blocks/food-menu/food-menu-group'
+export type {FoodReservationAttributes, FoodReservationOptions} from './blocks/food-menu/food-reservation'
+export {createFoodReservationBlock, foodReservationDefaults} from './blocks/food-menu/food-reservation'
 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'
@@ -270,3 +272,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'