@brilo/base-blocks 0.1.35 → 0.1.37

package/src/blocks/event/event-calendar-group/edit.tsx

@@ -0,0 +1,60 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, ToggleControl, TextControl, __experimentalInputControl as InputControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import type {EventCalendarGroupAttributes, EventCalendarGroupOptions} from './types'
+import {Icon, calendar} from '@wordpress/icons'
+
+export function createEventCalendarGroupEdit(options: EventCalendarGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: EventCalendarGroupAttributes
+    setAttributes: (a: Partial<EventCalendarGroupAttributes>) => void
+  }) {
+    const {showNow, month, selectedCategories, emptyMessage} = attributes
+
+    const blockProps = useBlockProps({className: 'g-event-calendar wp-block-section'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení kalendáře', 'brilo-blocks')} initialOpen>
+            <ToggleControl
+              label={__('Zobrazit aktuální měsíc', 'brilo-blocks')}
+              checked={showNow}
+              onChange={(value) => setAttributes({showNow: value})}
+            />
+            {!showNow && (
+              <InputControl
+                label={'Výběr měsíce a roku'}
+                type={'month'}
+                value={month}
+                onChange={(value) => setAttributes({month: value})}
+              />
+            )}
+            <TextControl
+              label={__('Zpráva při prázdném výsledku', 'brilo-blocks')}
+              value={emptyMessage}
+              onChange={(value) => setAttributes({emptyMessage: value})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <Icon icon={calendar} />
+          <div className="g-event-calendar__label">{__('Kalendář událostí', 'brilo-blocks')}</div>
+          <div className="g-event-calendar__instructions">
+            {showNow
+              ? __('Zobrazuje události pro aktuální měsíc.', 'brilo-blocks')
+              : `${__('Zobrazuje události pro', 'brilo-blocks')} ${month}`}
+          </div>
+          {options.renderCategoryControl?.({
+            selectedItems: selectedCategories,
+            onChange: (ids: number[]) => setAttributes({selectedCategories: ids}),
+          })}
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/event/event-calendar-group/editor.scss

@@ -0,0 +1,13 @@
+@layer base {
+  .g-event-calendar {
+    padding: 32px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    text-align: center;
+
+    > svg {
+      align-self: center;
+    }
+  }
+}

package/src/blocks/event/event-calendar-group/factory.tsx

@@ -0,0 +1,30 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {DEFAULT_EMPTY_MESSAGE} from './constants'
+import {createEventCalendarGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {EventCalendarGroupAttributes, EventCalendarGroupOptions} from './types'
+
+export type {EventCalendarGroupAttributes, EventCalendarGroupOptions}
+
+export function createEventCalendarGroupBlock(options: EventCalendarGroupOptions): BlockConfiguration<EventCalendarGroupAttributes> {
+  const emptyMessage = options.emptyMessage ?? DEFAULT_EMPTY_MESSAGE
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Kalendář událostí', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    icon: options.icon ?? {src: defaultIcon},
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    attributes: {
+      showNow: {type: 'boolean', default: true},
+      month: {type: 'string', default: ''},
+      selectedCategories: {type: 'array', default: []},
+      emptyMessage: {type: 'string', default: emptyMessage},
+    },
+    edit: createEventCalendarGroupEdit(options),
+    save: () => null,
+  }
+}

package/src/blocks/event/event-calendar-group/icon.tsx

@@ -0,0 +1,13 @@
+export const icon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width="24"
+    height="24"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"></path>
+  </svg>
+)

package/src/blocks/event/event-calendar-group/index.tsx

@@ -0,0 +1,10 @@
+export type {EventCalendarGroupAttributes, EventCalendarGroupOptions} from './types'
+export {createEventCalendarGroupBlock} from './factory'
+export {EventTermSelectModal} from '~/components/Event/EventTermSelectModal'
+
+import type {EventCalendarGroupOptions} from './types'
+
+export const eventCalendarGroupDefaults: EventCalendarGroupOptions = {
+  name: 'brilo/event-calendar-group',
+  parent: ['brilo/base-section'],
+}

package/src/blocks/event/event-calendar-group/types.ts

@@ -0,0 +1,13 @@
+import type {BriloBlockType, SelectControlProps} from '~/types'
+
+export interface EventCalendarGroupAttributes extends Record<string, unknown> {
+  showNow: boolean
+  month: string
+  selectedCategories: number[]
+  emptyMessage: string
+}
+
+export interface EventCalendarGroupOptions extends BriloBlockType {
+  emptyMessage?: string
+  renderCategoryControl?: (props: SelectControlProps) => JSX.Element
+}

package/src/blocks/event/event-detail-content/constants.ts

@@ -0,0 +1 @@
+export {}

package/src/blocks/event/event-detail-content/edit.tsx

@@ -0,0 +1,24 @@
+import {useBlockProps} from '@wordpress/block-editor'
+import {__} from '@wordpress/i18n'
+import type {EventDetailContentAttributes, EventDetailContentOptions} from './types'
+
+export function createEventDetailContentEdit(_options: EventDetailContentOptions) {
+  return function Edit({
+    attributes: _attributes,
+    setAttributes: _setAttributes,
+  }: {
+    attributes: EventDetailContentAttributes
+    setAttributes: (a: Partial<EventDetailContentAttributes>) => void
+  }) {
+    const blockProps = useBlockProps({className: 'event-detail-content wp-block-section'})
+
+    return (
+      <div {...blockProps}>
+        <div className="event-detail-content">
+          <div className="event-detail-content__label">{__('Obsah detailu události', 'brilo-blocks')}</div>
+          <div className="event-detail-content__instructions">{__('Zástupný blok pro obsah události.', 'brilo-blocks')}</div>
+        </div>
+      </div>
+    )
+  }
+}

package/src/blocks/event/event-detail-content/factory.tsx

@@ -0,0 +1,22 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createEventDetailContentEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {EventDetailContentAttributes, EventDetailContentOptions} from './types'
+
+export type {EventDetailContentAttributes, EventDetailContentOptions}
+
+export function createEventDetailContentBlock(options: EventDetailContentOptions): BlockConfiguration<EventDetailContentAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Obsah detailu události', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    icon: options.icon ?? {src: defaultIcon},
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    attributes: {},
+    edit: createEventDetailContentEdit(options),
+    save: () => null,
+  }
+}

package/src/blocks/event/event-detail-content/icon.tsx

@@ -0,0 +1,9 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="3" y="2" width="14" height="16" rx="1" stroke="black" fill="none" />
+    <line x1="6" y1="6" x2="14" y2="6" stroke="black" />
+    <line x1="6" y1="9" x2="14" y2="9" stroke="black" />
+    <line x1="6" y1="12" x2="14" y2="12" stroke="black" />
+    <line x1="6" y1="15" x2="10" y2="15" stroke="black" />
+  </svg>
+)

package/src/blocks/event/event-detail-content/index.ts

@@ -0,0 +1,9 @@
+export type {EventDetailContentAttributes, EventDetailContentOptions} from './types'
+export {createEventDetailContentBlock} from './factory'
+
+import type {EventDetailContentOptions} from './types'
+
+export const eventDetailContentDefaults: EventDetailContentOptions = {
+  name: 'brilo/event-detail-content',
+  parent: ['brilo/base-section'],
+}

package/src/blocks/event/event-detail-content/types.ts

@@ -0,0 +1,5 @@
+import type {BriloBlockType} from '~/types'
+
+export interface EventDetailContentAttributes extends Record<string, unknown> {}
+
+export interface EventDetailContentOptions extends BriloBlockType {}

package/src/blocks/event/event-detail-header/constants.ts

@@ -0,0 +1,2 @@
+// No constants needed for now
+export {}

package/src/blocks/event/event-detail-header/edit.tsx

@@ -0,0 +1,49 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, ToggleControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import type {EventDetailHeaderAttributes, EventDetailHeaderOptions} from './types'
+
+export function createEventDetailHeaderEdit(_options: EventDetailHeaderOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: EventDetailHeaderAttributes
+    setAttributes: (a: Partial<EventDetailHeaderAttributes>) => void
+  }) {
+    const {showDate, showPlace, showPrice} = attributes
+
+    const blockProps = useBlockProps({className: 'event-detail-header wp-block-section'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení hlavičky', 'brilo-blocks')} initialOpen>
+            <ToggleControl
+              label={__('Zobrazit datum', 'brilo-blocks')}
+              checked={showDate}
+              onChange={(value) => setAttributes({showDate: value})}
+            />
+            <ToggleControl
+              label={__('Zobrazit místo', 'brilo-blocks')}
+              checked={showPlace}
+              onChange={(value) => setAttributes({showPlace: value})}
+            />
+            <ToggleControl
+              label={__('Zobrazit cenu', 'brilo-blocks')}
+              checked={showPrice}
+              onChange={(value) => setAttributes({showPrice: value})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="event-detail-header">
+            <div className="event-detail-header__label">{__('Hlavička detailu události', 'brilo-blocks')}</div>
+            <div className="event-detail-header__instructions">{__('Zástupný blok pro hlavičku události.', 'brilo-blocks')}</div>
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/event/event-detail-header/factory.tsx

@@ -0,0 +1,26 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createEventDetailHeaderEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {EventDetailHeaderAttributes, EventDetailHeaderOptions} from './types'
+
+export type {EventDetailHeaderAttributes, EventDetailHeaderOptions}
+
+export function createEventDetailHeaderBlock(options: EventDetailHeaderOptions): BlockConfiguration<EventDetailHeaderAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Hlavička detailu události', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    icon: options.icon ?? {src: defaultIcon},
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    attributes: {
+      showDate: {type: 'boolean', default: true},
+      showPlace: {type: 'boolean', default: true},
+      showPrice: {type: 'boolean', default: true},
+    },
+    edit: createEventDetailHeaderEdit(options),
+    save: () => null,
+  }
+}

package/src/blocks/event/event-detail-header/icon.tsx

@@ -0,0 +1,8 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="2" y="3" width="16" height="4" rx="1" stroke="black" fill="none" />
+    <line x1="2" y1="10" x2="14" y2="10" stroke="black" />
+    <line x1="2" y1="13" x2="18" y2="13" stroke="black" />
+    <line x1="2" y1="16" x2="10" y2="16" stroke="black" />
+  </svg>
+)

package/src/blocks/event/event-detail-header/index.ts

@@ -0,0 +1,9 @@
+export type {EventDetailHeaderAttributes, EventDetailHeaderOptions} from './types'
+export {createEventDetailHeaderBlock} from './factory'
+
+import type {EventDetailHeaderOptions} from './types'
+
+export const eventDetailHeaderDefaults: EventDetailHeaderOptions = {
+  name: 'brilo/event-detail-header',
+  parent: ['brilo/base-section'],
+}

package/src/blocks/event/event-detail-header/types.ts

@@ -0,0 +1,9 @@
+import type {BriloBlockType} from '~/types'
+
+export interface EventDetailHeaderAttributes extends Record<string, unknown> {
+  showDate: boolean
+  showPlace: boolean
+  showPrice: boolean
+}
+
+export interface EventDetailHeaderOptions extends BriloBlockType {}

package/src/blocks/event/event-list-group/constants.ts

@@ -0,0 +1,6 @@
+import {__} from '@wordpress/i18n'
+
+export const DEFAULT_EMPTY_MESSAGE = __('Nebyly nalezeny žádné události.', 'brilo-blocks')
+export const EVENTS_PER_PAGE_MIN = 1
+export const EVENTS_PER_PAGE_MAX = 18
+export const EVENTS_PER_PAGE_DEFAULT = 6

package/src/blocks/event/event-list-group/edit.tsx

@@ -0,0 +1,84 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, RangeControl, SelectControl, ToggleControl, TextControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {EVENTS_PER_PAGE_DEFAULT, EVENTS_PER_PAGE_MAX, EVENTS_PER_PAGE_MIN} from './constants'
+import {EVENT_LIST_GROUP_MODES} from './types'
+import type {EventListGroupAttributes, EventListGroupMode, EventListGroupOptions} from './types'
+
+export function createEventListGroupEdit(options: EventListGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: EventListGroupAttributes
+    setAttributes: (a: Partial<EventListGroupAttributes>) => void
+  }) {
+    const {mode, selectedEvents, selectedCategories, emptyMessage, postsPerPage, showPagination} = attributes
+
+    const blockProps = useBlockProps({className: 'g-event wp-block-section'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení výpisu', 'brilo-blocks')} initialOpen>
+            <SelectControl
+              label={__('Režim', 'brilo-blocks')}
+              value={mode}
+              options={EVENT_LIST_GROUP_MODES.map((m) => ({label: m.label, value: m.value}))}
+              onChange={(mode) => setAttributes({mode: mode as EventListGroupMode})}
+            />
+
+            {mode !== 'manual' && (
+              <>
+                <RangeControl
+                  label={__('Počet příspěvků', 'brilo-blocks')}
+                  value={postsPerPage}
+                  onChange={(value) => setAttributes({postsPerPage: value ?? EVENTS_PER_PAGE_DEFAULT})}
+                  min={EVENTS_PER_PAGE_MIN}
+                  max={EVENTS_PER_PAGE_MAX}
+                />
+
+                {mode !== 'filter' && (
+                  <ToggleControl
+                    label={__('Zobrazit stránkování', 'brilo-blocks')}
+                    checked={showPagination}
+                    onChange={(value) => setAttributes({showPagination: value})}
+                  />
+                )}
+              </>
+            )}
+
+            <TextControl
+              label={__('Zpráva při prázdném výsledku', 'brilo-blocks')}
+              value={emptyMessage}
+              onChange={(value) => setAttributes({emptyMessage: value})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="g-event__label">{__('Seznam událostí', 'brilo-blocks')}</div>
+          <div className="g-event__instructions">
+            {mode === 'manual' && __('Ručně vybrané události.', 'brilo-blocks')}
+            {mode === 'upcoming' && __('Zobrazuje nadcházející události.', 'brilo-blocks')}
+            {mode === 'past' && __('Zobrazuje proběhlé události.', 'brilo-blocks')}
+            {mode === 'filter' && __('S filtrováním.', 'brilo-blocks')}
+          </div>
+
+          {mode !== 'manual' &&
+            mode !== 'filter' &&
+            options.renderCategoryControl?.({
+              selectedItems: selectedCategories,
+              onChange: (ids: number[]) => setAttributes({selectedCategories: ids}),
+            })}
+
+          {mode === 'manual' &&
+            options.renderEventsControl?.({
+              selectedItems: selectedEvents,
+              onChange: (ids: number[]) => setAttributes({selectedEvents: ids}),
+            })}
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/event/event-list-group/editor.scss

@@ -0,0 +1,9 @@
+@layer base {
+  .g-event {
+    padding: 32px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    text-align: center;
+  }
+}

package/src/blocks/event/event-list-group/factory.tsx

@@ -0,0 +1,33 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {DEFAULT_EMPTY_MESSAGE, EVENTS_PER_PAGE_DEFAULT} from './constants'
+import {createEventListGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {EventListGroupAttributes, EventListGroupOptions} from './types'
+
+export type {EventListGroupAttributes, EventListGroupOptions}
+
+export function createEventListGroupBlock(options: EventListGroupOptions): BlockConfiguration<EventListGroupAttributes> {
+  const emptyMessage = options.emptyMessage ?? DEFAULT_EMPTY_MESSAGE
+  const postsPerPage = options.postsPerPage ?? EVENTS_PER_PAGE_DEFAULT
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Seznam událostí', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    icon: options.icon ?? {src: defaultIcon},
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    attributes: {
+      mode: {type: 'string', default: 'upcoming'},
+      selectedEvents: {type: 'array', default: []},
+      selectedCategories: {type: 'array', default: []},
+      emptyMessage: {type: 'string', default: emptyMessage},
+      postsPerPage: {type: 'number', default: postsPerPage},
+      showPagination: {type: 'boolean', default: false},
+    },
+    edit: createEventListGroupEdit(options),
+    save: () => null,
+  }
+}

package/src/blocks/event/event-list-group/icon.tsx

@@ -0,0 +1,27 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 4H9V5H4V4Z" fill="black" />
+    <path d="M10 4H16V5H10V4Z" fill="black" />
+    <path
+      d="M12 2C12 1.44772 12.4477 1 13 1H14C14.5523 1 15 1.44772 15 2C15 2.55228 14.5523 3 14 3H13C12.4477 3 12 2.55228 12 2Z"
+      fill="black"
+    />
+    <path d="M5 2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3H6C5.44772 3 5 2.55228 5 2Z" fill="black" />
+    <rect x="11.5" y="14.5" width="4" height="4" stroke="black" fill="none" />
+    <path d="M17 14H20V15H17V14Z" fill="black" />
+    <path d="M17 16H19V17H17V16Z" fill="black" />
+    <path d="M18 18H20V19H18V18Z" fill="#357AB5" />
+    <rect x="0.5" y="14.5" width="4" height="4" stroke="black" fill="none" />
+    <path d="M6 14H9V15H6V14Z" fill="black" />
+    <path d="M6 16H8V17H6V16Z" fill="black" />
+    <path d="M7 18H9V19H7V18Z" fill="#357AB5" />
+    <rect x="11.5" y="7.5" width="4" height="4" stroke="black" fill="none" />
+    <path d="M17 7H20V8H17V7Z" fill="black" />
+    <path d="M17 9H19V10H17V9Z" fill="black" />
+    <path d="M18 11H20V12H18V11Z" fill="#357AB5" />
+    <rect x="0.5" y="7.5" width="4" height="4" stroke="black" fill="none" />
+    <path d="M6 7H9V8H6V7Z" fill="black" />
+    <path d="M6 9H8V10H6V9Z" fill="black" />
+    <path d="M7 11H9V12H7V11Z" fill="#357AB5" />
+  </svg>
+)

package/src/blocks/event/event-list-group/index.tsx

@@ -0,0 +1,12 @@
+export type {EventListGroupAttributes, EventListGroupOptions, EventListGroupMode} from './types'
+export {EVENT_LIST_GROUP_MODES} from './types'
+export {createEventListGroupBlock} from './factory'
+export {EventSelectModal} from '~/components/Event/EventSelectModal'
+export {EventTermSelectModal} from '~/components/Event/EventTermSelectModal'
+
+import type {EventListGroupOptions} from './types'
+
+export const eventListGroupDefaults: EventListGroupOptions = {
+  name: 'brilo/event-list-group',
+  parent: ['brilo/base-section'],
+}

package/src/blocks/event/event-list-group/types.ts

@@ -0,0 +1,27 @@
+import {__} from '@wordpress/i18n'
+import type {BriloBlockType, SelectControlProps} from '~/types'
+
+export const EVENT_LIST_GROUP_MODES = [
+  {value: 'manual', label: __('Výběr událostí', 'brilo-blocks')},
+  {value: 'upcoming', label: __('Nadcházející', 'brilo-blocks')},
+  {value: 'past', label: __('Proběhlé', 'brilo-blocks')},
+  {value: 'filter', label: __('S filtrováním', 'brilo-blocks')},
+] as const
+
+export type EventListGroupMode = (typeof EVENT_LIST_GROUP_MODES)[number]['value']
+
+export interface EventListGroupAttributes extends Record<string, unknown> {
+  mode: EventListGroupMode
+  selectedEvents: number[]
+  selectedCategories: number[]
+  emptyMessage: string
+  postsPerPage: number
+  showPagination: boolean
+}
+
+export interface EventListGroupOptions extends BriloBlockType {
+  emptyMessage?: string
+  postsPerPage?: number
+  renderCategoryControl?: (props: SelectControlProps) => JSX.Element
+  renderEventsControl?: (props: SelectControlProps) => JSX.Element
+}

package/src/blocks/sections/base-section/attributes.ts

@@ -26,4 +26,11 @@ export const baseAttributes = {
     type: 'object',
     default: {},
   },
+  backgroundImage: {
+    type: 'object',
+    default: {
+      fit: 'cover',
+      position: 'center center',
+    },
+  },
 } as const

package/src/blocks/sections/base-section/constants.ts

@@ -54,3 +54,22 @@ export const DECORATION_OFFSET_UNITS = [
   {value: 'rem', label: 'rem', default: 0},
   {value: '%', label: '%', default: 0},
 ]
+
+export const BACKGROUND_IMAGE_FITS = [
+  {value: 'cover', label: __('Vyplnit (cover)', 'brilo-blocks')},
+  {value: 'contain', label: __('Celý obrázek (contain)', 'brilo-blocks')},
+] as const
+
+export const BACKGROUND_IMAGE_POSITIONS = [
+  {value: 'left top', label: __('Vlevo nahoře', 'brilo-blocks')},
+  {value: 'center top', label: __('Nahoře', 'brilo-blocks')},
+  {value: 'right top', label: __('Vpravo nahoře', 'brilo-blocks')},
+  {value: 'left center', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'center center', label: __('Uprostřed', 'brilo-blocks')},
+  {value: 'right center', label: __('Vpravo', 'brilo-blocks')},
+  {value: 'left bottom', label: __('Vlevo dole', 'brilo-blocks')},
+  {value: 'center bottom', label: __('Dole', 'brilo-blocks')},
+  {value: 'right bottom', label: __('Vpravo dole', 'brilo-blocks')},
+] as const
+
+export const BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT = 40