@brilo/base-blocks 0.1.64 → 0.1.65

package/build/blocks/gallery/gallery-strip-group/constants.d.ts

@@ -1,3 +1,10 @@
+export declare const VARIANTS: readonly [{
+    readonly value: 'default';
+    readonly label: import("@wordpress/i18n").TransformedText<"Výchozí">;
+}, {
+    readonly value: 'full-width';
+    readonly label: import("@wordpress/i18n").TransformedText<"Na plnou šířku">;
+}];
 export declare const HEIGHTS: readonly [{
     readonly value: 'sm';
     readonly label: import("@wordpress/i18n").TransformedText<"Malá">;
@@ -8,16 +15,17 @@ export declare const HEIGHTS: readonly [{
     readonly value: 'lg';
     readonly label: import("@wordpress/i18n").TransformedText<"Velká">;
 }];
-export declare const SPEEDS: readonly [{
-    readonly value: 'slow';
-    readonly label: import("@wordpress/i18n").TransformedText<"Pomalu">;
-}, {
-    readonly value: 'medium';
-    readonly label: import("@wordpress/i18n").TransformedText<"Středně">;
-}, {
-    readonly value: 'fast';
-    readonly label: import("@wordpress/i18n").TransformedText<"Rychle">;
-}];
+export declare const SPEED_MIN = 10;
+export declare const SPEED_MAX = 200;
+export declare const SPEED_DEFAULT = 60;
+export declare const LEGACY_SPEEDS: {
+    readonly slow: 30;
+    readonly medium: 60;
+    readonly fast: 100;
+};
+export declare const MOBILE_SLOWDOWN_MIN = 1;
+export declare const MOBILE_SLOWDOWN_MAX = 3;
+export declare const MOBILE_SLOWDOWN_DEFAULT = 1.5;
 export declare const DIRECTIONS: readonly [{
     readonly value: 'left';
     readonly label: import("@wordpress/i18n").TransformedText<"Doleva">;

package/build/blocks/gallery/gallery-strip-group/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/gallery/gallery-strip-group/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;aACjB,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,IAAI;aAAE,KAAK;EACX,CAAA;AAEV,eAAO,MAAM,MAAM;aAChB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,QAAQ;aAAE,KAAK;;aACtB,KAAK,EAAE,MAAM;aAAE,KAAK;EACb,CAAA;AAEV,eAAO,MAAM,UAAU;aACpB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,OAAO;aAAE,KAAK;EACd,CAAA;AAEV,OAAO,EAAC,cAAc,IAAI,cAAc,EAAC,MAAM,aAAa,CAAA;AAE5D,eAAO,MAAM,aAAa;aAAI,EAAE,EAAE,GAAG;aAAE,EAAE,EAAE,GAAG;aAAE,EAAE,EAAE,GAAG;CAAU,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/gallery/gallery-strip-group/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;aAClB,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,YAAY;aAAE,KAAK;EACnB,CAAA;AAEV,eAAO,MAAM,OAAO;aACjB,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,IAAI;aAAE,KAAK;EACX,CAAA;AAEV,eAAO,MAAM,SAAS,KAAK,CAAA;AAC3B,eAAO,MAAM,SAAS,MAAM,CAAA;AAC5B,eAAO,MAAM,aAAa,KAAK,CAAA;AAG/B,eAAO,MAAM,aAAa;aAAI,IAAI,EAAE,EAAE;aAAE,MAAM,EAAE,EAAE;aAAE,IAAI,EAAE,GAAG;CAAU,CAAA;AAEvE,eAAO,MAAM,mBAAmB,IAAI,CAAA;AACpC,eAAO,MAAM,mBAAmB,IAAI,CAAA;AACpC,eAAO,MAAM,uBAAuB,MAAM,CAAA;AAE1C,eAAO,MAAM,UAAU;aACpB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,OAAO;aAAE,KAAK;EACd,CAAA;AAEV,OAAO,EAAC,cAAc,IAAI,cAAc,EAAC,MAAM,aAAa,CAAA;AAE5D,eAAO,MAAM,aAAa;aAAI,EAAE,EAAE,GAAG;aAAE,EAAE,EAAE,GAAG;aAAE,EAAE,EAAE,GAAG;CAAU,CAAA"}

package/build/blocks/gallery/gallery-strip-group/constants.js

@@ -1,14 +1,21 @@
 import { __ } from '@wordpress/i18n';
+export const VARIANTS = [
+    { value: 'default', label: __('Výchozí', 'brilo-blocks') },
+    { value: 'full-width', label: __('Na plnou šířku', 'brilo-blocks') },
+];
 export const HEIGHTS = [
     { value: 'sm', label: __('Malá', 'brilo-blocks') },
     { value: 'md', label: __('Střední', 'brilo-blocks') },
     { value: 'lg', label: __('Velká', 'brilo-blocks') },
 ];
-export const SPEEDS = [
-    { value: 'slow', label: __('Pomalu', 'brilo-blocks') },
-    { value: 'medium', label: __('Středně', 'brilo-blocks') },
-    { value: 'fast', label: __('Rychle', 'brilo-blocks') },
-];
+export const SPEED_MIN = 10;
+export const SPEED_MAX = 200;
+export const SPEED_DEFAULT = 60;
+// Blocks saved before the numeric speed store these presets in `speed`.
+export const LEGACY_SPEEDS = { slow: 30, medium: 60, fast: 100 };
+export const MOBILE_SLOWDOWN_MIN = 1;
+export const MOBILE_SLOWDOWN_MAX = 3;
+export const MOBILE_SLOWDOWN_DEFAULT = 1.5;
 export const DIRECTIONS = [
     { value: 'left', label: __('Doleva', 'brilo-blocks') },
     { value: 'right', label: __('Doprava', 'brilo-blocks') },

package/build/blocks/gallery/gallery-strip-group/edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/gallery/gallery-strip-group/edit.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAEV,2BAA2B,EAC3B,wBAAwB,EAIzB,MAAM,SAAS,CAAA;AAEhB,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,wBAAwB,8CAOxE;IACD,UAAU,EAAE,2BAA2B,CAAA;IACvC,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,KAAK,IAAI,CAAA;IAChE,QAAQ,EAAE,MAAM,CAAA;CACjB,iCA+EF"}
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/gallery/gallery-strip-group/edit.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAEV,2BAA2B,EAC3B,wBAAwB,EAIzB,MAAM,SAAS,CAAA;AAEhB,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,wBAAwB,8CAOxE;IACD,UAAU,EAAE,2BAA2B,CAAA;IACvC,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,KAAK,IAAI,CAAA;IAChE,QAAQ,EAAE,MAAM,CAAA;CACjB,iCAyGF"}

package/build/blocks/gallery/gallery-strip-group/edit.js

@@ -1,23 +1,24 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, } from '@wordpress/components';
+import { PanelBody, RangeControl, ToggleControl, __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 { DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, HEIGHT_PIXELS, LEGACY_SPEEDS, MOBILE_SLOWDOWN_DEFAULT, MOBILE_SLOWDOWN_MAX, MOBILE_SLOWDOWN_MIN, SPEED_DEFAULT, SPEED_MAX, SPEED_MIN, VARIANTS, } from './constants';
 export function createGalleryStripGroupEdit(options) {
     var _a;
     const RATIOS = (_a = options.ratios) !== null && _a !== void 0 ? _a : DEFAULT_RATIOS;
     return function Edit({ attributes, setAttributes, clientId, }) {
-        var _a, _b, _c;
-        const { height, ratio, speed, direction, spacing } = attributes;
+        var _a, _b, _c, _d;
+        const { variant, height, ratio, speed, mobileSlowdown, direction, pauseOnHover, lightbox, spacing } = attributes;
         const heightPx = (_a = HEIGHT_PIXELS[height]) !== null && _a !== void 0 ? _a : HEIGHT_PIXELS.md;
         const [ratioWidth, ratioHeight] = ratio.split(':').map(Number);
+        const speedValue = typeof speed === 'number' ? speed : ((_b = LEGACY_SPEEDS[speed]) !== null && _b !== void 0 ? _b : SPEED_DEFAULT);
         const { blockProps, innerBlocksProps } = useGroupBlock({
-            blockClassName: clsx((_b = options.blockClassName) !== null && _b !== void 0 ? _b : 'g-gallery g-gallery-strip wp-block-section', `--speed-${speed}`, `--direction-${direction}`),
-            containerClassName: (_c = options.containerClassName) !== null && _c !== void 0 ? _c : 'g-gallery-strip__track',
+            blockClassName: clsx((_c = options.blockClassName) !== null && _c !== void 0 ? _c : 'g-gallery g-gallery-strip wp-block-section', `--direction-${direction}`),
+            containerClassName: (_d = options.containerClassName) !== null && _d !== void 0 ? _d : 'g-gallery-strip__track',
             containerStyle: {
                 '--gallery-strip-height': `${heightPx}px`,
                 '--gallery-strip-item-width': `${Math.round((heightPx * ratioWidth) / ratioHeight)}px`,
@@ -29,6 +30,6 @@ export function createGalleryStripGroupEdit(options) {
             template: options.template,
             layout: { type: 'default' },
         });
-        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsxs(PanelBody, { title: __('Rozložení', 'brilo-blocks'), children: [_jsx(ToggleGroupControl, { isBlock: true, label: __('Výška', 'brilo-blocks'), value: height, onChange: (v) => setAttributes({ height: v }), children: HEIGHTS.map((h) => (_jsx(ToggleGroupControlOption, { value: h.value, label: h.label }, h.value))) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Poměr stran', 'brilo-blocks'), value: ratio, onChange: (v) => setAttributes({ ratio: v }), children: RATIOS.map((r) => (_jsx(ToggleGroupControlOption, { value: r.value, label: r.label }, r.value))) })] }), _jsxs(PanelBody, { title: __('Animace', 'brilo-blocks'), children: [_jsx(ToggleGroupControl, { isBlock: true, label: __('Rychlost', 'brilo-blocks'), value: speed, onChange: (v) => setAttributes({ speed: v }), children: SPEEDS.map((s) => (_jsx(ToggleGroupControlOption, { value: s.value, label: s.label }, s.value))) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Směr', 'brilo-blocks'), value: direction, onChange: (v) => setAttributes({ direction: v }), children: DIRECTIONS.map((d) => (_jsx(ToggleGroupControlOption, { value: d.value, label: d.label }, d.value))) })] }), _jsx(ItemSpacingPanel, { spacing: spacing, onChange: (v) => setAttributes({ spacing: v }) })] }), _jsx("div", { ...blockProps, children: _jsx("div", { ...innerBlocksProps }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsxs(PanelBody, { title: __('Rozložení', 'brilo-blocks'), children: [_jsx(ToggleGroupControl, { isBlock: true, label: __('Šířka', 'brilo-blocks'), value: variant, onChange: (v) => setAttributes({ variant: v }), children: VARIANTS.map((v) => (_jsx(ToggleGroupControlOption, { value: v.value, label: v.label }, v.value))) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Výška', 'brilo-blocks'), value: height, onChange: (v) => setAttributes({ height: v }), children: HEIGHTS.map((h) => (_jsx(ToggleGroupControlOption, { value: h.value, label: h.label }, h.value))) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Poměr stran', 'brilo-blocks'), value: ratio, onChange: (v) => setAttributes({ ratio: v }), children: RATIOS.map((r) => (_jsx(ToggleGroupControlOption, { value: r.value, label: r.label }, r.value))) })] }), _jsxs(PanelBody, { title: __('Animace', 'brilo-blocks'), children: [_jsx(RangeControl, { label: __('Rychlost (px/s)', 'brilo-blocks'), value: speedValue, onChange: (v) => setAttributes({ speed: v !== null && v !== void 0 ? v : SPEED_DEFAULT }), min: SPEED_MIN, max: SPEED_MAX, step: 5 }), _jsx(RangeControl, { label: __('Zpomalení na mobilu', 'brilo-blocks'), help: __('Násobek doby posunu na menších displejích (1 = stejně rychle jako na desktopu).', 'brilo-blocks'), value: mobileSlowdown, onChange: (v) => setAttributes({ mobileSlowdown: v !== null && v !== void 0 ? v : MOBILE_SLOWDOWN_DEFAULT }), min: MOBILE_SLOWDOWN_MIN, max: MOBILE_SLOWDOWN_MAX, step: 0.1 }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Směr', 'brilo-blocks'), value: direction, onChange: (v) => setAttributes({ direction: v }), children: DIRECTIONS.map((d) => (_jsx(ToggleGroupControlOption, { value: d.value, label: d.label }, d.value))) }), _jsx(ToggleControl, { label: __('Pozastavit při najetí myší', 'brilo-blocks'), checked: pauseOnHover, onChange: (v) => setAttributes({ pauseOnHover: v }) })] }), _jsx(PanelBody, { title: __('Galerie', 'brilo-blocks'), children: _jsx(ToggleControl, { label: __('Po kliknutí otevřít galerii', 'brilo-blocks'), checked: lightbox, onChange: (v) => setAttributes({ lightbox: v }) }) }), _jsx(ItemSpacingPanel, { spacing: spacing, onChange: (v) => setAttributes({ spacing: v }) })] }), _jsx("div", { ...blockProps, children: _jsx("div", { ...innerBlocksProps }) })] }));
     };
 }

package/build/blocks/gallery/gallery-strip-group/factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/gallery/gallery-strip-group/factory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAKzD,OAAO,KAAK,EAAC,2BAA2B,EAAE,wBAAwB,EAAC,MAAM,SAAS,CAAA;AAElF,YAAY,EAAC,2BAA2B,EAAE,wBAAwB,EAAC,CAAA;AAEnE,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,wBAAwB,GAAG,kBAAkB,CAAC,2BAA2B,CAAC,CAqB/H"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/gallery/gallery-strip-group/factory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAKzD,OAAO,KAAK,EAAC,2BAA2B,EAAE,wBAAwB,EAAC,MAAM,SAAS,CAAA;AAElF,YAAY,EAAC,2BAA2B,EAAE,wBAAwB,EAAC,CAAA;AAEnE,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,wBAAwB,GAAG,kBAAkB,CAAC,2BAA2B,CAAC,CAyB/H"}

package/build/blocks/gallery/gallery-strip-group/factory.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { InnerBlocks } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { ITEM_SPACING_ATTRIBUTE } from '../../../components/ItemSpacingControl';
-import { DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, SPEEDS } from './constants';
+import { DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, MOBILE_SLOWDOWN_DEFAULT, SPEED_DEFAULT, VARIANTS } from './constants';
 import { createGalleryStripGroupEdit } from './edit';
 export function createGalleryStripGroupBlock(options) {
     var _a, _b, _c, _d, _e;
@@ -16,10 +16,14 @@ export function createGalleryStripGroupBlock(options) {
         icon: (_e = options.icon) !== null && _e !== void 0 ? _e : 'images-alt2',
         supports: { html: false, customClassName: false },
         attributes: {
+            variant: { type: 'string', default: VARIANTS[0].value, enum: VARIANTS.map((v) => v.value) },
             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) },
+            speed: { type: ['number', 'string'], default: SPEED_DEFAULT },
+            mobileSlowdown: { type: 'number', default: MOBILE_SLOWDOWN_DEFAULT },
             direction: { type: 'string', default: DIRECTIONS[0].value, enum: DIRECTIONS.map((d) => d.value) },
+            pauseOnHover: { type: 'boolean', default: false },
+            lightbox: { type: 'boolean', default: false },
             ...ITEM_SPACING_ATTRIBUTE,
         },
         edit: createGalleryStripGroupEdit(options),

package/build/blocks/gallery/gallery-strip-group/types.d.ts

@@ -1,14 +1,19 @@
 import type { BriloBlockType, OptionArray } from '../../../types';
-import type { DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, SPEEDS } from './constants';
+import type { DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, LEGACY_SPEEDS, VARIANTS } from './constants';
+export type GalleryStripVariant = (typeof VARIANTS)[number]['value'];
 export type GalleryStripHeight = (typeof HEIGHTS)[number]['value'];
-export type GalleryStripSpeed = (typeof SPEEDS)[number]['value'];
+export type GalleryStripLegacySpeed = keyof typeof LEGACY_SPEEDS;
 export type GalleryStripRatio = (typeof DEFAULT_RATIOS)[number]['value'];
 export type GalleryStripDirection = (typeof DIRECTIONS)[number]['value'];
 export interface GalleryStripGroupAttributes extends Record<string, unknown> {
+    variant: GalleryStripVariant;
     height: GalleryStripHeight;
     ratio: GalleryStripRatio;
-    speed: GalleryStripSpeed;
+    speed: number | GalleryStripLegacySpeed;
+    mobileSlowdown: number;
     direction: GalleryStripDirection;
+    pauseOnHover: boolean;
+    lightbox: boolean;
     spacing?: number;
 }
 export interface GalleryStripGroupOptions extends BriloBlockType {

package/build/blocks/gallery/gallery-strip-group/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/gallery/gallery-strip-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACxD,OAAO,KAAK,EAAC,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAC,MAAM,aAAa,CAAA;AAE5E,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAClE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAChE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AACxE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAExE,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,MAAM,EAAE,kBAAkB,CAAA;IAC1B,KAAK,EAAE,iBAAiB,CAAA;IACxB,KAAK,EAAE,iBAAiB,CAAA;IACxB,SAAS,EAAE,qBAAqB,CAAA;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,aAAa,EAAE,MAAM,EAAE,CAAA;IACvB,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/gallery/gallery-strip-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACxD,OAAO,KAAK,EAAC,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAA;AAE7F,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AACpE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAClE,MAAM,MAAM,uBAAuB,GAAG,MAAM,OAAO,aAAa,CAAA;AAChE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AACxE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAExE,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,OAAO,EAAE,mBAAmB,CAAA;IAC5B,MAAM,EAAE,kBAAkB,CAAA;IAC1B,KAAK,EAAE,iBAAiB,CAAA;IACxB,KAAK,EAAE,MAAM,GAAG,uBAAuB,CAAA;IACvC,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,qBAAqB,CAAA;IAChC,YAAY,EAAE,OAAO,CAAA;IACrB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,aAAa,EAAE,MAAM,EAAE,CAAA;IACvB,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brilo/base-blocks",
-  "version": "0.1.64",
+  "version": "0.1.65",
   "author": "Brilo",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",

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

@@ -1,16 +1,26 @@
 import {__} from '@wordpress/i18n'
 
+export const VARIANTS = [
+  {value: 'default', label: __('Výchozí', 'brilo-blocks')},
+  {value: 'full-width', label: __('Na plnou šířku', 'brilo-blocks')},
+] as const
+
 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 SPEED_MIN = 10
+export const SPEED_MAX = 200
+export const SPEED_DEFAULT = 60
+
+// Blocks saved before the numeric speed store these presets in `speed`.
+export const LEGACY_SPEEDS = {slow: 30, medium: 60, fast: 100} as const
+
+export const MOBILE_SLOWDOWN_MIN = 1
+export const MOBILE_SLOWDOWN_MAX = 3
+export const MOBILE_SLOWDOWN_DEFAULT = 1.5
 
 export const DIRECTIONS = [
   {value: 'left', label: __('Doleva', 'brilo-blocks')},

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

@@ -1,6 +1,8 @@
 import {InspectorControls} from '@wordpress/block-editor'
 import {
   PanelBody,
+  RangeControl,
+  ToggleControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
@@ -9,14 +11,27 @@ 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 {
+  DEFAULT_RATIOS,
+  DIRECTIONS,
+  HEIGHTS,
+  HEIGHT_PIXELS,
+  LEGACY_SPEEDS,
+  MOBILE_SLOWDOWN_DEFAULT,
+  MOBILE_SLOWDOWN_MAX,
+  MOBILE_SLOWDOWN_MIN,
+  SPEED_DEFAULT,
+  SPEED_MAX,
+  SPEED_MIN,
+  VARIANTS,
+} from './constants'
 import type {
   GalleryStripDirection,
   GalleryStripGroupAttributes,
   GalleryStripGroupOptions,
   GalleryStripHeight,
   GalleryStripRatio,
-  GalleryStripSpeed,
+  GalleryStripVariant,
 } from './types'
 
 export function createGalleryStripGroupEdit(options: GalleryStripGroupOptions) {
@@ -31,16 +46,13 @@ export function createGalleryStripGroupEdit(options: GalleryStripGroupOptions) {
     setAttributes: (a: Partial<GalleryStripGroupAttributes>) => void
     clientId: string
   }) {
-    const {height, ratio, speed, direction, spacing} = attributes
+    const {variant, height, ratio, speed, mobileSlowdown, direction, pauseOnHover, lightbox, spacing} = attributes
     const heightPx = HEIGHT_PIXELS[height] ?? HEIGHT_PIXELS.md
     const [ratioWidth, ratioHeight] = ratio.split(':').map(Number)
+    const speedValue = typeof speed === 'number' ? speed : (LEGACY_SPEEDS[speed] ?? SPEED_DEFAULT)
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: clsx(
-        options.blockClassName ?? 'g-gallery g-gallery-strip wp-block-section',
-        `--speed-${speed}`,
-        `--direction-${direction}`,
-      ),
+      blockClassName: clsx(options.blockClassName ?? 'g-gallery g-gallery-strip wp-block-section', `--direction-${direction}`),
       containerClassName: options.containerClassName ?? 'g-gallery-strip__track',
       containerStyle: {
         '--gallery-strip-height': `${heightPx}px`,
@@ -58,6 +70,16 @@ export function createGalleryStripGroupEdit(options: GalleryStripGroupOptions) {
       <>
         <InspectorControls>
           <PanelBody title={__('Rozložení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Šířka', 'brilo-blocks')}
+              value={variant}
+              onChange={(v) => setAttributes({variant: v as GalleryStripVariant})}
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
             <ToggleGroupControl
               isBlock
               label={__('Výška', 'brilo-blocks')}
@@ -80,16 +102,23 @@ export function createGalleryStripGroupEdit(options: GalleryStripGroupOptions) {
             </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>
+            <RangeControl
+              label={__('Rychlost (px/s)', 'brilo-blocks')}
+              value={speedValue}
+              onChange={(v) => setAttributes({speed: v ?? SPEED_DEFAULT})}
+              min={SPEED_MIN}
+              max={SPEED_MAX}
+              step={5}
+            />
+            <RangeControl
+              label={__('Zpomalení na mobilu', 'brilo-blocks')}
+              help={__('Násobek doby posunu na menších displejích (1 = stejně rychle jako na desktopu).', 'brilo-blocks')}
+              value={mobileSlowdown}
+              onChange={(v) => setAttributes({mobileSlowdown: v ?? MOBILE_SLOWDOWN_DEFAULT})}
+              min={MOBILE_SLOWDOWN_MIN}
+              max={MOBILE_SLOWDOWN_MAX}
+              step={0.1}
+            />
             <ToggleGroupControl
               isBlock
               label={__('Směr', 'brilo-blocks')}
@@ -100,6 +129,18 @@ export function createGalleryStripGroupEdit(options: GalleryStripGroupOptions) {
                 <ToggleGroupControlOption key={d.value} value={d.value} label={d.label} />
               ))}
             </ToggleGroupControl>
+            <ToggleControl
+              label={__('Pozastavit při najetí myší', 'brilo-blocks')}
+              checked={pauseOnHover}
+              onChange={(v) => setAttributes({pauseOnHover: v})}
+            />
+          </PanelBody>
+          <PanelBody title={__('Galerie', 'brilo-blocks')}>
+            <ToggleControl
+              label={__('Po kliknutí otevřít galerii', 'brilo-blocks')}
+              checked={lightbox}
+              onChange={(v) => setAttributes({lightbox: v})}
+            />
           </PanelBody>
           <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>

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

@@ -2,7 +2,7 @@ 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 {DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, MOBILE_SLOWDOWN_DEFAULT, SPEED_DEFAULT, VARIANTS} from './constants'
 import {createGalleryStripGroupEdit} from './edit'
 import type {GalleryStripGroupAttributes, GalleryStripGroupOptions} from './types'
 
@@ -20,10 +20,14 @@ export function createGalleryStripGroupBlock(options: GalleryStripGroupOptions):
     icon: options.icon ?? 'images-alt2',
     supports: {html: false, customClassName: false},
     attributes: {
+      variant: {type: 'string', default: VARIANTS[0].value, enum: VARIANTS.map((v) => v.value)},
       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)},
+      speed: {type: ['number', 'string'], default: SPEED_DEFAULT},
+      mobileSlowdown: {type: 'number', default: MOBILE_SLOWDOWN_DEFAULT},
       direction: {type: 'string', default: DIRECTIONS[0].value, enum: DIRECTIONS.map((d) => d.value)},
+      pauseOnHover: {type: 'boolean', default: false},
+      lightbox: {type: 'boolean', default: false},
       ...ITEM_SPACING_ATTRIBUTE,
     },
     edit: createGalleryStripGroupEdit(options),

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

@@ -1,16 +1,21 @@
 import type {BriloBlockType, OptionArray} from '~/types'
-import type {DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, SPEEDS} from './constants'
+import type {DEFAULT_RATIOS, DIRECTIONS, HEIGHTS, LEGACY_SPEEDS, VARIANTS} from './constants'
 
+export type GalleryStripVariant = (typeof VARIANTS)[number]['value']
 export type GalleryStripHeight = (typeof HEIGHTS)[number]['value']
-export type GalleryStripSpeed = (typeof SPEEDS)[number]['value']
+export type GalleryStripLegacySpeed = keyof typeof LEGACY_SPEEDS
 export type GalleryStripRatio = (typeof DEFAULT_RATIOS)[number]['value']
 export type GalleryStripDirection = (typeof DIRECTIONS)[number]['value']
 
 export interface GalleryStripGroupAttributes extends Record<string, unknown> {
+  variant: GalleryStripVariant
   height: GalleryStripHeight
   ratio: GalleryStripRatio
-  speed: GalleryStripSpeed
+  speed: number | GalleryStripLegacySpeed
+  mobileSlowdown: number
   direction: GalleryStripDirection
+  pauseOnHover: boolean
+  lightbox: boolean
   spacing?: number
 }