@brilo/base-blocks 0.1.1 → 0.1.2

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

@@ -0,0 +1,85 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  SelectControl,
+  ToggleControl,
+  __experimentalNumberControl as NumberControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+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'
+
+export function createHeroGroupEdit(options: HeroGroupOptions) {
+  const VARIANTS_OPTIONS = options.variants ?? VARIANTS
+  const EFFECTS_OPTIONS = options.effects ?? EFFECTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: HeroGroupAttributes
+    setAttributes: (a: Partial<HeroGroupAttributes>) => void
+  }) {
+    const {variant, effect, autoplay, autoplaySpeed, pauseOnHover} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-hero wp-block-section', `--variant-${variant}`, `--effect-${effect}`),
+      containerClassName: [options.containerClassName ?? 'g-hero__container'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Rozložení a efekty', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(v) => setAttributes({variant: v as Variant})}
+            >
+              {VARIANTS_OPTIONS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <SelectControl
+              label={__('Efekt přechodu', 'brilo-blocks')}
+              value={effect}
+              options={EFFECTS_OPTIONS as any}
+              onChange={(v) => setAttributes({effect: v as Effect})}
+            />
+          </PanelBody>
+          <PanelBody title={__('Nastavení slideru', 'brilo-blocks')}>
+            <ToggleControl
+              label={__('Automatické přehrávání', 'brilo-blocks')}
+              checked={autoplay}
+              onChange={(v) => setAttributes({autoplay: v})}
+            />
+            {autoplay && (
+              <NumberControl
+                label={__('Rychlost přehrávání (ms)', 'brilo-blocks')}
+                value={autoplaySpeed}
+                onChange={(v) => setAttributes({autoplaySpeed: parseInt(v ?? '3000')})}
+              />
+            )}
+            <ToggleControl
+              label={__('Pozastavit při najetí myší', 'brilo-blocks')}
+              checked={pauseOnHover}
+              onChange={(v) => setAttributes({pauseOnHover: v})}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,45 @@
+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 {createHeroGroupEdit} from './edit'
+import type {HeroGroupAttributes, HeroGroupOptions} from './types'
+import {icon} from './icon'
+
+export type {HeroGroupAttributes, HeroGroupOptions}
+
+export function createHeroGroupBlock<TVariants extends OptionArray = typeof VARIANTS, TEffects extends OptionArray = typeof EFFECTS>(
+  options: HeroGroupOptions<TVariants, TEffects>,
+): BlockConfiguration<HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value']>> {
+  const variants = options.variants ?? VARIANTS
+  const effects = options.effects ?? EFFECTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Hero Slider', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? icon,
+    supports: {html: false, customClassName: false},
+    attributes: {
+      items: {type: 'array', default: []},
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+        enum: variants.map((v) => v.value),
+      },
+      autoplay: {type: 'boolean', default: false},
+      autoplaySpeed: {type: 'number', default: 3000},
+      pauseOnHover: {type: 'boolean', default: true},
+      effect: {
+        type: 'string',
+        default: effects[0].value,
+        enum: effects.map((e) => e.value),
+      },
+    },
+    edit: createHeroGroupEdit(options as unknown as HeroGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value']>>
+}

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

@@ -0,0 +1,28 @@
+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 4H8V5H4V4Z" fill="black" />
+    <path d="M7 19H9V20H7V19Z" fill="black" />
+    <path d="M10 19H11V20H10V19Z" fill="black" />
+    <path d="M12 19H13V20H12V19Z" fill="black" />
+    <path d="M9 4H16V5H9V4Z" 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" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 11L6 15L13 15L9.5 11Z" fill="black" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1 10L1 7H19V10H18V8H2V10H1ZM19 15V18H1L1 15H2V17H18V15H19Z" fill="black" />
+    <path
+      d="M14 11C14 11.5523 13.5523 12 13 12C12.4477 12 12 11.5523 12 11C12 10.4477 12.4477 10 13 10C13.5523 10 14 10.4477 14 11Z"
+      fill="black"
+    />
+    <path
+      d="M0 12.5C0 11.6716 0.671573 11 1.5 11C2.32843 11 3 11.6716 3 12.5C3 13.3284 2.32843 14 1.5 14C0.671573 14 0 13.3284 0 12.5Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M17 12.5C17 11.6716 17.6716 11 18.5 11C19.3284 11 20 11.6716 20 12.5C20 13.3284 19.3284 14 18.5 14C17.6716 14 17 13.3284 17 12.5Z"
+      fill="#357AB5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,11 @@
+export type {HeroGroupAttributes, HeroGroupOptions} from './types'
+export {createHeroGroupBlock} from './factory'
+
+import type {HeroGroupOptions} from './types'
+
+export const heroGroupDefaults: HeroGroupOptions = {
+  name: 'brilo/hero-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/hero-item'],
+  template: [['brilo/hero-item', {}]],
+}

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

@@ -0,0 +1,22 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {HeroSliderItem} from '../hero-item/types'
+import type {EFFECTS, VARIANTS} from './constants'
+
+export type Variant = (typeof VARIANTS)[number]['value']
+export type Effect = (typeof EFFECTS)[number]['value']
+
+export interface HeroGroupAttributes<TVariant extends string = Variant, TEffect extends string = Effect> extends Record<string, unknown> {
+  items: HeroSliderItem[]
+  variant: TVariant
+  autoplay: boolean
+  autoplaySpeed: number
+  pauseOnHover: boolean
+  effect: TEffect
+}
+
+export interface HeroGroupOptions<TVariants extends OptionArray = typeof VARIANTS, TEffects extends OptionArray = typeof EFFECTS>
+  extends BriloBlockType {
+  allowedBlocks: string[]
+  variants?: TVariants
+  effects?: TEffects
+}

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

@@ -0,0 +1,15 @@
+import {__} from '@wordpress/i18n'
+
+export const CONTENT_POSITIONS = [
+  {value: 'top left', label: __('Vlevo nahoře', 'brilo-blocks')},
+  {value: 'top center', label: __('Uprostřed nahoře', 'brilo-blocks')},
+  {value: 'top right', label: __('Vpravo nahoře', 'brilo-blocks')},
+  {value: 'center left', label: __('Vlevo uprostřed', 'brilo-blocks')},
+  {value: 'center center', label: __('Uprostřed', 'brilo-blocks')},
+  {value: 'center right', label: __('Vpravo uprostřed', 'brilo-blocks')},
+  {value: 'bottom left', label: __('Vlevo dole', 'brilo-blocks')},
+  {value: 'bottom center', label: __('Uprostřed dole', 'brilo-blocks')},
+  {value: 'bottom right', label: __('Vpravo dole', 'brilo-blocks')},
+] as const
+
+export const HEADING_LEVELS = [1, 2, 3] as const

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

@@ -0,0 +1,107 @@
+import {InspectorControls, RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  AlignmentMatrixControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  BaseControl,
+  TextControl,
+  ToggleControl,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {ImagePickerBody, ImagePickerControl} from '~/components/ImagePicker'
+import {CONTENT_POSITIONS, HEADING_LEVELS} from './constants'
+import type {ContentPosition, HeroItemAttributes, HeroItemOptions} from './types'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import clsx from 'clsx'
+
+export function createHeroItemEdit(options: HeroItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: HeroItemAttributes
+    setAttributes: (a: Partial<HeroItemAttributes>) => void
+  }) {
+    const {title, img, headingLevel, contentPosition, url, focalPoint} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-hero'),
+      containerClassName: [options.containerClassName ?? 'i-hero__content wp-block-inner-content'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'vertical',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení položky', 'brilo-blocks')}>
+            <ImagePickerControl value={{id: img.id, alt: img.alt}} onChange={(v) => setAttributes({img: {...img, ...v}})} />
+
+            <BaseControl label={__('Focal point (desktop)', 'brilo-blocks')}>
+              <AlignmentMatrixControl
+                value={focalPoint.point as any}
+                onChange={(v) => setAttributes({focalPoint: {...focalPoint, point: (v ?? 'center center') as ContentPosition}})}
+              />
+            </BaseControl>
+
+            <BaseControl label={__('Focal point (mobil)', 'brilo-blocks')}>
+              <AlignmentMatrixControl
+                value={(focalPoint.sm?.point ?? 'center center') as any}
+                onChange={(v) => setAttributes({focalPoint: {...focalPoint, sm: {point: (v ?? 'center center') as ContentPosition}}})}
+              />
+            </BaseControl>
+
+            <ToggleGroupControl
+              isBlock
+              label={__('Úroveň nadpisu položek', 'brilo-blocks')}
+              value={String(headingLevel)}
+              onChange={(v) => setAttributes({headingLevel: Number(v ?? HEADING_LEVELS[1])})}
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+
+            <BaseControl label={__('Pozice obsahu', 'brilo-blocks')}>
+              <AlignmentMatrixControl value={contentPosition} onChange={(v) => setAttributes({contentPosition: v as ContentPosition})} />
+            </BaseControl>
+
+            <TextControl
+              label={__('URL odkazu', 'brilo-blocks')}
+              value={url.src}
+              onChange={(v) => setAttributes({url: {...url, src: v}})}
+            />
+            <ToggleControl
+              label={__('Otevřít v novém okně', 'brilo-blocks')}
+              checked={url.blank}
+              onChange={(v) => setAttributes({url: {...url, blank: v}})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-hero__image-wrap">
+            <ImagePickerBody
+              value={{id: img.id, alt: img.alt}}
+              onChange={(v) => setAttributes({img: {...img, ...v}})}
+              placeholder={__('Vyberte obrázek', 'brilo-blocks')}
+            />
+          </div>
+          <div className={`i-hero__overlay --${contentPosition.replace(' ', '-')}`}>
+            <RichText
+              tagName={`h${headingLevel}` as any}
+              className="i-hero__title u-text-editable"
+              value={title}
+              onChange={(v) => setAttributes({title: v})}
+              placeholder={__('Nadpis...', 'brilo-blocks')}
+            />
+            <div {...innerBlocksProps} />
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/hero/hero-item/editor.scss

@@ -0,0 +1,87 @@
+.i-hero {
+  position: relative;
+  overflow: hidden;
+}
+
+.i-hero__title {
+  margin-top: 0;
+}
+
+.i-hero__overlay {
+  position: absolute;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.95);
+  max-width: 80%;
+  z-index: 1;
+
+  &.--top-left {
+    top: 2rem;
+    left: 2rem;
+  }
+
+  &.--top-center {
+    top: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.--top-right {
+    top: 2rem;
+    right: 2rem;
+  }
+
+  &.--center-left {
+    top: 50%;
+    left: 2rem;
+    transform: translateY(-50%);
+  }
+
+  &.--center-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &.--center-right {
+    top: 50%;
+    right: 2rem;
+    transform: translateY(-50%);
+  }
+
+  &.--bottom-left {
+    bottom: 2rem;
+    left: 2rem;
+  }
+
+  &.--bottom-center {
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.--bottom-right {
+    bottom: 2rem;
+    right: 2rem;
+  }
+}
+
+.i-hero__image-wrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 2 / 1;
+
+  button {
+    height: 100%;
+  }
+
+  img,
+  .components-placeholder,
+  .image-picker-body {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

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

@@ -0,0 +1,49 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {CONTENT_POSITIONS, HEADING_LEVELS} from './constants'
+import {createHeroItemEdit} from './edit'
+import type {HeroItemAttributes, HeroItemOptions} from './types'
+import {InnerBlocks} from '@wordpress/block-editor'
+
+export type {HeroItemAttributes, HeroItemOptions}
+
+export function createHeroItemBlock(options: HeroItemOptions): BlockConfiguration<HeroItemAttributes> {
+  const contentPositions = options.contentPositions ?? CONTENT_POSITIONS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Hero položka', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'cover-image',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      img: {
+        type: 'object',
+        default: {id: 0, url: '', alt: ''},
+      },
+      headingLevel: {
+        type: 'number',
+        default: HEADING_LEVELS[0],
+        enum: [...HEADING_LEVELS],
+      },
+      contentPosition: {
+        type: 'string',
+        default: contentPositions[4].value,
+        enum: contentPositions.map((p) => p.value),
+      },
+      url: {
+        type: 'object',
+        default: {src: '', blank: false},
+      },
+      focalPoint: {
+        type: 'object',
+        default: {point: 'center center', sm: {point: 'center center'}},
+      },
+    },
+    edit: createHeroItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<HeroItemAttributes>
+}

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

@@ -0,0 +1,10 @@
+export type {HeroItemAttributes, HeroItemOptions} from './types'
+export {createHeroItemBlock} from './factory'
+
+import type {HeroItemOptions} from './types'
+
+export const heroItemDefaults: HeroItemOptions = {
+  name: 'brilo/hero-item',
+  parent: ['brilo/hero-group'],
+  allowedBlocks: ['core/list', 'core/paragraph', 'brilo/button-group'],
+}

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

@@ -0,0 +1,38 @@
+import {BriloBlockType, Media, OptionArray} from '~/types'
+import {CONTENT_POSITIONS, HEADING_LEVELS} from './constants'
+
+export type ContentPosition = (typeof CONTENT_POSITIONS)[number]['value']
+export type HeadingLevel = (typeof HEADING_LEVELS)[number]
+
+export type HeroItemUrl = {
+  src: string
+  blank: boolean
+}
+
+export type HeroSliderItem = {
+  title: string
+  img: Media
+  headingLevel: number
+  contentPosition: ContentPosition
+  url: HeroItemUrl
+}
+
+export type HeroItemFocalPoint = {
+  point: ContentPosition
+  sm?: {
+    point: ContentPosition
+  }
+}
+
+export interface HeroItemAttributes extends Record<string, unknown> {
+  title: string
+  img: Media
+  headingLevel: number
+  contentPosition: ContentPosition
+  url: HeroItemUrl
+  focalPoint: HeroItemFocalPoint
+}
+
+export interface HeroItemOptions extends BriloBlockType {
+  contentPositions?: OptionArray
+}

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

@@ -0,0 +1,20 @@
+import {__} from '@wordpress/i18n'
+
+export const MAP_TYPES = [
+  {
+    value: 'gps',
+    label: __('GPS', 'brilo-blocks'),
+  },
+  {
+    value: 'element',
+    label: __('Element', 'brilo-blocks'),
+  },
+  {
+    value: 'url',
+    label: __('URL', 'brilo-blocks'),
+  },
+  {
+    value: 'image',
+    label: __('Obrázek', 'brilo-blocks'),
+  },
+] as const

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

@@ -0,0 +1,108 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, BaseControl, TextControl, SelectControl, TextareaControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {ImagePickerControl} from '~/components/ImagePicker'
+import {MAP_TYPES} from './constants'
+import type {MapGroupAttributes, MapGroupOptions} from './types'
+import {Icon, mapMarker} from '@wordpress/icons'
+
+export function createMapGroupEdit(options: MapGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: MapGroupAttributes
+    setAttributes: (a: Partial<MapGroupAttributes>) => void
+  }) {
+    const {mapType, iframeSrc, iframeElement, img, url, lat, long} = attributes
+
+    const blockProps = useBlockProps({
+      className: options.blockClassName ?? 'g-map wp-block-section',
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení mapy', 'brilo-blocks')}>
+            <SelectControl
+              label={__('Typ mapy', 'brilo-blocks')}
+              value={mapType}
+              options={[...MAP_TYPES]}
+              onChange={(v) => setAttributes({mapType: v as MapGroupAttributes['mapType']})}
+            />
+
+            {mapType === 'gps' && (
+              <BaseControl label={__('GPS', 'brilo-blocks')}>
+                <TextControl
+                  label={__('Zeměpisná šířka:', 'brilo-blocks')}
+                  value={lat || ''}
+                  onChange={(value: string) => setAttributes({lat: value})}
+                />
+                <TextControl
+                  label={__('Zeměpisná délka:', 'brilo-blocks')}
+                  value={long || ''}
+                  onChange={(value: string) => setAttributes({long: value})}
+                />
+              </BaseControl>
+            )}
+
+            {mapType === 'url' && (
+              <BaseControl label={__('Iframe', 'brilo-blocks')}>
+                <TextControl
+                  label={__('URL:', 'brilo-blocks')}
+                  value={iframeSrc || ''}
+                  onChange={(value: string) => setAttributes({iframeSrc: value})}
+                />
+              </BaseControl>
+            )}
+
+            {mapType === 'element' && (
+              <BaseControl label={__('Iframe', 'brilo-blocks')}>
+                <TextareaControl
+                  label={__('Zdrojový kód:', 'brilo-blocks')}
+                  value={iframeElement || ''}
+                  onChange={(value: string) => setAttributes({iframeElement: value})}
+                />
+              </BaseControl>
+            )}
+
+            {mapType === 'image' && (
+              <>
+                <ImagePickerControl value={img} onChange={(v) => setAttributes({img: v})} />
+                <TextControl
+                  label={__('URL:', 'brilo-blocks')}
+                  value={url || ''}
+                  onChange={(value: string) => setAttributes({url: value})}
+                />
+              </>
+            )}
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="g-map__map">
+            {mapType === 'gps' && (lat || long) && (
+              <div>
+                <Icon icon={mapMarker} />
+                <p>{[lat, long].filter(Boolean).join(', ')}</p>
+              </div>
+            )}
+            {mapType === 'url' && iframeSrc && <iframe src={iframeSrc} width={640} height={320}></iframe>}
+            {mapType === 'element' && iframeElement && <div dangerouslySetInnerHTML={{__html: iframeElement}} />}
+            {mapType === 'image' && img && <ImagePickerControl value={img} onChange={(v) => setAttributes({img: v})} size={[640, 320]} />}
+            {(!mapType ||
+              (mapType === 'gps' && !lat && !long) ||
+              (mapType === 'url' && !iframeSrc) ||
+              (mapType === 'element' && !iframeElement) ||
+              (mapType === 'image' && !img)) && (
+              <>
+                <Icon icon={mapMarker} />
+                {__('Zde je prostor pro vaši mapu.', 'brilo-blocks')}
+              </>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,24 @@
+@layer base {
+  .g-map__map {
+    min-height: 200px;
+    padding: 16px;
+    border: 1px dashed #ccc;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 16px;
+
+    .c-image-picker-control__row {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      img {
+        object-fit: contain;
+      }
+    }
+  }
+}