@brilo/base-blocks 0.1.6 → 0.1.8

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

@@ -1,28 +1,66 @@
-import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
-import {PanelBody, BaseControl, TextControl, SelectControl, TextareaControl} from '@wordpress/components'
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody, BaseControl, TextControl, SelectControl, TextareaControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption
+} 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'
+import {useGroupBlock} from "~/hooks/useGroupBlock";
+import clsx from "clsx";
+import type {HeadingLevels, HeadingStyles} from "~/blocks/groups/banner-group/types";
+import {HEADING_LEVELS, HEADING_STYLES} from "~/constants";
 
 export function createMapGroupEdit(options: MapGroupOptions) {
   return function Edit({
-    attributes,
-    setAttributes,
-  }: {
+                         attributes,
+                         setAttributes,
+                       }: {
     attributes: MapGroupAttributes
     setAttributes: (a: Partial<MapGroupAttributes>) => void
   }) {
-    const {mapType, iframeSrc, iframeElement, img, url, lat, long} = attributes
+    const {mapType, iframeSrc, iframeElement, img, url, address, lat, long, description, header} = attributes
 
-    const blockProps = useBlockProps({
-      className: options.blockClassName ?? 'g-map wp-block-section',
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-map wp-block-section'),
+      containerClassName: [options.containerClassName ?? 'g-map__button-wraper wp-block-inner-content'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'vertical',
+      template: options.template,
+      layout: {type: 'default'},
     })
 
     return (
       <>
         <InspectorControls>
+          <PanelBody title={__('Nadpis', 'brilo-blocks')} initialOpen={false}>
+            <ToggleGroupControl
+              label={__('Úroveň nadpisu', 'brilo-blocks')}
+              value={String(header.heading.level)}
+              onChange={(value) =>
+                setAttributes({header: {...header, heading: {...header.heading, level: Number(value) as HeadingLevels}}})
+              }
+              isBlock
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Styl nadpisu', 'brilo-blocks')}
+              value={header.heading.style}
+              onChange={(value) => setAttributes({header: {...header, heading: {...header.heading, style: value as HeadingStyles}}})}
+              isBlock
+            >
+              {HEADING_STYLES.map((s) => (
+                <ToggleGroupControlOption key={s} value={s} label={s} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          
           <PanelBody title={__('Nastavení mapy', 'brilo-blocks')}>
             <SelectControl
               label={__('Typ mapy', 'brilo-blocks')}
@@ -74,12 +112,40 @@ export function createMapGroupEdit(options: MapGroupOptions) {
                   value={url || ''}
                   onChange={(value: string) => setAttributes({url: value})}
                 />
+
+                <TextControl
+                  label={__('Adresa:', 'brilo-blocks')}
+                  value={address || ''}
+                  onChange={(value: string) => setAttributes({address: value})}
+                />
               </>
             )}
           </PanelBody>
         </InspectorControls>
 
         <div {...blockProps}>
+          <div className="g-map__banner">
+            <div className="g-map__content">
+              <RichText
+                tagName={`h${header.heading.level}` as HeadingStyles}
+                className={clsx('g-map__heading', `--heading-style-${header.heading.style}`, 'u-text-editable')}
+                value={header.heading.title}
+                onChange={(value: string) => setAttributes({header: {...header, heading: {...header.heading, title: value}}})}
+                placeholder={__('Nadpis...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic']}
+              />
+              <RichText
+                tagName="div"
+                className="g-map__description u-text-editable"
+                value={description}
+                onChange={(value: string) => setAttributes({description: value})}
+                placeholder={__('Popis...', 'brilo-blocks')}
+              />
+            </div>
+
+            <div {...innerBlocksProps} />
+          </div>
+
           <div className="g-map__map">
             {mapType === 'gps' && (lat || long) && (
               <div>

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

@@ -1,4 +1,11 @@
 @layer base {
+  .g-map__banner {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
   .g-map__map {
     min-height: 200px;
     padding: 16px;

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

@@ -3,10 +3,18 @@ import {__} from '@wordpress/i18n'
 import {createMapGroupEdit} from './edit'
 import type {MapGroupAttributes, MapGroupOptions} from './types'
 import {MAP_TYPES} from './constants'
+import type {StringArray} from "~/types";
+import {DEFAULT_HEADING_STYLES, DEFAULT_VARIANTS} from "~/blocks/groups/banner-group/constants";
+import {InnerBlocks} from "@wordpress/block-editor";
+import {HEADING_LEVELS} from "~/constants";
 
 export type {MapGroupAttributes, MapGroupOptions}
 
-export function createMapGroupBlock(options: MapGroupOptions): BlockConfiguration<MapGroupAttributes> {
+export function createMapGroupBlock<THeadingStyles extends StringArray = typeof DEFAULT_HEADING_STYLES>(
+  options: MapGroupOptions<THeadingStyles>
+): BlockConfiguration<MapGroupAttributes<THeadingStyles[number]>> {
+  const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
+
   return {
     name: options.name,
     title: options.title ?? __('Mapa', 'brilo-blocks'),
@@ -16,6 +24,16 @@ export function createMapGroupBlock(options: MapGroupOptions): BlockConfiguratio
     icon: options.icon ?? 'location-alt',
     supports: {html: false, customClassName: false},
     attributes: {
+      header: {
+        type: 'object',
+        default: {
+          heading: {title: '', level: HEADING_LEVELS[1], style: headingStyles[1] ?? headingStyles[0]},
+        },
+      },
+      description: {
+        type: 'string',
+        default: '',
+      },
       mapType: {
         type: 'string',
         default: MAP_TYPES[0].value,
@@ -32,6 +50,10 @@ export function createMapGroupBlock(options: MapGroupOptions): BlockConfiguratio
         type: 'object',
         default: {id: 0, url: '', alt: ''},
       },
+      address: {
+        type: 'string',
+        default: '',
+      },
       url: {
         type: 'string',
         default: '',
@@ -45,7 +67,7 @@ export function createMapGroupBlock(options: MapGroupOptions): BlockConfiguratio
         default: '',
       },
     },
-    edit: createMapGroupEdit(options),
-    save: () => null,
-  } as unknown as BlockConfiguration<MapGroupAttributes>
+    edit: createMapGroupEdit(options as unknown as MapGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<MapGroupAttributes<THeadingStyles[number]>>
 }

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

@@ -6,4 +6,5 @@ import type {MapGroupOptions} from './types'
 export const mapGroupDefaults: MapGroupOptions = {
   name: 'brilo/map-group',
   parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/button-group', 'brilo/basic-button']
 }

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

@@ -1,16 +1,30 @@
-import {BriloBlockType, Media} from '~/types'
-import {MAP_TYPES} from './constants'
+import {BriloBlockType, Media, type OptionArray, type StringArray} from '~/types'
+import {DEFAULT_HEADING_STYLES, MAP_TYPES} from './constants'
+import {HEADING_LEVELS} from "~/constants";
 
 export type MapType = (typeof MAP_TYPES)[number]['value']
 
-export interface MapGroupAttributes extends Record<string, unknown> {
+export type HeadingLevels = (typeof HEADING_LEVELS)[number]
+export type HeadingStyles = (typeof DEFAULT_HEADING_STYLES)[number]
+
+export interface MapGroupAttributes<THeadingStyle extends string = HeadingStyles> extends Record<string, unknown> {
+  header: {
+    heading: {title: string; level: HeadingLevels; style: THeadingStyle}
+  }
+  description: string
   mapType: MapType
   iframeSrc: string
   iframeElement: string
   img: Media
+  address: string
   url: string
   lat: string
   long: string
 }
 
-export interface MapGroupOptions extends BriloBlockType {}
+export interface MapGroupOptions<
+  THeadingStyles extends StringArray = typeof DEFAULT_HEADING_STYLES,
+> extends BriloBlockType {
+  headingStyles?: THeadingStyles
+  headingLevels?: HeadingLevels
+}

package/src/blocks/responsive-grid/responsive-grid-item/editor.scss

@@ -0,0 +1,9 @@
+.wp-block-brilo-responsive-grid-item {
+  width: 100%;
+  margin-block: 0;
+}
+
+.u-grid-responsive__item-inner {
+  padding: 8px;
+  outline: 1px solid var(--border-color);
+}

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

@@ -12,6 +12,10 @@ export const baseAttributes = {
   },
   background: {
     type: 'string',
-    default: 'none',
+    default: '',
+  },
+  textColor: {
+    type: 'string',
+    default: '',
   },
 } as const

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

@@ -8,11 +8,3 @@ export const SPACING_POSITIONS = [
 ] as const
 
 export const SPACING_SIZES = ['default', 'sm', 'xs'] as const
-
-export const BACKGROUNDS = [
-  {value: 'none', label: __('Žádné', 'brilo-blocks')},
-  {value: 'primary', label: __('Primární', 'brilo-blocks')},
-  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
-  {value: 'conversion', label: __('Konverzní', 'brilo-blocks')},
-  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
-] as const

package/src/blocks/sections/base-section/controls.tsx

@@ -1,3 +1,4 @@
+import {ColorPalette, ContrastChecker} from '@wordpress/block-editor'
 import {
   PanelBody,
   SelectControl,
@@ -6,8 +7,9 @@ import {
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import type {BaseBlockAttributes, ExcludableBaseAttr} from './types'
-import {BACKGROUNDS, SPACING_POSITIONS, SPACING_SIZES} from './constants'
+import {SPACING_POSITIONS, SPACING_SIZES} from './constants'
 
 type SpacingPosition = BaseBlockAttributes['spacing']['position']
 type SpacingSize = BaseBlockAttributes['spacing']['size']
@@ -19,7 +21,8 @@ interface BaseControlsProps {
 }
 
 export function BaseControls({attributes, setAttributes, exclude}: BaseControlsProps) {
-  const {id, spacing, background} = attributes
+  const {id, spacing, background, textColor} = attributes
+  const {paletteColors, resolveHex} = useTenantColorPalette()
 
   return (
     <>
@@ -45,13 +48,20 @@ export function BaseControls({attributes, setAttributes, exclude}: BaseControlsP
       )}
 
       {!exclude.includes('background') && (
-        <PanelBody title={__('Pozadí', 'brilo-blocks')}>
-          <SelectControl<string>
-            label={__('Pozadí', 'brilo-blocks')}
-            value={background}
-            options={[...BACKGROUNDS]}
-            onChange={(value) => setAttributes({background: value})}
+        <PanelBody title={__('Barvy', 'brilo-blocks')}>
+          <p>{__('Pozadí', 'brilo-blocks')}</p>
+          <ColorPalette
+            colors={paletteColors}
+            value={background || undefined}
+            onChange={(value) => setAttributes({background: value ?? ''})}
+          />
+          <p>{__('Barva textu', 'brilo-blocks')}</p>
+          <ColorPalette
+            colors={paletteColors}
+            value={textColor || undefined}
+            onChange={(value) => setAttributes({textColor: value ?? ''})}
           />
+          {!!background && !!textColor && <ContrastChecker backgroundColor={resolveHex(background)} textColor={resolveHex(textColor)} />}
         </PanelBody>
       )}
 

package/src/blocks/sections/base-section/edit.tsx

@@ -8,7 +8,14 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
 
   return function Edit(props: BlockEditProps<BaseBlockAttributes & TExtra>) {
     const {attributes, setAttributes} = props
-    const blockProps = useBlockProps({className: options.blockClassName})
+    const {background, textColor} = attributes as BaseBlockAttributes
+    const blockProps = useBlockProps({
+      className: options.blockClassName,
+      style: {
+        ...(background ? {backgroundColor: background, padding: '16px'} : {}),
+        ...(textColor ? {color: textColor} : {}),
+      },
+    })
     const innerBlocksProps = useInnerBlocksProps({className: options.containerClassName}, {
       allowedBlocks: options.allowedBlocks,
       orientation: 'vertical',

package/src/blocks/sections/base-section/factory.tsx

@@ -2,7 +2,6 @@ import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import {baseAttributes} from './attributes'
-import {BACKGROUNDS} from './constants'
 import {createBaseSectionEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './types'
@@ -16,12 +15,9 @@ export function createBaseSectionBlock<TExtra extends Record<string, unknown> =
 
   const attributes: Record<string, unknown> = {}
   for (const [key, value] of Object.entries(baseAttributes)) {
-    if (!exclude.includes(key as keyof typeof baseAttributes)) {
-      if (key === 'background') {
-        attributes[key] = {...value, enum: BACKGROUNDS.map((b) => b.value)}
-      } else {
-        attributes[key] = value
-      }
+    const excludeKey: ExcludableBaseAttr = key === 'textColor' ? 'background' : (key as ExcludableBaseAttr)
+    if (!exclude.includes(excludeKey)) {
+      attributes[key] = value
     }
   }
 

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

@@ -1,6 +1,6 @@
 export type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './types'
 export {baseAttributes} from './attributes'
-export {BACKGROUNDS, SPACING_POSITIONS, SPACING_SIZES} from './constants'
+export {SPACING_POSITIONS, SPACING_SIZES} from './constants'
 export {createBaseSectionEdit} from './edit'
 export {createBaseSectionBlock} from './factory'
 

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

@@ -9,6 +9,7 @@ export interface BaseBlockAttributes extends Record<string, unknown> {
     size: string
   }
   background: string
+  textColor: string
 }
 
 export type ExcludableBaseAttr = 'spacing' | 'background' | 'id'

package/src/editor.scss

@@ -1,5 +1,6 @@
 @forward "./globals";
 @forward "./blocks/column/column-group/editor";
+@forward "./blocks/link/link-item/editor";
 @forward "./blocks/column/column-item/editor";
 @forward "./blocks/compare/compare-item/editor";
 @forward "./blocks/compare/compare-option/editor";
@@ -29,6 +30,7 @@
 @forward "./blocks/text-and-form/text-and-form-text-column/editor";
 @forward "./blocks/usp/usp-group/editor";
 @forward "./blocks/usp/usp-item/editor";
+@forward "./blocks/responsive-grid/responsive-grid-item/editor";
 @forward "./components/IconControl/editor";
 @forward "./components/ImagePicker/editor";
 @forward "./components/ItemIconControl/editor";

package/src/hooks/useTenantColorPalette.ts

@@ -0,0 +1,21 @@
+import {useSettings} from '@wordpress/block-editor'
+import {useMemo} from '@wordpress/element'
+
+interface PaletteColor {
+  name: string
+  slug: string
+  color: string
+}
+
+export function useTenantColorPalette() {
+  const [rawColors] = useSettings('color.palette')
+  const colors = (rawColors ?? []) as PaletteColor[]
+
+  return useMemo(() => {
+    const paletteColors = colors.map((c) => ({...c, color: `var(--${c.slug})`}))
+    const hexByValue = new Map(colors.map((c) => [`var(--${c.slug})`, c.color]))
+    const resolveHex = (value: string) => hexByValue.get(value) ?? value
+
+    return {paletteColors, resolveHex}
+  }, [colors])
+}

package/src/index.ts

@@ -44,6 +44,8 @@ export type {ButtonGroupAttributes, ButtonGroupOptions} from './blocks/groups/bu
 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 {ContentGroupAttributes, ContentGroupOptions, ContentGroupSize} from './blocks/groups/content-group'
+export {createContentGroupBlock, contentGroupDefaults} from './blocks/groups/content-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'
@@ -80,7 +82,6 @@ export type {ColumnItemAttributes, ColumnItemOptions} from './blocks/column/colu
 export {createColumnItemBlock, columnItemDefaults} from './blocks/column/column-item'
 export type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './blocks/sections/base-section'
 export {
-  BACKGROUNDS,
   baseAttributes,
   baseSectionDefaults,
   createBaseSectionBlock,
@@ -120,3 +121,5 @@ export type {ResponsiveGridItemAttributes, ResponsiveGridItemOptions} from './bl
 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'
+export type {LinkItemAttributes, LinkItemIcon, LinkItemOptions} from './blocks/link/link-item'
+export {createLinkItemBlock, linkItemDefaults} from './blocks/link/link-item'