@brilo/base-blocks 0.1.41 → 0.1.43

package/src/blocks/form/form-field/edit.tsx

@@ -14,7 +14,7 @@ import {
 } from './constants'
 import {normalizeOptions, serializeOptions, type OptionRow} from './normalizeOptions'
 import {SelectOptionsRepeater} from './SelectOptionsRepeater'
-import {
+import type {
   FormFieldAttributes,
   FormFieldFileButtonVariant,
   FormFieldOptions,

package/src/blocks/form/form-field/types.ts

@@ -1,9 +1,9 @@
 import {
-  FIELD_SELECT_MODE_VALUES,
+  type FIELD_SELECT_MODE_VALUES,
   FIELD_TEXT_TYPES,
-  FIELD_TEXT_TYPE_VALUES,
-  FIELD_TYPE_VALUES,
-  FILE_BUTTON_VARIANT_VALUES,
+  type FIELD_TEXT_TYPE_VALUES,
+  type FIELD_TYPE_VALUES,
+  type FILE_BUTTON_VARIANT_VALUES,
 } from './constants'
 import type {BriloBlockType} from '~/types'
 

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

@@ -1,5 +1,6 @@
 .g-form {
   width: 100%;
+  box-sizing: border-box;
 }
 
 .g-form__fields {

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

@@ -1,4 +1,4 @@
-import {GalleryItemOptions} from './types'
+import type {GalleryItemOptions} from './types'
 
 export type {GalleryItemAttributes, GalleryItemOptions} from './types'
 export {createGalleryItemBlock} from './factory'

package/src/blocks/groups/banner-group/index.ts

@@ -1,4 +1,4 @@
-import {BannerGroupOptions} from '~/blocks/groups/banner-group/types'
+import type {BannerGroupOptions} from '~/blocks/groups/banner-group/types'
 
 export type {BannerGroupAttributes, BannerGroupOptions} from './factory'
 export {createBannerGroupBlock} from './factory'

package/src/blocks/groups/banner-group/types.ts

@@ -1,6 +1,6 @@
 import type {BriloBlockType, Media, OptionArray, StringArray} from '~/types'
-import {DEFAULT_HEADING_STYLES, DEFAULT_VARIANTS} from './constants'
-import {HEADING_LEVELS} from '~/constants'
+import type {DEFAULT_HEADING_STYLES, DEFAULT_VARIANTS} from './constants'
+import type {HEADING_LEVELS} from '~/constants'
 
 export type Variants = (typeof DEFAULT_VARIANTS)[number]['value']
 export type HeadingLevels = (typeof HEADING_LEVELS)[number]

package/src/blocks/groups/basic-header-group/edit.tsx

@@ -33,6 +33,22 @@ export function createBasicHeaderGroupEdit(options: BasicHeaderGroupOptions) {
     return (
       <>
         <InspectorControls>
+          <PanelBody title={__('Overline', 'brilo-blocks')}>
+            <BaseControl label={__('Barva pozadí', 'brilo-blocks')}>
+              <ColorPalette
+                colors={paletteColors}
+                value={overline.background || undefined}
+                onChange={(value) => setAttributes({overline: {...overline, background: value ?? ''}})}
+              />
+            </BaseControl>
+            <BaseControl label={__('Barva textu', 'brilo-blocks')}>
+              <ColorPalette
+                colors={paletteColors}
+                value={overline.color || undefined}
+                onChange={(value) => setAttributes({overline: {...overline, color: value ?? ''}})}
+              />
+            </BaseControl>
+          </PanelBody>
           <PanelBody title={__('Nadpis', 'brilo-blocks')}>
             <ToggleGroupControl
               label={__('Úroveň nadpisu', 'brilo-blocks')}
@@ -81,8 +97,16 @@ export function createBasicHeaderGroupEdit(options: BasicHeaderGroupOptions) {
           <RichText
             tagName="span"
             className="g-header__overline u-text-editable"
+            style={
+              overline.color || overline.background
+                ? {
+                    ...(overline.color ? {color: overline.color} : {}),
+                    ...(overline.background ? {backgroundColor: overline.background} : {}),
+                  }
+                : undefined
+            }
             value={overline.title}
-            onChange={(value) => setAttributes({overline: {title: value}})}
+            onChange={(value) => setAttributes({overline: {...overline, title: value}})}
             placeholder={__('Overline...', 'brilo-blocks')}
             allowedFormats={[]}
           />

package/src/blocks/groups/basic-header-group/factory.tsx

@@ -32,7 +32,7 @@ export function createBasicHeaderGroupBlock<
         type: 'object',
         default: {title: '', level: levels[1] ?? levels[0], style: styles[1] ?? styles[0], color: ''},
       },
-      overline: {type: 'object', default: {title: ''}},
+      overline: {type: 'object', default: {title: '', color: '', background: ''}},
       content: {type: 'string', default: ''},
       textAlign: {
         type: 'string',

package/src/blocks/groups/basic-header-group/types.ts

@@ -11,7 +11,7 @@ export interface BasicHeaderGroupAttributes<
   TAlignment extends string = HeaderAlignment,
 > extends Record<string, unknown> {
   heading: {title: string; level: TLevel; style: TStyle; color?: string}
-  overline: {title: string}
+  overline: {title: string; color?: string; background?: string}
   content: string
   textAlign: TAlignment
 }

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

@@ -41,3 +41,14 @@ export const DEFAULT_GRID_STYLES = [
   {value: '1-1', label: __('Půl na půl', 'brilo-blocks')},
   {value: '2-1', label: __('2/3 + 1/3', 'brilo-blocks')},
 ] as const
+
+export const DEFAULT_IMAGE_CLIP_PATHS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'circle', label: __('Kruh', 'brilo-blocks')},
+  {value: 'triangle', label: __('Trojúhelník', 'brilo-blocks')},
+  {value: 'rhombus', label: __('Kosočtverec', 'brilo-blocks')},
+  {value: 'octagon', label: __('Osmiúhelník', 'brilo-blocks')},
+  {value: 'bevel', label: __('Zkosený', 'brilo-blocks')},
+  {value: 'rabbet', label: __('Drážkovaný', 'brilo-blocks')},
+  {value: 'parallelogram', label: __('Rovnoběžník', 'brilo-blocks')},
+] as const

package/src/blocks/groups/text-and-media-group/edit.tsx

@@ -3,6 +3,7 @@ import {
   BaseControl,
   ColorPalette,
   PanelBody,
+  SelectControl,
   TextControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -20,6 +21,7 @@ import {
   DEFAULT_CONTENT_SIZES,
   DEFAULT_GRID_STYLES,
   DEFAULT_HEADING_STYLES,
+  DEFAULT_IMAGE_CLIP_PATHS,
   DEFAULT_MEDIA_POSITIONS,
   DEFAULT_RATIOS,
   HEADING_LEVELS,
@@ -31,6 +33,7 @@ import type {
   GridStyles,
   HeadingLevels,
   HeadingStyles,
+  ImageClipPaths,
   MediaPositions,
   Ratios,
   TextAndMediaGroupAttributes,
@@ -44,6 +47,7 @@ export function createTextAndMediaGroupEdit(options: TextAndMediaGroupOptions) {
   const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
   const CONTENT_SIZES = options.contentSizes ?? DEFAULT_CONTENT_SIZES
   const CHIP_VARIANTS = options.chipVariants ?? DEFAULT_CHIP_VARIANTS
+  const IMAGE_CLIP_PATHS = options.imageClipPaths ?? DEFAULT_IMAGE_CLIP_PATHS
 
   return function Edit({
     attributes,
@@ -54,6 +58,7 @@ export function createTextAndMediaGroupEdit(options: TextAndMediaGroupOptions) {
   }) {
     const {header, mediaPosition, img, ratio, gridStyle, content} = attributes
     const isMediaLeft = mediaPosition === 'left'
+    const clipPath = img.clipPath ?? 'none'
     const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
@@ -69,7 +74,7 @@ export function createTextAndMediaGroupEdit(options: TextAndMediaGroupOptions) {
     })
 
     const mediaColumn = (
-      <div className="g-text-and-media__media">
+      <div className={clsx('g-text-and-media__media', clipPath !== 'none' && `--clip-path --clip-path-${clipPath}`)}>
         <ImagePickerBody
           value={{id: img.id, alt: img.alt}}
           onChange={(val) => setAttributes({img: {...img, ...val}})}
@@ -86,8 +91,16 @@ export function createTextAndMediaGroupEdit(options: TextAndMediaGroupOptions) {
         <RichText
           tagName="span"
           className="g-text-and-media__overline u-text-editable"
+          style={
+            header.overline.color || header.overline.background
+              ? {
+                  ...(header.overline.color ? {color: header.overline.color} : {}),
+                  ...(header.overline.background ? {backgroundColor: header.overline.background} : {}),
+                }
+              : undefined
+          }
           value={header.overline.title}
-          onChange={(value: string) => setAttributes({header: {...header, overline: {title: value}}})}
+          onChange={(value: string) => setAttributes({header: {...header, overline: {...header.overline, title: value}}})}
           placeholder={__('Overline...', 'brilo-blocks')}
           allowedFormats={[]}
         />
@@ -135,6 +148,12 @@ export function createTextAndMediaGroupEdit(options: TextAndMediaGroupOptions) {
                 <ToggleGroupControlOption key={r.value} value={r.value} label={r.label} />
               ))}
             </ToggleGroupControl>
+            <SelectControl
+              label={__('Tvar výřezu', 'brilo-blocks')}
+              value={clipPath}
+              options={[...IMAGE_CLIP_PATHS]}
+              onChange={(value) => setAttributes({img: {...img, clipPath: value as ImageClipPaths}})}
+            />
             <TextControl
               label={__('URL videa', 'brilo-blocks')}
               value={img.video.src}
@@ -200,6 +219,22 @@ export function createTextAndMediaGroupEdit(options: TextAndMediaGroupOptions) {
               ))}
             </ToggleGroupControl>
           </PanelBody>
+          <PanelBody title={__('Overline', 'brilo-blocks')} initialOpen={false}>
+            <BaseControl label={__('Barva pozadí', 'brilo-blocks')}>
+              <ColorPalette
+                colors={paletteColors}
+                value={header.overline.background || undefined}
+                onChange={(value) => setAttributes({header: {...header, overline: {...header.overline, background: value ?? ''}}})}
+              />
+            </BaseControl>
+            <BaseControl label={__('Barva textu', 'brilo-blocks')}>
+              <ColorPalette
+                colors={paletteColors}
+                value={header.overline.color || undefined}
+                onChange={(value) => setAttributes({header: {...header, overline: {...header.overline, color: value ?? ''}}})}
+              />
+            </BaseControl>
+          </PanelBody>
           <PanelBody title={__('Nadpis', 'brilo-blocks')} initialOpen={false}>
             <ToggleGroupControl
               label={__('Úroveň nadpisu', 'brilo-blocks')}

package/src/blocks/groups/text-and-media-group/editor.scss

@@ -51,6 +51,48 @@
     .c-image-picker-body__preview img {
       aspect-ratio: var(--ratio);
       object-fit: cover;
+      clip-path: var(--image-clip-path, none);
+    }
+
+    &.--clip-path-circle {
+      --image-clip-path: circle(50% at 50% 50%);
+    }
+
+    &.--clip-path-triangle {
+      --image-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+    }
+
+    &.--clip-path-rhombus {
+      --image-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+    }
+
+    &.--clip-path-octagon {
+      --image-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
+    }
+
+    &.--clip-path-bevel {
+      --image-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
+    }
+
+    &.--clip-path-rabbet {
+      --image-clip-path: polygon(
+        0% 15%,
+        15% 15%,
+        15% 0%,
+        85% 0%,
+        85% 15%,
+        100% 15%,
+        100% 85%,
+        85% 85%,
+        85% 100%,
+        15% 100%,
+        15% 85%,
+        0% 85%
+      );
+    }
+
+    &.--clip-path-parallelogram {
+      --image-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
     }
 
     .c-image-picker-body__placeholder {
@@ -65,12 +107,16 @@
   }
 
   .g-text-and-media__overline {
-    display: block;
-    font-size: 12px;
+    display: inline-flex;
+    font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 1px;
-    color: #888;
+    letter-spacing: 1.5px;
+    color: #555;
+    background-color: #f0f0f0;
+    border-radius: 100px;
+    padding: 3px 10px;
+    margin-bottom: 8px;
   }
 
   .g-text-and-media__heading {

package/src/blocks/groups/text-and-media-group/factory.tsx

@@ -7,6 +7,7 @@ import {
   DEFAULT_CONTENT_SIZES,
   DEFAULT_GRID_STYLES,
   DEFAULT_HEADING_STYLES,
+  DEFAULT_IMAGE_CLIP_PATHS,
   DEFAULT_MEDIA_POSITIONS,
   DEFAULT_RATIOS,
   HEADING_LEVELS,
@@ -24,8 +25,9 @@ export function createTextAndMediaGroupBlock<
   THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
   TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
   TChipVariants extends OptionArray = typeof DEFAULT_CHIP_VARIANTS,
+  TImageClipPaths extends OptionArray = typeof DEFAULT_IMAGE_CLIP_PATHS,
 >(
-  options: TextAndMediaGroupOptions<TRatios, TMediaPositions, TGridStyles, THeadingStyles, TContentSizes, TChipVariants>,
+  options: TextAndMediaGroupOptions<TRatios, TMediaPositions, TGridStyles, THeadingStyles, TContentSizes, TChipVariants, TImageClipPaths>,
 ): BlockConfiguration<
   TextAndMediaGroupAttributes<
     TRatios[number]['value'],
@@ -33,7 +35,8 @@ export function createTextAndMediaGroupBlock<
     TGridStyles[number]['value'],
     THeadingStyles[number]['value'],
     TContentSizes[number]['value'],
-    TChipVariants[number]['value']
+    TChipVariants[number]['value'],
+    TImageClipPaths[number]['value']
   >
 > {
   const ratios = options.ratios ?? DEFAULT_RATIOS
@@ -42,6 +45,7 @@ export function createTextAndMediaGroupBlock<
   const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
   const contentSizes = options.contentSizes ?? DEFAULT_CONTENT_SIZES
   const chipVariants = options.chipVariants ?? DEFAULT_CHIP_VARIANTS
+  const imageClipPaths = options.imageClipPaths ?? DEFAULT_IMAGE_CLIP_PATHS
 
   return {
     name: options.name,
@@ -56,7 +60,7 @@ export function createTextAndMediaGroupBlock<
         type: 'object',
         default: {
           heading: {title: '', level: HEADING_LEVELS[1], style: headingStyles[1]?.value ?? headingStyles[0].value, color: ''},
-          overline: {title: ''},
+          overline: {title: '', color: '', background: ''},
         },
       },
       mediaPosition: {
@@ -70,6 +74,7 @@ export function createTextAndMediaGroupBlock<
           id: 0,
           alt: '',
           video: {src: ''},
+          clipPath: imageClipPaths[0].value,
           chip: {title: '', position: 'bottom-right', variant: chipVariants[0].value},
         },
       },
@@ -94,7 +99,8 @@ export function createTextAndMediaGroupBlock<
       TGridStyles[number]['value'],
       THeadingStyles[number]['value'],
       TContentSizes[number]['value'],
-      TChipVariants[number]['value']
+      TChipVariants[number]['value'],
+      TImageClipPaths[number]['value']
     >
   >
 }

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

@@ -5,6 +5,7 @@ import type {
   DEFAULT_CONTENT_SIZES,
   DEFAULT_GRID_STYLES,
   DEFAULT_HEADING_STYLES,
+  DEFAULT_IMAGE_CLIP_PATHS,
   DEFAULT_MEDIA_POSITIONS,
   DEFAULT_RATIOS,
   HEADING_LEVELS,
@@ -18,6 +19,7 @@ export type HeadingLevels = (typeof HEADING_LEVELS)[number]
 export type ContentSizes = (typeof DEFAULT_CONTENT_SIZES)[number]['value']
 export type ChipPositions = (typeof CHIP_POSITIONS)[number]['value']
 export type ChipVariants = (typeof DEFAULT_CHIP_VARIANTS)[number]['value']
+export type ImageClipPaths = (typeof DEFAULT_IMAGE_CLIP_PATHS)[number]['value']
 
 export interface TextAndMediaGroupAttributes<
   TRatio extends string = Ratios,
@@ -26,16 +28,18 @@ export interface TextAndMediaGroupAttributes<
   THeadingStyle extends string = HeadingStyles,
   TContentSize extends string = ContentSizes,
   TChipVariant extends string = ChipVariants,
+  TImageClipPath extends string = ImageClipPaths,
 > extends Record<string, unknown> {
   header: {
     heading: {title: string; level: HeadingLevels; style: THeadingStyle; color?: string}
-    overline: {title: string}
+    overline: {title: string; color?: string; background?: string}
   }
   mediaPosition: TMediaPosition
   img: {
     id: number
     alt: string
     video: {src: string}
+    clipPath: TImageClipPath
     chip: {title: string; position: ChipPositions; variant: TChipVariant}
   }
   ratio: TRatio
@@ -50,6 +54,7 @@ export interface TextAndMediaGroupOptions<
   THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
   TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
   TChipVariants extends OptionArray = typeof DEFAULT_CHIP_VARIANTS,
+  TImageClipPaths extends OptionArray = typeof DEFAULT_IMAGE_CLIP_PATHS,
 > extends BriloBlockType {
   ratios?: TRatios
   mediaPositions?: TMediaPositions
@@ -57,4 +62,5 @@ export interface TextAndMediaGroupOptions<
   headingStyles?: THeadingStyles
   contentSizes?: TContentSizes
   chipVariants?: TChipVariants
+  imageClipPaths?: TImageClipPaths
 }

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

@@ -21,3 +21,11 @@ export const EFFECTS = [
     label: __('Fade', 'brilo-blocks'),
   },
 ] as const
+
+export const DEFAULT_ASPECT_RATIOS = [
+  {value: '5/3', label: __('5:3', 'brilo-blocks')},
+  {value: '8/3', label: __('8:3', 'brilo-blocks')},
+  {value: '16/9', label: __('16:9', 'brilo-blocks')},
+  {value: '21/9', label: __('21:9', 'brilo-blocks')},
+  {value: 'full-height', label: __('Plná výška', 'brilo-blocks')},
+] as const

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

@@ -11,19 +11,25 @@ import {
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {EFFECTS, VARIANTS} from './constants'
-import type {Effect, HeroGroupAttributes, HeroGroupOptions, Variant} from './types'
+import {DEFAULT_ASPECT_RATIOS, EFFECTS, VARIANTS} from './constants'
+import type {AspectRatio, Effect, HeroGroupAttributes, HeroGroupOptions, Variant} from './types'
 
 export function createHeroGroupEdit(options: HeroGroupOptions) {
   const VARIANTS_OPTIONS = options.variants ?? VARIANTS
   const EFFECTS_OPTIONS = options.effects ?? EFFECTS
+  const ASPECT_RATIOS_OPTIONS = options.aspectRatios ?? DEFAULT_ASPECT_RATIOS
 
   return function Edit(props: BlockEditProps<HeroGroupAttributes>) {
     const {attributes, setAttributes} = props
-    const {variant, effect, autoplay, autoplaySpeed, pauseOnHover} = attributes
+    const {variant, effect, autoplay, autoplaySpeed, pauseOnHover, aspectRatio} = attributes
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: clsx(options.blockClassName ?? 'g-hero wp-block-section', `--variant-${variant}`, `--effect-${effect}`),
+      blockClassName: clsx(
+        options.blockClassName ?? 'g-hero wp-block-section',
+        `--variant-${variant}`,
+        `--effect-${effect}`,
+        `--aspect-ratio-${aspectRatio}`,
+      ),
       containerClassName: [options.containerClassName ?? 'g-hero__container'],
       allowedBlocks: options.allowedBlocks,
       orientation: 'horizontal',
@@ -51,6 +57,12 @@ export function createHeroGroupEdit(options: HeroGroupOptions) {
               options={EFFECTS_OPTIONS as any}
               onChange={(v) => setAttributes({effect: v as Effect})}
             />
+            <SelectControl
+              label={__('Poměr stran', 'brilo-blocks')}
+              value={aspectRatio}
+              options={ASPECT_RATIOS_OPTIONS as any}
+              onChange={(v) => setAttributes({aspectRatio: v as AspectRatio})}
+            />
           </PanelBody>
           <PanelBody title={__('Nastavení slideru', 'brilo-blocks')}>
             <ToggleControl

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

@@ -2,7 +2,7 @@ import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import type {OptionArray} from '~/types'
-import {EFFECTS, VARIANTS} from './constants'
+import {DEFAULT_ASPECT_RATIOS, EFFECTS, VARIANTS} from './constants'
 import {createHeroGroupEdit} from './edit'
 import type {HeroGroupAttributes, HeroGroupOptions} from './types'
 import {icon} from './icon'
@@ -12,12 +12,14 @@ export type {HeroGroupAttributes, HeroGroupOptions}
 export function createHeroGroupBlock<
   TVariants extends OptionArray = typeof VARIANTS,
   TEffects extends OptionArray = typeof EFFECTS,
+  TAspectRatio extends OptionArray = typeof DEFAULT_ASPECT_RATIOS,
   TExtra extends Record<string, unknown> = Record<string, never>,
 >(
-  options: HeroGroupOptions<TVariants, TEffects, TExtra>,
-): BlockConfiguration<HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value']> & TExtra> {
+  options: HeroGroupOptions<TVariants, TEffects, TAspectRatio, TExtra>,
+): BlockConfiguration<HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value'], TAspectRatio[number]['value']> & TExtra> {
   const variants = options.variants ?? VARIANTS
   const effects = options.effects ?? EFFECTS
+  const aspectRatios = options.aspectRatios ?? DEFAULT_ASPECT_RATIOS
 
   return {
     name: options.name,
@@ -42,9 +44,16 @@ export function createHeroGroupBlock<
         default: effects[0].value,
         enum: effects.map((e) => e.value),
       },
+      aspectRatio: {
+        type: 'string',
+        default: aspectRatios[1].value,
+        enum: aspectRatios.map((a) => a.value),
+      },
       ...options.extraAttributes,
     },
     edit: createHeroGroupEdit(options as unknown as HeroGroupOptions),
     save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value']> & TExtra>
+  } as unknown as BlockConfiguration<
+    HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value'], TAspectRatio[number]['value']> & TExtra
+  >
 }

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

@@ -2,33 +2,45 @@ import type {BlockEditProps} from '@wordpress/blocks'
 import type {ReactNode} from 'react'
 import type {BriloBlockType, OptionArray} from '~/types'
 import type {HeroSliderItem} from '../hero-item/types'
-import type {EFFECTS, VARIANTS} from './constants'
+import {DEFAULT_ASPECT_RATIOS, EFFECTS, VARIANTS} from './constants'
 
 export type Variant = (typeof VARIANTS)[number]['value']
 export type Effect = (typeof EFFECTS)[number]['value']
+export type AspectRatio = (typeof DEFAULT_ASPECT_RATIOS)[number]['value']
 
-export interface HeroGroupAttributes<TVariant extends string = Variant, TEffect extends string = Effect> extends Record<string, unknown> {
+export interface HeroGroupAttributes<
+  TVariant extends string = Variant,
+  TEffect extends string = Effect,
+  TAspectRatio extends string = AspectRatio,
+> extends Record<string, unknown> {
   items: HeroSliderItem[]
   variant: TVariant
   autoplay: boolean
   autoplaySpeed: number
   pauseOnHover: boolean
   effect: TEffect
+  aspectRatio: TAspectRatio
 }
 
 export interface HeroGroupOptions<
   TVariants extends OptionArray = typeof VARIANTS,
   TEffects extends OptionArray = typeof EFFECTS,
+  TAspectRatio extends OptionArray = typeof DEFAULT_ASPECT_RATIOS,
   TExtra extends Record<string, unknown> = Record<string, never>,
 > extends BriloBlockType {
   allowedBlocks: string[]
   variants?: TVariants
   effects?: TEffects
+  aspectRatios?: TAspectRatio
   extraAttributes?: {
     [K in keyof TExtra]: {
       type: string
       default: TExtra[K]
     }
   }
-  extraControls?: (props: BlockEditProps<HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value']> & TExtra>) => ReactNode
+  extraControls?: (
+    props: BlockEditProps<
+      HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value'], TAspectRatio[number]['value']> & TExtra
+    >,
+  ) => ReactNode
 }

package/src/blocks/hero/hero-item/edit.tsx

@@ -25,7 +25,7 @@ export function createHeroItemEdit(options: HeroItemOptions) {
     attributes: HeroItemAttributes
     setAttributes: (a: Partial<HeroItemAttributes>) => void
   }) {
-    const {title, titleColor, img, headingLevel, contentPosition, url, focalPoint} = attributes
+    const {title, titleColor, img, headingLevel, contentPosition, url, focalPoint, overline} = attributes
     const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
@@ -40,7 +40,7 @@ export function createHeroItemEdit(options: HeroItemOptions) {
     return (
       <>
         <InspectorControls>
-          <PanelBody title={__('Nastavení položky', 'brilo-blocks')}>
+          <PanelBody title={__('Obrázek', 'brilo-blocks')}>
             <ImagePickerControl value={{id: img.id, alt: img.alt}} onChange={(v) => setAttributes({img: {...img, ...v}})} />
 
             <BaseControl label={__('Focal point (desktop)', 'brilo-blocks')}>
@@ -56,7 +56,26 @@ export function createHeroItemEdit(options: HeroItemOptions) {
                 onChange={(v) => setAttributes({focalPoint: {...focalPoint, sm: {point: (v ?? 'center center') as ContentPosition}}})}
               />
             </BaseControl>
+          </PanelBody>
+
+          <PanelBody title={__('Overline', 'brilo-blocks')}>
+            <BaseControl label={__('Barva overline pozadí', 'brilo-blocks')}>
+              <ColorPalette
+                colors={paletteColors}
+                value={overline.background || undefined}
+                onChange={(value) => setAttributes({overline: {...overline, background: value ?? ''}})}
+              />
+            </BaseControl>
+            <BaseControl label={__('Barva overline textu', 'brilo-blocks')}>
+              <ColorPalette
+                colors={paletteColors}
+                value={overline.color || undefined}
+                onChange={(value) => setAttributes({overline: {...overline, color: value ?? ''}})}
+              />
+            </BaseControl>
+          </PanelBody>
 
+          <PanelBody title={__('Nadpis', 'brilo-blocks')}>
             <BaseControl label={__('Barva nadpisu', 'brilo-blocks')}>
               <ColorPalette colors={paletteColors} value={titleColor || undefined} onChange={(v) => setAttributes({titleColor: v ?? ''})} />
             </BaseControl>
@@ -71,11 +90,15 @@ export function createHeroItemEdit(options: HeroItemOptions) {
                 <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
               ))}
             </ToggleGroupControl>
+          </PanelBody>
 
+          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
             <BaseControl label={__('Pozice obsahu', 'brilo-blocks')}>
               <AlignmentMatrixControl value={contentPosition} onChange={(v) => setAttributes({contentPosition: v as ContentPosition})} />
             </BaseControl>
+          </PanelBody>
 
+          <PanelBody title={__('Odkaz', 'brilo-blocks')}>
             <TextControl
               label={__('URL odkazu', 'brilo-blocks')}
               value={url.src}
@@ -98,6 +121,23 @@ export function createHeroItemEdit(options: HeroItemOptions) {
             />
           </div>
           <div className={`i-hero__overlay --${contentPosition.replace(' ', '-')}`}>
+            <RichText
+              tagName="span"
+              className="i-hero__overline u-text-editable"
+              style={
+                overline.color || overline.background
+                  ? {
+                      ...(overline.color ? {color: overline.color} : {}),
+                      ...(overline.background ? {backgroundColor: overline.background} : {}),
+                    }
+                  : undefined
+              }
+              value={overline.title}
+              onChange={(value) => setAttributes({overline: {...overline, title: value}})}
+              placeholder={__('Overline...', 'brilo-blocks')}
+              allowedFormats={[]}
+            />
+
             <RichText
               tagName={`h${headingLevel}` as any}
               className="i-hero__title u-text-editable"