@brilo/base-blocks 0.1.58 → 0.1.60

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);
+  }
+}

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

@@ -0,0 +1,32 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
+import {DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, SPEEDS} from './constants'
+import {createGalleryStripGroupEdit} from './edit'
+import type {GalleryStripGroupAttributes, GalleryStripGroupOptions} from './types'
+
+export type {GalleryStripGroupAttributes, GalleryStripGroupOptions}
+
+export function createGalleryStripGroupBlock(options: GalleryStripGroupOptions): BlockConfiguration<GalleryStripGroupAttributes> {
+  const ratios = options.ratios ?? DEFAULT_RATIOS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Pás obrázků', 'brilo-blocks'),
+    description: options.description ?? __('Nekonečně se posouvající pás obrázků', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'images-alt2',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      height: {type: 'string', default: HEIGHTS[1].value, enum: HEIGHTS.map((h) => h.value)},
+      ratio: {type: 'string', default: ratios[0].value, enum: ratios.map((r) => r.value)},
+      speed: {type: 'string', default: SPEEDS[1].value, enum: SPEEDS.map((s) => s.value)},
+      direction: {type: 'string', default: DIRECTIONS[0].value, enum: DIRECTIONS.map((d) => d.value)},
+      ...ITEM_SPACING_ATTRIBUTE,
+    },
+    edit: createGalleryStripGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<GalleryStripGroupAttributes>
+}

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

@@ -0,0 +1,11 @@
+export type {GalleryStripGroupAttributes, GalleryStripGroupOptions} from './types'
+export {createGalleryStripGroupBlock} from './factory'
+
+import type {GalleryStripGroupOptions} from './types'
+
+export const galleryStripGroupDefaults: GalleryStripGroupOptions = {
+  name: 'brilo/gallery-strip-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/gallery-item'],
+  template: [],
+}

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

@@ -0,0 +1,20 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, SPEEDS} from './constants'
+
+export type GalleryStripHeight = (typeof HEIGHTS)[number]['value']
+export type GalleryStripSpeed = (typeof SPEEDS)[number]['value']
+export type GalleryStripRatio = (typeof DEFAULT_RATIOS)[number]['value']
+export type GalleryStripDirection = (typeof DIRECTIONS)[number]['value']
+
+export interface GalleryStripGroupAttributes extends Record<string, unknown> {
+  height: GalleryStripHeight
+  ratio: GalleryStripRatio
+  speed: GalleryStripSpeed
+  direction: GalleryStripDirection
+  spacing?: number
+}
+
+export interface GalleryStripGroupOptions extends BriloBlockType {
+  allowedBlocks: string[]
+  ratios?: OptionArray
+}

package/src/blocks/groups/text-and-media-group/index.ts

@@ -15,5 +15,7 @@ export const textAndMediaGroupDefaults: TextAndMediaGroupOptions = {
     'core/heading',
     'core/list',
     'core/paragraph',
+    'brilo/review-summary-item',
+    'brilo/urgency-item',
   ],
 }

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

@@ -6,5 +6,5 @@ import type {HeroItemOptions} from './types'
 export const heroItemDefaults: HeroItemOptions = {
   name: 'brilo/hero-item',
   parent: ['brilo/hero-group'],
-  allowedBlocks: ['core/list', 'core/paragraph', 'brilo/button-group'],
+  allowedBlocks: ['core/list', 'core/paragraph', 'brilo/button-group', 'brilo/review-summary-item'],
 }

package/src/blocks/review/review-summary-item/constants.ts

@@ -0,0 +1,2 @@
+export const RATING_MAX = 5
+export const RATING_STEP = 0.1

package/src/blocks/review/review-summary-item/edit.tsx

@@ -0,0 +1,86 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, RangeControl, TextControl, ToggleControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import type {CSSProperties} from 'react'
+import {RATING_MAX, RATING_STEP} from './constants'
+import type {ReviewSummaryItemAttributes, ReviewSummaryItemOptions} from './types'
+
+const roundToHalf = (value: number) => Math.round(value * 2) / 2
+
+export function createReviewSummaryItemEdit(options: ReviewSummaryItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ReviewSummaryItemAttributes
+    setAttributes: (a: Partial<ReviewSummaryItemAttributes>) => void
+  }) {
+    const {rating, count, countLabel, showMax, description} = attributes
+    const hasRating = typeof rating === 'number'
+    const hasCount = typeof count === 'number' && count > 0
+
+    const blockProps = useBlockProps({className: clsx(options.blockClassName ?? 'i-review-summary-item wp-block-section')})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Hodnocení', 'brilo-blocks')}>
+            <RangeControl
+              label={__('Průměrné hodnocení', 'brilo-blocks')}
+              help={__('Bez hodnoty se hvězdičky ani číslo nezobrazí.', 'brilo-blocks')}
+              value={rating}
+              onChange={(v) => setAttributes({rating: v})}
+              min={0}
+              max={RATING_MAX}
+              step={RATING_STEP}
+              allowReset
+              withInputField
+            />
+            <ToggleControl label={__('Zobrazit „/ 5"', 'brilo-blocks')} checked={showMax} onChange={(v) => setAttributes({showMax: v})} />
+            <TextControl
+              type="number"
+              min={0}
+              label={__('Počet recenzí', 'brilo-blocks')}
+              help={__('Při nule nebo prázdné hodnotě se počet nezobrazí.', 'brilo-blocks')}
+              value={typeof count === 'number' ? String(count) : ''}
+              onChange={(v) => setAttributes({count: v === '' ? undefined : Math.max(0, Number.parseInt(v, 10) || 0)})}
+            />
+            <TextControl label={__('Popisek počtu', 'brilo-blocks')} value={countLabel} onChange={(v) => setAttributes({countLabel: v})} />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-review-summary-item__score">
+            {hasRating && (
+              <>
+                <span
+                  className="i-review-summary-item__stars"
+                  style={{'--rating-fill': `${(roundToHalf(rating) / RATING_MAX) * 100}%`} as CSSProperties}
+                >
+                  ★★★★★
+                </span>
+                <strong className="i-review-summary-item__value">
+                  {rating.toLocaleString(undefined, {minimumFractionDigits: 1, maximumFractionDigits: 1})}
+                  {showMax && ` / ${RATING_MAX}`}
+                </strong>
+              </>
+            )}
+            {hasCount && <span className="i-review-summary-item__count">{`${count} ${countLabel}`}</span>}
+            {!hasRating && !hasCount && (
+              <span className="i-review-summary-item__placeholder">{__('Nastavte hodnocení v postranním panelu', 'brilo-blocks')}</span>
+            )}
+          </div>
+          <RichText
+            tagName="p"
+            className="i-review-summary-item__description u-text-editable"
+            value={description}
+            onChange={(v) => setAttributes({description: v})}
+            placeholder={__('Popis hodnocení...', 'brilo-blocks')}
+            allowedFormats={['core/bold', 'core/italic', 'core/link', 'brilo-blocks/text-color']}
+          />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/review/review-summary-item/editor.scss

@@ -0,0 +1,44 @@
+.i-review-summary-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.i-review-summary-item__score {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.i-review-summary-item__stars {
+  position: relative;
+  display: inline-block;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: 2px;
+  color: #d0d5dd;
+
+  &::before {
+    content: "★★★★★";
+    position: absolute;
+    inset: 0;
+    width: var(--rating-fill, 0%);
+    overflow: hidden;
+    color: #1e2d45;
+  }
+}
+
+.i-review-summary-item__value {
+  font-size: 18px;
+}
+
+.i-review-summary-item__count,
+.i-review-summary-item__placeholder {
+  font-size: 14px;
+  color: #50575e;
+}
+
+.i-review-summary-item__description {
+  margin: 0;
+}

package/src/blocks/review/review-summary-item/factory.tsx

@@ -0,0 +1,27 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createReviewSummaryItemEdit} from './edit'
+import type {ReviewSummaryItemAttributes, ReviewSummaryItemOptions} from './types'
+
+export type {ReviewSummaryItemAttributes, ReviewSummaryItemOptions}
+
+export function createReviewSummaryItemBlock(options: ReviewSummaryItemOptions): BlockConfiguration<ReviewSummaryItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Souhrn hodnocení', 'brilo-blocks'),
+    description: options.description ?? __('Průměrné hodnocení hvězdičkami s počtem recenzí a popisem', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'star-half',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      rating: {type: 'number'},
+      count: {type: 'number'},
+      countLabel: {type: 'string', default: __('hodnocení', 'brilo-blocks')},
+      showMax: {type: 'boolean', default: false},
+      description: {type: 'string', default: ''},
+    },
+    edit: createReviewSummaryItemEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<ReviewSummaryItemAttributes>
+}

package/src/blocks/review/review-summary-item/index.ts

@@ -0,0 +1,9 @@
+export type {ReviewSummaryItemAttributes, ReviewSummaryItemOptions} from './types'
+export {createReviewSummaryItemBlock} from './factory'
+
+import type {ReviewSummaryItemOptions} from './types'
+
+export const reviewSummaryItemDefaults: ReviewSummaryItemOptions = {
+  name: 'brilo/review-summary-item',
+  parent: ['brilo/base-section', 'brilo/text-and-media-group', 'brilo/hero-item'],
+}

package/src/blocks/review/review-summary-item/types.ts

@@ -0,0 +1,11 @@
+import type {BriloBlockType} from '~/types'
+
+export interface ReviewSummaryItemAttributes extends Record<string, unknown> {
+  rating?: number
+  count?: number
+  countLabel: string
+  showMax: boolean
+  description: string
+}
+
+export interface ReviewSummaryItemOptions extends BriloBlockType {}

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

@@ -0,0 +1,39 @@
+import {__} from '@wordpress/i18n'
+
+export {CONTENT_SIZES as TEXT_SIZES} from '~/constants'
+
+export const TYPES = [
+  {value: 'deadline', label: __('Termín', 'brilo-blocks')},
+  {value: 'capacity', label: __('Volná místa', 'brilo-blocks')},
+  {value: 'season', label: __('Sezóna', 'brilo-blocks')},
+] as const
+
+export const DEADLINE_DISPLAYS = [
+  {value: 'countdown', label: __('Odpočet', 'brilo-blocks')},
+  {value: 'date', label: __('Datum', 'brilo-blocks')},
+] as const
+
+export const TEXTS = {
+  countdown: __('Nabídka končí za', 'brilo-blocks'),
+  date: __('Nabídka platí do', 'brilo-blocks'),
+  capacity: __('Zbývá volných míst', 'brilo-blocks'),
+  season: __('Nabídka platí pouze tuto sezónu', 'brilo-blocks'),
+} as const
+
+export const COUNTDOWN_UNITS = [
+  {key: 'days', label: __('dní', 'brilo-blocks')},
+  {key: 'hours', label: __('hod', 'brilo-blocks')},
+  {key: 'minutes', label: __('min', 'brilo-blocks')},
+  {key: 'seconds', label: __('sek', 'brilo-blocks')},
+] as const
+
+export const NUMBER_SIZE_MIN = 16
+export const NUMBER_SIZE_MAX = 120
+
+export const NUMBER_SIZE_PRESETS = [
+  {value: 32, label: __('XS', 'brilo-blocks')},
+  {value: 40, label: __('SM', 'brilo-blocks')},
+  {value: 48, label: __('MD', 'brilo-blocks')},
+  {value: 60, label: __('LG', 'brilo-blocks')},
+  {value: 72, label: __('XL', 'brilo-blocks')},
+] as const