@brilo/base-blocks 0.1.43 → 0.1.45

package/src/blocks/step/step-group/edit.tsx

@@ -7,6 +7,7 @@ import {
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
+import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import type {OptionArray} from '~/types'
 import type {StepGroupAttributes, StepGroupOptions, StepVariant} from './types'
@@ -22,12 +23,12 @@ export function createStepGroupEdit<TVariants extends OptionArray = typeof DEFAU
     attributes: StepGroupAttributes
     setAttributes: (a: Partial<StepGroupAttributes>) => void
   }) {
-    const {variant, disableIcon} = attributes
+    const {variant, disableIcon, spacing} = attributes
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(options.blockClassName ?? 'g-step wp-block-section', `--variant-${variant}`, disableIcon && '--disable-icon'),
       containerClassName: [options.containerClassName ?? 'g-step__container', 'u-grid-responsive', '--cols-3'],
-      containerStyle: {'--grid-max-col-count': 3},
+      containerStyle: {'--grid-max-col-count': 3, ...itemSpacingStyle(spacing)},
       allowedBlocks: options.allowedBlocks,
       orientation: 'horizontal',
       template: options.template,
@@ -54,6 +55,7 @@ export function createStepGroupEdit<TVariants extends OptionArray = typeof DEFAU
               onChange={(v) => setAttributes({disableIcon: v})}
             />
           </PanelBody>
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

package/src/blocks/step/step-group/factory.tsx

@@ -5,6 +5,7 @@ import {DEFAULT_VARIANTS} from './constants'
 import {createStepGroupEdit} from './edit'
 import type {StepGroupAttributes, StepGroupOptions} from './types'
 import {icon} from '~/blocks/step/step-group/icon'
+import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
 import type {OptionArray} from '~/types'
 
 export function createStepGroupBlock<TVariants extends OptionArray = typeof DEFAULT_VARIANTS>(
@@ -29,6 +30,7 @@ export function createStepGroupBlock<TVariants extends OptionArray = typeof DEFA
         type: 'boolean',
         default: false,
       },
+      ...ITEM_SPACING_ATTRIBUTE,
     },
     edit: createStepGroupEdit(options as unknown as StepGroupOptions),
     save: () => <InnerBlocks.Content />,

package/src/blocks/step/step-group/types.ts

@@ -6,6 +6,7 @@ export type StepVariant = (typeof DEFAULT_VARIANTS)[number]['value']
 export interface StepGroupAttributes<TVariant extends string = StepVariant> extends Record<string, unknown> {
   variant: TVariant
   disableIcon: boolean
+  spacing?: number
 }
 
 export interface StepGroupOptions<TVariants extends OptionArray = typeof DEFAULT_VARIANTS> extends BriloBlockType {

package/src/blocks/text-and-form/text-and-form-text-column/index.ts

@@ -14,5 +14,6 @@ export const textAndFormTextColumnDefaults: TextAndFormTextColumnOptions = {
     'core/heading',
     'core/list',
     'core/paragraph',
+    'brilo/list-group',
   ],
 }

package/src/blocks/usp/usp-group/edit.tsx

@@ -11,6 +11,7 @@ import {
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
+import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import {
@@ -89,7 +90,7 @@ export function createUspGroupEdit(options: UspGroupOptions) {
     attributes: UspGroupAttributes
     setAttributes: (a: Partial<UspGroupAttributes>) => void
   }) {
-    const {columns, headingSettings, content, style} = attributes
+    const {columns, headingSettings, content, style, spacing} = attributes
     const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
@@ -100,7 +101,7 @@ export function createUspGroupEdit(options: UspGroupOptions) {
         style.shadow !== 'none' && `--shadow-${style.shadow}`,
       ),
       containerClassName: [options.containerClassName ?? 'u-grid-responsive', `--cols-${columns}`],
-      containerStyle: {'--grid-max-col-count': columns},
+      containerStyle: {'--grid-max-col-count': columns, ...itemSpacingStyle(spacing)},
       allowedBlocks: options.allowedBlocks,
       orientation: 'horizontal',
       template: options.template,
@@ -285,6 +286,7 @@ export function createUspGroupEdit(options: UspGroupOptions) {
               />
             )}
           </PanelBody>
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

package/src/blocks/usp/usp-group/factory.tsx

@@ -1,6 +1,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 type {NumberArray, OptionArray} from '~/types'
 import {
   DEFAULT_ALIGNMENTS,
@@ -91,6 +92,7 @@ export function createUspGroupBlock<
           },
         },
       },
+      ...ITEM_SPACING_ATTRIBUTE,
     },
     edit: createUspGroupEdit(options as unknown as UspGroupOptions),
     save: () => <InnerBlocks.Content />,

package/src/blocks/usp/usp-group/types.ts

@@ -55,6 +55,7 @@ export interface UspGroupAttributes<
       borderWidth: number
     }
   }
+  spacing?: number
 }
 
 export interface UspGroupOptions<

package/src/blocks/video/video-group/constants.ts

@@ -9,3 +9,5 @@ export const SIZES = [
   {value: 'md', label: __('Střední', 'brilo-blocks')},
   {value: 'lg', label: __('Velký', 'brilo-blocks')},
 ] as const
+
+export const DEFAULT_OVERLAY_COLOR = 'rgba(0, 0, 0, 0.25)'

package/src/blocks/video/video-group/edit.tsx

@@ -1,7 +1,9 @@
 import {InspectorControls, MediaUpload, MediaUploadCheck, RichText, useBlockProps} from '@wordpress/block-editor'
 import type {BlockEditProps} from '@wordpress/blocks'
 import {
+  BaseControl,
   Button,
+  ColorPalette,
   PanelBody,
   TextControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -9,7 +11,8 @@ import {
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
-import {SIZES, VIDEO_TYPES} from './constants'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {DEFAULT_OVERLAY_COLOR, SIZES, VIDEO_TYPES} from './constants'
 import type {VideoGroupAttributes, VideoGroupOptions, VideoSize, VideoType} from './types'
 
 function extractYoutubeId(url: string): string | null {
@@ -19,7 +22,8 @@ function extractYoutubeId(url: string): string | null {
 
 export function createVideoGroupEdit(_options: VideoGroupOptions) {
   return function VideoGroupEdit({attributes, setAttributes}: BlockEditProps<VideoGroupAttributes>) {
-    const {type, url, mediaId, caption, size, poster} = attributes
+    const {type, url, mediaId, caption, size, poster, playButtonTitle, overlayColor} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const youtubeId = type === 'youtube' ? extractYoutubeId(url) : null
     const youtubeThumbnail = youtubeId ? `https://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg` : null
@@ -42,6 +46,13 @@ export function createVideoGroupEdit(_options: VideoGroupOptions) {
                 <ToggleGroupControlOption key={t.value} value={t.value} label={t.label} />
               ))}
             </ToggleGroupControl>
+
+            <TextControl
+              label={__('Text tlačítka přehrát', 'brilo-blocks')}
+              value={playButtonTitle}
+              onChange={(value) => setAttributes({playButtonTitle: value})}
+              placeholder={__('Přehrát video', 'brilo-blocks')}
+            />
           </PanelBody>
 
           {type === 'youtube' && (
@@ -85,6 +96,24 @@ export function createVideoGroupEdit(_options: VideoGroupOptions) {
             </MediaUploadCheck>
           </PanelBody>
 
+          <PanelBody title={__('Barevná vrstva', 'brilo-blocks')} initialOpen={false}>
+            <BaseControl
+              label={__('Barva překrytí náhledu', 'brilo-blocks')}
+              help={__('Ztmaví náhled videa, aby tlačítko přehrát více vyniklo. Výchozí je černá s 25% průhledností.', 'brilo-blocks')}
+            >
+              <ColorPalette
+                colors={paletteColors}
+                value={overlayColor || undefined}
+                onChange={(value) => setAttributes({overlayColor: value ?? ''})}
+                enableAlpha
+                clearable
+              />
+            </BaseControl>
+            <Button onClick={() => setAttributes({overlayColor: DEFAULT_OVERLAY_COLOR})} variant="tertiary" size="small">
+              {__('Obnovit výchozí barvu', 'brilo-blocks')}
+            </Button>
+          </PanelBody>
+
           <PanelBody title={__('Rozložení', 'brilo-blocks')} initialOpen={false}>
             <ToggleGroupControl
               label={__('Velikost', 'brilo-blocks')}
@@ -105,6 +134,7 @@ export function createVideoGroupEdit(_options: VideoGroupOptions) {
               youtubeThumbnail ? (
                 <div className="g-video__youtube-preview">
                   <img src={youtubeThumbnail} alt="" />
+                  <div className="g-video__overlay" style={overlayColor ? {backgroundColor: overlayColor} : undefined} />
                   <div className="g-video__play-icon" />
                 </div>
               ) : (
@@ -128,6 +158,7 @@ export function createVideoGroupEdit(_options: VideoGroupOptions) {
                         <video src={url} poster={poster?.src || undefined}>
                           <track kind="captions" />
                         </video>
+                        <div className="g-video__overlay" style={overlayColor ? {backgroundColor: overlayColor} : undefined} />
                         <Button onClick={open} variant="primary" className="g-video__change-btn">
                           {__('Změnit video', 'brilo-blocks')}
                         </Button>

package/src/blocks/video/video-group/editor.scss

@@ -23,13 +23,18 @@
   }
 }
 
+.g-video__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
 .g-video__play-icon {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.2);
   pointer-events: none;
 
   &::after {

package/src/blocks/video/video-group/factory.tsx

@@ -1,6 +1,6 @@
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
-import {SIZES, VIDEO_TYPES} from './constants'
+import {DEFAULT_OVERLAY_COLOR, SIZES, VIDEO_TYPES} from './constants'
 import {createVideoGroupEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {VideoGroupAttributes, VideoGroupOptions} from './types'
@@ -44,6 +44,14 @@ export function createVideoGroupBlock(options: VideoGroupOptions): BlockConfigur
           id: 0,
         },
       },
+      playButtonTitle: {
+        type: 'string',
+        default: __('Přehrát video', 'brilo-blocks'),
+      },
+      overlayColor: {
+        type: 'string',
+        default: DEFAULT_OVERLAY_COLOR,
+      },
     },
     edit: createVideoGroupEdit(options),
     save: () => null,

package/src/blocks/video/video-group/types.ts

@@ -16,6 +16,8 @@ export interface VideoGroupAttributes extends Record<string, unknown> {
   caption: string
   size: VideoSize
   poster: VideoPoster
+  playButtonTitle: string
+  overlayColor: string
 }
 
 export interface VideoGroupOptions extends BriloBlockType {}

package/src/components/ItemSpacingControl/index.tsx

@@ -0,0 +1,59 @@
+import {PanelBody, RangeControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+
+export const ITEM_SPACING_MIN = 0
+export const ITEM_SPACING_MAX = 48
+export const ITEM_SPACING_STEP = 4
+
+const ITEM_SPACING_MARKS = [
+  {value: 0, label: '0'},
+  {value: 8, label: '8'},
+  {value: 16, label: '16'},
+  {value: 24, label: '24'},
+  {value: 32, label: '32'},
+  {value: 40, label: '40'},
+  {value: 48, label: '48'},
+]
+
+/**
+ * Shared `spacing` attribute for group blocks. Intentionally has no `default`,
+ * so an unset value means "keep the block's default gap-* class".
+ */
+export const ITEM_SPACING_ATTRIBUTE = {
+  spacing: {type: 'number'},
+} as const
+
+/**
+ * Editor container style fragment. Returns `undefined` when spacing is unset so
+ * the block keeps its default gap. Spread into an existing `containerStyle`.
+ */
+export function itemSpacingStyle(spacing: number | undefined): Record<string, string> | undefined {
+  return typeof spacing === 'number' ? {gap: `${spacing}px`} : undefined
+}
+
+export function ItemSpacingPanel({
+  spacing,
+  onChange,
+  initialOpen = false,
+}: {
+  spacing: number | undefined
+  onChange: (spacing: number | undefined) => void
+  initialOpen?: boolean
+}) {
+  return (
+    <PanelBody title={__('Mezery', 'brilo-blocks')} initialOpen={initialOpen}>
+      <RangeControl
+        label={__('Mezera mezi položkami (px)', 'brilo-blocks')}
+        help={__('Není-li nastaveno, použije se výchozí mezera bloku.', 'brilo-blocks')}
+        value={spacing}
+        onChange={onChange}
+        min={ITEM_SPACING_MIN}
+        max={ITEM_SPACING_MAX}
+        step={ITEM_SPACING_STEP}
+        marks={ITEM_SPACING_MARKS}
+        allowReset
+        withInputField
+      />
+    </PanelBody>
+  )
+}

package/src/editor.scss

@@ -10,6 +10,7 @@
 @forward "./blocks/contact/contact-item/editor";
 @forward "./blocks/core/basic-button/editor";
 @forward "./blocks/core/basic-heading/editor";
+@forward "./blocks/core/basic-icon/editor";
 @forward "./blocks/core/basic-overline/editor";
 @forward "./blocks/faq/faq-group/editor";
 @forward "./blocks/faq/faq-item/editor";
@@ -34,6 +35,8 @@
 @forward "./blocks/text-and-form/text-and-form-text-column/editor";
 @forward "./blocks/usp/usp-group/editor";
 @forward "./blocks/usp/usp-item/editor";
+@forward "./blocks/list/list-group/editor";
+@forward "./blocks/list/list-item/editor";
 @forward "./blocks/person/person-group/editor";
 @forward "./blocks/person/person-item/editor";
 @forward "./blocks/event/event-calendar-group/editor";

package/src/index.ts

@@ -48,6 +48,13 @@ export type {BasicHeadingAttributes, BasicHeadingOptions} from './blocks/core/ba
 export {basicHeadingDefaults, createBasicHeadingBlock} from './blocks/core/basic-heading'
 export type {BasicOverlineAttributes, BasicOverlineOptions} from './blocks/core/basic-overline'
 export {basicOverlineDefaults, createBasicOverlineBlock} from './blocks/core/basic-overline'
+export type {
+  BasicIconAlignment,
+  BasicIconAttributes,
+  BasicIconBackgroundShape,
+  BasicIconOptions,
+} from './blocks/core/basic-icon'
+export {basicIconDefaults, createBasicIconBlock} from './blocks/core/basic-icon'
 export type {HeroItemAttributes, HeroItemOptions} from './blocks/hero/hero-item'
 export {createHeroItemBlock, heroItemDefaults} from './blocks/hero/hero-item'
 export type {HeroGroupAttributes, HeroGroupOptions} from './blocks/hero/hero-group'
@@ -72,6 +79,10 @@ export type {UspGroupAttributes, UspGroupOptions} from './blocks/usp/usp-group'
 export {createUspGroupBlock, uspGroupDefaults} from './blocks/usp/usp-group'
 export type {UspItemAttributes, UspItemOptions} from './blocks/usp/usp-item'
 export {createUspItemBlock, uspItemDefaults} from './blocks/usp/usp-item'
+export type {ListContentSize, ListGroupAttributes, ListGroupOptions} from './blocks/list/list-group'
+export {createListGroupBlock, listGroupDefaults} from './blocks/list/list-group'
+export type {ListBulletShape, ListItemAttributes, ListItemOptions} from './blocks/list/list-item'
+export {createListItemBlock, listItemDefaults} from './blocks/list/list-item'
 export type {GalleryGroupAttributes, GalleryGroupOptions} from './blocks/gallery/gallery-group'
 export {createGalleryGroupBlock, galleryGroupDefaults} from './blocks/gallery/gallery-group'
 export type {GalleryItemAttributes, GalleryItemOptions} from './blocks/gallery/gallery-item'