@brilo/base-blocks 0.1.42 → 0.1.44

package/src/blocks/core/basic-icon/factory.tsx

@@ -0,0 +1,42 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {DEFAULT_ALIGNMENTS, DEFAULT_ICON_BACKGROUND_SHAPES, DEFAULT_ICON_BACKGROUND_SIZE, DEFAULT_ICON_SIZE, ICON_TYPES} from './constants'
+import {createBasicIconEdit} from './edit'
+import type {BasicIconAttributes, BasicIconOptions} from './types'
+
+export type {BasicIconAttributes, BasicIconOptions}
+
+export function createBasicIconBlock(options: BasicIconOptions): BlockConfiguration<BasicIconAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Ikona', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'star-filled',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      icon: {
+        type: 'object',
+        default: {type: ICON_TYPES[0].value, src: '', media: {id: 0, alt: ''}},
+      },
+      style: {
+        type: 'object',
+        default: {
+          align: DEFAULT_ALIGNMENTS[0].value,
+          icon: {
+            size: DEFAULT_ICON_SIZE,
+            color: '',
+            background: '',
+            backgroundSize: DEFAULT_ICON_BACKGROUND_SIZE,
+            backgroundShape: DEFAULT_ICON_BACKGROUND_SHAPES[0].value,
+            borderColor: '',
+            borderWidth: 1,
+          },
+        },
+      },
+    },
+    edit: createBasicIconEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<BasicIconAttributes>
+}

package/src/blocks/core/basic-icon/index.ts

@@ -0,0 +1,17 @@
+export type {
+  BasicIconAlignment,
+  BasicIconAttributes,
+  BasicIconBackgroundShape,
+  BasicIconOptions,
+  BasicIconStyle,
+} from './types'
+export {createBasicIconBlock} from './factory'
+
+import type {BasicIconOptions} from './types'
+
+export const basicIconDefaults: BasicIconOptions = {
+  name: 'brilo/basic-icon',
+  parent: ['brilo/base-section'],
+  icons: [],
+  iconsSrc: '',
+}

package/src/blocks/core/basic-icon/types.ts

@@ -0,0 +1,34 @@
+import type {IconType} from '~/components/IconControl'
+import type {BriloBlockType, Icon} from '~/types'
+import type {DEFAULT_ALIGNMENTS, DEFAULT_ICON_BACKGROUND_SHAPES} from './constants'
+
+export type BasicIconAlignment = (typeof DEFAULT_ALIGNMENTS)[number]['value']
+export type BasicIconBackgroundShape = (typeof DEFAULT_ICON_BACKGROUND_SHAPES)[number]['value']
+
+export interface BasicIconSizePreset {
+  value: number
+  label: string
+}
+
+export interface BasicIconStyle {
+  align: BasicIconAlignment
+  icon: {
+    size: number
+    color: string
+    background: string
+    backgroundSize: number
+    backgroundShape: BasicIconBackgroundShape
+    borderColor: string
+    borderWidth: number
+  }
+}
+
+export interface BasicIconAttributes extends Record<string, unknown> {
+  icon: Icon
+  style: BasicIconStyle
+}
+
+export interface BasicIconOptions extends BriloBlockType {
+  icons: IconType[]
+  iconsSrc: string
+}

package/src/blocks/core/basic-overline/edit.tsx

@@ -17,6 +17,14 @@ export function createBasicOverlineEdit(options: BasicOverlineOptions) {
         <RichText
           tagName="span"
           className="i-overline__text u-text-editable"
+          style={
+            attributes.color || attributes.background
+              ? {
+                  ...(attributes.color ? {color: attributes.color} : {}),
+                  ...(attributes.background ? {backgroundColor: attributes.background} : {}),
+                }
+              : undefined
+          }
           value={attributes.title}
           onChange={(value) => setAttributes({title: value})}
           placeholder={__('Overline...', 'brilo-blocks')}

package/src/blocks/core/basic-overline/factory.tsx

@@ -15,6 +15,8 @@ export function createBasicOverlineBlock(options: BasicOverlineOptions): BlockCo
     icon: options.icon ?? 'text',
     attributes: {
       title: {type: 'string', default: ''},
+      color: {type: 'string', default: ''},
+      background: {type: 'string', default: ''},
     },
     edit: createBasicOverlineEdit(options),
     save: () => null,

package/src/blocks/core/basic-overline/types.ts

@@ -1,7 +1,9 @@
-import {BriloBlockType} from '~/types'
+import type {BriloBlockType} from '~/types'
 
 export interface BasicOverlineAttributes extends Record<string, unknown> {
   title: string
+  color?: string
+  background?: string
 }
 
 export interface BasicOverlineOptions extends BriloBlockType {}

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

@@ -9,3 +9,21 @@ export const DEFAULT_ICON_VARIANTS = [
   {value: 'info', label: __('Informace', 'brilo-blocks')},
   {value: 'message', label: __('Zpráva', 'brilo-blocks')},
 ] as const
+
+export const DEFAULT_SHADOWS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'sm', label: __('Malý', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_SIZE = 24
+export const ICON_SIZE_MIN = 12
+export const ICON_SIZE_MAX = 64
+
+export const DEFAULT_ICON_SIZE_PRESETS = [
+  {value: 16, label: __('XS', 'brilo-blocks')},
+  {value: 20, label: __('SM', 'brilo-blocks')},
+  {value: 24, label: __('MD', 'brilo-blocks')},
+  {value: 32, label: __('LG', 'brilo-blocks')},
+  {value: 40, label: __('XL', 'brilo-blocks')},
+] as const

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

@@ -1,12 +1,60 @@
 import {InspectorControls} from '@wordpress/block-editor'
-import {PanelBody, SelectControl} from '@wordpress/components'
+import {
+  BaseControl,
+  Button,
+  ColorPalette,
+  PanelBody,
+  RangeControl,
+  SelectControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
-import type {FaqGroupAttributes, FaqGroupOptions, FaqHeadingLevel, FaqIconVariant} from './types'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {
+  DEFAULT_ICON_SIZE_PRESETS,
+  DEFAULT_ICON_VARIANTS,
+  DEFAULT_SHADOWS,
+  FAQ_HEADING_LEVELS,
+  ICON_SIZE_MAX,
+  ICON_SIZE_MIN,
+} from './constants'
+import type {FaqGroupAttributes, FaqGroupOptions, FaqHeadingLevel, FaqIconVariant, FaqShadow, FaqSizePreset} from './types'
+
+function PresetSizeControl({
+  label,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
+  label: string
+  value: number
+  presets: readonly FaqSizePreset[]
+  min: number
+  max: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <BaseControl label={label} id={`faq-group-size-${label}`}>
+      <div style={{display: 'flex', gap: 4, marginBottom: 8, flexWrap: 'wrap'}}>
+        {presets.map((p) => (
+          <Button key={p.label} variant={value === p.value ? 'primary' : 'secondary'} size="small" onClick={() => onChange(p.value)}>
+            {p.label}
+          </Button>
+        ))}
+      </div>
+      <RangeControl value={value} onChange={(v) => onChange(v ?? min)} min={min} max={max} step={1} withInputField />
+    </BaseControl>
+  )
+}
 
 export function createFaqGroupEdit(options: FaqGroupOptions) {
   const ICON_VARIANTS = options.iconVariants ?? DEFAULT_ICON_VARIANTS
+  const ICON_SIZE_PRESETS = options.iconSizePresets ?? DEFAULT_ICON_SIZE_PRESETS
+  const exclude = options.exclude ?? []
 
   return function Edit({
     attributes,
@@ -15,7 +63,8 @@ export function createFaqGroupEdit(options: FaqGroupOptions) {
     attributes: FaqGroupAttributes
     setAttributes: (a: Partial<FaqGroupAttributes>) => void
   }) {
-    const {headingLevel, iconVariant} = attributes
+    const {headingLevel, iconVariant, style} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: options.blockClassName ?? 'g-faq wp-block-section',
@@ -44,7 +93,72 @@ export function createFaqGroupEdit(options: FaqGroupOptions) {
               options={ICON_VARIANTS.map((v) => ({value: v.value, label: v.label}))}
               onChange={(value) => setAttributes({iconVariant: value as FaqIconVariant})}
             />
+            {!exclude.includes('colors') && style && (
+              <>
+                <PresetSizeControl
+                  label={__('Velikost', 'brilo-blocks')}
+                  value={style.icon.size}
+                  presets={ICON_SIZE_PRESETS}
+                  min={ICON_SIZE_MIN}
+                  max={ICON_SIZE_MAX}
+                  onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, size: v}}})}
+                />
+                <BaseControl label={__('Barva', 'brilo-blocks')} id="faq-group-icon-color">
+                  <ColorPalette
+                    colors={paletteColors}
+                    value={style.icon.color || undefined}
+                    onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, color: value ?? ''}}})}
+                  />
+                </BaseControl>
+                <BaseControl label={__('Pozadí', 'brilo-blocks')} id="faq-group-icon-background-color">
+                  <ColorPalette
+                    colors={paletteColors}
+                    value={style.icon.background || undefined}
+                    onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, background: value ?? ''}}})}
+                  />
+                </BaseControl>
+              </>
+            )}
           </PanelBody>
+          {!exclude.includes('colors') && style && (
+            <PanelBody title={__('Styl', 'brilo-blocks')}>
+              <ToggleGroupControl
+                isBlock
+                label={__('Stín', 'brilo-blocks')}
+                value={style.shadow}
+                onChange={(v) => setAttributes({style: {...style, shadow: v as FaqShadow}})}
+              >
+                {DEFAULT_SHADOWS.map((s) => (
+                  <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+                ))}
+              </ToggleGroupControl>
+              <BaseControl
+                label={__('Barva okraje', 'brilo-blocks')}
+                help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+                id="faq-group-border-color"
+              >
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.borderColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, borderColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva pozadí', 'brilo-blocks')} id="faq-group-background-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.backgroundColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, backgroundColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva textu', 'brilo-blocks')} id="faq-group-text-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.textColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
+                />
+              </BaseControl>
+            </PanelBody>
+          )}
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

package/src/blocks/faq/faq-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 {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
+import {DEFAULT_ICON_SIZE, DEFAULT_ICON_VARIANTS, DEFAULT_SHADOWS, FAQ_HEADING_LEVELS} from './constants'
 import {createFaqGroupEdit} from './edit'
 import type {FaqGroupAttributes, FaqGroupOptions} from './types'
 
@@ -12,6 +12,37 @@ export function createFaqGroupBlock<TIconVariants extends OptionArray = typeof D
   options: FaqGroupOptions<TIconVariants>,
 ): BlockConfiguration<FaqGroupAttributes<TIconVariants[number]['value']>> {
   const iconVariants = options.iconVariants ?? DEFAULT_ICON_VARIANTS
+  const exclude = options.exclude ?? []
+
+  const attributes: Record<string, unknown> = {
+    headingLevel: {
+      type: 'string',
+      default: FAQ_HEADING_LEVELS[1],
+      enum: [...FAQ_HEADING_LEVELS],
+    },
+    iconVariant: {
+      type: 'string',
+      default: iconVariants[1]?.value ?? iconVariants[0].value,
+      enum: iconVariants.map((v) => v.value),
+    },
+  }
+
+  if (!exclude.includes('colors')) {
+    attributes.style = {
+      type: 'object',
+      default: {
+        shadow: DEFAULT_SHADOWS[0].value,
+        borderColor: '',
+        backgroundColor: '',
+        textColor: '',
+        icon: {
+          color: '',
+          background: '',
+          size: DEFAULT_ICON_SIZE,
+        },
+      },
+    }
+  }
 
   return {
     name: options.name,
@@ -21,18 +52,7 @@ export function createFaqGroupBlock<TIconVariants extends OptionArray = typeof D
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? 'editor-help',
     supports: {html: false, customClassName: false},
-    attributes: {
-      headingLevel: {
-        type: 'string',
-        default: FAQ_HEADING_LEVELS[1],
-        enum: [...FAQ_HEADING_LEVELS],
-      },
-      iconVariant: {
-        type: 'string',
-        default: iconVariants[1]?.value ?? iconVariants[0].value,
-        enum: iconVariants.map((v) => v.value),
-      },
-    },
+    attributes,
     edit: createFaqGroupEdit(options as unknown as FaqGroupOptions),
     save: () => <InnerBlocks.Content />,
   } as unknown as BlockConfiguration<FaqGroupAttributes<TIconVariants[number]['value']>>

package/src/blocks/faq/faq-group/index.ts

@@ -1,4 +1,12 @@
-export type {FaqGroupAttributes, FaqGroupOptions} from './types'
+export type {
+  ExcludableFaqAttr,
+  FaqGroupAttributes,
+  FaqGroupOptions,
+  FaqHeadingLevel,
+  FaqIconVariant,
+  FaqShadow,
+  FaqSizePreset,
+} from './types'
 export {createFaqGroupBlock} from './factory'
 
 import type {FaqGroupOptions} from './types'

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

@@ -1,14 +1,35 @@
 import type {BriloBlockType, OptionArray} from '~/types'
-import type {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
+import type {DEFAULT_ICON_VARIANTS, DEFAULT_SHADOWS, FAQ_HEADING_LEVELS} from './constants'
 
 export type FaqHeadingLevel = (typeof FAQ_HEADING_LEVELS)[number]
 export type FaqIconVariant = (typeof DEFAULT_ICON_VARIANTS)[number]['value']
+export type FaqShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+
+export type ExcludableFaqAttr = 'colors'
+
+export interface FaqSizePreset {
+  value: number
+  label: string
+}
 
 export interface FaqGroupAttributes<TIconVariant extends string = FaqIconVariant> extends Record<string, unknown> {
   headingLevel: FaqHeadingLevel
   iconVariant: TIconVariant
+  style: {
+    shadow: FaqShadow
+    borderColor: string
+    backgroundColor: string
+    textColor: string
+    icon: {
+      color: string
+      background: string
+      size: number
+    }
+  }
 }
 
 export interface FaqGroupOptions<TIconVariants extends OptionArray = typeof DEFAULT_ICON_VARIANTS> extends BriloBlockType {
   iconVariants?: TIconVariants
+  iconSizePresets?: readonly FaqSizePreset[]
+  exclude?: ExcludableFaqAttr[]
 }

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')}