@brilo/base-blocks 0.1.1 → 0.1.3

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;
+      }
+    }
+  }
+}

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

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

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

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

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

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

@@ -0,0 +1,194 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {
+  Button,
+  PanelBody,
+  SelectControl,
+  TextControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {IconControl} from '~/components/IconControl'
+import {DEFAULT_HEADING_STYLES, NEWSLETTER_LEVELS} from './constants'
+import type {HeadingLevels, HeadingStyles, NewsletterFormAttributes, NewsletterFormOptions} from './types'
+
+export function createNewsletterFormEdit(options: NewsletterFormOptions) {
+  const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: NewsletterFormAttributes
+    setAttributes: (a: Partial<NewsletterFormAttributes>) => void
+  }) {
+    const {heading, description, form} = attributes
+    const {email, submit, terms} = form.fields
+
+    const setForm = (patch: Partial<NewsletterFormAttributes['form']>) => setAttributes({form: {...form, ...patch}})
+    const setFields = (patch: Partial<NewsletterFormAttributes['form']['fields']>) => setForm({fields: {...form.fields, ...patch}})
+
+    const blockProps = useBlockProps({className: 'f-newsletter'})
+
+    const iconUrl = email.icon.src ? `${options.iconsSrc}${email.icon.src}.svg` : ''
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nadpis', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Úroveň nadpisu', 'brilo-blocks')}
+              value={String(heading.level)}
+              onChange={(v) => setAttributes({heading: {...heading, level: Number(v) as HeadingLevels}})}
+              isBlock
+            >
+              {NEWSLETTER_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Styl nadpisu', 'brilo-blocks')}
+              value={heading.style}
+              onChange={(v) => setAttributes({heading: {...heading, style: v as HeadingStyles}})}
+              isBlock
+            >
+              {HEADING_STYLES.map((s) => (
+                <ToggleGroupControlOption key={s} value={s} label={s} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+
+          <PanelBody title={__('Formulář', 'brilo-blocks')} initialOpen={false}>
+            <TextControl label={__('ID formuláře', 'brilo-blocks')} value={form.id} onChange={(v) => setForm({id: v})} />
+            <TextControl label={__('Akce (URL)', 'brilo-blocks')} value={form.action} onChange={(v) => setForm({action: v})} />
+            <SelectControl
+              label={__('Metoda', 'brilo-blocks')}
+              value={form.method as 'post' | 'get'}
+              options={[
+                {value: 'post', label: 'POST'},
+                {value: 'get', label: 'GET'},
+              ]}
+              onChange={(v) => setForm({method: v})}
+            />
+            <TextControl label={__('Název formuláře', 'brilo-blocks')} value={form.name} onChange={(v) => setForm({name: v})} />
+          </PanelBody>
+
+          <PanelBody title={__('Skrytá pole', 'brilo-blocks')} initialOpen={false}>
+            {form.hiddenFields.map((field, i) => (
+              <div key={i} className="f-newsletter__hidden-field">
+                <TextControl
+                  label={__('Název', 'brilo-blocks')}
+                  value={field.name}
+                  onChange={(v) => setForm({hiddenFields: form.hiddenFields.map((f, idx) => (idx === i ? {...f, name: v} : f))})}
+                />
+                <TextControl
+                  label={__('Hodnota', 'brilo-blocks')}
+                  value={field.value}
+                  onChange={(v) => setForm({hiddenFields: form.hiddenFields.map((f, idx) => (idx === i ? {...f, value: v} : f))})}
+                />
+                <Button
+                  isDestructive
+                  variant="secondary"
+                  onClick={() => setForm({hiddenFields: form.hiddenFields.filter((_, idx) => idx !== i)})}
+                >
+                  {__('Odebrat', 'brilo-blocks')}
+                </Button>
+              </div>
+            ))}
+            <Button variant="secondary" onClick={() => setForm({hiddenFields: [...form.hiddenFields, {name: '', value: ''}]})}>
+              {__('Přidat pole', 'brilo-blocks')}
+            </Button>
+          </PanelBody>
+
+          <PanelBody title={__('E-mailové pole', 'brilo-blocks')} initialOpen={false}>
+            <TextControl
+              label={__('Název (name)', 'brilo-blocks')}
+              value={email.name}
+              onChange={(v) => setFields({email: {...email, name: v}})}
+            />
+            <TextControl
+              label={__('Popisek', 'brilo-blocks')}
+              value={email.label}
+              onChange={(v) => setFields({email: {...email, label: v}})}
+            />
+            <TextControl
+              label={__('Placeholder', 'brilo-blocks')}
+              value={email.placeholder}
+              onChange={(v) => setFields({email: {...email, placeholder: v}})}
+            />
+            <IconControl
+              label={__('Ikona', 'brilo-blocks')}
+              value={email.icon.src}
+              icons={options.icons}
+              iconsSrc={options.iconsSrc}
+              onChange={(ic) => setFields({email: {...email, icon: {...email.icon, type: 'preselected', src: ic.value}}})}
+            />
+          </PanelBody>
+
+          <PanelBody title={__('Tlačítko', 'brilo-blocks')} initialOpen={false}>
+            <TextControl
+              label={__('Text tlačítka', 'brilo-blocks')}
+              value={submit.title}
+              onChange={(v) => setFields({submit: {...submit, title: v}})}
+            />
+          </PanelBody>
+
+          <PanelBody title={__('Souhlas', 'brilo-blocks')} initialOpen={false}>
+            <TextControl
+              label={__('Název (name)', 'brilo-blocks')}
+              value={terms.name}
+              onChange={(v) => setFields({terms: {...terms, name: v}})}
+            />
+            <ToggleControl
+              label={__('Zobrazit jako checkbox', 'brilo-blocks')}
+              checked={terms.isCheckbox}
+              onChange={(v) => setFields({terms: {...terms, isCheckbox: v}})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <RichText
+            tagName={`h${heading.level}` as HeadingStyles}
+            className={clsx('f-newsletter__heading', `--heading-style-${heading.style}`, 'u-text-editable')}
+            value={heading.title}
+            onChange={(v: string) => setAttributes({heading: {...heading, title: v}})}
+            placeholder={__('Nadpis...', 'brilo-blocks')}
+            allowedFormats={['core/bold', 'core/italic']}
+          />
+          <RichText
+            tagName="div"
+            className="f-newsletter__description u-text-editable"
+            value={description}
+            onChange={(v: string) => setAttributes({description: v})}
+            placeholder={__('Popis...', 'brilo-blocks')}
+          />
+
+          <div className="f-newsletter__form" aria-hidden="true">
+            <div className="f-newsletter__field">
+              {iconUrl && <img src={iconUrl} alt="" className="f-newsletter__field-icon" width={24} height={24} />}
+              <input type="email" className="f-newsletter__input" placeholder={email.placeholder} disabled />
+            </div>
+            <button type="button" className="f-newsletter__submit" disabled>
+              {submit.title || __('Odebírat', 'brilo-blocks')}
+            </button>
+          </div>
+
+          <label className="f-newsletter__terms">
+            {terms.isCheckbox && <input type="checkbox" disabled />}
+            <RichText
+              tagName="span"
+              className="f-newsletter__terms-text u-text-editable"
+              value={terms.title}
+              onChange={(v: string) => setFields({terms: {...terms, title: v}})}
+              placeholder={__('Souhlas se zpracováním...', 'brilo-blocks')}
+              allowedFormats={['core/bold', 'core/italic', 'core/link']}
+            />
+          </label>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,68 @@
+@layer base {
+  .f-newsletter {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .f-newsletter__heading {
+    margin: 0;
+  }
+
+  .f-newsletter__description {
+    margin: 0;
+    color: #555;
+  }
+
+  .f-newsletter__form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: stretch;
+  }
+
+  .f-newsletter__field {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+
+  .f-newsletter__field-icon {
+    flex-shrink: 0;
+  }
+
+  .f-newsletter__input {
+    flex-grow: 1;
+    padding: 10px 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .f-newsletter__submit {
+    padding: 10px 20px;
+    border: 0;
+    border-radius: 4px;
+    background: #222;
+    color: #fff;
+    cursor: default;
+  }
+
+  .f-newsletter__terms {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    font-size: 13px;
+    color: #555;
+  }
+
+  .f-newsletter__hidden-field {
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+    border-bottom: 1px solid #eee;
+  }
+}

package/src/blocks/newsletter/newsletter-form/factory.tsx

@@ -0,0 +1,59 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {DEFAULT_HEADING_STYLES, NEWSLETTER_LEVELS} from './constants'
+import {createNewsletterFormEdit} from './edit'
+import type {NewsletterFormAttributes, NewsletterFormOptions} from './types'
+
+export type {NewsletterFormAttributes, NewsletterFormOptions}
+
+export function createNewsletterFormBlock(options: NewsletterFormOptions): BlockConfiguration<NewsletterFormAttributes> {
+  const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Newsletter', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'text',
+    icon: options.icon ?? 'email',
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    attributes: {
+      heading: {
+        type: 'object',
+        default: {title: '', level: NEWSLETTER_LEVELS[1], style: headingStyles[1] ?? headingStyles[0]},
+      },
+      description: {
+        type: 'string',
+        default: '',
+      },
+      form: {
+        type: 'object',
+        default: {
+          id: '',
+          action: '',
+          method: 'post',
+          name: '',
+          hiddenFields: [],
+          fields: {
+            email: {
+              name: 'email',
+              label: __('E-mail', 'brilo-blocks'),
+              placeholder: __('Váš e-mail', 'brilo-blocks'),
+              icon: {type: 'preselected', src: '', media: {id: 0, alt: ''}},
+            },
+            submit: {
+              title: __('Odebírat', 'brilo-blocks'),
+            },
+            terms: {
+              title: '',
+              name: 'terms',
+              isCheckbox: true,
+            },
+          },
+        },
+      },
+    },
+    edit: createNewsletterFormEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<NewsletterFormAttributes>
+}

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

@@ -0,0 +1,11 @@
+export type {NewsletterFormAttributes, NewsletterFormOptions} from './types'
+export {createNewsletterFormBlock} from './factory'
+
+import type {NewsletterFormOptions} from './types'
+
+export const newsletterFormDefaults: NewsletterFormOptions = {
+  name: 'brilo/newsletter-form',
+  parent: ['brilo/base-section'],
+  icons: [],
+  iconsSrc: '',
+}

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

@@ -0,0 +1,45 @@
+import type {BriloBlockType, Icon, StringArray} from '~/types'
+import type {IconType} from '~/components/IconControl'
+import {DEFAULT_HEADING_STYLES, NEWSLETTER_LEVELS} from './constants'
+
+export type HeadingLevels = (typeof NEWSLETTER_LEVELS)[number]
+export type HeadingStyles = (typeof DEFAULT_HEADING_STYLES)[number]
+
+export interface HiddenField {
+  name: string
+  value: string
+}
+
+export interface NewsletterFormAttributes extends Record<string, unknown> {
+  heading: {title: string; level: HeadingLevels; style: HeadingStyles}
+  description: string // Rich text
+  form: {
+    id: string
+    action: string
+    method: string
+    name: string
+    hiddenFields: HiddenField[]
+    fields: {
+      email: {
+        name: string
+        label: string
+        placeholder: string
+        icon: Icon
+      }
+      submit: {
+        title: string
+      }
+      terms: {
+        title: string // Rich text
+        name: string
+        isCheckbox: boolean
+      }
+    }
+  }
+}
+
+export interface NewsletterFormOptions extends BriloBlockType {
+  icons: IconType[]
+  iconsSrc: string
+  headingStyles?: StringArray
+}

package/src/blocks/post/post-slider-group/constants.ts

@@ -0,0 +1,3 @@
+export const MAX_ITEMS_MIN = 2
+export const MAX_ITEMS_MAX = 32
+export const MAX_ITEMS_DEFAULT = 6

package/src/blocks/post/post-slider-group/edit.tsx

@@ -0,0 +1,76 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  RangeControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {MAX_ITEMS_DEFAULT, MAX_ITEMS_MAX, MAX_ITEMS_MIN} from './constants'
+import type {PostSliderGroupAttributes, PostSliderGroupOptions} from './types'
+
+export function createPostSliderGroupEdit(options: PostSliderGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: PostSliderGroupAttributes
+    setAttributes: (a: Partial<PostSliderGroupAttributes>) => void
+  }) {
+    const {mode, maxItems, selectedCategories, selectedPosts} = attributes
+
+    const blockProps = useBlockProps({className: 'wp-block-section'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení slideru', 'brilo-blocks')} initialOpen>
+            <ToggleGroupControl
+              label={__('Režim výběru', 'brilo-blocks')}
+              value={mode}
+              onChange={(value) => setAttributes({mode: value as PostSliderGroupAttributes['mode']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="default" label={__('Výchozí', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="category" label={__('Dle kategorie', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="selected" label={__('Vybrané', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            {mode !== 'selected' && (
+              <RangeControl
+                label={__('Max. počet příspěvků', 'brilo-blocks')}
+                value={maxItems}
+                onChange={(value) => setAttributes({maxItems: value ?? MAX_ITEMS_DEFAULT})}
+                min={MAX_ITEMS_MIN}
+                max={MAX_ITEMS_MAX}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          {mode === 'category' &&
+            options.renderCategoryControl?.({
+              selectedItems: selectedCategories,
+              onChange: (ids: number[]) => setAttributes({selectedCategories: ids}),
+            })}
+
+          {mode === 'selected' &&
+            options.renderPostsControl?.({
+              selectedItems: selectedPosts,
+              onChange: (ids: number[]) => setAttributes({selectedPosts: ids}),
+            })}
+
+          {mode === 'default' && (
+            <div className="components-placeholder">
+              <div className="components-placeholder__label">{__('Post Slider', 'brilo-blocks')}</div>
+              <div className="components-placeholder__instructions">
+                {`${__('Zobrazí', 'brilo-blocks')} ${maxItems} ${__('nejnovějších příspěvků.', 'brilo-blocks')}`}
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    )
+  }
+}