@brilo/base-blocks 0.1.0 → 0.1.1

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

@@ -1,107 +0,0 @@
-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

@@ -1,87 +0,0 @@
-.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

@@ -1,49 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,24 +0,0 @@
-@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;
-      }
-    }
-  }
-}

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

@@ -1,51 +0,0 @@
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import {createMapGroupEdit} from './edit'
-import type {MapGroupAttributes, MapGroupOptions} from './types'
-import {MAP_TYPES} from './constants'
-
-export type {MapGroupAttributes, MapGroupOptions}
-
-export function createMapGroupBlock(options: MapGroupOptions): BlockConfiguration<MapGroupAttributes> {
-  return {
-    name: options.name,
-    title: options.title ?? __('Mapa', 'brilo-blocks'),
-    description: options.description,
-    category: options.category ?? 'layout',
-    ...(options.parent && {parent: options.parent}),
-    icon: options.icon ?? 'location-alt',
-    supports: {html: false, customClassName: false},
-    attributes: {
-      mapType: {
-        type: 'string',
-        default: MAP_TYPES[0].value,
-      },
-      iframeSrc: {
-        type: 'string',
-        default: '',
-      },
-      iframeElement: {
-        type: 'string',
-        default: '',
-      },
-      img: {
-        type: 'object',
-        default: {id: 0, url: '', alt: ''},
-      },
-      url: {
-        type: 'string',
-        default: '',
-      },
-      lat: {
-        type: 'string',
-        default: '',
-      },
-      long: {
-        type: 'string',
-        default: '',
-      },
-    },
-    edit: createMapGroupEdit(options),
-    save: () => null,
-  } as unknown as BlockConfiguration<MapGroupAttributes>
-}

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

@@ -1,9 +0,0 @@
-export type {MapGroupAttributes, MapGroupOptions} from './types'
-export {createMapGroupBlock} from './factory'
-
-import type {MapGroupOptions} from './types'
-
-export const mapGroupDefaults: MapGroupOptions = {
-  name: 'brilo/map-group',
-  parent: ['brilo/base-section'],
-}

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

@@ -1,16 +0,0 @@
-import {BriloBlockType, Media} from '~/types'
-import {MAP_TYPES} from './constants'
-
-export type MapType = (typeof MAP_TYPES)[number]['value']
-
-export interface MapGroupAttributes extends Record<string, unknown> {
-  mapType: MapType
-  iframeSrc: string
-  iframeElement: string
-  img: Media
-  url: string
-  lat: string
-  long: string
-}
-
-export interface MapGroupOptions extends BriloBlockType {}

package/src/blocks/newsletter/newsletter-form/constants.ts

@@ -1,5 +0,0 @@
-import {HEADING_STYLES} from '~/constants'
-
-export const DEFAULT_HEADING_STYLES = HEADING_STYLES
-
-export const NEWSLETTER_LEVELS = [1, 2, 3] as const