@brilo/base-blocks 0.1.1 → 0.1.3

package/src/components/ItemIconControl/editor.scss

@@ -0,0 +1,52 @@
+@layer base {
+  .i-item-icon,
+  .i-item-icon__placeholder {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f0f6fb;
+    border-radius: 4px;
+    font-size: 18px;
+    color: #0073aa;
+    flex-shrink: 0;
+  }
+
+  .i-item-icon {
+    img,
+    .i-item-icon__img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .i-item-icon__placeholder {
+    &.--clickable {
+      cursor: pointer;
+      background: none;
+      border: 1px dashed #0073aa;
+    }
+  }
+
+  .i-item-icon__preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 0;
+  }
+
+  .i-item-icon__control-preselected {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 16px;
+  }
+
+  .i-item-icon__number {
+    font-size: 22px;
+    font-weight: 700;
+    color: #0073aa;
+  }
+}

package/src/components/ItemIconControl/index.ts

@@ -0,0 +1,2 @@
+export * from './ItemIconControl'
+export * from './ItemIconPreview'

package/src/components/ItemIconControl/types.d.ts

@@ -0,0 +1,30 @@
+import type {Icon, SelectOption} from '~/types'
+import type {IconType} from '../IconControl/IconControl'
+import {UspIconType} from '~/blocks/usp/usp-item/types'
+
+export interface ItemIconOptions {
+  icons: IconType[]
+  iconsSrc: string
+}
+
+export interface ItemIconControlProps {
+  icon: Icon
+  setAttributes: (attributes: {icon: Icon}) => void
+  options: ItemIconOptions
+  iconTypes: readonly SelectOption[]
+}
+
+export interface ItemIconPreviewProps {
+  icon: Icon
+  className?: string
+  options: ItemIconOptions
+  setAttributes: (attributes: {icon: Icon}) => void
+}
+
+export interface ItemIconModalProps {
+  icon: Icon
+  options: ItemIconOptions
+  onClose: () => void
+  onChange: (selectedIcon: IconType) => void
+  className?: string
+}

package/src/constants.ts

@@ -0,0 +1,20 @@
+import {__} from '@wordpress/i18n'
+
+export const HEADING_LEVELS = [1, 2, 3, 4] as const
+
+export const HEADING_STYLES = ['h1', 'h2', 'h3', 'h4'] as const
+
+export const HEADING_STYLE_OPTIONS = [
+  {value: 'h1', label: 'H1 styl'},
+  {value: 'h2', label: 'H2 styl'},
+  {value: 'h3', label: 'H3 styl'},
+  {value: 'h4', label: 'H4 styl'},
+] as const
+
+export type HeadingStyleOption = (typeof HEADING_STYLE_OPTIONS)[number]['value']
+
+export const CONTENT_SIZES = [
+  {value: 'sm', label: __('Malá', 'brilo-blocks')},
+  {value: 'default', label: __('Výchozí', 'brilo-blocks')},
+  {value: 'lg', label: __('Velká', 'brilo-blocks')},
+] as const

package/src/editor.scss

@@ -0,0 +1,34 @@
+@forward "./globals";
+@forward "./blocks/column/column-group/editor";
+@forward "./blocks/column/column-item/editor";
+@forward "./blocks/compare/compare-item/editor";
+@forward "./blocks/compare/compare-option/editor";
+@forward "./blocks/contact/contact-group/editor";
+@forward "./blocks/contact/contact-item/editor";
+@forward "./blocks/core/basic-button/editor";
+@forward "./blocks/core/basic-heading/editor";
+@forward "./blocks/core/basic-overline/editor";
+@forward "./blocks/faq/faq-group/editor";
+@forward "./blocks/faq/faq-item/editor";
+@forward "./blocks/form/form-field/editor";
+@forward "./blocks/form/form-group/editor";
+@forward "./blocks/groups/banner-group/editor";
+@forward "./blocks/groups/basic-header-group/editor";
+@forward "./blocks/groups/button-group/editor";
+@forward "./blocks/groups/text-and-media-group/editor";
+@forward "./blocks/hero/hero-item/editor";
+@forward "./blocks/map/map-group/editor";
+@forward "./blocks/newsletter/newsletter-form/editor";
+@forward "./blocks/sections/base-section/editor";
+@forward "./blocks/signpost/signpost-item/editor";
+@forward "./blocks/step/step-group/editor";
+@forward "./blocks/step/step-item/editor";
+@forward "./blocks/testimonial/testimonial-group/editor";
+@forward "./blocks/testimonial/testimonial-item/editor";
+@forward "./blocks/text-and-form/text-and-form-group/editor";
+@forward "./blocks/text-and-form/text-and-form-text-column/editor";
+@forward "./blocks/usp/usp-group/editor";
+@forward "./blocks/usp/usp-item/editor";
+@forward "./components/IconControl/editor";
+@forward "./components/ImagePicker/editor";
+@forward "./components/ItemIconControl/editor";

package/src/globals.scss

@@ -0,0 +1,237 @@
+// WordPress overrides — outside layer to beat unlayered WP styles
+html .wp-block {
+  max-width: 1200px;
+}
+
+@layer base {
+  .text-center {
+    text-align: center;
+  }
+
+  .wp-block-section {
+    --border-color: #ddd;
+
+    padding: 8px;
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: border 0.3s ease;
+    max-width: 1200px;
+
+    &:hover {
+      --border-color: #0073aa;
+    }
+
+    &.--heading-style-h1 {
+      --heading-size: 32px;
+    }
+    &.--heading-style-h2 {
+      --heading-size: 28px;
+    }
+    &.--heading-style-h3 {
+      --heading-size: 24px;
+    }
+    &.--heading-style-h4 {
+      --heading-size: 20px;
+    }
+    &.--heading-style-h5 {
+      --heading-size: 18px;
+    }
+
+    &.--typo-size-sm {
+      --typo-size: 14px;
+    }
+    &.--typo-size-md {
+      --typo-size: 16px;
+    }
+    &.--typo-size-lg {
+      --typo-size: 18px;
+    }
+    &.--typo-size-xl {
+      --typo-size: 20px;
+    }
+    &.--typo-size-xxl {
+      --typo-size: 24px;
+    }
+
+    .wp-block-section__title {
+      font-size: var(--heading-size);
+    }
+    .wp-block-section__content {
+      font-size: var(--typo-size);
+    }
+  }
+
+  .wp-block-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+  }
+
+  .wp-block-inner-content {
+    --border-color: #ddd;
+
+    min-height: 64px;
+    margin-bottom: 16px;
+    padding: 8px;
+    border: 1px dashed var(--border-color);
+  }
+
+  .u-grid-responsive-blocks-list {
+    --grid-max-col-count: 2;
+    --grid-min-col-size: 150px;
+    --grid-gap: 1rem;
+    --grid-col-size-calc: calc((100% - var(--grid-gap) * var(--grid-max-col-count)) / var(--grid-max-col-count));
+    --grid-col-min-size-calc: min(100%, max(var(--grid-min-col-size), var(--grid-col-size-calc)));
+
+    display: grid;
+    gap: var(--grid-gap);
+    grid-template-columns: repeat(auto-fill, minmax(var(--grid-col-min-size-calc), 1fr));
+
+    &.--cols-2 {
+      --grid-max-col-count: 2;
+    }
+    &.--cols-3 {
+      --grid-max-col-count: 3;
+    }
+    &.--cols-4 {
+      --grid-max-col-count: 4;
+    }
+    &.--cols-5 {
+      --grid-max-col-count: 5;
+    }
+    &.--cols-6 {
+      --grid-max-col-count: 6;
+    }
+    &.--cols-8 {
+      --grid-max-col-count: 8;
+    }
+    &.--cols-10 {
+      --grid-max-col-count: 10;
+    }
+    &.--cols-12 {
+      --grid-max-col-count: 12;
+    }
+  }
+
+  .u-grid-responsive {
+    --grid-max-col-count: 2;
+    --grid-min-col-size: 150px;
+    --grid-gap: 0.5rem;
+    --grid-col-size-calc: calc((100% - var(--grid-gap) * var(--grid-max-col-count)) / var(--grid-max-col-count));
+    --grid-col-min-size-calc: min(100%, max(var(--grid-min-col-size), var(--grid-col-size-calc)));
+
+    display: grid;
+    gap: var(--grid-gap);
+    grid-template-columns: repeat(auto-fill, minmax(var(--grid-col-min-size-calc), 1fr));
+
+    &.--col-2 {
+      --grid-max-col-count: 2;
+    }
+    &.--col-3 {
+      --grid-max-col-count: 3;
+    }
+    &.--col-4 {
+      --grid-max-col-count: 4;
+    }
+    &.--col-5 {
+      --grid-max-col-count: 5;
+    }
+    &.--col-6 {
+      --grid-max-col-count: 6;
+    }
+    &.--col-12 {
+      --grid-max-col-count: 12;
+    }
+
+    &.--max-col-size-200px {
+      --grid-min-col-size: 200px;
+    }
+    &.--max-col-size-400px {
+      --grid-min-col-size: 400px;
+    }
+  }
+
+  .u-text-editable {
+    --border-color: #ccc;
+
+    border: 1px solid var(--border-color);
+    padding-inline: 4px;
+
+    &:focus {
+      --border-color: #0073aa;
+    }
+  }
+
+  .text-sm {
+    font-size: 14px;
+  }
+  .flex {
+    display: flex;
+  }
+  .column {
+    flex-direction: column;
+  }
+  .gap-1 {
+    gap: 4px;
+  }
+  .gap-2 {
+    gap: 8px;
+  }
+  .gap-3 {
+    gap: 16px;
+  }
+  .gap-4 {
+    gap: 24px;
+  }
+  .gap-5 {
+    gap: 32px;
+  }
+  .gap-6 {
+    gap: 40px;
+  }
+  .gap-7 {
+    gap: 48px;
+  }
+  .gap-8 {
+    gap: 64px;
+  }
+  .p-1 {
+    padding: 4px;
+  }
+  .p-2 {
+    padding: 8px;
+  }
+  .p-3 {
+    padding: 16px;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .items-end {
+    align-items: end;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-end {
+    justify-content: end;
+  }
+  .mt-4 {
+    margin-top: 16px;
+  }
+  .mb-4 {
+    margin-bottom: 16px;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+}

package/src/hooks/useGroupBlock.ts

@@ -0,0 +1,53 @@
+import {useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import clsx, {type ClassValue} from 'clsx'
+import type {ComponentType, CSSProperties} from 'react'
+
+type BlockTemplate = [string, Record<string, unknown>][]
+type StyleWithVars = CSSProperties & {[key: `--${string}`]: string | number}
+
+export interface GroupBlockConfig {
+  blockClassName: ClassValue | ClassValue[]
+  containerClassName: ClassValue | ClassValue[]
+  containerStyle?: StyleWithVars
+  allowedBlocks?: string[]
+  template?: BlockTemplate
+  templateLock?: 'all' | 'insert' | false
+  orientation?: 'horizontal' | 'vertical'
+  layout?: {type: string; columnCount?: number; minimumColumnWidth?: string}
+  renderAppender?: ComponentType
+}
+
+type GroupBlockProps = Record<string, unknown>
+
+interface GroupBlockResult {
+  blockProps: GroupBlockProps
+  innerBlocksProps: GroupBlockProps
+}
+
+export function useGroupBlock({
+  blockClassName,
+  containerClassName,
+  containerStyle,
+  allowedBlocks,
+  template,
+  templateLock,
+  orientation,
+  layout,
+  renderAppender,
+}: GroupBlockConfig): GroupBlockResult {
+  const blockProps = useBlockProps({className: clsx(blockClassName)})
+
+  const innerBlocksProps = useInnerBlocksProps(
+    {
+      className: clsx(containerClassName),
+      ...(containerStyle && {style: containerStyle}),
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    {allowedBlocks, template, templateLock, orientation, layout, renderAppender} as any,
+  )
+
+  return {
+    blockProps: blockProps as unknown as GroupBlockProps,
+    innerBlocksProps: innerBlocksProps as unknown as GroupBlockProps,
+  }
+}

package/src/index.ts

@@ -0,0 +1,122 @@
+export type {
+  ContactColumns,
+  ContactGroupAttributes,
+  ContactGroupOptions,
+} from './blocks/contact/contact-group'
+export {
+  CONTACT_COLUMNS,
+  CONTACT_COLUMNS_CONTEXT,
+  contactGroupDefaults,
+  createContactGroupBlock,
+} from './blocks/contact/contact-group'
+export type {
+  ContactIconSize,
+  ContactIconSizeVariant,
+  ContactItemAttributes,
+  ContactItemOptions,
+} from './blocks/contact/contact-item'
+export {
+  CONTACT_ICON_SIZE_RANGE,
+  CONTACT_ICON_SIZES,
+  CONTACT_ICON_TYPES,
+  contactItemDefaults,
+  createContactItemBlock,
+} from './blocks/contact/contact-item'
+export type {FaqItemAttributes, FaqItemOptions} from './blocks/faq/faq-item'
+export {createFaqItemBlock, faqItemDefaults} from './blocks/faq/faq-item'
+export type {FaqGroupAttributes, FaqGroupOptions} from './blocks/faq/faq-group'
+export {createFaqGroupBlock, faqGroupDefaults} from './blocks/faq/faq-group'
+export type {BasicButtonAttributes, BasicButtonOptions} from './blocks/core/basic-button'
+export {basicButtonDefaults, createBasicButtonBlock} from './blocks/core/basic-button'
+export type {BasicHeadingAttributes, BasicHeadingOptions} from './blocks/core/basic-heading'
+export {basicHeadingDefaults, createBasicHeadingBlock} from './blocks/core/basic-heading'
+export type {BasicOverlineAttributes, BasicOverlineOptions} from './blocks/core/basic-overline'
+export {basicOverlineDefaults, createBasicOverlineBlock} from './blocks/core/basic-overline'
+export type {HeroItemAttributes, HeroItemOptions} from './blocks/hero/hero-item'
+export {createHeroItemBlock, heroItemDefaults} from './blocks/hero/hero-item'
+export type {HeroGroupAttributes, HeroGroupOptions} from './blocks/hero/hero-group'
+export {createHeroGroupBlock, heroGroupDefaults} from './blocks/hero/hero-group'
+export type {MapGroupAttributes, MapGroupOptions} from './blocks/map/map-group'
+export {createMapGroupBlock, mapGroupDefaults} from './blocks/map/map-group'
+export type {BasicHeaderGroupAttributes, BasicHeaderGroupOptions} from './blocks/groups/basic-header-group'
+export {basicHeaderGroupDefaults, createBasicHeaderGroupBlock} from './blocks/groups/basic-header-group'
+export type {ButtonGroupAttributes, ButtonGroupOptions} from './blocks/groups/button-group'
+export {buttonGroupDefaults, createButtonGroupBlock} from './blocks/groups/button-group'
+export type {BannerGroupAttributes, BannerGroupOptions} from './blocks/groups/banner-group'
+export {createBannerGroupBlock, bannerGroupDefaults} from './blocks/groups/banner-group'
+export type {TextAndMediaGroupAttributes, TextAndMediaGroupOptions} from './blocks/groups/text-and-media-group'
+export {createTextAndMediaGroupBlock, textAndMediaGroupDefaults} from './blocks/groups/text-and-media-group'
+export type {TextAndFormGroupAttributes, TextAndFormGroupOptions} from './blocks/text-and-form/text-and-form-group'
+export {createTextAndFormGroupBlock, textAndFormGroupDefaults} from './blocks/text-and-form/text-and-form-group'
+export type {TextAndFormTextColumnAttributes, TextAndFormTextColumnOptions} from './blocks/text-and-form/text-and-form-text-column'
+export {createTextAndFormTextColumnBlock, textAndFormTextColumnDefaults} from './blocks/text-and-form/text-and-form-text-column'
+export type {UspGroupAttributes, UspGroupOptions} from './blocks/usp/usp-group'
+export {createUspGroupBlock, uspGroupDefaults} from './blocks/usp/usp-group'
+export type {UspItemAttributes, UspItemOptions} from './blocks/usp/usp-item'
+export {createUspItemBlock, uspItemDefaults} from './blocks/usp/usp-item'
+export type {TestimonialGroupAttributes} from './blocks/testimonial/testimonial-group'
+export {createTestimonialGroupBlock, testimonialGroupDefaults} from './blocks/testimonial/testimonial-group'
+export type {TestimonialItemAttributes} from './blocks/testimonial/testimonial-item'
+export {createTestimonialItemBlock, testimonialItemDefaults} from './blocks/testimonial/testimonial-item'
+export type {CompareGroupAttributes, CompareGroupOptions} from './blocks/compare/compare-group'
+export {createCompareGroupBlock, compareGroupDefaults} from './blocks/compare/compare-group'
+export type {CompareItemAttributes, CompareItemOptions} from './blocks/compare/compare-item'
+export {createCompareItemBlock, compareItemDefaults} from './blocks/compare/compare-item'
+export type {CompareOptionAttributes, CompareOptionOptions} from './blocks/compare/compare-option'
+export {createCompareOptionBlock, compareOptionDefaults} from './blocks/compare/compare-option'
+export type {SignpostGroupAttributes, SignpostGroupOptions} from './blocks/signpost/signpost-group'
+export {createSignpostGroupBlock, signpostGroupDefaults} from './blocks/signpost/signpost-group'
+export type {SignpostItemAttributes, SignpostItemOptions} from './blocks/signpost/signpost-item'
+export {createSignpostItemBlock, signpostItemDefaults} from './blocks/signpost/signpost-item'
+export type {StepItemAttributes, StepItemOptions} from './blocks/step/step-item'
+export {createStepItemBlock, stepItemDefaults} from './blocks/step/step-item'
+export type {StepGroupAttributes, StepGroupOptions} from './blocks/step/step-group'
+export {createStepGroupBlock, stepGroupDefaults} from './blocks/step/step-group'
+export type {NewsletterFormAttributes, NewsletterFormOptions} from './blocks/newsletter/newsletter-form'
+export {createNewsletterFormBlock, newsletterFormDefaults} from './blocks/newsletter/newsletter-form'
+export type {ColumnGroupAttributes, ColumnGroupOptions} from './blocks/column/column-group'
+export {createColumnGroupBlock, columnGroupDefaults} from './blocks/column/column-group'
+export type {ColumnItemAttributes, ColumnItemOptions} from './blocks/column/column-item'
+export {createColumnItemBlock, columnItemDefaults} from './blocks/column/column-item'
+export type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './blocks/sections/base-section'
+export {
+  BACKGROUNDS,
+  baseAttributes,
+  baseSectionDefaults,
+  createBaseSectionBlock,
+  createBaseSectionEdit,
+  SPACING_POSITIONS,
+  SPACING_SIZES,
+} from './blocks/sections/base-section'
+export type {IconType} from './components/IconControl'
+export {IconControl} from './components/IconControl'
+export type {ImageLabels, ImageValue} from './components/ImagePicker'
+export {ImagePickerBody, ImagePickerControl, useMediaUrl} from './components/ImagePicker'
+export type {GroupBlockConfig} from './hooks/useGroupBlock'
+export {useGroupBlock} from './hooks/useGroupBlock'
+export type {TypedEditComponent} from './utils/createEditAdapter'
+export {HEADING_LEVELS, HEADING_STYLES, HEADING_STYLE_OPTIONS} from './constants'
+export type {HeadingStyleOption} from './constants'
+export {createEditAdapter} from './utils/createEditAdapter'
+export type {
+  ExternalMethod,
+  FormGroupAttributes,
+  FormGroupOptions,
+  InternalSubmitBehavior,
+  ProcessingMode,
+} from './blocks/form/form-group'
+export {
+  createFormGroupBlock,
+  formGroupDefaults,
+  EXTERNAL_METHODS,
+  INTERNAL_SUBMIT_BEHAVIORS,
+  PROCESSING_MODES,
+} from './blocks/form/form-group'
+export type {FormFieldAttributes, FormFieldOptions, FormFieldType} from './blocks/form/form-field'
+export {createFormFieldBlock, formFieldDefaults, FIELD_TYPES, FIELD_COLUMNS_RANGE, FIELD_COLUMNS_DEFAULT} from './blocks/form/form-field'
+export type {ResponsiveGridGroupAttributes, ResponsiveGridGroupOptions} from './blocks/responsive-grid/responsive-grid-group'
+export {createResponsiveGridGroupBlock, responsiveGridGroupDefaults} from './blocks/responsive-grid/responsive-grid-group'
+export type {ResponsiveGridItemAttributes, ResponsiveGridItemOptions} from './blocks/responsive-grid/responsive-grid-item'
+export {createResponsiveGridItemBlock, responsiveGridItemDefaults} from './blocks/responsive-grid/responsive-grid-item'
+export type {PostSliderGroupAttributes, PostSliderGroupOptions} from './blocks/post/post-slider-group'
+export {createPostSliderGroupBlock, postSliderGroupDefaults} from './blocks/post/post-slider-group'

package/src/types.ts

@@ -0,0 +1,33 @@
+import {BlockTypeIconDescriptor} from '@wordpress/blocks'
+export interface SelectOption {
+  value: string
+  label: string
+}
+
+export interface Media {
+  id: number
+  alt: string
+}
+
+export interface Icon {
+  type: string
+  src: string
+  media: Media
+}
+
+export type OptionArray = ReadonlyArray<{value: string; label: string}>
+export type NumberArray = ReadonlyArray<number>
+export type StringArray = ReadonlyArray<string>
+
+export interface BriloBlockType {
+  name: string
+  title?: string
+  description?: string
+  category?: string
+  allowedBlocks?: string[]
+  template?: [string, Record<string, unknown>][]
+  blockClassName?: string
+  containerClassName?: string
+  icon?: BlockTypeIconDescriptor
+  parent?: string[]
+}

package/src/utils/createEditAdapter.ts

@@ -0,0 +1,11 @@
+import type {BlockEditProps, BlockType} from '@wordpress/blocks'
+
+export type TypedEditComponent<Attributes extends Record<string, unknown>> = (props: BlockEditProps<Attributes>) => JSX.Element
+
+export function createEditAdapter<Attributes extends Record<string, unknown>>(
+  EditComponent: TypedEditComponent<Attributes>,
+): NonNullable<Partial<BlockType>['edit']> {
+  return function EditAdapter(props) {
+    return EditComponent(props as BlockEditProps<Attributes>)
+  }
+}